获取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>