Jqueryeasy ui 的用户列表 datagrid 控件
用户列表datagrid（重点 动态实现）
Datagrid：数据列表 自带分页
区域(title tabs content )
系统dome
$(function(){
$('#test').datagrid({
title:'My Title',
iconCls:'icon-save',
width:600,
height:350,
nowrap:false,//单元格的内容不换行（加载性能高），如果为true 则表示不换行，如果为false 则换行
striped:true,//是否隔行显示条纹效果
collapsible:true,//是否可以折叠
url:'datagrid_data.json',//加载的数据json 格式
sortName:'code',//排序的名称
sortOrder:'desc',//排序的方式
remoteSort:false,//是否远程排序（远程排序则是全数据库数据排序，不远程排序为当前表格数据排序默认用远程）
idField:'code',//数据结果集的主键（唯一约束），如果错误会影响获取选中行的执行
frozenColumns:[[//冻结列就是移动表格始终固定不动
{field:'ck',checkbox:true},
{title:'code',field:'code',width:80,sortable:true}
]],
columns:[[//普通列
{title:'Base Information',colspan:3},
{field:'opt',title:'Operation',width:100,align:'center',rowspan:2,
formatter:function(value,rec){
return '<spanstyle="color:red">Edit Delete</span>';
}
}
],[
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:120,rowspan:2,sortable:true,
sorter:function(a,b){
return (a>b?1:-1);
}
},
{field:'col4',title:'Col41',width:150,rowspan:2}
]],
pagination:true,//是否显示分页
rownumbers:true,//是否显示行号
toolbar:[{//工具栏
id:'btnadd',
text:'Add',
iconCls:'icon-add',
handler:function(){
$('#btnsave').linkbutton('enable');
alert('add')
}
},{
id:'btncut',
text:'Cut',
iconCls:'icon-cut',
handler:function(){
$('#btnsave').linkbutton('enable');
alert('cut')
}
},'-',{
id:'btnsave',
text:'Save',
disabled:true,
iconCls:'icon-save',
handler:function(){
$('#btnsave').linkbutton('disable');
alert('save')
}
}]
});
var p = $('#test').datagrid('getPager');
if (p){
$(p).pagination({
onBeforeRefresh:function(){
alert('before refresh');
}
});
}
});
Datagrid数据格式
total数据列表的总数（不是当前列表的数量）
Rows 每一行的数据 数组中是json
{
"total":239,
"rows":[
{"code":"001","name":"Name1","addr":"Address 11","col4":"col4data"},
{"code":"002","name":"Name2","addr":"Address 13","col4":"col4data"},
{"code":"003","name":"Name3","addr":"Address 87","col4":"col4data"},
{"code":"004","name":"Name4","addr":"Address 63","col4":"col4 data"},
{"code":"005","name":"Name5","addr":"Address 45","col4":"col4data"},
]
}
在系统中的应用
抽取了工具栏toolbar和列columns （formatter重新定义单元格内容）
<script type="text/javascript">
//datagrid 列的定义
var columns_v = [ [ {
field : 'userid',//对应json中的key
title : '账号',
width : 120
}, {
field : 'username',//对应json中的key
title : '名称',
width : 120
}, {
field : 'groupid',//对应json中的key
title : '用户类型',
width : 120,
formatter : function(value, row, index) {//通过此方法格式化显示内容,value表示从json中取出该单元格的值，row表示这一行的数据，是一个对象,index:行的序号
if(value =='1'){
return "卫生局";
}else if(value =='2'){
return "卫生院";
}else if(value =='3'){
return "卫生室";
}else if(value =='4'){
return "供货商";
}else if(value =='0'){
return "系统管理员";
}
}
}, {
field : 'sysmc',//对应json中的key
title : '所属单位',
width : 120
}, {
field : 'userstate',//对应json中的key
title : '状态',
width : 120,
formatter : function(value, row, index) {//通过此方法格式化显示内容,value表示从json中取出该单元格的值，row表示这一行的数据，是一个对象,index:行的序号
if(value =='1'){
return "正常";
}else if(value =='0')
{return "暂停"; }
}
} ] ];
//datagrid 的工具栏
var toolbar_v = [ {
//工具栏
id : 'btnadd',
text : '添加',
iconCls: 'icon-add',
handler : function() {
//打开一个窗口添加用户界面
//参数窗口的title 宽高 url地址
createmodalwindow("添加用户信息",800,250,"${baseurl}user/addsysuser.action");
}
} ];
//加载datagrid
$(function() {
$("#sysuserlist").datagrid({
title : '用户查询',//数据列表标题
nowrap : true,//单元格中的数据不换行，如果为true表示不换行，不换行情况下数据加载性能高，如果为false就是换行，换行数据加载性能不高
striped : true,//条纹显示效果
url : '${baseurl}user/queryuser_result.action',//加载数据的连接，引连接请求过来是json数据
idField : 'id',//此字段很重要，数据结果集的唯一约束(重要)，如果写错影响获取当前选中行的方法执行
loadMsg : '',
columns : columns_v,
pagination : true,//是否显示分页
rownumbers : true,//是否显示行号
pageList : [ 15, 30, 50],
toolbar : toolbar_v
});
});
引用：
<table id="sysuserlist"></table>