EasyUI datagrid 复杂表头处理

时间：2023-03-08 16:01:38

1：表头固定（前台写）

参照官方：http://www.jeasyui.net/demo/334.html

效果图：EasyUI datagrid 复杂表头处理

源代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Column Group - jQuery EasyUI Demo</title>

<link rel="stylesheet" type="text/css" href="../../themes/default/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>

<h2>Column Group</h2>

<p>The header cells can be merged. Useful to group columns under a category.</p>

<div style="margin:20px 0;"></div>

<table class="easyui-datagrid" title="Column Group" style="width:700px;height:250px"

data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get'">

<thead>

<tr>

<th data-options="field:'itemid',width:80" rowspan="2">Item ID</th>

<th data-options="field:'productid',width:100" rowspan="2">Product</th>

<th colspan="4">Item Details</th>

</tr>

<tr>

<th data-options="field:'listprice',width:80,align:'right'">List Price</th>

<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>

<th data-options="field:'attr1',width:240">Attribute</th>

<th data-options="field:'status',width:60,align:'center'">Status</th>

</tr>

</thead>

</table>

</body>

</html>

2：后台构造JSON格式，前台加载

格式如下：

{"total":2,"columns":[[{"title":"一组","colspan":3},{"field":"opt","title":"Operation","rowspan":2},{"title":"二组","colspan":3}],[{"field":"name","title":"name"},{"field":"addr","title":"Address"},{"field":"col4","title":"Col41"},{"field":"name1","title":"name1"},{"field":"addr1","title":"Address1"},{"field":"col41","title":"col411"}]],"rows":[{"opt":"Delete","name":"zhangxu","addr":"Add3","col4":"ceshi","name1":"mingyue","addr1":"ceshi1","col41":"mingyue1"},{"opt":"Add","name":"zhanglianhua","addr":"haixin","col4":"kldjalk","name1":"zhanglianhua1","addr1":"haixin1","col41":"jdfalkja1"}]}

前台加载代码：

function InitDgView() {

        //var jsondata = { "total": 2, "columns": [[{ "title": "一组", "colspan": 3 }, { "field": "opt", "title": "Operation", "rowspan": 2 }, { "title": "二组", "colspan": 3 }], [{ "field": "name", "title": "name" }, { "field": "addr", "title": "Address" }, { "field": "col4", "title": "Col41" }, { "field": "name1", "title": "name1" }, { "field": "addr1", "title": "Address1" }, { "field": "col41", "title": "col411" }]], "rows": [{ "opt": "Delete", "name": "zhangxu", "addr": "Add3", "col4": "ceshi", "name1": "mingyue", "addr1": "ceshi1", "col41": "mingyue1" }, { "opt": "Add", "name": "zhanglianhua", "addr": "haixin", "col4": "kldjalk", "name1": "zhanglianhua1", "addr1": "haixin1", "col41": "jdfalkja1" }] };

        var jsondata;

        $.get("/Pbfx/Hbfb/GetPbfxData", function (data) {

            //jsondata = JSON.parse(data.replace(/'/g, '"'));     //标准JSON格式为双引号，单引号无法转换

            jsondata = JSON.parse(data);

            $('#dgView').datagrid({

                title: ' XXXXXXXXX',

                singleSelect: true,

                fit: true,

                url: '',

                columns: jsondata.columns,

                rownumbers: true

            }).datagrid('loadData', jsondata.rows);

        });

    }

　　

　

相关文章