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

Question

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

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

Answer 1

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

图片中有一件事，你发布的并且不是你问题的直接部分，我觉得有点奇怪：Column Chooser对话框在对话框的右下角没有可调整大小的部分。它可能是您使用的一些其他设置。我个人觉得最好让对话框可以调整大小。

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

$.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}});
    }
});

根据结果，您将拥有类似

的对话框

请参阅the demo。

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

$.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('<label style="float:left;position:relative;margin-left:0.6em;top:0.6em">Search:</label>');

将是以下内容：

查看相应的演示here。