jquery - ui 与 jqGrid 一起使用时的多选自定义以进行列重新排序

Question

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

我想改变 ui.multiselect 插件的样式而不改变 js 文件。只是想覆盖一些事情。首先，我希望两个列标题处于同一级别高度 - 选择 6 个项目，右侧列标题添加全部。我想将选定的 6 个项目的文本更改为“可用列”，并将右列标题更改为“隐藏列”。如何通过覆盖单独文件(js)中的 ui.multiselect 插件来完成此操作，以便当我调用 grid.jqGrid('columnChooser') 时，它会自动应用覆盖的样式。

Answer 1

首先，我发现你的问题很有趣，所以我+1。

您发布的图片中的一件事(不是您问题的直接部分)似乎有点奇怪:“列选择器”对话框在对话框的右下角没有可调整大小的部分。它可能是您使用的一些附加设置。我个人认为调整对话框大小更好。

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

$.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 .