• EasyUI datagrid 复杂表头处理


    1:表头固定(前台写)

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

    效果图:

    源代码如下:

    <!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="700px;height:250px"
    data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get'">
    <thead>
    <tr>
    <th data-options="field:'itemid',80" rowspan="2">Item ID</th>
    <th data-options="field:'productid',100" rowspan="2">Product</th>
    <th colspan="4">Item Details</th>
    </tr>
    <tr>
    <th data-options="field:'listprice',80,align:'right'">List Price</th>
    <th data-options="field:'unitcost',80,align:'right'">Unit Cost</th>
    <th data-options="field:'attr1',240">Attribute</th>
    <th data-options="field:'status',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);
            });
        }
    

      

     

  • 相关阅读:
    HTML标签(2)
    HTML简介(1)
    JqueryUI input 自动提示 autocomplete
    Linux基础--单ubuntu 系统 u盘启动 install
    Spark Parquet file split
    HashMap与ConcurrentHashMap
    线程池阻塞队列之ArrayBlockingQueue
    线程池阻塞队列之LinkedBlockingQueue
    线程池的拒绝策略
    关闭线程池shutdown 和 shutdownNow 的区别
  • 原文地址:https://www.cnblogs.com/volts0302/p/5086243.html
Copyright © 2020-2023  润新知