在使用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>