Сделать столбец флажком

Я загружаю сетку запросом к базе данных (в PHP с помощником CodeIgniter abd jqgrid). У меня нет проблем с отображением красивой сетки с моими данными.

Я хочу отобразить новый столбец с флажками, чтобы выбрать одну или несколько строк.

Невозможно добавить новый столбец после загрузки. Итак, я пытаюсь сделать так: - Столбец добавляется при создании сетки, - При создании я добавляю опцию «loadComplete» с функцией, - При отображении функция выполняется. Вот :

function ajoutCheckBox() {
    var grille = $("#users_grid");

    // Construire les checkbox dans la colonne D
    grille.setColProp('Dest', {editable: true});
    grille.setColProp('Dest', {edittype: 'checkbox'});
    grille.setColProp('Dest', {editoptions: { value: "True:False" }});
    grille.setColProp('Dest', {formatter: "checkbox"});
    grille.setColProp('Dest', {formatoptions: { disabled: true}});



    // Insérer la valeur false dans toutes les lignes de la colonne D
    var index   = grille.jqGrid('getGridParam', '_index');

    for(i in index) {
        grille.jqGrid('setCell', i, 'Dest', 'False', {});
    }
}

Как видите, грис называется "#users_grid" и столбец "Dest".

Моя проблема: ничего не добавляется...

Спасибо за помощь !

XB

РЕДАКТИРОВАТЬ: я нашел следующее решение:

  • Столбец флажков добавлен в оператор colModel,
  • Чтобы инициализировать значение и активировать флажки (они отключаются при создании !), я использую функцию обратного вызова "loadComplete".

Код очень простой, но мне трудно найти...

Создание сетки:

loadComplete: function() { ajoutCheckBox() },
colModel:[.... {"name":"Env","index":"Env","width":30,"hidden":false,"align":"left","edittype":"checkbox","formatter":"checkbox","formatoptions":"{ disabled: false}","editable":true,"editoptions":{"editoptions":"{ value: \"True:False\",  defaultValue: \"False\" }}","size":10}}, ....]

Функция обратного вызова:

function ajoutCheckBox() {
    var grille = $("#users_grid");
    var index = grille.jqGrid('getGridParam', '_index');

    for(i in index) { // Pour toutes les lignes du tableau
        grille.jqGrid('setCell', i, 'Env', 'False');
        $('#'+i).find("input:checkbox").removeAttr('disabled');
    }
}

Вроде не оптимизировано, но работает!


checkbox jqgrid
person Albiréo    schedule 14.06.2014    source источник

Ответы (1)


arrow_upward
9
arrow_downward

Невозможно добавить новый столбец после загрузки, но можно сделать скрытый столбец видимым. Вам нужно просто определить столбец с флажком (вы можете использовать formatoptions: { disabled: false}, если это необходимо), и вы можете использовать showCol внутри обратного вызова loadComplete, чтобы сделать столбец видимым, если требуется, или принудительно скрыть его с помощью метода hideCol.

ОБНОВЛЕНО: если я правильно понимаю, что вы хотите (после обсуждения в комментариях), то демонстрация должна демонстрировать решение:

  • демонстрация создает столбец с флажками на основе входных данных (на основе логического значения, существующего для каждой строки). Полные входные данные будут сохранены jqGrid автоматически во внутренних параметрах data и _index. Отобразится первая страница с данными.
  • демонстрация использует beforeSelectRow для обработки щелчка/установки/снятия флажков. Поскольку datatype: "local" используются в jqGrid, я использовал getLocalRow для доступа к внутреннему объекту, который представляет данные строки. При установке/снятии флажков я изменил соответствующее поле данных. В результате можно изменить состояние некоторых флажков, сменить страницу и вернуться на первую страницу. Вы увидите, что измененное состояние флажков было сохранено.

Ниже приведены наиболее важные части кода:

var mydata = [
        ...
        { id: "4", ..., closed: true, ... },
        ....
    ];

$("#list").jqGrid({
    datatype: "local",
    data: mydata,
    colModel: [
        ...
        {name: "closed", width: 70, align: "center",
            formatter: "checkbox", formatoptions: { disabled: false},
            edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
            stype: "select", searchoptions: { sopt: ["eq", "ne"], 
                value: ":Any;true:Yes;false:No" } },
        ...
    ],
    beforeSelectRow: function (rowid, e) {
        var $self = $(this),
            iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]),
            cm = $self.jqGrid("getGridParam", "colModel"),
            localData = $self.jqGrid("getLocalRow", rowid);
        if (cm[iCol].name === "closed") {
            localData.closed = $(e.target).is(":checked");
        }

        return true; // allow selection
    },

    ...
});
person Oleg    schedule 16.06.2014
comment
Спасибо за ваш ответ! - person Albiréo; 16.06.2014
comment
Спасибо за ваш ответ ! Я думаю, что приму ваше предложение, поработаю над вашей идеей. Я понял, что забыл опцию loadonce:true : она позволяет сразу загрузить все свойства объекта сетки (возможно, я ошибаюсь...). Эта опция дает мне все, что мне нужно для обновления строк или столбцов. - person Albiréo; 16.06.2014
comment
@Albiréo: Добро пожаловать! Если у вас возникнут проблемы с реализацией, вы можете добавить свой текущий код к тексту вашего вопроса. Если вы напишете небольшой комментарий к моему ответу об изменениях в тексте вашего вопроса, я мог бы его перечитать и постараюсь вам помочь. - person Oleg; 16.06.2014
comment
Я добавляю свойства столбца при создании, это проще и работает. Я использую функцию обратного вызова loadComplete для инициализации логического значения для флажков. Но они не редактируются, несмотря на вариант editable:true. Я ищу причину. - person Albiréo; 17.06.2014
comment
@Albiréo: Извините, но я не совсем понимаю, что вы делаете. Если вы используете formatter: "checkbox" для какого-либо столбца, тогда значения флажка будут автоматически установлены на основе входных значений (true, yes или 1 после проверки флажков). Никаких дополнительных действий в loadComplete не требуется. Если вы хотите, чтобы чекбоксы не были отключены, вам нужно использовать свойство formatoptions: { disabled: false} для столбца. Чтобы обнаружить изменения состояния флажка, вы можете использовать обратный вызов beforeSelectRow. Например, можно использовать setCell для сохранения нового состояния флажка. - person Oleg; 17.06.2014
comment
@Albiréo: Если я правильно понимаю, что вы хотите, то демонстрация должна продемонстрировать решение. - person Oleg; 17.06.2014
comment
Я понял, что не понимаю, что именно нужно сделать, чтобы иметь дополнительный столбец флажков в сетке, загруженной из базы данных. С помощью тура и некоторых поисков я постепенно нахожу решение. Теперь я получил столбец без loadComplete, но он находится в режиме только для чтения. Я сравниваю код, который вы мне прислали (спасибо) и код, который у меня есть. - person Albiréo; 18.06.2014
comment
@Albiréo: Последняя демонстрация использует datatype: "local", поэтому внутренние data и _index параметры jqGrid будут заполнены входными данными. Средство форматирования позволяет отображать любые данные (например, логические значения) в любой другой форме (например, флажки). Таким образом, инициализация флажков может производиться автоматически. Другая проблема возникает, если вы хотите, чтобы внутренние данные jqGrid изменялись при нажатии на ячейку сетки. beforeSelectRow останавливается здесь. Поскольку в демо используется datatype: "local", то getLocalRow — лучший выбор. - person Oleg; 18.06.2014
comment
Я последовал вашему совету: они дали интересные результаты, которые я оставил для других целей. Спасибо. Я написал свое решение в области вопросов. - person Albiréo; 20.06.2014