使用迭代获取dhtmlxGrid表格中的数据

获取dhtmlxGrid表格中数据的方式存在多种方式,你可以使用dhtmlxGrid提供的forEachRow迭代方法进行处理。也可以通过使用getAllRowIds方法获取表格的所有ID,然后迭代ID,使用ID来获取行对象。

获取dhtmlxGrid表格中数据的方式存在多种方式,你可以使用dhtmlxGrid提供的forEachRow迭代方法进行处理。也可以通过使用getAllRowIds方法获取表格的所有ID,然后迭代ID,使用ID来获取行对象。

forEachRow(custom_code)

迭代数据表的所有行,然后每行都调用一下用户自定义的函数(custom_code参数),将该行的ID传递个该函数。

custom_code - 迭代当前行的ID

实例:使用forEachRow函数迭代数据表

mygrid.forEachRow(function(id){
      // 这里添加自定义代码
});

实例:

var htmls = [];
mygrid.forEachRow(function(rowId){
    var temp = "";
    mygrid.forEachCell(rowId, function(cellObj, ind){
        temp += cellObj.getValue() + "  ";
    });
    htmls.push( temp + "<br/>" );
});
$("#dataInfo").html( htmls.join("") );

forEachCell(rowId, custom_code)

迭代表格每行的所有单元格。参数如下:

rowId - 数据表行的ID

custom_code - 用户自定义的列迭代执行的回调函数

实例:使用该函数迭代指定行的所有单元格

mygrid.forEachCell("row1",function(cellObj, ind){
      //cellObj - 单元格对象
      //ind - 列下标
});

实例:

var ids = mygrid.getAllRowIds("|");
ids = ids.split("|");
var htmls = [];
for (var i = 0, len = ids.length; i < len; i ++ ) {
    var id = ids[i];
    htmls.push( mygrid.cells(id, 0).cell.innerHTML );
    htmls.push("&nbsp;&nbsp;");
    htmls.push( mygrid.cells(id, 1).cell.innerHTML );
    htmls.push("<br/>");
}
$("#dataInfo").html( htmls.join("") );

数据访问

obj.getValue() - 获取当前单元格的值

obj.setValue(value) - 设置单元格新值

obj.getAttribute(name) - 获取单元格的属性值

obj.setAttribute(name,value) - 设置单元格属性

实例:下面是一个完整的实例,其中存在两种方式来迭代表格的数据。

<%@ 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="data01">forEachRow获取数据</button>
<button id="data02">getAllRowIds获取数据</button>
<div>
    <h4>表格数据:</h4>
    <div id="dataInfo"></div>
</div>
<script type="text/javascript">
$(function(){
    var mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("../../js/dhtmlxGrid/imgs/");
    mygrid.setHeader("姓名,性别");
    mygrid.setInitWidths("100,*");
    mygrid.setColAlign("left,left");
    mygrid.setColTypes("ro,ro");
    mygrid.init();
    mygrid.setSkin("dhx_skyblue");
    
    // 设置数据
    mygrid.addRow(100, ["张三", "男"]);
    mygrid.addRow(200, ["李四", "女"]);
    mygrid.addRow(300, ["王五", "男"]);
    mygrid.addRow(400, ["赵六", "女"]);
    mygrid.addRow(500, ["逆袭", "男"]);
    
    $("#data01").click(function(){
    	var htmls = [];
    	mygrid.forEachRow(function(rowId){
    		var temp = "";
    		mygrid.forEachCell(rowId, function(cellObj, ind){
    			temp += cellObj.getValue() + "&nbsp;&nbsp;";
    		});
    		htmls.push( temp + "<br/>" );
    	});
    	$("#dataInfo").html( htmls.join("") );
    });
    
    $("#data02").click(function(){
    	// 默认情况下,getAllRowIds使用“,”进行分割
    	// var ids = mygrid.getAllRowIds();
    	var ids = mygrid.getAllRowIds("|");
    	ids = ids.split("|");
    	var htmls = [];
        for (var i = 0, len = ids.length; i < len; i ++ ) {
        	var id = ids[i];
        	htmls.push( mygrid.cells(id, 0).cell.innerHTML );
        	htmls.push("&nbsp;&nbsp;");
        	htmls.push( mygrid.cells(id, 1).cell.innerHTML );
        	htmls.push("<br/>");
        }
        $("#dataInfo").html( htmls.join("") );
    });
});
</script>

</body>
</html>
我们一定要给自己提出这样的任务:第一,学习,第二是学习,第三还是学习。 —— 列宁
0 不喜欢
说说我的看法 -
全部评论(
没有评论
关于
本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,请来信告知:hxstrive@outlook.com
公众号