使用
按照 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都比较旧,之前版本存在的问题没有解决掉,例如:
所以我去 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:'条列',
}
});