jQuery EasyUI-DataGrid动态加载表头

时间：2023-03-09 13:27:39
jQuery EasyUI-DataGrid动态加载表头

项目总结—jQuery EasyUI-DataGrid动态加载表头

概要

在前面两篇文章中,我们已经介绍了在jQuery EasyUI-DataGrid中有参数和无参数的情况下将数据库中数据显示到前台,但是对于前面两篇文章显示的数据表头是固定的,如果我们显示到前台的数据来自数据库不同的表,那么表头也需要动态的加载,这篇文章我们就来看下在EasyUI-DataGrid中动态加载表头和数据.

实现

我们要实现的功能是根据我们的需要,让DataGrid显示不同的数据,表头也同样在变,我们可以先看下我们要实现功能的页面.

jQuery EasyUI-DataGrid动态加载表头

如图所示我们点击左侧不同的节点,右侧将会显示不同DataGrid的数据.

现在我们来看下前台html页的代码,因为表头是变的,所以我们的前台代码跟前面两篇博客就有点不一样了.

  1. <divdata-optionsdivdata-options="region:'center',title:'考核对象数据录入情况',iconCls:'icon-ok'">
  2. <divclassdivclass="demo-info"data-options="fit:true,border:false,plain:true">
  3. <table id="dg"title="考核对象数据计算得分" class="easyui-datagrid"style="width: 900px; height: 400px; padding-left: 200px;"data-options="rownumbers:true,pageSize:5,pageList:[5,10,15,20],method:'get',"
  4. pagination="true" rownumbers="true"fitcolumns="false" striped="true"singleselect="true">
  5. <thead>
  6. </thead>
  7. </table>
  8. </div>
  9. </div>
<divdata-options="region:'center',title:'考核对象数据录入情况',iconCls:'icon-ok'">

                <divclass="demo-info"data-options="fit:true,border:false,plain:true">

                    <table id="dg"title="考核对象数据计算得分" class="easyui-datagrid"style="width: 900px; height: 400px; padding-left: 200px;"data-options="rownumbers:true,pageSize:5,pageList:[5,10,15,20],method:'get',"

                       pagination="true" rownumbers="true"fitcolumns="false" striped="true"singleselect="true">

                        <thead>

                        </thead>

                    </table>

           </div>

        </div>

接下来我们就看下js代码生成表头的代码,如图所示的县市区定量的表头.

  1. //县市区定量指标计算情况查询
  2. function reloadgridCityQuanty() {
  3. var test =document.getElementById("NodeChild").innerHTML;
  4. //于一般处理程序进行交互,同时生成县市区定量表头
  5. $('#dg').datagrid({
  6. url:"CalculateScoreFrameCity.ashx?test=" + test,
  7. columns: [[
  8. { field: 'TargerName',title: '指标名称', width: 300 },
  9. { field: 'ConditionInput',title: '数据录入情况', width: 300 },
  10. { field: 'Operate', title:'操作', width: 300 }
  11. ]]
  12. })
  13. }
 //县市区定量指标计算情况查询

            function reloadgridCityQuanty() {

                var test =document.getElementById("NodeChild").innerHTML;

                //于一般处理程序进行交互,同时生成县市区定量表头

                $('#dg').datagrid({

                    url:"CalculateScoreFrameCity.ashx?test=" + test,

                    columns: [[

                    { field: 'TargerName',title: '指标名称', width: 300 },

                    { field: 'ConditionInput',title: '数据录入情况', width: 300 },

                    { field: 'Operate', title:'操作', width: 300 }

                    ]]

                })

            }

在这里我们需要说下的是,我们需要将我们所有要显示的数据的表头都在这里提前创建好,然后利用js语句进行动态加载.

我们再来看个表头的js代码,和上面的本质上是一样的.

  1. //县市区定性计算情况查询
  2. functionreloadgridCharacterizationCity() {
  3. var test =document.getElementById("NodeChild").innerHTML;
  4. //于一般处理程序进行交互,同时生成县市区定性表头
  5. $('#dg').datagrid({
  6. url:"CalculateScoreFrameCity.ashx?test=" + test,
  7. columns: [[
  8. { field: 'Name', title:'指标名称', width: 225 },
  9. { field: 'ConditionInput',title: '数据录入情况', width: 225 },
  10. { field: 'CalculateInput',title: '计算情况', width: 225 },
  11. { field: 'Operate', title:'操作', width: 225 }
  12. ]]
  13. })
  14. }
           //县市区定性计算情况查询

            functionreloadgridCharacterizationCity() {

                var test =document.getElementById("NodeChild").innerHTML;

                //于一般处理程序进行交互,同时生成县市区定性表头

                $('#dg').datagrid({

                    url:"CalculateScoreFrameCity.ashx?test=" + test,

                    columns: [[

                    { field: 'Name', title:'指标名称', width: 225 },

                    { field: 'ConditionInput',title: '数据录入情况', width: 225 },

                     { field: 'CalculateInput',title: '计算情况', width: 225 },

                    { field: 'Operate', title:'操作', width: 225 }

                    ]]

                })

            }

关于一般处理程序的书写与前面两篇文章是一样的,大家可以参考前面一篇的文章.

我们也来看下我们创建的另一个表头的效果

jQuery EasyUI-DataGrid动态加载表头

总结

通过本篇文章我们就可以在前台根据我们的需要,来创建我们需要的表头,以此在DataGrid中显示不同的数据.有心的同学可能注意到我们这篇文章显示的数据与前面两篇文章显示的数据不一样,前面文章DataGrid表格中显示的数据是全部来自数据库表,而我们这篇文章中显示的数据不是直接来自数据库的,是我们手动拼接成的,至于具体的实现我们在下一篇文章中进行介绍.

相关文章