EasyUI datagrid动态生成列

任务描述：根据用户选择时间段，生成列数据，如图

一、先定义好datagrid固定的数据列

    <script type="text/javascript">
        $(document).ready(function () {
            $("#td_Radio").datagrid({
                striped: true,
                border: true,
                iconCls: 'icon-edit', //图标
                singleSelect: true,
                autoRowHeight: true,
                rownumbers: true,
                fitColumns: false,
                fit: false,
                idField: 'cmem_id',
                pagination: true, //是否分页
                columns: [[
                         { field: 'cregion_id', title: '调查地区',  100 },
                         { field: 'cfm_ename', title: '节目名称',  100 },
                         { field: 'cfamilyid', title: '家庭编号',  100 },
                         { field: 'CSTBINSTALLDATE', title: '安装时间',  100 },
                 ]]
            });
            //设置分页控件
            var p = $('#td_Radio').datagrid('getPager');
            $(p).pagination({
                pageSize: 10, //每页显示的记录条数，默认为10 
                pageList: [10, 20, 30], //可以设置每页记录条数的列表 
                beforePageText: '第', //页数文本框前显示的汉字 
                afterPageText: '页    共 {pages} 页',
                displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
            });
        })
    </script>

二、用户点击查询的时候根据选择时间生成列数据，列是通过拼接字符串生成的

  var options = {}; 
           //返回日期类型2016-07-01
            function DataTime(date) {
                var mon = date.getMonth() + 1;         //getMonth()返回的是0-11，则需要加1
                if (mon <= 9) {                                     //如果小于9的话，则需要加上0
                    mon = "0" + mon;
                }
                var day = date.getDate();                   //getdate()返回的是1-31，则不需要加1
                if (day <= 9) {                                     //如果小于9的话，则需要加上0
                    day = "0" + day;
                }
                return date.getFullYear() + "-" + mon + "-" + day;
            }
            //当数据值为0时，设置改变背景色
            function cellStyler(value, row, index) {
                if (value == 0) {
                    return 'background-color:#EE9572;';
                }
            }
    //绑定查询按钮的click事件
   $("#btnSearch").bind('click', function () {
          var dg = $("#td_Radio");
          var url = "AjaxHandler/RadioFamilyDayNumber.ashx?Action=LoadGrid&NetWork=" + NetWork + "&FmID=" + FmID + "&StarTime=" + StarTime + "&EndTime=" + EndTime + "&FmName=" + FmName + "&NetWorkName=" + NetWorkName;
          loadDg(dg, url);
          })
       //加载DataGrid数据
       function loadDg(dg, url) {
            dg.datagrid({
            url: url
            });
        fetchData();//调用生成列方法
        }
            //动态添加列
            function fetchData() {
                var StarTime = $("#starTime").datebox("getValue");//得到开始时间
                var EndTime = $("#endTime").datebox("getValue");//得到结束时间
                var FmID = $("#cmbFmName").combobox("getValue");//获取FMID
                var StarDate = new Date(StarTime.substr(6, 4), StarTime.substr(0, 2) - 1, StarTime.substr(3, 2));//通过截取字符串，得到需要的DateTime类型
                var EndDate = new Date(EndTime.substr(6, 4), EndTime.substr(0, 2) - 1, EndTime.substr(3, 2));
                var days = EndDate.getTime() - StarDate.getTime();//获取相差天数
                var time = parseInt(days / (1000 * 60 * 60 * 24));//转换相差天数为int类型数据
                var nextDate = StarDate;
                var s = "";
                s = "[[";
                if (FmID == "-1")
                    s = s + " { field: 'CREGION_ID', title: '调查地区',  100 },{ field: 'CFAMILYID', title: '家庭编号',  100 },{ field: 'CSTBINSTALLDATE', title: '安装时间',  100 },";
                else
                    s = s + " { field: 'CREGION_ID', title: '调查地区',  100 },{ field: 'CFM_ENAME', title: '节目名称',  100 },{ field: 'CFAMILYID', title: '家庭编号',  100 },{ field: 'CSTBINSTALLDATE', title: '安装时间',  100 },";
                for (var i = 0; i <= time; i++) {
                    if (i == 0) {
                        s = s + "{field:'" + DataTime(nextDate) + "',title:'" + DataTime(nextDate) + "',80,styler:cellStyler},";
                    }
                    else {
                        nextDate = new Date(nextDate.getTime() + 24 * 60 * 60 * 1000);  //后一天
                        s = s + "{field:'" + DataTime(nextDate) + " ',title:'" + DataTime(nextDate) + "',80,styler:cellStyler},";
                    }
                }
                s = s + "]]";
                options = {};
                options.columns = eval(s);
                $('#td_Radio').datagrid(options);
            }

 三、解决IE8冲突：最后发现IE8最后一列不能加逗号，这样浏览器会当做后面还有一列解析，就会报错。

  //动态添加列
        function FetchData(url) {
            var starTime = $("#starTimeListen").datebox("getValue");
            var endTime = $("#endTimeListen").datebox("getValue");
            var fmId = $("#cmbFmNameListen").combobox("getValue");
            var starDate = new Date(starTime.substr(6, 4), starTime.substr(0, 2) - 1, starTime.substr(3, 2));
            var endDate = new Date(endTime.substr(6, 4), endTime.substr(0, 2) - 1, endTime.substr(3, 2));
            var days = endDate.getTime() - starDate.getTime();
            var time = parseInt(days / (1000 * 60 * 60 * 24));
            var nextDate = starDate;
            var frozenColumnsStr = "";
            var columnsStr = "";
            columnsStr = "[[";
            frozenColumnsStr = "[[";
            if (fmId == "-1")
                frozenColumnsStr = frozenColumnsStr + " { field: 'CREGION_ID', title: '调查地区',  100 },{ field: 'CFAMILYID', title: '家庭编号',  100 },{ field: 'CSTBINSTALLDATE', title: '安装时间',  100 },{ field: 'CRESERVE', title: '用户类型',  100 }";
            else
                frozenColumnsStr = frozenColumnsStr + " { field: 'CREGION_ID', title: '调查地区',  100 },{ field: 'CFM_ENAME', title: '频道名称',  100 },{ field: 'CFAMILYID', title: '家庭编号',  100 },{ field: 'CSTBINSTALLDATE', title: '安装时间',  100 },{ field: 'CRESERVE', title: '用户类型',  100 }";
            for (var i = 0; i <= time; i++) {
                if (i == 0) {
                    columnsStr = columnsStr + "{field:'" + DataTime(nextDate) + "',title:'" + DataTime(nextDate) + "',80,styler:CellStyler},";
                }
                else {
                    nextDate = new Date(nextDate.getTime() + 24 * 60 * 60 * 1000);  //后一天
                    columnsStr = columnsStr + "{field:'" + DataTime(nextDate) + "',title:'" + DataTime(nextDate) + "',80,styler:CellStyler},";
                }
            }
            columnsStr = columnsStr.substring(0, columnsStr.length - 1);
            frozenColumnsStr = frozenColumnsStr + "]]";
            columnsStr = columnsStr + "]]";
            var options = {};
            options.columns = eval(columnsStr);
            options.frozenColumns = eval(frozenColumnsStr);
            options.url = url;
            $('#tbRadioNum').datagrid(options);
        }

这样就解决了IE8报错的问题，最后又增加了冻结列的功能。frozenColumns对应的列冻结。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/zhangjd/p/5810298.html