在dhtmlxGrid中存储用户自定义的数据

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

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

dhtmlxGrid中存储用户数据

setUserData(row_id, name, value)

设置用户数据到行。属性如下:

row_id - 行ID。如果该值为空,则将数据设置到表格上面,即数据在表格中是全局的。

name - 用户数据对象隐射的名称,用户可以根据该名字来获取该数据对象。

value - 用户数据对象

实例:使用该方法将数据设置到数据行或者数据表格中。

  var data = {
      "name" : "张三",
      "sex" : "男"
  };
  // 设置用户数据到行
  mygrid.setUserData("unique_rowid", "userdata", data); 
  
  // 设置用户数据到表(即全局数据)
  mygrid.setUserData("", "userdata", data);

getUserData(row_id, name)

与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 + "&nbsp;" + data.name + "&nbsp;" + 
    				data.sex + "&nbsp;" + data.age + "<br/>" );
    	});
    	$("#dataInfo").html( htmls.join("") );
    });
});
</script>
</body>
</html>
我们一定不要当三等公民:等下班、等薪水、等退休。
0 不喜欢
说说我的看法 -
全部评论(
没有评论
关于
本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,请来信告知:hxstrive@outlook.com
公众号