easyui-datagrid 表头（title）动态加载显示

最新推荐文章于 2022-05-19 16:51:57 发布

ecust_yz

最新推荐文章于 2022-05-19 16:51:57 发布

阅读量9.8k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/m0_37809211/article/details/79157978

本文介绍了一种通过JavaScript动态加载表头的方法，该方法能够根据后台数据动态生成表头，适用于需要灵活展示不同数据列的应用场景。

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

本文旨在用最小篇幅为大家介绍动态加载表头这一实用功能。

动态加载表头

先看看效果图:

第一列是固定的，考虑到有些项目需要动态的表头同时，也需要固定表头，所以也加入演示。

后三列的加载是什么意思呢？看下面操作

在这个页面中，用户可以根据需要选择使用的学校，比如我现在将华理启用，显示页面如下图：

好了这就是应用背景。下面看代码实现

var columns = new Array();//定义列数组
        $.getJSON('/FormulaWays/SchoolParameter/GetSchoolByApply', null, function (result) {//通过方法获得后台数据，该方法不唯一。
            var column = {
                field: 'CompParameter', title: '不变的', width: 100, sortable: true, editor: 'textReadonly',
            }
            columns.push(column);//将固定写死的列，存入列数组中

            for (var i = 0; i < result.length; i++) {//遍历获得的后台数据，这是需要动态显示的表头数据源
                var column1 = {
                    field: result[i].stu_name, title: result[i].stu_school , width: 70, sortable: true, editor: {
                        type: 'numberbox',
                    }
                }// field字段和title值都是根据后台的数据来赋值
                columns.push(column1);//将需要动态显示的列，存入列数组中
            }
            initTable(columns);
        })


        function initTable(columns) {
            grid = $('#tbl_PlanList1').datagrid({   //定位到Table标签，Table标签的ID是grid
                url: '@Url.Content("~/FormulaWays/CompParameter/GetCompParameterList")',   //指向后台的Action来获取当前菜单的信息的Json格式的数据
                title: '学校',
                iconCls: 'icon-view',
                height: 650,
                width: '100%',
                fit: true,
                idField: 'ID',
                queryParams: Variable.params,  //异步查询的参数
                columns: [
                    columns,//通过js动态生成，这是关键。
                ],
            });
        }

总结：该方法的核心就是通过js动态组合需要显示的columns，所谓动态组合，就是访问后台数据，确定需要显示的表头信息，随后遍历该信息并赋值。赋值过后将columns数据，放入datagrid里的columns属性中，随后datagrid访问后台方法，并返回需要显示的对应表格正文内容。

需要注意的是：js赋值的field字段信息一定要和datagrid访问的数据库字段相对应；而title内容则是灵活可变，可以是

var column1 = {
                    field: result[i].stu_name, title: "清华", width: 70, sortable: true, editor: {
                        type: 'numberbox',
                    }

这样缺点明显，所有列的表名都是清华。所有也可以这样

 var column1 = {
                    field: result[i].stu_name, title: result[i].stu_school+"最好的" , width: 70, sortable: true, editor: {
                        type: 'numberbox',
                    }

或者你通过逻辑判断，实现更加定制化的赋值。

谢谢！