关于jqGrid的列选择‘columnChooser’功能模块的学习总结

使用

按照 jqGrid中文实例 的介绍，首先需要调用ui.multiselect.js、ui.multiselect.css和jquery.jqGrid.js文件，且ui.multiselect.js、ui.multiselect.css要在jquery.jqGrid.js前面。并且还给了一个实例：

// 列选择实例
jQuery("#colch").jqGrid({
	url:ctx+'/JSONData',
	datatype: "json",
	colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
	colModel:[
		{name:'id',index:'id', width:55},
		{name:'invdate',index:'invdate', width:90},
		{name:'name',index:'name asc, invdate', width:100},
		{name:'amount',index:'amount', width:80, align:"right"},
		{name:'tax',index:'tax', width:80, align:"right"},
		{name:'total',index:'total', width:80,align:"right"},
		{name:'note',index:'note', width:150, sortable:false, hidden:true}
	],
	rowNum:10,
	width:700,
	rowList:[10,20,30],
	pager: '#pcolch',
	sortname: 'invdate',
	shrinkToFit :false,
	viewrecords: true,
	sortorder: "desc",
	caption:"Column Chooser Example"
});
jQuery("#colch").jqGrid('navGrid','#pcolch',{add:false,edit:false,del:false,search:false,refresh:false});
jQuery("#colch").jqGrid('navButtonAdd','#pcolch',{
	caption: "Columns",
	title: "Reorder Columns",
	onClickButton : function (){
		jQuery("#colch").jqGrid('columnChooser');
	}
});

实现效果：

在这里给的实例中，他是将按钮组合到右下角的地方；在实际使用的时候，可以在任何地方通过调用该方法：

jQuery("#colch").jqGrid('columnChooser');

，就可以将列选择窗口显示出来了。

修改

虽然看着很简单，但是网上给的信息不够全，在使用过程中碰到不少问题，所以对它进行了一些修改。

我所用的项目上面ui.multiselect.js和jquery.jqGrid.js都比较旧，之前版本存在的问题没有解决掉，例如：

当点击Remove all后，在点击Add all，没有任何反应；甚至有时候点击Add all，会将已选择的列移到未选择栏中。

所以我去 jqGrid的官方github 上下载了最新版的，替换了ui.multiselect.js文件和jquery.jqGrid.js中的columnChooser方法。

在ui.multiselect.js文件中我也进行了修改，如下

• 项目要求有固定列和和并列，columnChooser中提供了移动列的功能，但是在使用过程中出现不少问题，所以就找到了options的sortable，将它关闭了。（options是内置的，目前没找哪里可以外置修改）

options: {
	// sortable: true, 关闭排序
	sortable: false,
	searchable: true,
	doubleClickable: true,
	animated: 'fast',
	show: 'slideDown',
	hide: 'slideUp',
	dividerLocation: 0.6,
	availableFirst: false,
	nodeComparator: function(node1,node2) {
		var text1 = node1.text(),
		    text2 = node2.text();
		return text1 == text2 ? 0 : (text1 < text2 ? -1 : 1);
	}
},

• 最新版的ui.multiselect.js文件有一个从未选择栏鼠标移动到选择栏时，长度每次都会缩短的问题

_applyItemState: function(item, selected) {
	// 修改因拖动添加造成的长度缩短
	item.prop("style","");
	if (selected) {
		if (this.options.sortable)
			item.children('span').addClass('ui-icon-arrowthick-2-n-s').removeClass('ui-helper-hidden').addClass('ui-icon');
		else
			item.children('span').removeClass('ui-icon-arrowthick-2-n-s').addClass('ui-helper-hidden').removeClass('ui-icon');
		item.find('a.action span').addClass('ui-icon-minus').removeClass('ui-icon-plus');
		this._registerRemoveEvents(item.find('a.action'));
		
	} else {
		item.children('span').removeClass('ui-icon-arrowthick-2-n-s').addClass('ui-helper-hidden').removeClass('ui-icon');
		item.find('a.action span').addClass('ui-icon-plus').removeClass('ui-icon-minus');
		this._registerAddEvents(item.find('a.action'));
	}
	
	this._registerDoubleClickEvents(item);
	this._registerHoverEvents(item);
},

• 中文显示。

_updateCount: function() {
	this.element.trigger('change');
	// this.selectedContainer.find('span.count').text(this.count+" "+$.ui.multiselect.locale.itemsCount);
	this.selectedContainer.find('span.count').text($.ui.multiselect.locale.itemsCount1+this.count+$.ui.multiselect.locale.itemsCount2);
},
$.extend($.ui.multiselect, {
	// 替换为中文
	/*locale: {
		addAll:'Add all',
		removeAll:'Remove all',
		itemsCount:'items selected'
	}*/
	locale: {
		addAll:'添加所有列',
		removeAll:'移除所有列',
		itemsCount1:'已选择',
		itemsCount2:'条列',
	}
});