一、冻结首行首列

处理数据量较大的表格时，向下拖动滚动条，表格的标题栏就不见了，用户在查看数据时，需要来回拖动滚动条才能看到标题，那么是否可以将表格设置成无论怎样滚动表格，标题都始终显示呢？

如果表格中的标题只有一行或一列，可以通过冻结首行或首列，使表格的标题始终显示在第一行或第一列。 

1.打开所需文件，单击【视图】【窗口】组【冻结窗格】按钮，在弹出的下拉列表中选择【冻结首行】项。

 2.这样就可以将表格的首行“冻住”，在拖动滚动条时，标题始终显示在第一行。

3. 若要取消冻结在【冻结窗格】按钮的下拉列表中选择【取消冻结窗格】即可。

4.使用相似的方法可冻结首列，在【冻结窗格】按钮的下拉列表中选择【冻结首列】选项。

 二、冻结拆分窗格

 冻结拆分窗格不仅可以冻结首行和首列，还可以同时冻结多行和多列。如果我们现在既要求冻结首列，又要求冻结首行，该如何操作呢？

 1.取消上一节设置的冻结首行、首列，然后选择B2单元格，单击【视图】【窗口】组【冻结窗格】按钮，在弹出的下拉列表中选择【冻结至第m行n列】选项(有的Excel版本里显示的是冻结拆分窗格)（其中m代表行数，n代表列数，m,n是为了理解方便我添加的），其内在逻辑是：以操作之前所选单元格的左上角为起始点，划出横向和纵向的冻结分割线，冻结的区域就是所选单元格所在行的左侧列和上方行，如下图选择的是B3，点击【冻结窗格】下拉列表里的【冻结至第2行A列】（2和A是根据你所选的单元格在变化着的），其表示冻结的区域就是A列及前2行的数据。

3.若要冻结前10行的数据，可以先取消上一步设置的冻结窗格，然后选择A11单元格，在【冻结窗格】下拉列表中选择【冻结至第10行】选项。

  4. 即可将前10行的数据冻结                                        

效果图

步骤

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, "保存失败");
        }
    }