jQuery EasyUI DataGrid Filter Row showColumn hideColumn

by Hilarius Doren

HTML

<h2>Problem with DataGrid Filter Row and dynamic hide/show a column</h2>

<div class="demo-info" style="margin-bottom:10px">
    <div class="demo-tip icon-tip">&nbsp;</div>
    <div>This sample shows a problem with easyui datagrid and row filter of datagrid.<p> When hide or show a column the filter columns layout is not correct. <strong> To Test toggle between hide and show column</strong></div>
</div>

<div class="easyui-panel" style="width:100%; height:400px; padding:12px;">
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'center', border:false">
        <table id="dg"></table>
    </div>
    
    <div data-options="region:'south', split:false, border:false" style="padding:12px;">
      <a id="btnHideRow" href="javascript:hideColumn();" class="easyui-linkbutton"            data-options="iconCls:'icon-ok', plain:false">hide Column</a>         
      <a id="btnShowRow" href="javascript:showColumn();" class="easyui-linkbutton"            data-options="iconCls:'icon-ok', plain:false">show Column</a>         
    </div>
</div>
 </div>

CSS

</style> 
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> 
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script> 
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.edatagrid.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/datagrid-filter.js"></script>
<style>

JavaScript

function hideColumn() {
    $('#dg').datagrid('hideColumn', 'ck');
}

function showColumn() {
    $('#dg').datagrid('showColumn', 'ck');
}

$(function(){
    var dg = $('#dg').datagrid();
    
    dg.datagrid({
		title:"Test DataGrid",
        fit:true,
		pagination: true,
        singleSelect:true,
    	striped:true,
	    rownumbers: true,
	    fitColumns: true,

        data:data,

		columns:[[
			{field:'ck', checkbox:true, hidden: false},		          
			{field:'itemid',width:80,title:'Item ID' },		          
			{field:'productid',width:100,title:'Product' },		          
			{field:'listprice',width:80,align:'right',title:'List Price'},		          
			{field:'unitcost',width:80,align:'right',title:'Unit Cost'},		          
			{field:'attr1',width:250,title:'Attribute'},		          
			{field:'status',width:60,align:'center',title:'Status' },		          
      	]]	
	});
    
    //enable filter
    dg.datagrid('enableFilter', [{
        field:'listprice',
        type:'numberbox',
        options:{precision:1},
        op:['equal','notequal','less','greater']
    },{
        field:'unitcost',
        type:'numberbox',
        options:{precision:1},
        op:['equal','notequal','less','greater']
    },{
        field:'status',
        type:'combobox',
        options:{
            panelHeight:'auto',
            data:[{value:'',text:'All'},{value:'P',text:'P'},{value:'N',text:'N'}],
            onChange:function(value){
                if (value == ''){
                    dg.datagrid('removeFilterRule', 'status');
                } else {
                    dg.datagrid('addFilterRule', {
                        field: 'status',
                        op: 'equal',
                        value: value
                    });
                }
                dg.datagrid('doFilter');
            }
        }
    }]);

});


var data = [
   ...