JQuery EasyUI datagrid 实现动态显示隐藏列功能

在使用 JQuery EasyUI 有时为了显示列表数据展示了N列数据，但是功能需要实现切换时隐藏部分列，如列数据是单一记录展示了时间列，通过下拉框切换到汇总数据此时日期列不用展示时需要隐藏该列。EasyUI 提供了 styler 函数，利用此函数就可以实现 EasyUI datagrid field 属性的隐藏显示。

EasyUI 实现 隐藏显示 field 属性部分列，具体Js代码如下：

<script type="text/javascript">
var $dg;
var $grid;
var dateType = "day";
$(function() {
	$dg = $("#dg");
	$grid=$dg.datagrid({
		url : "total/totalOrder.action",
		width : 'auto',
		height :  $(this).height()-90,
		pagination:true,
		rownumbers:true,
		border:false,
		singleSelect:true,
		columns : [ [
			  {field : 'sellerName',title : '商家名称',width : parseInt($(this).width()*0.08),align : 'left',editor : "text",
				  styler: function(value,row,index){
						if(dateType=="day"){
							$("td[field='sellerName']").show();
							return value;
						}else{
							$("td[field='sellerName']").hide();
							return 'color:red;display:none';
						}
				}
			},
			{field : 'totalNum',title : '订单数量',width : parseInt($(this).width()*0.06),align : 'left',editor : "text"},
			{field : 'payNum',title : '付费人数',width : parseInt($(this).width()*0.06),align : 'left',editor : "text"},			  
			{field : 'date',title : '时间',width : parseInt($(this).width()*0.08),align : 'left',editor : "text",
				styler: function(value,row,index){
					if(dateType=="day"){
						$("td[field='date']").show();
						return value;
					}else{
						$("td[field='date']").hide();
						return 'color:red;display:none';
					}
			}
		}
	      ] ],toolbar:'#tb'
	});
});

function searchData() {
	dateType = $("#dateType").val();
	var str = "{'dateType':'" + dateType + "'}";
	var obj = eval('(' + str + ')');
	$dg.datagrid('load', obj);
}

function dateChange(){
	searchData();
}

</script>

Html 页面，具体代码如下：

<div id="tb" style="padding:2px 0">
	<table cellpadding="0" cellspacing="0">
		<tr>
			<td style="padding-left:2px">
				<select id="dateType" onchange="dateChange()">
					<option value="day" selected="selected">按日查询</option>
					<option value="all">总计</option>
				</select>
			</td>
		</tr>
	</table>
</div>
<table id="dg" title="订单量"></table>