[英]jqGrid - How to set custom editoptions based on *initial* column values?
我使用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调用中获得了所需的所有数据。
总之,我需要在内联编辑模式下执行以下操作:
我也愿意跳过使用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的回答。 如果这是不好的形式,我真诚地道歉。 我只想奖励最适合我的解决方案。
如果您使用倾斜编辑,则可以直接在代码中的某处调用editRow
方法。 在editRow
方法内部,将检查并使用colModel
中与编辑相关的所有选项。 所以, 你可以动态地改变像任何选项 editable
, edittype
或editoptions
。 答案显示了如何改变editable
属性。 以同样的方式,您可以更改任何其他属性。
如果需要,可以在loadComplete
事件句柄内设置有关编辑类型和选项的信息。 它具有表示从服务器发送的原始数据的data
参数。 这样可以延长使用等信息的数据,并设置editable
, edittype
或editoptions
基于信息的任何列。
试试这个:
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);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.