效果图

步骤

1，前端设置url

2，后端根据传递参数，查询表的元字段数据，传入前端

3，前端接收数据，遍历循环放入列中

代码
前端代码：
    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);
    }

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

动态生成表格，说白了就是页面拼串。后台组织数据，前台获取拼凑成完成的表格。

但这个表格没有想象中的那样简单，刚接到需求就认为这是一个很复杂的一个功能，难倒是不太难，很费心。

大致完整效果为这样



动态生成部分为享受社会救助情况及其下的定期定量救助和非定期定量救助以及最后得数据。

首先我通过两步走战略：

1、获取多选数据（救助类型+type），使用“，”分隔开，创建条件数组，根据数组的长度确定，享受社会救助情况（金额）所跨列的长度。根据条件结尾的type，确定是定期还是非定期救助类型，然后确定定期和非定期分别所占跨列数，然后再根据救助类型的type区分定期和非定期下的数据标题。



2、通过append（）方法向表头中添加固定行和列



3、通过ajax去后台获取数据



4、最后将数据添加到tbody中。

其中难点在于后动态数据的组建。我将动态的数据组装到Map<String,List>中传到前台，泛型为前台多选的条件和条件对应的数据集合，前台根据数组长度确定每行显示动态数据的长度，根据type判断数据所属类型，再从map中取出list循环出所有的动态数据。之所有使用三元运算是因为，后台case when判断的数值，传到实体中为乱码。我将case when的判断结果为数字，前台三元运算判断取值。

总结：写完忽然发现其实很简单，用心去研究，没有解决不了的问题。

选择单元格，点击视图–>点击冻结窗格下的冻结首行，即可冻结标题栏，滑动页面时，标题栏固定不动。

当一个列表内容太多时，在上滑过程中，如果不固定标题栏，会不知道当前这个列表属于哪个分类，所以常见做法是向上滑动过程中，将当前分类的标题栏固定在屏幕最上方。拿起你的手机，打开QQ，查看它的联系人分类，就可以体验这种效果。




这样的一个小小的交互，如何来实现呢？

1、准备资源

1）新建一个动态面板，命名为main，内容是随便放些组件，在里面放一个表示列表的一个矩形，带有一个标题栏（见下图的粉色社区动态标题栏），我们要在滑动面板向上到最顶端时固定这个标题栏。




2）复制一下动态面板里的那个标题栏到外面来，起个名字“隐藏的标题栏”







复制后的标题栏移到屏幕最上方，并设置为隐藏状态




2、给动态面板添加事件控制

在拖动动态面板时，如果动态面板的y值小于-200（刚好是里面的标题栏到达顶部的时候），显示之前隐藏的标题栏，否则就隐藏它




注意：事件里用到了局部变量，代表当前的组件，所以LVAR1.y就是它的纵坐栏，判断这个位置就行了。




这就可以了哦，其实还是比较简单的吧，想好思路，实现起来并不复杂。




在线演示