[注意红色代码部分哦]
JS代码:
$(function() {
$('#__MODULE__EditRoleDatagrid').datagrid({
url : '__URL__/getRole',
//fitColumns : true,//使用该属性后不能用冻结列
border : false,//定义边框
rownumbers:true,//显示行号
pagination : true,//定义分页组件
idField : 'id',
pageSize :10,
pageList : [10,15,20,30,40,50],
sortName : 'user_id',
sortOrder : 'asc',
checkOnSelect : true,//选择checkbox则选择行
selectOnCheck : true,//选择行则选择checkbox
nowrap : true,
striped:true,//单元格显示条纹
singleSelect:false,//默认不单选
toolbar:'#toolDiv',
columns : [ [ {
field : 'id',
title : '编号',
width : 0,
checkbox : true
}, {
field : 'name',
title : '角色名称',
width : 0,
sortable : true
}, {
field : 'okflag',
title : '指派状态',
width : 0,
sortable : true,
formatter : function(value, row, index) {
if(value==1){
return '<span title="已指派"><font color=green>已指派</font></span>';
}else{
return '<span title="未指派"><font color=gray>未指派</font></span>';
}
}
}, {
field : 'remark',
title : '角色备注',
width : 0,
sortable : true
} ] ],
onLoadSuccess:function(row){//当表格成功加载时执行
var rowData = row.rows;
$.each(rowData,function(idx,val){//遍历JSON
if(val.okflag==1){
$("#__MODULE__EditRoleDatagrid").datagrid("selectRow", idx);//如果数据行为已选中则选中改行
}
});
}
});
});
HTML代码:
<div>
<form id="__MODULE__EditRoleFrom" method="post">
<input type="hidden" name="id" />
<div id="toolDiv" style="padding:1px">
<span>关键字:</span>
<input id="searchKeyWords" name="searchKeyWords" />
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">查询</a>
</div>
<div data-options="region:'west',border:false">
<table id="__MODULE__EditRoleDatagrid"></table>
</div>
</form>
</div>
该文章为HongPing626在CSDN首发,如需转载,请注明出处。