【前端開發-EasyUI】DataGrid總結

1.表格加載接口返回的指定對象數據

關鍵點：loadFilter對返回的數據data進行過濾

var dataGridUrl = $CONFIG.base_url+'/api/report/purchase/type/new?officeId='+$('#belong-project').combotree('getValue');

// 定義表格
var conf = {
    options:{
        pagination:true,
        idField:'id',
        rownumbers: false,
        singleSelect:true,
        url:dataGridUrl,
        method:'get',
        loadFilter: function(data){
           if (data){
               return data.result.details;
           }
        },
        rowStyler: function(index,row){
            return {class:'double-row'};
        },
        columns: [[
            {field:'belongOfficeName',title:'項目名稱',width:'10%',align:'center'
            },
            {field:'materialType',title:'材料類別',width:'10%',align:'center'
            },
            {field:'purchaseFee',title:'採購金額（不含稅）',width:'15%',align:'center',
                formatter:function (value, row, index) {
                    return row.tenderFee+row.bidFee+row.supplyFee+row.processFee+row.sporadicFee+row.emergencyFee+row.otherFee;
                }
            },
            {field:'tenderFee',title:'招標採購金額',width:'10%',align:'center'
            },
            {field:'bidFee',title:'詢價採購金額',width:'10%',align:'center'
            },
            {field:'supplyFee',title:'甲供金額',width:'10%',align:'center'
            },
            {field:'processFee',title:'自加工金額',width:'10%',align:'center'
            },
            {field:'sporadicFee',title:'零星採購',width:'8%',align:'center'
            },
            {field:'emergencyFee',title:'應急採購',width:'8%',align:'center'
            },
            {field:'otherFee',title:'其他方式採購',width:'10%',align:'center'
            },
        ]],
        onLoadSuccess:function (data) {
            $('#btn-search').linkbutton('enable');
            $('#btn-search').linkbutton({'text':'搜索'});
        },
        onLoadSuccess:function (index) {

            if(index.rows){
                for(let i=0;i<index.total;i++){
                    $('#tt').datagrid('beginEdit',i);
                }
            }
        },
    },
};
var dg = $('#tt').datagrid('subgrid', conf);

2.datagrid單獨加載指定接口的參數

exports.loadList =loadfunction(){
     var params = {
            beginDate:beginDate,
            endDate:endDate,
            officeId:$('#belong-project').combotree('getValue'),
            no:$('#report-no').textbox('getValue'),
        };
        $('#tt').datagrid({
            url: '/api/report/issue/check/list',
            queryParams:params,
        });
}

3.清空datagrid數據

  $('#form-tt').datagrid({data:{rows:[]}});

4.獲取datagrid標籤名和鍵名（用於導出）

  var colKeys = $('#tt').datagrid('getColumnFields')
        var colNames=[];
        for(var i=0;i<colKeys.length;i++)
        {
            var col = $('#tt').datagrid( "getColumnOption" , colKeys[i] );
            colNames.push(col.title);
        }