jqgrid-json-获取错误的值 [英] jqgrid - json - getting wrong value
问题描述
我有以下JSON:
{
"wrapper": {
"table": {
"rows": [
{
"cells": [
{
"fname": "Jack",
"label": "fname",
"editable": false
},
{
"lname": "Kalra",
"label": "lname",
"editable": true,
"details": [
{
"industry": "music"
},
{
"industry": "media"
}
]
}
]
},
{
"cells": [
{
"fname": "Steven",
"editable": true,
"label": "fname"
},
{
"lname": "Martini",
"editable": true,
"label": "lname"
}
]
},
{
"cells": [
{
"fname": "Andrea",
"editable": true,
"label": "fname"
},
{
"lname": "Dmello",
"editable": true,
"label": "lname",
"details": [
{
"industry": "finance"
},
{
"industry": "HR"
},
{
"industry": "media"
}
]
}
]
},
{
"cells": [
{
"fname": "James",
"label": "fname",
"editable": false
},
{
"label": "lname",
"lname": "Diamond",
"editable": true,
"details": [
{
"industry": "music"
},
{
"industry": "media"
}
]
}
]
},
{
"cells": [
{
"fname": "Aba",
"label": "fname",
"editable": true
},
{
"label": "lanme",
"lname": "Duck",
"editable": true,
"details": [
{
"industry": "finance"
},
{
"industry": "technology"
},
{
"industry": "media"
}
]
}
]
},
{
"cells": [
{
"fname": "Henry",
"label": "fname",
"editable": true
},
{
"label": "lname",
"lname": "Hebert",
"editable": true,
"details": [
{
"industry": "finance"
},
{
"industry": "HR"
},
{
"industry": "media"
},
{
"industry": "IT"
}
]
}
]
}
]
}
}
}
所有单元格都是可编辑的.
All cells are editable.
我试图遍历每一行，然后遍历每个单元格，以找出详细信息"中的属性数量.在嵌入式编辑模式下，它应该是一个文本字段，并且该文本字段的值应该是相应的属性数.
示例-对于Marc Kalra，详细信息单元格将是一个值为2的文本字段.
Example - for Marc Kalra, the details cell will be a text field with a value of 2.
这是我的代码
loadComplete: function(data){
var x, y, cellProp;
for (x = 0; x < data.wrapper.table.rows.length; x++) {
var cellCount = data.wrapper.table.rows[x].cells.length;
for (y = 0; y < cellCount; y += 1) {
cellProp = data.wrapper.table.rows[x].cells[y];
var prop, listCount, cellLabel;
listCount = data.wrapper.table.rows[x].cells[y].details.length;
cellLabel = data.wrapper.table.rows[x].cells[y].label;
function gridCustomEdit (value, options){
var el = document.createElement("input");
el.type="text";
el.value = listCount;
return el;
}
for (prop in cellProp) { if (prop === "details"){
$("#jqgrid").setColProp(cellLabel, {
editable: true,
edittype: "custom",
editoptions: {
custom_element: gridCustomEdit
}
});
}
}
}
}
问题-是上述代码中的el.value = listCount;始终返回4作为每行/单元格的属性数.
PROBLEM - is that el.value = listCount; in the above code always returns 4 as the number of properties for each row/cell.
有人可以指出我的错误吗?
Can someone point me my mistake?
已更新
loadComplete: function(data){
var x, y, cellProp;
for (x = 0; x < data.wrapper.table.rows.length; x++) {
var cellCount = data.wrapper.table.rows[x].cells.length;
for (y = 0; y < cellCount; y += 1) {
cellProp = data.wrapper.table.rows[x].cells[y];
var isEditable = cellProp.editable;
if (isEditable === false) {
$("#jqgrid").setColProp(cellProp.label, {
editable: false
});
}else {
var listCount, cellLabel;
listCount = data.wrapper.table.rows[x].cells[y].details.length;
cellLabel = data.form.summary.rows[x].cells[y].label;
$("#jqgrid").setColProp(cellLabel, {
editable: true,
editoptions: {
dataInit: function(elem){
$(elem).myPlugin({listCount: listCount})
}
}
})
}
}
}
}
插入代码
(function( $ ){
$.fn.extend({
myPlugin: function(options){
var defaults = {
listCount: 0
};
var options = $.extend(defaults, options);
var o = options;
alert(o.listCount);
if (o.listCount === 3){
$(elem).html("<input type='text' value='" + o.listCount + "'>")
} else {
$(elem).html("<select>") **// this should be a dropdown with values = properties of `details`**
}
}
})
})
网格代码
$("#jqgrid").jqGrid({
datatype: "json",
colNames:['fname','lname'],
colModel:[
{name:'fname',index:'fname'},
{name:'lname',index:'lname'},
],
jsonReader: {
root: "wrapper.table.rows",
repeatitems: false
},
onSelectRow: function(id){
$(this).jqGrid('editRow',id);
},
})
如果details存在+ details中的属性数量= 3，则在线性编辑模式下，lname将显示为文本字段.
If details exist + number of properties in details = 3, then lname is displayed as a text field in inline editing mode.
如果details存在+ details> 3中的属性数量，则在串联编辑模式下，lname将显示为选择字段.
If details exist + number of properties in details > 3, then lname is displayed as a select field in inline editing mode.
推荐答案
方法setColProp为该列而不是该列中的单元格设置属性.因此，如果在循环setColProp中为同一列设置多次，则仅应用最后的设置.因为数据中的最后一行("Love Hebert")在details数组中有4个项目，所以只会使用该值.
The method setColProp set property for the column and not for the cell in the column. So if you set in the loop setColProp for the same column many times only the last setting will be applied. Because the last row (for "Love Hebert") in your data has 4 items in the details array only the value will be used.
下一个错误是定义了gridCustomEdit函数，该函数引用了外部变量listCount.在这种情况下，只有函数的一个实例具有变量的最后一个值.如果您需要许多具有不同值的函数实例，则应使用闭包.
The next error is that you define gridCustomEdit function which has reference to external variable listCount. In the case there are only one instance of the function with the last value of the variable. If you need to have many function instances with different values you should use closure.
In your case it seems to me you can implement all what you need even without the usage of closure and without custom editing (edittype:'custom' with custom_element and custom_value).
我想您要做的就是将setColProp 设置在onSelectRow内部(或在editRow调用之前)而不是在loadComplete 内部.有关更多信息，请参见答案.如果需要更改列的edittype，则可以用相同的方法进行.因此，您可以例如动态设置edittype: "text"并将editoptions与dataInit一起设置，这会更改元素的value.
I suppose that all what you need to do is to set setColProp inside of onSelectRow (or before the call of editRow) and not inside of loadComplete. See the answer for more information. If you need to change the edittype of the column you can do this in the same way. So you can for example dynamically set edittype: "text" and set editoptions with dataInit which change the value of the element.
如果需要，您甚至可以在edittype: "text"和edittype: "select"之间动态切换edittype并设置所有必需的editoptions.
If it is needed you can even dynamically switch the edittype between edittype: "text" and edittype: "select" and set all editoptions which are required.
通过这种方式，您将获得简单灵活的代码，这些代码根本不需要使用自定义编辑.
In the way you will receive simple and flexible code which don't use custom editing at all.
这篇关于jqgrid-json-获取错误的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
