Проблема с отображением jqgrid с динамической привязкой столбцов

Question

Я пытаюсь передать colModel и столбцы из стойки. Прямо как в вопросе jqGrid и динамическая привязка столбцов

Я не уверен, что мне не хватает. Пожалуйста помоги. Потратил довольно много времени, пытаясь понять это правильно.

JSP:

  <script type="text/javascript">
  $(document).ready(function(){
   $.ajax( 
     {
    type: "POST",          
    url: "interFinalTbaAction.action",          
    data: "",          
   dataType: "json",          
    success: function(result){               
      colD = result.couponStripList;               
     colN = result.columnNames;               
     colM = result.colModelList;  

       jQuery("#dataGrid").jqGrid({ 
      jsonReader : {
                repeatitems: false,
                root:"rootVar",
                cell: "",
                id: "0"
            },

      url: 'SomeUrl/Getdata',                   
      datatype: 'jsonstring',                   
      mtype: 'POST',                   
      datastr : colD,                   
      colNames:colN,                   
      colModel :colM,                   
      loadComplete: function(data){alert('loaded');},                   
      loadError: function(xhr,status,error){
         alert('error');
      }               
   })          
 },         
   error: function(x, e){
    alert(x.readyState + " "+ x.status +" "+ e.msg);             
  }       
}); 
});  
</script>

 <h2>Inter Final Prices</h2>
 <table id="dataGrid">
</table>
</html>

JSON, который повторяет мои действия:

           {
"colModelList": [
    {
        "index": "prceCM",
        "jsonmap": null,
        "key": false,
        "name": "prceCM",
        "resizeable": true,
        "search": true,
        "sortable": false,
        "title": "03-01-11",
        "width": 300
    },
    {
        "index": "prceCMPlusOne",
        "jsonmap": null,
        "key": false,
        "name": "prceCMPlusOne",
        "resizeable": true,
        "search": true,
        "sortable": false,
        "title": "04-01-11",
        "width": 300
    },
    {
        "index": "prceCMPlusTwo",
        "jsonmap": null,
        "key": false,
        "name": "prceCMPlusTwo",
        "resizeable": true,
        "search": true,
        "sortable": false,
        "title": "05-01-11",
        "width": 300
    },
    {
        "index": "prceCMPlusThree",
        "jsonmap": null,
        "key": false,
        "name": "prceCMPlusThree",
        "resizeable": true,
        "search": true,
        "sortable": false,
        "title": "06-01-11",
        "width": 300
    },
    {
        "index": "coupon",
        "jsonmap": null,
        "key": false,
        "name": "coupon",
        "resizeable": true,
        "search": true,
        "sortable": false,
        "title": null,
        "width": 300
    }
   ],
   "columnNames": [
    "prceCM",
    "prceCMPlusOne",
    "prceCMPlusTwo",
    "prceCMPlusThree",
    "coupon"
  ],
   "couponStripList": {
    "rootVar": [
        {
            "coupon": 5.0,
            "prceCM": "Not Available",
            "prceCMPlusOne": "Not Available",
            "prceCMPlusThree": "Not Available",
            "prceCMPlusTwo": "Not Available"
        },
        {
            "coupon": 5.5,
            "prceCM": "Not Available",
            "prceCMPlusOne": "Not Available",
            "prceCMPlusThree": "Not Available",
            "prceCMPlusTwo": "Not Available"
        },
        {
            "coupon": 6.0,
            "prceCM": "Not Available",
            "prceCMPlusOne": "Not Available",
            "prceCMPlusThree": "Not Available",
            "prceCMPlusTwo": "Not Available"
        },
        {
            "coupon": 6.5,
            "prceCM": "Not Available",
            "prceCMPlusOne": "Not Available",
            "prceCMPlusThree": "Not Available",
            "prceCMPlusTwo": "Not Available"
        },
        {
            "coupon": 7.0,
            "prceCM": "Not Available",
            "prceCMPlusOne": "Not Available",
            "prceCMPlusThree": "Not Available",
            "prceCMPlusTwo": "Not Available"
        }
    ]
   },
   "deliveredDataTimestamp": null,
   "requestedTimestamp": null
 }

Спасибо.

Answer 1

В моих тестах ваш код работал. Тем не менее, поскольку тема вашего вопроса интересна для многих пользователей jqGrid, я решил написать вам несколько небольших ошибок и оптимизаций в вашем коде и данных JSON.

Первая и самая важная проблема связана с идентификаторами предметов. Настройка id:"0" внутри jsonReader неверна. Его можно использовать, только если элементы данных являются массивом, а не объектами с именованными свойствами (repeatitems:false). В настоящее время в качестве идентификаторов строк будут использоваться целые числа 1,2, ... Я настоятельно рекомендую включать информацию об идентификаторах в элементы rootVar данных JSON.

Следующая проблема. Свойство "title": "03-01-11" неверно. "title" свойство colModel имеет значение логическое , поэтому его следует изменить на "title": true. Близкая проблема: свойство resizable, которое вы используете как resizeable, вероятно, более правильное в английском языке, но оно будет игнорироваться jqGrid.

Теперь небольшие оптимизации:

1. Вы можете изменить с datatype:'jsonstring', datastr:colD на datatype: 'local', data: colD.rootVar
2. Добавить gridview: true параметр.
3. Настройка url: 'SomeUrl/Getdata' и mtype: 'POST' будут игнорироваться в случае datatype:'jsonstring' или datatype:'local'. Поэтому вы должны просто удалить параметры jqGrid.
4. Поскольку jsonmap не будет использоваться в вашей модели данных, я предлагаю вам удалить его из данных JSON.
5. Мне кажется, лучше использовать дополнительное label свойство colModel. В этом случае вам больше не понадобится colNames (columnNames внутри ваших данных).

Оригинал вашей демонстрации вы можете увидеть здесь (я сделал только изменения type в `type:" GET ", потому что у меня нет активных серверных компонентов и сохранил JSON в виде текстового файла) , То же самое демо после предложенных мной модификаций: здесь .

Основным ограничением пути является то, что все данные будут локальными . Таким образом, вы можете использовать локальную сортировку, фильтрацию и разбиение на страницы, но если вы действительно хотите иметь сортировку, фильтрацию и разбиение на страницы на стороне сервера, чем включать больше дополнительного кода в свой jqGrid.

Полученный код, который я предлагаю вам:

$(document).ready(function () {
    $.ajax({
        type: "GET",
        url: "DynamicColumnBinding1.txt",
        dataType: "json",
        success: function(result){
            var colD = result.couponStripList,
                colM = result.colModelList;

            $("#dataGrid").jqGrid({
                datatype: 'local',
                data: colD.rootVar,
                gridview: true,
                colModel :colM,
                height: "auto",
                loadComplete: function(data){
                    alert('loaded');
                },
                loadError: function(xhr,status,error){
                    alert('error');
                }
            });
        },
        error: function(x, e){
            alert(x.readyState + " "+ x.status +" "+ e.msg);
        }
    });
});

соответствующие данные JSON могут быть, например, следующими

{
    "colModelList": [
        {
            "index": "prceCM",
            "label": "CM",
            "name": "prceCM",
            "width": 100
        },
        {
            "index": "prceCMPlusOne",
            "label": "CM + 1",
            "name": "prceCMPlusOne",
            "width": 100
        },
        {
            "index": "prceCMPlusTwo",
            "label": "CM + 2",
            "name": "prceCMPlusTwo",
            "width": 100
        },
        {
            "index": "prceCMPlusThree",
            "label": "CM + 3",
            "name": "prceCMPlusThree",
            "width": 100
        },
        {
            "index": "coupon",
            "label": "Coupon",
            "name": "coupon",
            "align": "right",
            "sorttype": "number",
            "formatter": "number",
            "formatoptions": {
                "thousandsSeparator": ","
            },
            "width": 100
        }
    ],
    "columnNames": [
        "prceCM",
        "prceCMPlusOne",
        "prceCMPlusTwo",
        "prceCMPlusThree",
        "coupon"
    ],
    "couponStripList": {
        "rootVar": [
            {
                "id": 71,
                "coupon": 5.0,
                "prceCM": "Not Available",
                "prceCMPlusOne": "Not Available",
                "prceCMPlusThree": "Not Available",
                "prceCMPlusTwo": "Not Available"
            },
            {
                "id": 72,
                "coupon": 5.5,
                "prceCM": "Not Available",
                "prceCMPlusOne": "Not Available",
                "prceCMPlusThree": "Not Available",
                "prceCMPlusTwo": "Not Available"
            },
            {
                "id": 73,
                "coupon": 6.0,
                "prceCM": "Not Available",
                "prceCMPlusOne": "Not Available",
                "prceCMPlusThree": "Not Available",
                "prceCMPlusTwo": "Not Available"
            },
            {
                "id": 74,
                "coupon": 6.5,
                "prceCM": "Not Available",
                "prceCMPlusOne": "Not Available",
                "prceCMPlusThree": "Not Available",
                "prceCMPlusTwo": "Not Available"
            },
            {
                "id": 75,
                "coupon": 7.0,
                "prceCM": "Not Available",
                "prceCMPlusOne": "Not Available",
                "prceCMPlusThree": "Not Available",
                "prceCMPlusTwo": "Not Available"
            }
        ]
    },
    "deliveredDataTimestamp": null,
    "requestedTimestamp": null
}