2

对话

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

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

4

1 回答 1

4

首先，我觉得你的问题很有趣，所以我+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}});
    }
});

结果你会得到这样的对话框

在此处输入图像描述

看演示。

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

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

将如下：

在此处输入图像描述

在此处查看相应的演示。

于 2012-01-24T14:17:46.933 回答