jqgrid - json - неправильное значение - json


1

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

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

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

Пример. Для Marc Kalra ячейка details будет текстовым полем со значением 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})
                       }
                   }
              })                              
           }                                        
       }                       
   }
}

КОД PLUGIN

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

  •  12
  •  1
  • 8 фев 2020 2020-02-08 08:05:10

1 ответ

2

Метод setColProp устанавливает свойство для столбца, а не для ячейки в столбце. Поэтому, если вы установите в цикле setColProp для одного и того же столбца много раз, будет применяться только последний параметр. Поскольку последняя строка (для "Love Hebert" ) в ваших данных имеет 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, которые требуются.

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

  • 8 фев 2020 2020-02-08 08:05:10