Как установить пользовательские опции редактирования на основе * начальных * значений столбца?

Question

Я использую плагин jqGrid с открытым исходным кодом для веб-форм EF4 и ASP.NET. Мне нужно установить входной элемент в строке сетки, редактируемой на основе, на основе значения столбца из БД. Например, первая строка может содержать DDL, вторая строка может содержать флажок и т. Д.

Я пытаюсь добиться этого, используя custom_element и custom_values, вот так:

$("#grid1").jqGrid({
    url: 'Default.aspx/getGridData',
    datatype: 'json',
    ...
    colModel: [
    ...
    //contains the input type ('select', etc.)
    { name: 'InputType', hidden:true }, 
    ...
    //may contain a string of select options ('<option>Option1</option>'...)
    { 
      name: 'Input', 
      editable:true, 
      edittype:'custom', 
      editoptions:{
         custom_element: /* want cell value from InputType column here */ , 
         custom_value:   /* want cell value from Input column here */ 
      } 
     }, 
    ...
    ]
});

jqGrid документы говорят, что я могу вызывать пользовательские функции для установки custom_element и custom_values, но я не вижу, как я могу захватывать значения столбцов и передавать их в свои пользовательские функции.

Для установки custom_values я заметил Хорошее решение Олега с использованием параметра list:, но, похоже, для этого потребовался дополнительный вызов Ajax. Я хочу избежать этого, так как у меня уже есть все данные, которые мне нужны от начального вызова Ajax для сетки.

В итоге мне нужно сделать следующее в режиме встроенного редактирования:

1. динамически назначать тип ввода из значения БД
2. динамически назначать входные значения (для DDL или флажки) из строки БД

Я также готов пропустить использование custom_element и custom_values, но тогда я все еще сталкиваюсь с той же проблемой динамической установки параметров edittype и editoptions:{value:}.

Есть идеи, как это сделать? Есть ли другой подход, который я должен использовать?

ОБНОВЛЕНИЕ : Спасибо за ваши усилия, чтобы помочь мне. Для каждого запроса приведен сокращенный пример моего ответа JSON:

{"d":[
{"Input":null,"InputType":"select"},
{"Input":"From downtown, proceed west on Interstate 70.", "InputType":"text"}
]}

С этими данными я хотел бы показать пустой выбор в одной строке и заполненное текстовое поле в следующей строке. Оба будут доступны для редактирования.

РЕШЕНИЕ : Я вернулся к этой проблеме, чтобы найти решение, которое не предполагает использование custom_element и custom_values. Вот мое решение (на основе принятого ответа ниже) изменить edittype и editoptions:

loadComplete: function () {
    var rowIds = $("#grid1").jqGrid('getDataIDs');

    $.each(rowIds, function (i, row) {
       var rowData = $("#grid1").getRowData(row);

       if (rowData.InputType == 'select') {
          $("#grid1").jqGrid('restoreRow', row);
                var cm = $("#grid1").jqGrid('getColProp', 'Input');
                cm.edittype = 'select';
                cm.editoptions = { value: "1:A; 2:B; 3:C" };
                $("#grid1").jqGrid('editRow', row);
                cm.edittype = 'text';
                cm.editoptions = null;
       }
   });
}

Nota Bene : Одна важная вещь для меня заключалась в том, чтобы не забыть установить editoptions обратно на null после вызова editrow. Также, как отметил Олег в комментариях, отказ от использования пользовательских элементов позволяет мне без проблем вводить ввод даты. Это было важно для моего приложения, поэтому я в конечном итоге принял ответ Олега, но я все равно также проголосовал за ответ Уолтера. Если это плохая форма, я искренне извиняюсь. Я просто хотел наградить решение, которое работало лучше всего для меня.

Answer 1

Если вы используете редактирование с наклоном, вы вызываете метод editRow где-то прямо в вашем коде. Внутри метода editRow будут рассмотрены и использованы все параметры из colModel, связанные с редактированием. Таким образом, вы можете динамически изменять любые параметры , например editable, edittype или editoptions. Ответ показывает, как можно изменить свойство editable. Таким же образом вы можете изменить любые другие свойства.

Если вы хотите, вы можете установить информацию о типе редактирования и опции внутри loadComplete дескриптора события. Он имеет параметр data, который представляет исходные данные, отправленные с сервера. Таким образом, вы можете расширить данные и другую информацию и установить editable, edittype или editoptions для любых столбцов на основе этой информации.

Answer 2

Попробуйте это:

1. Определить обработчик для события onSelectRow сетки (onSelectRow_handler).
2. Внутри обработчика onSelectRow:
2.1. Установить глобальную переменную (lastRow) для параметра id функции.
2.2. Вызовите функцию editRow () jqGrid, чтобы перевести сетку в режим редактирования. Это вызовет функцию, которую вы определили как средство визуализации custom_element (myelem).
3. Внутри myelem: вызовите метод getRowData из jqGrid, чтобы получить данные о строке, которую вы только что выбрали для редактирования. Оттуда вы можете получить значение в столбце ElementType и выполнить свою логику, которая решает, какой элемент визуализировать.

Вам придется немного подправить мой код, так как я не тестировал его на 100% сквозным. Я проверил, что все до шага 3 работает. Я не исследовал, как вы будете кодировать myvalue ().

function renderGrid () {

    $("#grid").jqGrid({
        datatype: "local",
        colNames: ['Id', 'ElementType', 'Name' ],
        colModel: [
            { name: 'Id', index: 'Id', key: true, hidden: true },
            { name: 'ElementType', index: 'ElementType', },
            { name: 'FullName', index: 'FullName',
              editable: true, edittype: 'custom', 
              editoptions: { custom_element: myelem, custom_value: myvalue} }],
        viewrecords: true,
        caption: "",
        autowidth: true,
        height: 'auto',
        forceFit: true ,
        onSelectRow: onSelectRow_handler           
    });


}

var lastRow = null;
function onSelectRow_handler(id) {

    if(id && id!==lastRow){            
        lastRow=id;
    }
    // editRow will send grid into edit mode which will trigger
    $("#grid").editRow(id, true);

}

function myelem(value, options) {
    var data = $("#grid").getRowData(lastRow);
    // the elementType column contains a key to
    // indicate what Input Element to render
    var elementType = data.ElementType;

    if (elementType == 'text') {        
        var el = document.createElement("input");
        el.type = "text";
        el.value = value;         
    }
    if (elementType == 'checkbox') {
        // etc
    }

    return el;
}

function myvalue(elem, operation, value) {
    if (operation === 'get') {
        return $(elem).find("input").val();
    } else if (operation === 'set') {
        $('input', elem).val(value);
    }
}