前几天在做项目的时候,使用easyui的控件datagrid,实现当设置完所长之后页面需要记住选择的人所在的行,方便用户打开页面就能看见自己之前设置的人员有哪些,参考网上资料发现了两种实现方法:
第一种方式:代码如下,实现的主要原理是在初始化datagrid的时候自己实现checkbox,当点击设置为所长的时候,会将该所长的信息放入相应的数据表中,但是缺点是当你设置datagrid为只能单选时,不会起作用,这个办法就不是合理的方法,最后只能放弃。
{field:'cks',formatter:function(value,row,index){
// checked="true"表示checkbox初始化有对勾,即选中状态
var opt = '<input type="checkbox" value='+value+'>';
if(row.ID){//这里判断是不是选
opt = '<input type="checkbox" checked="true" value='+value+'>';
}
return opt ;
}
},
方法二:代码如下,就是当datagrid控件加载成功之后就会调用onLoadSuccess函数,返回的数据全部放在data中,datagrid显示的每一行数据都是放在变量名为rows的变量中的,遍历rows,i为循环变量,e为datagrid的第一行信息,设置所长的人在数据库中有唯一的ID,只要他的ID存在,则表明他是选中行,就将该行设置为选中状态,很好的达到了我要实现的效果。
onLoadSuccess:function(data){
$.each(data.rows,function(i,e){
if(e.ID){
$("#dataGridObject").datagrid('selectRow',i);
}
});
},
效果是:每次打开页面都能看见之前设置为所长的人前面的复选框为选中状态
整体代码如下:
function initDatagrid(id,typevalue,organame){
var url="${base}/system/queryEmployeeList.action";
url=encodeURI(encodeURI(url));
$("#dataGridObject").datagrid({
title:'', //标题
method:'post',
border:false,
singleSelect:true, //多选
fitColumns: true, //自动调整各列,用了这个属性,下面各列的宽度值就只是一个比例。
striped: true, //奇偶行颜色不同
collapsible:true,//可折叠
url:url, //数据来源
queryParams:params, //查询条件
pageSize:20,
pagination:true, //显示分页
rownumbers:true, //显示行号
columns:[[
{field:'ck',checkbox:true},
{field:'NAME',title:'姓名',width:fillsize(0.25),sortable:false,align:'center'},
{field:'JOB_NUMBER',title:'工号',width:fillsize(0.25),sortable:false,align:'center'}
]],
toolbar:toolbar,
onLoadSuccess:function(data){
$.each(data.rows,function(i,e){
if(e.ID){
$("#dataGridObject").datagrid('selectRow',i);
}
});
},
onBeforeLoad: setQueryParams
});