JSFiddle - React, Tailwind, and code Playground

by Hilarius Doren

HTML

<script src="http://www.jeasyui.com/easyui/jquery.min.js"></script>
<script src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="http://www.jeasyui.com/easyui/demo/demo.css">
<link rel="stylesheet" href="http://www.jeasyui.com/easyui/themes/icon.css">
<title>Column Group - jQuery EasyUI Demo</title>
<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 id="dg" class="easyui-datagrid" title="Column Group" style="width:400px;height:250px"
            data-options="rownumbers:true,singleSelect:true,url:'datagrid_data1.json',method:'get'">
        <thead>
            <tr>
                <th colspan="3">Item Detailssss</th>
                <th colspan="3">Item Details</th>
            </tr>
            <tr>
                 <th data-options="field:'itemid'">Item ID</th>
                <th data-options="field:'productid', hidden:true">Product</th>

                <th data-options="field:'unitcost',align:'right', hidden:true">Unit Cost</th>
                                <th data-options="field:'listprice',align:'right', hidden:true">List Price</th>
                <th data-options="field:'attr1'">Attribute</th>
                <th data-options="field:'status',align:'center'">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td> 1 </td>
                <td> 1 </td>
                <td> 1 </td>
                <td> 1 </td>
                <td> 1 </td>
                <td> 1 </td>
            </tr>
                        <tr>
                <td> 1 </td>
                <td> 1 </td>
                <td> 1 </td>
                <td> 1 </td>
                <td> 1 </td>
                <td> 1 </td>
            </tr>
                        <tr>
                <td> 1 </td>
          ...

JavaScript

var dg = $('#dg');
    var dc = dg.data('datagrid').dc;
    var fields = dg.datagrid('getColumnFields');
    var vcount = 0;
    $.map(fields, function(field){
        var col = dg.datagrid('getColumnOption', field);
        if (!col.hidden){
            vcount++;
        }
    });

    var columns = dg.datagrid('options').columns;
    if (columns.length>1){
        var htable = dc.header2.find('.datagrid-htable');
        var index = 0;
        htable.find('tr.datagrid-header-row:first td').each(function(){
            var colspan = parseInt($(this).attr('colspan'))||1;
            if (index >= vcount){
                $(this).hide();
            }
            index += colspan;
        })
    }