jqGrid – 如何根据* initial *列值设置自定义editoptions？
我正在使用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 ('Option1'...) { 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调用中获得了所需的所有数据。
总之，我需要在内联编辑模式下执行以下操作：
- 从DB值动态分配输入类型
- 从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的回答。 如果这是不好的forms，我真诚地道歉。 我只想奖励最适合我的解决方案。
如果使用倾斜编辑，则可以直接在代码中的某处调用editRow方法。 在editRow方法内部，将检查并使用colModel中与编辑相关的所有选项。 因此， 您可以动态更改任何选项，如editable ， editable edittype或editable 选项 。 答案显示了如何改变editable属性。 以同样的方式，您可以更改任何其他属性。
如果需要，可以在loadComplete事件句柄内设置有关编辑类型和选项的信息。 它具有表示从服务器发送的原始数据的data参数。 因此，您可以使用其他信息扩展数据，并根据信息为任何列设置editable ， editable edittype或editable edittype 。
试试这个：
1.为网格的onSelectRow事件定义处理程序（onSelectRow_handler）。
2.在onSelectRow处理程序中：
2.1。 将全局范围的变量（lastRow）设置为函数的id参数。
2.2。 调用jqGrid的editRow（）函数将网格置于编辑模式。 这将触发您定义为custom_element渲染器（myelem）的函数。
3.在myelem中：调用jqGrid的getRowData方法来获取刚刚选择进行编辑的行的行数据。 从那里，您可以获取ElementType列中的值，并执行决定要渲染的元素的逻辑。
你必须稍微调整我的代码，因为我没有100％端到端地测试它。 我确实validation了第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); } }