获取dhtmlxGrid表格中数据的方式存在多种方式,你可以使用dhtmlxGrid提供的forEachRow迭代方法进行处理。也可以通过使用getAllRowIds方法获取表格的所有ID,然后迭代ID,使用ID来获取行对象。
迭代数据表的所有行,然后每行都调用一下用户自定义的函数(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("") );
迭代表格每行的所有单元格。参数如下:
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(" "); 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() + " "; }); 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(" "); htmls.push( mygrid.cells(id, 1).cell.innerHTML ); htmls.push("<br/>"); } $("#dataInfo").html( htmls.join("") ); }); }); </script> </body> </html>