Пользовательский интерфейс Multiselect при использовании с jqGrid для переупорядочения столбцов

Question

Пожалуйста, найдите диалог переупорядочения столбца и выбора столбца, который используется с jqGrid при использовании с ui.multiselect.js.

Я хочу изменить стиль плагина ui.multiselect без изменения файла js. Просто хочу переопределить несколько вещей. Во-первых, я хочу, чтобы два заголовка столбца были на одной высоте - выбрано 6 элементов и заголовок столбца справа Добавьте все. Я хочу изменить текст для 6 элементов, выбранных на Avlialble Columns и заголовок правого столбца на Скрытые столбцы. Как это можно сделать, переопределив плагин ui.multiselect в отдельном файле (js), поэтому, когда я вызываю 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}});
    }
});

В качестве результата у вас будет диалоговое окно, подобное

см. демо .

Вы также можете отключить поле поиска для средства выбора столбцов, если не планируете его использовать. Это сохранит ширину в диалоге:

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

будет следующим:

см. Соответствующую демонстрацию здесь .