在使用dhtmlxGrid动态创建表格的时候,由于表格显示的数据有限,因此需要将有些不想展示的数据临时缓存到表格中。这时你可以使用dhtmlxGrid提供的setUserData方法将数据设置到指定的行上面,然后使用getUserData方法根据行id将数据对象取出来,取出来的对象就是一个普通的json对象,可以直接使用。

设置用户数据到行。属性如下:
row_id - 行ID。如果该值为空,则将数据设置到表格上面,即数据在表格中是全局的。
name - 用户数据对象隐射的名称,用户可以根据该名字来获取该数据对象。
value - 用户数据对象
实例:使用该方法将数据设置到数据行或者数据表格中。
var data = {
"name" : "张三",
"sex" : "男"
};
// 设置用户数据到行
mygrid.setUserData("unique_rowid", "userdata", data);
// 设置用户数据到表(即全局数据)
mygrid.setUserData("", "userdata", data);与setUserData方法相反,该方法用于获取指定列和名称的数据。属性如下:
row_id - 行ID,如果为空,则从表格上面获取数据。
name - 用户数据名称
实例:使用该方法从表格行和表上面获取数据。
// 获取用户行数据
var userdata = grid.getUserData("unique_rowid", "userdata");
// 从表格上面获取数据
var userdata = grid.getUserData("","someName1");完整的实例:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>dhtmlxGrid测试</title>
<link type="text/css" rel="stylesheet" href="../../js/dhtmlxGrid/dhtmlxgrid.css" />
<link type="text/css" rel="stylesheet" href="../../js/dhtmlxGrid/skins/dhtmlxgrid_dhx_skyblue.css" />
<script type="text/javascript" src="../../js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="../../js/dhtmlxGrid/dhtmlxcommon.js"></script>
<script type="text/javascript" src="../../js/dhtmlxGrid/dhtmlxgrid.js"></script>
<script type="text/javascript" src="../../js/dhtmlxGrid/dhtmlxgridcell.js"></script>
</head>
<body>
<div id="gridbox" style="width:400px;height:150px"></div><br/>
<button id="data">获取数据</button>
<div>
<h4>表格数据:</h4>
<div id="dataInfo"></div>
</div>
<script type="text/javascript">
$(function(){
var datas = [
{id : "100", name : "明明", sex : "男", age : "27"},
{id : "101", name : "无望", sex : "女", age : "21"},
{id : "102", name : "武无", sex : "男", age : "30"},
{id : "103", name : "李圣天", sex : "男", age : "23"}
];
var mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../js/dhtmlxGrid/imgs/");
mygrid.setHeader("编号,姓名,性别");
mygrid.setInitWidths("100,100,*");
mygrid.setColAlign("left,left,left");
mygrid.setColTypes("ro,ro,ro");
mygrid.init();
mygrid.setSkin("dhx_skyblue");
// 设置数据
for (var i = 0, len = datas.length; i < len; i ++ ) {
var data = datas[i];
mygrid.addRow(i, [data.id, data.name, data.sex]);
// 添加数据到表行中
mygrid.setUserData(i, "data", data);
}
if ( len > 0 ) {
// 如果存在数据,则选择第一行
mygrid.selectRow(0, true, true);
}
$("#data").click(function(){
var htmls = [];
mygrid.forEachRow(function(rowId){
var data = mygrid.getUserData(rowId, "data");
htmls.push( data.id + " " + data.name + " " +
data.sex + " " + data.age + "<br/>" );
});
$("#dataInfo").html( htmls.join("") );
});
});
</script>
</body>
</html>