ui与jqGrid一起用于列重新排序时的多选定制 [英] ui Multiselect customization when used with jqGrid for column reordering

问题描述

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

Please find the column reordering and column chooser dialog as used with jqGrid when used with a ui.multiselect.js.

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

I want to alter the style of the ui.multiselect plugin without altering the js file. Just want to override a few things. Firstly I want the two column headers to be at same level height - 6 items selected and right side column header Add all. I wan to change the text for 6 items selected to Avlialble Columns and right column header to Hidden Columns. How can this be done by overriding the ui.multiselect plugin in a separate file (js) so when I call grid.jqGrid('columnChooser') it automacially applies the overriden styles.

推荐答案

首先，我发现您的问题非常有趣，因此我+1.

First of all I find your question very interesting, so +1 from me.

您发布的图片中的一件事，并不是问题的直接部分，似乎让我有些奇怪:列选择器"对话框在对话框的右下角没有可调整大小的部分.它可能是您使用的一些其他设置.我个人认为对话框可以调整大小.

One thing from the picture, which you posted and which is not directly the part of your question, seems me a little strange: the Column Chooser dialog has no resizable part at the right bottom corner of the dialog. It could be some additional settings which you use. I personally find better to have the dialog resizable.

现在回到您的主要问题.要更改默认文本所选项目"，全部添加"和全部删除"，您可以使用以下代码:

Now back to your main question. To change the default texts 'items selected', 'Add all' and 'Remove all' you can use the following code:

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

另外，您可以考虑使用以下方式更改列选择器"对话框的宽度以及左右面板之间的比例

Additionally you can consider to change the width of the Column Chooser dialog and the proportions between the left and the right panel with

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

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

or set the same parameters in the call of the 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}});
    }
});

作为结果，您将看到类似

As the results you will have the dialog like

请参见演示.

如果您不打算使用列选择器，还可以考虑禁用它.它将在对话框中保存宽度:

You can additionally consider to disable the searchable field of the column chooser if you don't plan to use it. It will save the width in the dialog:

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

已更新:如果您需要在列选择器"对话框中进行其他一些自定义，则可以在创建对话框后 手动进行更改.例如代码的结果

UPDATED: If you need some additional customization in the Column Chooser dialog you can do the changes manuallyafter the dialog is created. For example the results of the code

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

将是以下内容:

请参见相应的演示此处.

这篇关于ui与jqGrid一起用于列重新排序时的多选定制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！