jqueryEasyUI之DataGrid(数据网格)
页面
<table id="TopGrid" class="easyui-datagrid" ></table>
javaScript代码
$('#TopGrid').datagrid({ singleSelect:true, collapsible:true, pagination:true,//如果为true,则在DataGrid控件底部显示分页工具栏。 fitColumns:true, selectOnCheck:false, rownumbers: true, pageSize:10,//在设置分页属性的时候初始化页面大小。 fit:true, nowrap:false, view: detailview, detailFormatter:user.detailFormatter,//点击加号时显示隐藏的列表属性 onLoadSuccess:user.loadSuccess, onLoadError:user.loadError, url:'/users', method:'get', loadFilter:user.loadDataFilter, toolbar:'#tb', onClickRow: function(rowIndex,rowData){ var dg = $('#TopGrid'); var display = dg.datagrid('getRowDetail',rowIndex).parents('tr').css('display'); if (display == 'none') { dg.datagrid('expandRow',rowIndex); } else{ dg.datagrid('collapseRow',rowIndex); } }, columns:[[ {field:'ck',checkbox:true,}, {field:'username',width:user.widthFormater(0.15),title:'登录名'}, {field:'name',width:user.widthFormater(0.1),title:'姓名'}, {field:'roles',width:user.widthFormater(0.15),title:'角色'}, {field:'modifyuser',width:user.widthFormater(0.1),title:'操作人'}, {field:'modifytime',width:user.widthFormater(0.1),formatter:user.cellTimeFormater,title:'操作时间'}, {field:'status',width:user.widthFormater(0.1),formatter:user.statusFormater,title:'启用状态'}, {field: ' ', width:user.widthFormater(0.3),title:'操作',align:'center',formatter:user.operationFormatter,} ]] });
*两列布局
var columns = [[ {field:'ck',checkbox:true,rowspan:2}, {field:'batchName',title:'考试批次名称',align:'center',rowspan:2,width:that.widthFormater(0.1)}, {field:'subjectName',title:'考试科目',align:'center',rowspan:2,width:that.widthFormater(0.1)}, {field:'publishStatus',title:'发布状态',align:'center',rowspan:2,width:that.widthFormater(0.1),formatter:that.publishStatusFn}, {field:'allCount',title:'报考人数',align:'center',rowspan:2,width:that.widthFormater(0.1)}, {title:'成绩',colspan:2,width:that.widthFormater(0.3)}, {field:' ',title:'操作栏',align:'center',rowspan:2,width:that.widthFormater(0.3),formatter:that.operationFormatter} ],[ {field:'needAuditCount',title:'待审核',width:that.widthFormater(0.15),align:'center'}, {field:'auditedCount',title:'已审核',width:that.widthFormater(0.15),align:'center'} ]];
1.隐藏的列表
user.detailFormatter = function (rowIndex, rowData) { return '<div class="contact-detail"><ul>'+ '<li><span>办公电话:</span>' + rowData.officephone + '</li>'+ '<li><span>联系电话:</span>' + rowData.contactphone + '</li>'+ '<li><span>电子邮箱:</span>' + rowData.email + '</li>'+ '<li><span>QQ:</span>' + rowData.qq + '</li></ul></div>'; };
依赖datagrid-detailview.js
2.数据请求成功以后加载分页组件
user.loadSuccess = function(data) { var p = $('#TopGrid').datagrid('getPager'); if(data.total == 0){ $(p).pagination({ beforePageText: '第',//页数文本框前显示的汉字 afterPageText: '页 共 {pages} 页', displayMsg: '当前显示 '+data.total+' 条记录 共 '+data.total+' 条记录' }); }else{ $(p).pagination({ beforePageText: '第',//页数文本框前显示的汉字 afterPageText: '页 共 {pages} 页', displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录', }); } //改变点击tr时的背景色 $(".datagrid-body tr").click(function (){ $(".datagrid-body tr").css({'background':'#fff'}) $(this).css("background","#e6f3ff"); }); };
3.数据加载失败时
user.loadError = function(data){ var p = $('#TopGrid').datagrid('getPager'); $(p).pagination({ displayMsg: '共 0 条记录' }); };
4.查询方法
user.search = function() { var username = $('#searchUser').val().trim(); var name = $('#searchName').val().trim(); var roleid = $('#searchRole').combobox('getValue'); (roleid == '全部')?roleid = '':roleid; $('#TopGrid').datagrid('load', { username:username, name:name, roleid:roleid }); };
5.一般在刷新当前页的时候调用
user.updateDataGrid = function(){ var time = new Date().getTime(); $("#TopGrid").datagrid("reload",{ timestamp:time }); };
6.td的列宽
user.widthFormater = function(value) { var wrap = $('.easyui-layout').css('width'); wrap = wrap.toString().substring(-1,wrap.length-2); wrap = wrap - 83; var result = value * wrap; return result +'px'; };
7.操作栏
user.operationFormatter = function(value,rowData,rowIndex){ var edit = '', changeStatus = '', resetPassword = '', assignRole = '', del = ''; if (rowData._Auto == 0) { edit = '<a href="javascript:void(0)" onclick="user.updateUser(\''+rowData.id+'\',\''+rowData.username+'\',\''+rowData.name+'\',\''+rowData.officephone+'\',\''+rowData.contactphone+'\',\''+rowData.email+'\',\''+rowData.qq+'\');"><i class="fa fa-pencil"></i>编辑</a> '; resetPassword = '<a href="javascript:void(0)" onclick="user.resetPassword(\''+rowData.id+'\');"><i class="fa fa-cog"></i>重置密码</a> '; if (rowData.status == 1) { changeStatus ='<a href="javascript:void(0)" onclick="user.changeStatus(\''+rowData.id+'\',\''+rowData.status+'\');"><i class="fa fa-bell-slash-o"></i>停用</a> '; } else{ changeStatus ='<a href="javascript:void(0)" onclick="user.changeStatus(\''+rowData.id+'\',\''+rowData.status+'\');"><i class="fa fa-bell-o"></i>启用</a> '; } assignRole = '<a href="javascript:void(0)" onclick="user.assignRole(\''+rowData.id+'\');"><i class="fa fa-key"></i>授权</a> '; del = '<a href="javascript:void(0)" onclick="user.deleteUser(\''+rowData.id+'\');"><i class="fa fa-trash-o"></i>删除</a>'; } else{ resetPassword = '<a href="javascript:void(0)" onclick="user.resetPassword(\''+rowData.id+'\');"><i class="fa fa-cog"></i>重置密码</a> '; assignRole = '<a href="javascript:void(0)" onclick="user.assignRole(\''+rowData.id+'\');"><i class="fa fa-key"></i>授权</a>'; } return edit + changeStatus + resetPassword + assignRole + del; };