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)" οnclick="user.updateUser(\''+rowData.id+'\',\''+rowData.username+'\',\''+rowData.name+'\',\''+rowData.officephone+'\',\''+rowData.contactphone+'\',\''+rowData.email+'\',\''+rowData.qq+'\');"><i class="fa fa-pencil"></i>编辑</a>&emsp;';
        resetPassword = '<a href="javascript:void(0)" οnclick="user.resetPassword(\''+rowData.id+'\');"><i class="fa fa-cog"></i>重置密码</a>&emsp;';
        if (rowData.status == 1) {
            changeStatus ='<a href="javascript:void(0)" οnclick="user.changeStatus(\''+rowData.id+'\',\''+rowData.status+'\');"><i class="fa fa-bell-slash-o"></i>停用</a>&emsp;';
        } else{
            changeStatus ='<a href="javascript:void(0)" οnclick="user.changeStatus(\''+rowData.id+'\',\''+rowData.status+'\');"><i class="fa fa-bell-o"></i>启用</a>&emsp;';
        }
        assignRole = '<a href="javascript:void(0)" οnclick="user.assignRole(\''+rowData.id+'\');"><i class="fa fa-key"></i>授权</a>&emsp;';
        
        del = '<a href="javascript:void(0)" οnclick="user.deleteUser(\''+rowData.id+'\');"><i class="fa fa-trash-o"></i>删除</a>';
    } else{
        resetPassword = '<a href="javascript:void(0)" οnclick="user.resetPassword(\''+rowData.id+'\');"><i class="fa fa-cog"></i>重置密码</a>&emsp;';
        assignRole = '<a href="javascript:void(0)" οnclick="user.assignRole(\''+rowData.id+'\');"><i class="fa fa-key"></i>授权</a>';
    }
    return edit + changeStatus + resetPassword + assignRole + del;
};

 

转载于:https://www.cnblogs.com/andongWeb/p/7595364.html