jqGrid - 如何根據* initial *列值設置自定義editoptions？

Question

我使用EF4和ASP.NET Web窗體的開源jqGrid插件。 我需要根據DB中的列值在可內聯編輯的網格行中設置輸入元素。 例如，第一行可以包含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 ，我確實注意到Oleg使用list:參數的好解決方案 ，但這似乎涉及額外的Ajax調用。 我想避免這種情況，因為我已經從網格的初始Ajax調用中獲得了所需的所有數據。

總之，我需要在內聯編輯模式下執行以下操作：

1. 從DB值動態分配輸入類型
2. 從DB字符串動態分配輸入值（對於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 ：對我來說重要的一件事是在調用editrow之后記得將editoptions設置為null 。 另外，正如Oleg在評論中提到的那樣，避免使用自定義元素允許我實現datepicker輸入而不會有額外的麻煩。 這對我的應用來說很重要，所以我最終接受了Oleg的回答，但我仍然贊同Walter的回答。 如果這是不好的形式，我真誠地道歉。 我只想獎勵最適合我的解決方案。

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。 調用jqGrid的editRow（）函數將網格置於編輯模式。 這將觸發您定義為custom_element渲染器（myelem）的函數。
3.在myelem中：調用jqGrid的getRowData方法來獲取剛剛選擇進行編輯的行的行數據。 從那里，您可以獲取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);
    }
}