layui 数据表格动态标题栏

最新推荐文章于 2024-01-24 17:05:05 发布

Aimyone

最新推荐文章于 2024-01-24 17:05:05 发布

阅读量5.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： layui

本文链接：https://blog.csdn.net/qq_36636312/article/details/109205344

layui 专栏收录该内容

46 篇文章

订阅专栏

本文介绍了一种前后端交互的方式来实现数据的有效展示。前端通过设置URL并获取后端提供的表元字段数据，然后遍历这些数据进行展示。同时，后端负责根据前端请求查询表的元字段数据。此外，还提供了导出接口数据到表格的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述

步骤

1，前端设置url
2，后端根据传递参数，查询表的元字段数据，传入前端
3，前端接收数据，遍历循环放入列中

代码

前端代码：

    var cols = [];
    function dydatagrid() {

        if(!interId){
            dLong.layerInfo("请选择接口！");
            return;
        }
        var postdata={
            interId: interId
        }
        $.getJSON("/**/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);
    }

后端代码：

  // 导出字段
    @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, "保存失败");
        }
    }