ui与jqGrid一起用于列重新排序时的多重定制

当与ui.multiselect.js一起使用时，请查找与jqGrid一起使用的列重新排序和列选择器对话框。

我想改变ui.multiselect插件的样式而不改变js文件。 只想覆盖一些东西。 首先，我希望两个列标题处于相同的级别高度 – 选择了6个项目，右侧列标题添加全部。 我想将选定的6个项目的文本更改为Avlialble Columns，将右列标题更改为隐藏列。 如何通过在单独的文件（js）中覆盖ui.multiselect插件来实现这一点，所以当我调用grid.jqGrid（’columnChooser’）时，它会自动应用覆盖样式。

Answer 1

首先，我发现你的问题非常有趣，所以+1来自我。

你发布的图片中有一件事，也不是问题的直接部分，我觉得有点奇怪：“列选择器”对话框在对话框的右下角没有可resize的部分。 它可能是您使用的一些其他设置。 我个人觉得最好让对话框可以resize。

现在回到你的主要问题。 要更改默认文本的“已选项”，“全部添加”和“全部删除”，您可以使用以下代码：

$.extend($.ui.multiselect, { locale: { addAll: 'Make all visible', removeAll: 'Hidde All', itemsCount: 'Avlialble Columns' } }); 

此外，您可以考虑更改“列选择器”对话框的宽度以及左侧和右侧面板之间的比例

 $.extend(true, $.jgrid.col, { width: 500, msel_opts: {dividerLocation: 0.5} }); 

或者在columnChooser的调用中设置相同的参数：

 $grid.jqGrid('navButtonAdd', '#pager', { caption: "", buttonicon: "ui-icon-calculator", title: "Choose columns", onClickButton: function () { $(this).jqGrid('columnChooser', {width: 500, msel_opts: {dividerLocation: 0.5}}); } }); 

作为结果，您将拥有对话框

看演示 。

如果您不打算使用它，您还可以考虑禁用列选择器的可搜索字段。 它将在对话框中保存宽度：

 $.extend(true, $.ui.multiselect, { defaults: { searchable: false }, locale: { addAll: 'Make all visible', removeAll: 'Hidde All', itemsCount: 'Avlialble Columns' } }); 

更新 ：如果在“列选择器”对话框中需要一些其他自定义，则可以在创建对话框后手动执行更改。 例如代码的结果

 $(this).jqGrid('columnChooser', {width: 550, msel_opts: {dividerLocation: 0.5}}); $("#colchooser_" + $.jgrid.jqID(this.id) + ' div.available>div.actions') .prepend('Search:'); 

将是以下内容：

在这里看到相应的演示。