easyUI之datagrid

本文主要是介绍easyUI之datagrid，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

这篇博文打算总结一下，我在项目中使用前端框架easyUI所遇到的一些用法。
先按照下面的图片说三个小的easyUI datagrid中的用法：
这里写图片描述
1.在easyUI datagrid中每条记录前面显示复选框，并且可以实现单选和全选功能
代码实现如下：

{field:'checked',title:'<input type="checkbox" id="selectAll">',width:'20',formatter:function(value,rec){if(rec.shzt!='未审核'&&rec.shzt!='重审'){}else{return '<input type="checkbox" zj=\''+rec.zj+'\' "checkSelectAll()" name="DataGridCheckbox">';}}},

都知道datagrid中的每条数据是在查询的时候，后台查找出来，前台一条条的动态画上去的，所以你只需要在你的datagrid中columns或者frozenCloumns中定义上述的代码即可title:'<input type="checkbox" id="selectAll">',接着说一下后面的formatter,单元格的formatter函数，是有三个参数的：value,rowData,rowIndex。其中value表示的是filed的值，row.属性名是你从后台查找出来的某个值，rowIndex表示的是你这条数据的行数的索引，从0开始。
重点说一下rowData：
举个例子：比如你在后台有一条如下的SQL：

SELECT T.USERNAME,T.AGE,T.SEX,T.LEVEL FROM USER T

你需要让AGE>30的人的记录前面显示checkbox,那么你就需要写一段这样的函数在datagrid中，替换上面我的formatter函数:

formatter:function(value,row,index){if(row.age > 30){
return '<input type="checkbox" zj=\''+rec.zj+'\' "" name="DataGridCheckbox">';}
}

这样的话，只有年龄在30以上的记录前面才会显示checkbox，当然row.属性，这个属性必须是你在vo中定义的，需要和你的vo中的属性名字保持一致。
接下来说全选和单选的实现，请注意上面name=“DataGridCheckbox”;记得千万不要把大小写写错，要不然会很麻烦的。
接下来你只需要写全选和单选的实现就可以，因为你如果点击第一个checkbox，表示你要选中当前页面的所有checkbox，那么就会触发一个onclick事件，也就是上面的checkSelectAll()事件，该函数的具体实现如下：

function checkSelectAll(){$("input[name='DataGridCheckbox']").each(function(){var allLength=$("input[name='DataGridCheckbox']").length; //所有的checkbox的长度$(this).bind('click',function(){var selectedLength=$("input[name='DataGridCheckbox']:checked").length;//所有的选中的checkbox的长度if(selectedLength==allLength){$('#selectAll').prop("checked",true);//全选按钮}else{$('#selectAll').prop("checked",false);}})})}

此处主要采用了Jquery的用法。
同时，你还需要在初始化的方法里面写上下面这段代码：

//全选和不全选$('#selectAll').bind('click',function(){if(this.checked){    //全选$("input[name='DataGridCheckbox']").each(function(){$(this).prop('checked',true);})}else{    //不全选$("input[name='DataGridCheckbox']").each(function(){$(this).prop('checked',false);})}});

到这里，就写完了easyUI datagrid中单选和全选，及根据条件显示checkbox都结束了，欢迎各位读者提出修正意见。
2.第二个要说的是“审核”超链接操作
背景：在我们的项目中，因为一览查询的数据只是一部分，有的时候用户需要看到详情或者审核一些信息，这个时候只靠一览上面这些数据是不能做决定的，因此需要在datagrid中添加一个操作列，通过点击超链接来进行页面的跳转或者通过双击该条数据来显示一个新的页面，这个在easyUI中都是可以实现的。
（1）增加操作列，点击超链接，显示新界面
在datagrid中是这样定义的：

frozenColumns:[[{field:'no',title:'&nbsp;序号',width:'40',align:'center',formatter:function(value,rec,rowIndex){var pageSize=$('#grid').datagrid('options').pageSize;var pageNumber=$('#grid').datagrid('options').pageNumber;return (pageNumber-1)*pageSize+rowIndex+1;}},{field:'cz',title:'操作',width:40,align:'center',formatter:function(value,rec){var shzt = rec.shzt;var result = '';if(shzt == '未审核'||shzt=='重审'){result = '<a href="#" "toEdit(\''+rec.zj+'\');" id="edit">审核</a>';}else{result = '<a href="#" "toView(\''+rec.zj+'\');" id="view">详情</a>';}return result;}},]],

第一个field是定义了序号这一列，第二个filed定义的就是操作列，属于一个超链接，此处仍然使用的是formatter函数，我用了后台查找出来的审核状态属性，根据这个条件来控制每条记录前面是应该显示审核还是详情，详情和审核各自拥有自己的onclick事件，通过各自的onclick事件来进行不同的页面跳转。

	//审核function toEdit(zj){var url = "<%=request.getContextPath()%>/cs/dcdOrJldSh.action?flag=4&zj="+zj;var params = "dialogWidth:800px;dialogHeight:540px;center:yes;status:no;help:no;scroll:auto";var flag = showModalDialog(url,window,params);if(flag) {$("#grid").datagrid("reload");}  }//详情function toView(zj){var url = "<%=request.getContextPath()%>/cs/dcdOrJldSh.action?flag=2&zj="+zj;var params = "dialogWidth:800px;dialogHeight:540px;center:yes;status:no;help:no;scroll:auto";var flag = showModalDialog(url,window,params);if(flag) {$("#grid").datagrid("reload");}  }

以上便是我的两个事件，都包含一个参数zj，因为你需要传递参数，在datagrid中通过row.属性名就可以得到，前提是你在后台已经查找出来了，并且不为空，否则会报错。每个方法中都有自己的url（定义跳转路径）,params（显示界面的一些参数定义），在后面有showModalDialog(url,window,params)这个方法，来显示跳转界面，