EasyUI datagrid数据表格基本用法实例

页面元素:

<table id="dg" style="width:100%;height:550px" title="作品管理" data-options="
rownumbers:false,
collapsible:true,
multiSort:true,
singleSelect:true,
autoRowHeight:false,
pagination:false,
resizeHandle:'right'"></table>

 

JS代码:

//初始化表格
$("#dg").datagrid({
    remoteSort: false,
    columns:[[   
              {field:'ck',checkbox:'true'},
              {field:'bookId',title:'作品ID',width:100,sortable:'true'},
              {field:'bookName',title:'作品名',width:100},
              {field:'bookIsSign',title:'签约否',width:100,sortable:'true',formatter:function(value,row,index){
                    if(value==0){
                        return '非签约';
                    }else if (value==1) {
                        return '已签约';
                    }else if (value==2) {
                        return '取消签约';
                    }else{
                        return value;
                    }
                }},
              {field:'updateCycle',title:'更新类型',width:100,sortable:'true',formatter:function(value,row,index){
                    if(value==1){
                        return '日更';
                    }else if (value==2) {
                        return '月更';
                    }else{
                        return value;
                    }
                }},
              {field:'bookReviewStatus',title:'状态',width:100,sortable:'true'},
              {field:'userId',title:'所属用户ID',width:100,sortable:'true'},
              {field:'sort',title:'种类',width:100,sortable:'true'},
              {field:'bookTypeNames',title:'分类',width:100,sortable:'true'},
              {field:'bookIntroduction',title:'作品简介',width:100},
              {field:'bookUpdate',title:'更新日期',width:100,sortable:'true',formatter: getFullDate},
              {field:'bookCreateTime',title:'创建时间',width:100,sortable:'true',formatter: getFullDate},
              {field:'bookWordCount',title:'小说字数',width:100,sortable:'true'},
              {field:'bookStatus',title:'小说状态',width:100,sortable:'true'},
              {field:'bookHit',title:'点击率',width:100,sortable:'true'},
              {field:'bookCollect',title:'收藏数',width:100,sortable:'true'},
              {field:'bookCopperCoins',title:'好人币数',width:100,sortable:'true'},
              {field:'bookSilverCoins',title:'白银币数',width:100,sortable:'true'},
              {field:'weekWordCount',title:'小说字数上周统计',width:100,sortable:'true'},
              {field:'weekHit',title:'小说点击上周统计',width:100,sortable:'true'},
              {field:'weekCopperCoins',title:'小说上周好人币数统计',width:100,sortable:'true'},
              {field:'monthWordCount',title:'小说字数上月统计',width:100,sortable:'true'},
              {field:'monthHit',title:'小说点击上月统计',width:100,sortable:'true'},
              {field:'monthCopperCoins',title:'小说上月好人币数统计',width:100,sortable:'true'},
              {field:'everyWeekWordCount',title:'小说字数每周统计',width:100,sortable:'true'},
              {field:'everyWeekHit',title:'小说点击每月统计',width:100,sortable:'true'},
              {field:'everyWeekCopperCoins',title:'小说每周好人币数统计',width:100,sortable:'true'},
              {field:'everyMonthWordCount',title:'小说字数每月统计',width:100,sortable:'true'},
              {field:'everyMonthHit',title:'小说点击每月统计',width:100,sortable:'true'},
              {field:'everyMonthCopperCoins',title:'小说每月好人币数统计',width:100,sortable:'true'},
              {field:'isRecommended',title:'是否是被推荐作品',width:100,sortable:'true',formatter:function(value,row,index){
                    if(value==0){
                        return '非';
                    }else if (value==1) {
                        return '是';
                    }else{
                        return value;
                    }
                }},
              {field:'bookOnIndex',title:'在主页显示的小说',width:100,sortable:'true'}
          ]]   
});

//加载
$(function(){
    loadDetailBookCoreAction(1,100);
});

//加载本页方法
var loadDetailBookCoreAction = function(pageNum, pageSize) {
    var param = {
        pageNum : pageNum,
        pageSize : pageSize
    };
    $.ajax({
        type : "GET",
        beforeSend: function(request) {
            request.setRequestHeader("adm", $("#adm").val());
        },
        url : PathList.adminQueryDetailBookCore,
        data : param,
        success : function(result) {
            //加入模型
            model.result=result;
            /////更新视图层
            /////model.updateBookCoreView();
            //插件-动态取数据
            $("#dg").datagrid("loadData", result.list);
            //激活分页组件E(传入请求url, 更新视图方法名)
            model.fenyedViewE(PathList.adminQueryDetailBookCore);
        }
    });
};

 

半实现.