页面
<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;
};