jqgrid - json - неверное значение - PullRequest
1 голос
/ 29 ноября 2011

У меня есть следующий 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"
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    }
}

Все ячейки доступны для редактирования.

Я пытаюсь перебрать каждую строку, а затем каждуюячейка, чтобы узнать количество свойств в «деталях».В режиме встроенного редактирования это должно быть текстовое поле, а значением текстового поля должно быть соответствующее количество свойств.

Пример - для Марка Калры ячейка сведений будет текстовым полем сзначение 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 какколичество свойств для каждой строки / ячейки.

Может ли кто-нибудь указать мне мою ошибку?

ОБНОВЛЕНО

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 отображается кактекстовое поле в режиме встроенного редактирования.

Если details существует + количество свойств в details> 3, то lname отображается как поле выбора в режиме встроенного редактирования.

1 Ответ

2 голосов
/ 29 ноября 2011

Метод setColProp устанавливает свойство для столбца, а не для ячейки в столбце.Поэтому, если вы установите в цикле setColProp для одного и того же столбца много раз, будет применен только последний параметр.Поскольку последняя строка (для «Любви Геберта») в ваших данных содержит 4 элемента в массиве details, будет использоваться только значение.

Следующая ошибка заключается в том, что вы определяете функцию gridCustomEdit, которая имеет ссылкук внешней переменной listCount.В этом случае есть только один экземпляр функции с последним значением переменной.Если вам нужно иметь много экземпляров функций с разными значениями, вы должны использовать замыкание.

В вашем случае, как мне кажется , вы можете реализовать все, что вам нужно, даже без использования замыкания и без Пользовательское редактирование (edittype:'custom' с custom_element и custom_value) .

Я полагаю, что все, что вам нужно сделать, это установить setColProp внутри onSelectRow (или до вызова editRow), а не внутри loadComplete.См. ответ для получения дополнительной информации.Если вам нужно изменить edittype столбца, вы можете сделать то же самое.Так, например, вы можете динамически установить edittype: "text" и установить editoptions с помощью dataInit, которые изменят value элемента.

Если это необходимо, вы даже можете динамически переключать edittype между edittype: "text" и edittype: "select" и задайте все editoptions, которые требуются.

Таким образом, вы получите простой и гибкий код, который вообще не использует пользовательское редактирование.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...