Datagrid show/hide header columns not correcting parent colspan

EasyUI Forum

September 14, 2025, 02:25:12 AM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for jQuery > Datagrid show/hide header columns not correcting parent colspan

Pages: [1]

« previous next »

Author

Topic: Datagrid show/hide header columns not correcting parent colspan (Read 14696 times)

bduguay

Newbie

Posts: 31

Datagrid show/hide header columns not correcting parent colspan

« on: March 09, 2015, 08:42:52 AM »

I have a datagrid table with columns that need to show/hide based on what data the user requests. When I hide the columns that contain the data the user doesn't want, the parent header doesn't update the colspan appropriately.

Here is an example of what I'm trying to do.

Code:

<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',
toolbar:'#tb'">
        <thead>
            <tr>
                <th id="itemTitle" colspan="2">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'">Unit Cost</th>
                <th data-options="field:'listprice',align:'right'">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>

        </tbody>
    </table>
    <div id='tb'>
        <a href="#" id="showButton" class="easyui-linkbutton" data-options="iconCls:'icon-ok', plain:true" onclick="showHideButton()">Show/Hide Product</a>
    </div>
</body>

Here is my same javascript

Code:

var showProduct = true;
function showHideButton() {
    if (showProduct) {
        alert('show');
        $('#dg').datagrid('showColumn', 'productid');
        $('#itemTitle).attr('colspan ', 3);
        showProduct = false;
    } else {
        alert('hide');
        $('#dg').datagrid('hideColumn', 'productid');
        $('#itemTitle).attr('colspan ', 2);
        showProduct = true;
     }          
}

Here is the fiddle that I've tried but it just isn't working. http://jsfiddle.net/n4ys8rge/9/

I'm using JQuery 1.3.4.
Any help would be appreciated. Thank you.


	Logged

bduguay

Newbie

Posts: 31

Re: Datagrid show/hide header columns not correcting parent colspan

« Reply #1 on: March 10, 2015, 10:52:13 AM »

I've figured it out. The following code will go through the headers and find the text in the parent column. Once found it will set the colspan.

Code:

function setParentColspan(columnText, colSpan) {
	var dg = $('#dg'),
	    dc = dg.data('datagrid').dc,
	    htable = dc.header2.find('.datagrid-htable');

	htable.find('tr.datagrid-header-row:first td').each(function() {
		var innerHtml = $(this).html();
		if (innerHtml.indexOf(columnText) > -1) {
			$(this).attr('colspan', colSpan);
		}
	});
}


	Logged

Pages: [1]

« previous next »