layui data table dynamic title bar

Effect picture

Insert picture description here

step

1. The front end sets the url
2. The back end queries the meta field data of the table according to the passed parameters, and passes it to the front end
3. The front end receives the data, and the traversal loop puts it into the column

Code

Front-end code:

    var cols = [];
    function dydatagrid() {
    
    

        if(!interId){
    
    
            dLong.layerInfo("请选择接口!");
            return;
        }
        var postdata={
    
    
            interId: interId
        }
        dLong.getJSON("/BaexportController/toList",postdata,function(data){
    
    
            if (data.success) {
    
    
                cols = [];// 初始化
                $.each(data.fielddata,function(index,row){
    
    
                    cols.push({
    
    field: row.code, title: row.name,sort:'true',align:'center',width: 140});  // 元数据标题栏设置
                });
                // var obj2 = deepClone(data.griddata);
                hstable(data.griddata,true) //数据
            }else {
    
    
                hstable([])
            }
        },true);
    }
    // 导出接口数据导出存储表格
    function hstable(data) {
    
    
        var table = layui.table;
        var ins1=table.render({
    
    
            elem: '#hstable',
            height: "full-70",
            size: 'sm' ,
            filter:{
    
    
                bottom:false
            },
            totalRow: true ,
            totalRowAll: true ,
            page: true,
            limit:200,
            limits:[15,30,50,100,200,500,1000,2000,5000,10000],
            cols: [[cols]], // 作为一个参数赋予进去
            data: data? data : [],
            // done: function (res, curr, count) {
    
    
            //     layui.soulTable.render(this)
            //     var layuitabletotal = $("div[lay-id='hstable']").children(".layui-table-total");
            //     var totalje=layuitabletotal.find("td[data-field='totalincome']").children("div").text();
            //     var allcost=layuitabletotal.find("td[data-field='totalcost']").children("div").text();
            //
            //     var totalincomeone=layuitabletotal.find("td[data-field='totalincomeone']").children("div").text();
            //     var totalcostone=layuitabletotal.find("td[data-field='totalcostone']").children("div").text();
            //     var actualbalanceone=layuitabletotal.find("td[data-field='actualbalanceone']").children("div").text();
            //     var totalincomeoneavg=parseFloat(totalincomeone.replaceAll(",",""))/parseFloat(data.length);
            //     var totalcostoneavg=parseFloat(totalcostone.replaceAll(",",""))/parseFloat(data.length);
            //     var actualbalanceoneavg=parseFloat(actualbalanceone.replaceAll(",",""))/parseFloat(data.length);
            //
            //     var surplusone=parseFloat(totalje.replaceAll(",",""))-parseFloat(allcost.replaceAll(",",""));
            //     var incomeCostRate=parseFloat(allcost.replaceAll(",",""))/parseFloat(totalje.replaceAll(",",""));
            //     layuitabletotal.find("td[data-field='surplusone']").children("div").text(surplusone.toFixed(2))
            //     layuitabletotal.find("td[data-field='incomeCostRate']").children("div").text(incomeCostRate.toFixed(4))
            //
            //     layuitabletotal.find("td[data-field='totalincomeone']").children("div").text("平均数:"+totalincomeoneavg.toFixed(2))
            //     layuitabletotal.find("td[data-field='totalcostone']").children("div").text("平均数:"+totalcostoneavg.toFixed(2))
            //     layuitabletotal.find("td[data-field='actualbalanceone']").children("div").text("平均数:"+actualbalanceoneavg.toFixed(2))
            //
            // }
        });
    }


 // 定义一个深拷贝函数 使用了对象的引用对象的时候,使用深拷贝处理对象
    function deepClone(obj){
    
    
        var result;
        var oClass=isClass(obj);
        if(oClass==="Object"){
    
    
            result={
    
    };
        }else if(oClass==="Array"){
    
    
            result=[];
        }else{
    
    
            return obj;
        }
        for(var key in obj){
    
    
            var copy=obj[key];
            if(isClass(copy)=="Object"){
    
    
                result[key]=arguments.callee(copy);//递归调用
            }else if(isClass(copy)=="Array"){
    
    
                result[key]=arguments.callee(copy);
            }else{
    
    
                result[key]=obj[key];
            }
        }
        return result;
    }
    //判断对象的数据类型
    function isClass(o){
    
    
        if(o===null) return "Null";
        if(o===undefined) return "Undefined";
        return Object.prototype.toString.call(o).slice(8,-1);
    }

Backend code:

  // 导出字段
    @RequestMapping("/toList")
    @ResponseBody
    public Map toexceldataList(@RequestParam HashMap<String,String> paraMap,Model model) {
    
    
        try {
    
    
            Map<String, Object> returnmap = createResult(true, "保存成功");
            String sql="select name,code from A_field where inter_id='"+paraMap.get("interId")+"'";
            returnmap.put("fielddata",jdbcTemplate.queryForList(sql)); //表元字段数据
            String sqldata="select name,code from A ";
            returnmap.put("griddata",jdbcTemplate.queryForList(sqldata));  //表数据的查询sql
            return returnmap;
        } catch (Exception e) {
    
    
            return createResult(false, "保存失败");
        }
    }

Guess you like

Origin blog.csdn.net/qq_36636312/article/details/109205344