easyui datagrid 使用心得

 格式化單元格內容

var t_col = [
        {
            field: 'time', 
            title: '日期', 
            width: '12%', 
            align:'center',
            formatter: function (value, row, index) {
                //也可返回html字符串
                return value ? value.split(' ')[0] : value;
            }
        },
        {field: 'unitName', title: '單位', width: '12%', align:'center'},
    ];

 

表格中,表頭與其它單元格對齊方式分別設置

//halign表示表頭對齊方式,如果不設置,則等於align的對齊方式
var t_col = [
        {field: 'unitName', title: '單位', width: '12%', align:'center'},
        {field: 'dicDes', title: '工作內容', width: '26%',halign : "center",align : "left"}
    ];

 

多行表頭

var de_columns = [
        [
            {title:'計劃信息',colspan:3},
            {title:'統計信息',colspan:2},
            {title:'備註說明',rowspan:2,field: 'comment', width: "25%"}
        ],
        [
            {field: 'plan1', title: '計劃1', width: '15%', align:'center'},
            {field: 'plan1', title: '計劃2', width: '15%', align:'center'},
            {field: 'plan1', title: '計劃3', width: '15%', align:'center'},
            {field: 'count1', title: '統計1', width: '15%', align:'center'},
            {field: 'count2', title: '統計2', width: '15%', align:'center'},
        ]
    ];

    var mainTable = $(".detail_dialog>div");
    mainTable.datagrid({
        height: 'auto',
        width:"100%",
        autoRowHeight: true,
        fitColumns: true,
        singleSelect: true,
        data:[],
        columns:de_columns ,
        onLoadSuccess: function (data) {

        }
    });

 

固定部分列,其餘列如果超出容器寬度會顯示滾動條

var frozenColumns = [
        [
            {title:'基本信息',colspan:2}
        ],
        [
            {field: 'main1', title: '基本1', width: '15%', align:'center'},
            {field: 'main2', title: '基本2', width: '15%', align:'center'}
        ]
    ];

    var de_columns = [
        [
            {title:'計劃信息',colspan:3},
            {title:'備註說明',rowspan:2,field: 'comment', width: "25%"}
        ],
        [
            {field: 'plan1', title: '計劃1', width: '25%', align:'center'},
            {field: 'plan1', title: '計劃2', width: '25%', align:'center'},
            {field: 'plan1', title: '計劃3', width: '25%', align:'center'}
        ]
    ];

    var mainTable = $(".detail_dialog>div");
    mainTable.datagrid({
        height: 'auto',
        width:"100%",
        autoRowHeight: true,
        singleSelect: true,
        data:[[],[],[],[]],
        columns:de_columns ,//活動列,如果總寬度超過容器,將出現橫向滾動條
        frozenColumns:frozenColumns ,//固定列
        onLoadSuccess: function (data) {

        }
    });

 

自適應高度的同時設置最大高度,並設置每行高度

var mainTable = $(".detail_dialog>div");
    mainTable.datagrid({
        height: 'auto',//高度自適應
        maxHeight:'325px',//固定最大高度
        width:"100%",
        scrollbarSize :0,
        rownumbers: true,
        autoRowHeight: true,
        fitColumns: true,
        singleSelect: true,
        data:data,
        columns:[t_col],
        onLoadSuccess: function (data) {

        },
        rowStyler: function (index, row) {
            return "height:27px;";//設置每行高度
        }
    });

 

加載提示

var mainTable = $(".detail_dialog>div");
    mainTable.datagrid({
        height: 'auto',
        width:"100%",
        loadMsg : "加載中，請稍等...",//設置加載提示
        scrollbarSize :0,
        rownumbers: true,
        autoRowHeight: true,
        fitColumns: true,
        singleSelect: true,
        data:data,
        columns:[t_col],
        onLoadSuccess: function (data) {
            mainTable.datagrid('loaded');//隱藏加載提示

        },
        onLoadError: function () {
            mainTable.datagrid('loaded');//隱藏加載提示
        }
    });
    mainTable.datagrid('loading');//顯示加載提示

 

新增空行

mainTable.datagrid('appendRow',{});

傳參

var mainTable = $(".detail_dialog>div");
    mainTable.datagrid({
        url:"/app/setting/getDics.do",
        queryParams:{projectId: _projectId},//傳參
        height: 'auto',
        width:"100%",
        autoRowHeight: true,
        fitColumns: true,
        columns:[t_col],
        onLoadSuccess: function (data) {

        }
    });