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>&emsp;';
        resetPassword = '<a href="javascript:void(0)" onclick="user.resetPassword(\''+rowData.id+'\');"><i class="fa fa-cog"></i>重置密碼</a>&emsp;';
        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>&emsp;';
        } else{
            changeStatus ='<a href="javascript:void(0)" onclick="user.changeStatus(\''+rowData.id+'\',\''+rowData.status+'\');"><i class="fa fa-bell-o"></i>啟用</a>&emsp;';
        }
        assignRole = '<a href="javascript:void(0)" onclick="user.assignRole(\''+rowData.id+'\');"><i class="fa fa-key"></i>授權</a>&emsp;';
        
        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>&emsp;';
        assignRole = '<a href="javascript:void(0)" onclick="user.assignRole(\''+rowData.id+'\');"><i class="fa fa-key"></i>授權</a>';
    }
    return edit + changeStatus + resetPassword + assignRole + del;
};