easyui-datagrid---动态创建表头和加载数据

原创 2015年11月24日 18:27:51

效果

  要实现动态的创建表头,即表头的格式多样,比如列数不确定,表头的总分结构等。下图为表头最终效果:
datagrid动态表头

datagrid动态表头

datagrid动态表头

实现

  想要动态的实现创建表头,那么用html的方式去创建easyui-datagrid肯定是不行的,easyui创建组件均提供了两种方式去创建,这里就要用到JS的创建方式了。
  思路:动态获取待创建表头的数据–>创建表头–>动态获取表头field所对应的json数据–>datagrid url加载json数据–>显示数据成功

关键性代码:

$('#shop_select').combobox({
    onChange: function(newValue,oldValue){                  
        //动态化生成表头               
        $.ajax({
            url: localhostPath + '/Home/Finance/getOperatorByShopCode/',
            type: 'POST',
            dataType: 'json',
            data: {
                'shop_code': newValue       
            },
            success: function(data){                        
                var colData1 = [];
                var colData2 = [];              
                var columns = new Array();                  
                //表头第一行
                //固定列:第一列
                var i = 0;
                colData1[i] = {'field':'itemid','title':'','rowspan':2,'align':'center','width':60};
                ++i;
                var j = 0;
                for(j;j < data.length;++j){                     
                    colData1[i+j] = {'field':'','title':data[j].name,'colspan':2,'align':'center','width':70};
                }       
                i += j;
                colData1[i] = {'field':'cashier','title':'收银员','rowspan':2,'align':'center','width':80};
                colData1[++i] = {'field':'','title':'合计','colspan':3,'align':'center'};
                colData1[++i] = {'field':'daily_total_amount','title':'每日日合计','rowspan':2,'align':'center','width':80};
                colData1[++i] = {'field':'block_count','title':'格子点数','rowspan':2,'align':'center','width':80};             
                columns.push(colData1);             
                //表头第二行
                var s = 0,t = 0;
                for(t = 0;t < data.length;++t){                     
                    colData2[t*2] = {'field':data[t].login_name+'_total','title':'合计','align':'center','width':80};
                    colData2[t*2+1] = {'field':data[t].login_name+'_block','title':'格子','align':'center','width':80};
                }
                s = t*2;
                colData2[s] = {'field':'cash','title':'现金','align':'center','width':70};
                colData2[++s] = {'field':'vip','title':'会员','align':'center','width':70};
                colData2[++s] = {'field':'account','title':'记账','align':'center','width':70};
                columns.push(colData2);

                var gridCfg = {
                    fit         : false,
                    loadMsg     : '数据加载中......',
                    url         : '',
                    nowrap      : false,
                    border      : true,  
                    striped     : true,
                    pagination  : false,                        
                    rownumbers  : true,
                    singleSelect: true,
                    columns     : columns,
                    fitColumns  : true,
                    queryParams : {},
                    frozenColumns   :   [[  
                        //{field:'ck',checkbox:true}  
                    ]], 
                    onLoadSuccess:function(data){

                    }
                };                  

                $('#month_report').datagrid(gridCfg);                  
            },
            error: function(){
                alert("获取操作员数据错误");                         
            }
        });         
    }
}); 
版权声明:本文为博主[原创]文章,未经博主允许可以转载,注明博客出处:[http://blog.csdn.net/FreeApe]

相关文章推荐

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

概要         在前面两篇文章中,我们已经介绍了在jQuery EasyUI-DataGrid中有参数和无参数的情况下将数据库中数据显示到前台,但是对于前面两篇文章显示的数据表头是固定的,如...

easyui 表头动态生成

使用EasyUI实现列不固定的表格(需要引入easyUi中的jquery.easyui.min.js、easyui.css、icon.css),步骤如下: jsp页面: 1.新建一个准备放tabl...

EasyUI_datagrid实现动态加载列并为其绑定数据

最近项目中遇到了这么一个需求,在datagrid中显示的数据需要动态的加载,也就是说表格中显示的列是不固 定的,显示的列的名称和列的数量都是不固定的,这些数据都是需要我们从后台拿来数据然后在动态的绑...

easyui datagrid 动态生成列

easyui datagrid 定义列的方式通常是: $('#grid').datagrid({columns:[[ {field:'f1',title:'字段1',width:160}...
  • yanjunlu
  • yanjunlu
  • 2012年09月25日 15:47
  • 37222

easyui datagrid 动态表头 动态columns 的一种实现方式

function doUpgradeDataQueryFun(){ var actTypeVal=$("#actType").combobox('getValue'); var actIdVa...

easyui datagrid 动态修改表头

getColumnOption:$('#tableId').datagrid('getColumnOption',columnName).title=titleName;$('#tableId').d...

EasyUI DataGrid动态加载数据

1:直接通过table标签内嵌

《EasyUI》——给DataGrid动态绑定表头和数据,实现表头与数据的真正解耦

这两天在做项目的时候,遇到了这样一个需求,我需要给DataGrid绑定表头,但是表头有多少列并不固定,表头的有多少列名也不固定,也就是说,表头可以有一列,也可以有许多列,这个datagrid具体有多少...

easyUI 动态生成表头,与动态绑定数据,实现代码

今天做了个动态生成表头的功能,和动态绑定数据。关键性代码如下,供大家参考 js 层面: $.ajax({         url: "trustReportTemplat...

jquery easyui datagrid 动态生成表头 + 嵌套对象属性展示

代码功能: 1、datagrid 的表头由后台生成,可以配置在数据库 2、datagrid 的列绑定数据 支撑嵌套对象   Js代码   $(function...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:easyui-datagrid---动态创建表头和加载数据
举报原因:
原因补充:

(最多只允许输入30个字)