easyui datagrid 多表頭
阿新 • • 發佈：2018-12-05
1.原始碼<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Basic DataGrid - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="../../themes/blue/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <link rel="stylesheet" type="text/css" href="../demo.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> </head> <body> <div id="dgdataCalibrationPoint" style="width:100%;height:100%"></div> </body> </html> <script> /* 初始化列表,表頭 */ $("#dgdataCalibrationPoint").datagrid({ fit : true, border : false, pagination : true, fitColumns : false, pageList : [ 10, 50, 100, 150, 200, 250, 300 ], url : "datagrid_colspan.json", pageSize : 10, autoRowHeight : false, rownumbers : true, columns : [ [{ field : 'commId', checkbox : true, rowspan:2 }, { field : 'deviceCode', title : '裝置編號', width : 120, halign : 'center', align : 'center', rowspan:2 }, { field : 'deviceMn', title : '裝置MN號', width : 120, halign : 'center', align : 'center', rowspan:2 }, { field : 'deviceName', title : '裝置名稱', width : 120, halign : 'center', align : 'center', rowspan:2 }, { field : 'cnName', title : '計劃型別', width : 100, halign : 'center', align : 'center', rowspan:2 },{ field : 'statusName', title : '執行狀態', width : 100, halign : 'center', align : 'center', rowspan:2 },{ field : 'xState', title : ' 溼度校正', width : 100, halign : 'center', align : 'center', rowspan:2 }, {title:'校準點0',order: 2,colspan:3}, {title:'校準點1',order: 2,colspan:3}], [{ field : 'xP0RH', title : '相對溼度(%RH)', width : 140, rowspan:1, halign : 'center', align : 'center' },{ field : 'xP0K', title : '斜率', width : 100, rowspan:1, halign : 'center', align : 'center' },{ field : 'xP0B', title : '截距', width : 100, rowspan:1, halign : 'center', align : 'center' },{ field : 'xP1RH', title : '相對溼度(%RH)', width : 140, rowspan:1, halign : 'center', align : 'center' },{ field : 'xP1K', title : '斜率', width : 100, rowspan:1, halign : 'center', align : 'center' },{ field : 'xP1B', title : '截距', width : 100, rowspan:1, halign : 'center', align : 'center' }]], singleSelect : false, selectOnCheck : true, checkOnSelect : true }); </script>
2.效果
