jqgrid动态显示隐藏指定列

最新推荐文章于 2024-04-09 14:22:17 发布

原创最新推荐文章于 2024-04-09 14:22:17 发布 · 2.2w 阅读

5 ·

CC 4.0 BY-SA版权

JQGrid 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了两种jqgrid动态显示和隐藏指定列的方法。第一种是通过简单的JavaScript判断来控制列的显示状态。第二种是利用gridComplete或loadComplete事件来操作，推荐使用gridComplete，因为它在实际应用中更稳定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、最笨的方法来判断

jsp页面

	<s:hidden id="sksj" name="sksj" value="%{sksj}"></s:hidden>
	<s:hidden name="skdd" id="skdd" value="%{skdd}"></s:hidden>
    
<div class="ui-grid-handle" id="resizeH">&nbsp;</div>
<table id="tabGrid"></table>
<div id="pager"></div>

jQuery(function($) {
	var grid1 = $.extend(true, {}, BaseJqGrid, {
		resizeHandle: "#resizeH",
		pager 		: "#pager", // 分页工具栏
		datatype 	: "local",  // 点开页面不自动查询
                pager: null,//无分页工具栏
                url 		: _path + "/jczdgl/rwjczdsq_cxRdex.html",
		height		: "300px",
		colModel : [ 
			{label:'时间',name:'sksj', index: 'sksj',width:150,align:"center",sortable:false},
			{label:'地点',name:'jxdd', index: 'jxdd',width:150,align:"center",sortable:false},
	    ]
	});
	
	
	//加载表格
	$("#tabGrid").loadJqGrid(grid1);

	if(jQuery("#sksj").val()==0){
		$("#tabGrid").setGridParam().hideCol("sksj");
	}
	
	if(jQuery("#skdd").val()==0){
		$("#tabGrid").setGridParam().hideCol("jxdd");
	} 点开页面不自动查询
                pager: null,//无分页工具栏
                url 		: _path + "/jczdgl/rwjczdsq_cxRdex.html",
		height		: "300px",
		colModel : [ 
			{label:'时间',name:'sksj', index: 'sksj',width:150,align:"center",sortable:false},
			{label:'地点',name:'jxdd', index: 'jxdd',width:150,align:"center",sortable:false},
	    ]
	});
	
	
	//加载表格
	$("#tabGrid").loadJqGrid(grid1);

	if(jQuery("#sksj").val()==0){
		$("#tabGrid").setGridParam().hideCol("sksj");
	}
	
	if(jQuery("#skdd").val()==0){
		$("#tabGrid").setGridParam().hideCol("jxdd");
	}

通过

$("#tabGrid").setGridParam().hideCol("sksj");
$("#tabGrid").setGridParam().showCol("sksj");

来进行控制

二、利用加载的方法来操作。

	var TempGrid = $.extend(true,{},BaseJqGrid,{  
		resizeHandle:"#fixWidth",
		pager: "#pager", //分页工具栏  
	        multiselect:true,//显示复选框
	        shrinkToFit: true,
		rowNum : 15, // 每页显示记录数
		rowList : [15, 30, 50, 100], // 可调整每页显示的记录数
	        url: _path + '.html?doType=query', //这是Action的请求地址  
	        colModel:[
			
		{label:'工作流',name:'splmc', index: 'splmc',align:'left',width:'300px'},
		{label:'志愿',name:'zy', index: 'zy',align:'left',width:'80px'},
		],
		sortname: 'bmlbdm', //首次加载要进行排序的字段 
	 	sortorder: 'asc',
	 	loadComplete:function(){
	 		if ($("#fxezybmfs").val() == '0') {
	 			$("#tabGrid").hideCol("zy");
	 		}
	 	}
	});

不过我实际使用中建议使用因为 loadComplete 好像有什么问题，我给忘了，今天想起来就改过来最好用gridComplete

       gridComplete:function(){
          if ($("#fxezybmfs").val() == '0') {
              $("#tabGrid").hideCol("zy");
          }
      }

来控制

官方文档写

loadComplete

xhr

当从服务器返回响应时执行，xhr：XMLHttpRequest 对象

跟他一起经常用到的是

gridComplete

none

当表格所有数据都加载完成而且其他的处理也都完成时触发此事件，排序，翻页同样也会触发此事件