【前端开发-EasyUI】DataGrid总结

最新推荐文章于 2024-04-03 06:15:10 发布

尽管叫我疯子

最新推荐文章于 2024-04-03 06:15:10 发布

阅读量584

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/Robin_hc/article/details/90064332

版权

前端开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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);
        }