直接上代码：
```javascript //表格宽度自适应，这里的#dg是datagrid表格生成的div标签 function fitCoulms(){ $('#statis-list').datagrid({ fitColumns:true })}; $(function () { $("#date").datebox({ onShowPanel: function () {//显示日趋选择对象后再触发弹出月份层的事件，初始化时没有生成月份层 span.trigger('click'); //触发click事件弹出月份层 if (!tds) setTimeout(function () {//延时触发获取月份对象，因为上面的事件触发和对象生成有时间间隔 tds = p.find('div.calendar-menu-month-inner td'); tds.click(function (e) { e.stopPropagation(); //禁止冒泡执行easyui给月份绑定的事件 var year = /\d{4}/.exec(span.html())[0]//得到年份 , month = parseInt($(this).attr('abbr'), 10); //月份，这里不需要+1 $('#date').datebox('hidePanel')//隐藏日期对象 .datebox('setValue', year + '-' + month); //设置日期的值 }); }, 0); yearIpt.unbind();//解绑年份输入框中任何事件 }, parser: function (s) { if (!s) return new Date(); var arr = s.split('-'); return new Date(parseInt(arr[0], 10), parseInt(arr[1], 10) - 1, 1); }, formatter: function (d) { return d.getFullYear() + '-' + (d.getMonth() + 1); } }); var p = $('#date').datebox('panel'), //日期选择对象 tds = false, //日期选择对象中月份 yearIpt = p.find('input.calendar-menu-year'),//年份输入框 span = p.find('span.calendar-text'); //显示月份层的触发控件 //初始加载，表格宽度自适应 $(document).ready(function(){ fitCoulms(); }); //浏览器窗口大小变化后，表格宽度自适应 $(window).resize(function(){ fitCoulms(); }); var $events = { btnsEvent: { _export: { click: function () { var time = $('#date').val(); window.location.href = _ctx + "RunLogStatus/exportMonth?time="+time; } }, } }; var $btnBindEvents = { initBtnEvents: function () { //导出 var $exporter = $("#export-btn"); $exporter.unbind(); $exporter.bind($events.btnsEvent._export); } }; var $active = { initialization: function () { $btnBindEvents.initBtnEvents(); // 表格数据模拟 var date = new Date(); var date = date.getFullYear()+'-'+(date.getMonth()+1); $("#date").datebox("setValue",date); $("#search-btn").click(); } }; var grid; $("#search-btn").click(function () { ajaxLoading(); grid = $('#statis-list').datagrid({ url: _ctx + "RunLogStatus/staticListMonth", queryParams: { time:$("#date").val() }, onLoadSuccess: function (data){ var merges_a = [{ index: data.rows.length-1,//合并第5行的列,从0开始，所以index=4是第五行。 colspan: 2//合并列的数量 }]; for (var i = 0; i < merges_a.length; i++) $('#statis-list').datagrid('mergeCells', { index: merges_a[i].index, field: 'civilcode',//合并后单元格对应的属性值 colspan: merges_a[i].colspan }); compute(data) },//加载完毕后执行计算 hasCheckbox: false, // 是否有复选框 hasBorder: true,// 是否有边框 checkboxKey: "id", // 复选框用数据字段 hasColumnsFilter: false, //是否有字段筛选 hasAdvancedSearch: true, // 是否有高级搜索行 openAdvancedSearch: true, // 默认高级搜索打开状态 frozenColumns: [], onClickRow: function (rowIndex, rowData) { $(this).datagrid('unselectRow', rowIndex); }, columns: [ [ { // 数据列集合 field: "civilcode", title: "区域编码", align: "center", rowspan: 2, width: "10%", }, { field: "civilname", title: "区域", align: "center", rowspan: 2, width: "10%" }, { field: "Safty", title: "安全设备", align: "center", colspan: 4, width: "20%" }, { field: "Network", title: "网络设备", align: "center", colspan: 4, width: "20%" }, { field: "Server", title: "服务器", align: "center", colspan: 4, width: "20%" }, { field: "IPC", title: "IPC", align: "center", colspan: 4, width: "20%" } ], [{ field: "SaftyNum", title: "上报数量", align: "center", width: '5%' }, { field: "SaftyAlarm", title: "告警数量", align: "center", width: '5%' },{ field: "ReportSaftyDays", title: "上报天数", align: "center", width: '5%' },{ field: "NotReportSaftyDays", title: "未上报天数", align: "center", width: '5%' }, { field: "NetworkNum", title: "上报数量", align: "center", width: '5%' }, { field: "NetworkAlarm", title: "告警数量", align: "center", width: '5%' }, { field: "ReportNetworkDays", title: "上报天数", align: "center", width: '5%' },{ field: "NotReportNetworkDays", title: "未上报天数", align: "center", width: '5%' },{ field: "ServerNum", title: "上报数量", align: "center", width: '5%' }, { field: "ServerAlarm", title: "告警数量", align: "center", width: '5%' }, { field: "ReportServerDays", title: "上报天数", align: "center", width: '5%' },{ field: "NotReportServerDays", title: "未上报天数", align: "center", width: '5%' }, { field: "IPCNum", title: "上报数量", align: "center", width: '5%' }, { field: "IPCAlarm", title: "告警数量", align: "center", width: '4%' },{ field: "ReportIPCDays", title: "上报天数", align: "center", width: '5%' },{ field: "NotReportIPCDays", title: "未上报天数", align: "center", width: '5%' } ] ] }) }); $active.initialization(); }); /*加载数据提示*/ function ajaxLoading() { $("<div class=\"datagrid-mask\"><iframe id=\"iframe1\" src=\"about:blank\" frameBorder=\"0\" marginHeight=\"0\" marginWidth=\"0\" style=\"position:absolute; visibility:inherit; top:0px;left:0px;width:100%; height:100%;z-index:-1; filter:alpha(opacity=0.5);\"></iframe></div>").css({ "display": "block", "z-index": "999999" }).appendTo("body"); $("<div class=\"datagrid-mask-msg\"></div>").html("正在加载数据，请稍候...").appendTo("body").css({ "display": "block", "left": ($(document.body).outerWidth(true) - 190) / 2, "top": ($(window).height() - 200) / 2 }); } /*去掉加载数据提示*/ function ajaxLoadEnd() { $(".datagrid-mask").remove(); $(".datagrid-mask-msg").remove(); } function compute(data) { ajaxLoadEnd() }效果图
