动态更改 colModel、colData 和 colNames

Question

我尝试在用户单击“下个月”按钮或“上个月”按钮后更改 colModel、colNames 和 ColData。但这不起作用。

您可以在此处看到用户单击“上个月”按钮后的更改。 开始的 colNames 显示如下示例：
“ID”、“姓名”、01.07、02.07、03.07 ... 31.07 并且为 33 列创建了 colModel 显示下面的数据结构。

如果用户按下“上个月”按钮，新的 colNames 必须显示如下 “ID”，“姓名”，01.06，02.06，03.06，.... 30.06 现在必须仅为 32 列

创建 colModel

我在 PHP 中创建动态 colNames 和 colModel，首先将显示实际月份。

在这里你可以看到html部分

<div id="jqgrid">
    <div id="navigation-top">
        <input class="button-pos ui-corner-all ui-state-loading ui-state-default" type="submit" name="prevMonth" id="prevMonth" value="<< vorheriger Monat" onClick="showMonth('prevmonth', <?php echo $this->month; ?>, <?php echo $this->year; ?>);" />
        <input class="button-pos ui-corner-all ui-state-loading ui-state-default" type="submit" name="nextMonth" id="nextMonth" value="nächster Monat >>" onClick="showMonth('nextmonth', <?php echo $this->month; ?>, <?php echo $this->year; ?>);" />
    </div>

    <table id="grid"><tr><td></td></tr></table>
</div>

这是我使用的示例代码。

var lastsel;

$(document).ready($(function(){ 
    $.ajax({
        url:'/get-jq-grid-json/',
        datatype: 'json',
        type: 'POST',
        success: function(result){
            var obj = $.parseJSON(result);
            var colD = obj.couponStripList;
            var colM = obj.colModelList;
            var colN = obj.columnNames;

            var lastSel;

            $("#grid").jqGrid({
                url:'/get-jq-grid-json/',
                jsonReader : {
                    root: "rows",
                    cell: "",
                    repeatitems: true,
                    id: "invid"
                }, 
                mytype: 'POST',
                datatype: 'local',
                data: colD.rows,
                colNames: colN,
                colModel: colM,
                height: 'auto',
                width: 'auto',
                onSelectRow: function(id) {
                    if(id && id!==lastSel){ 
                        $("#grid").restoreRow(lastSel); 
                        lastSel=id; 
                    } 
                    $("#grid").editRow(id, true); 
                },
                editurl:'/price-calendar/save-jq-grid/locationId/',
                loadComplete: function(data){
                    alert('loaded');
                },
                loadError: function(xhr,status,error){
                    alert('error ' + error );
                }
            });
        },
        error: function(x, e){
            alert(x.readyState + " "+ x.status +" "+ e.msg);
        }


    });
    setTimeout(function() {$("#grid").jqGrid('setGridParam',{datatype:'json'}); },500);

现在我尝试更改 colNames 等，但它不起作用。使用 $("#grid").jqGrid('setGridParam', { data: obj.couponStripList.rows }); 正确更改日期但 coNames 不会通过 setLabel 更改，我如何更改 colModel？

 function showMonth(param, month, year){
        if(param == 'prevmonth'){
            if(month > 1){
                month -= 1;
            }
        }

        if(param == 'nextmonth'){
            if(month < 12){
                month += 1;
            }
        }

        $.post('/price-calendar/get-jq-grid-json/locationId/<?php echo $this->locationId; ?>/serviceId/<?php echo $this->serviceId; ?>/' + param + '/' + month + '/year/' + year, 
        function(data){ 


            $("#grid").jqGrid('clearGridData');
             var obj = $.parseJSON(data);

             for($i = 0; $i <= obj.columnNames.length; $i++)
             {

                 var colNames = $("#grid").jqGrid('getGridParam', 'colNames');
                  $("#grid").jqGrid('setLabel', colNames[$i], obj.columnNames);
             }

            $("#grid").jqGrid('setGridParam', { data: obj.couponStripList.rows });
            $("#grid").trigger("reloadGrid");

        });

这里有两个 json 数据结构，第一个是开始 json 数据，第二个是用户单击“上个月”按钮时的新 json 数据

{
   "colModelList":[
      {
         "name":"id",
         "index":"id",
         "width":100,
         "hidden":true,
         "key":true
      },
      {
         "name":"name",
         "index":"name",
         "width":200
      },
      {
         "name":"date01",
         "index":"date01",
         "width":45,
         "editable":true
      },
      {
         "name":"date02",
         "index":"date02",
         "width":45,
         "editable":true
      },
      {
         "name":"date03",
         "index":"date03",
         "width":45,
         "editable":true
      },
      {
         "name":"date04",
         "index":"date04",
         "width":45,
         "editable":true
      },
      {
         "name":"date05",
         "index":"date05",
         "width":45,
         "editable":true
      },
      {
         "name":"date06",
         "index":"date06",
         "width":45,
         "editable":true
      },
      {
         "name":"date07",
         "index":"date07",
         "width":45,
         "editable":true
      },
      {
         "name":"date08",
         "index":"date08",
         "width":45,
         "editable":true
      },
      {
         "name":"date09",
         "index":"date09",
         "width":45,
         "editable":true
      },
      {
         "name":"date10",
         "index":"date10",
         "width":45,
         "editable":true
      },
      {
         "name":"date11",
         "index":"date11",
         "width":45,
         "editable":true
      },
      {
         "name":"date12",
         "index":"date12",
         "width":45,
         "editable":true
      },
      {
         "name":"date13",
         "index":"date13",
         "width":45,
         "editable":true
      },
      {
         "name":"date14",
         "index":"date14",
         "width":45,
         "editable":true
      },
      {
         "name":"date15",
         "index":"date15",
         "width":45,
         "editable":true
      },
      {
         "name":"date16",
         "index":"date16",
         "width":45,
         "editable":true
      },
      {
         "name":"date17",
         "index":"date17",
         "width":45,
         "editable":true
      },
      {
         "name":"date18",
         "index":"date18",
         "width":45,
         "editable":true
      },
      {
         "name":"date19",
         "index":"date19",
         "width":45,
         "editable":true
      },
      {
         "name":"date20",
         "index":"date20",
         "width":45,
         "editable":true
      },
      {
         "name":"date21",
         "index":"date21",
         "width":45,
         "editable":true
      },
      {
         "name":"date22",
         "index":"date22",
         "width":45,
         "editable":true
      },
      {
         "name":"date23",
         "index":"date23",
         "width":45,
         "editable":true
      },
      {
         "name":"date24",
         "index":"date24",
         "width":45,
         "editable":true
      },
      {
         "name":"date25",
         "index":"date25",
         "width":45,
         "editable":true
      },
      {
         "name":"date26",
         "index":"date26",
         "width":45,
         "editable":true
      },
      {
         "name":"date27",
         "index":"date27",
         "width":45,
         "editable":true
      },
      {
         "name":"date28",
         "index":"date28",
         "width":45,
         "editable":true
      },
      {
         "name":"date29",
         "index":"date29",
         "width":45,
         "editable":true
      },
      {
         "name":"date30",
         "index":"date30",
         "width":45,
         "editable":true
      },
      {
         "name":"date31",
         "index":"date31",
         "width":45,
         "editable":true
      }
   ],
   "columnNames":[
      "Id",
      "Preis",
      "01.07",
      "02.07",
      "03.07",
      "04.07",
      "05.07",
      "06.07",
      "07.07",
      "08.07",
      "09.07",
      "10.07",
      "11.07",
      "12.07",
      "13.07",
      "14.07",
      "15.07",
      "16.07",
      "17.07",
      "18.07",
      "19.07",
      "20.07",
      "21.07",
      "22.07",
      "23.07",
      "24.07",
      "25.07",
      "26.07",
      "27.07",
      "28.07",
      "29.07",
      "30.07",
      "31.07"
   ],
   "couponStripList":{
      "rows":[
         {
            "invid":"1",
            "id":"1",
            "name":"Bild",
            "date01":"28.50",
            "date02":"28.50",
            "date03":"28.50",
            "date04":"28.50",
            "date05":"28.50",
            "date06":"28.50",
            "date07":"28.50",
            "date08":"28.50",
            "date09":"28.50",
            "date10":"28.50",
            "date11":"28.50",
            "date12":"30.95",
            "date13":"30.95",
            "date14":"30.95",
            "date15":"30.95",
            "date16":"30.95",
            "date17":"30.95",
            "date18":"30.95",
            "date19":"30.95",
            "date20":"30.95",
            "date21":"35.50",
            "date22":"35.50",
            "date23":"35.50",
            "date24":"35.50",
            "date25":"35.50",
            "date26":"35.50",
            "date27":"35.50",
            "date28":"35.50",
            "date29":"35.50",
            "date30":"35.50",
            "date31":"35.50",
            "0":0,
            "1":null,
            "2":false,
            "3":false
         }
      ]
   }
}

第二个json数据

{
   "colModelList":[
      {
         "name":"id",
         "index":"id",
         "width":100,
         "hidden":true,
         "key":true
      },
      {
         "name":"name",
         "index":"name",
         "width":200
      },
      {
         "name":"date01",
         "index":"date01",
         "width":45,
         "editable":true
      },
      {
         "name":"date02",
         "index":"date02",
         "width":45,
         "editable":true
      },
      {
         "name":"date03",
         "index":"date03",
         "width":45,
         "editable":true
      },
      {
         "name":"date04",
         "index":"date04",
         "width":45,
         "editable":true
      },
      {
         "name":"date05",
         "index":"date05",
         "width":45,
         "editable":true
      },
      {
         "name":"date06",
         "index":"date06",
         "width":45,
         "editable":true
      },
      {
         "name":"date07",
         "index":"date07",
         "width":45,
         "editable":true
      },
      {
         "name":"date08",
         "index":"date08",
         "width":45,
         "editable":true
      },
      {
         "name":"date09",
         "index":"date09",
         "width":45,
         "editable":true
      },
      {
         "name":"date10",
         "index":"date10",
         "width":45,
         "editable":true
      },
      {
         "name":"date11",
         "index":"date11",
         "width":45,
         "editable":true
      },
      {
         "name":"date12",
         "index":"date12",
         "width":45,
         "editable":true
      },
      {
         "name":"date13",
         "index":"date13",
         "width":45,
         "editable":true
      },
      {
         "name":"date14",
         "index":"date14",
         "width":45,
         "editable":true
      },
      {
         "name":"date15",
         "index":"date15",
         "width":45,
         "editable":true
      },
      {
         "name":"date16",
         "index":"date16",
         "width":45,
         "editable":true
      },
      {
         "name":"date17",
         "index":"date17",
         "width":45,
         "editable":true
      },
      {
         "name":"date18",
         "index":"date18",
         "width":45,
         "editable":true
      },
      {
         "name":"date19",
         "index":"date19",
         "width":45,
         "editable":true
      },
      {
         "name":"date20",
         "index":"date20",
         "width":45,
         "editable":true
      },
      {
         "name":"date21",
         "index":"date21",
         "width":45,
         "editable":true
      },
      {
         "name":"date22",
         "index":"date22",
         "width":45,
         "editable":true
      },
      {
         "name":"date23",
         "index":"date23",
         "width":45,
         "editable":true
      },
      {
         "name":"date24",
         "index":"date24",
         "width":45,
         "editable":true
      },
      {
         "name":"date25",
         "index":"date25",
         "width":45,
         "editable":true
      },
      {
         "name":"date26",
         "index":"date26",
         "width":45,
         "editable":true
      },
      {
         "name":"date27",
         "index":"date27",
         "width":45,
         "editable":true
      },
      {
         "name":"date28",
         "index":"date28",
         "width":45,
         "editable":true
      },
      {
         "name":"date29",
         "index":"date29",
         "width":45,
         "editable":true
      },
      {
         "name":"date30",
         "index":"date30",
         "width":45,
         "editable":true
      }
   ],
   "columnNames":[
      "Id",
      "Preis",
      "01.06",
      "02.06",
      "03.06",
      "04.06",
      "05.06",
      "06.06",
      "07.06",
      "08.06",
      "09.06",
      "10.06",
      "11.06",
      "12.06",
      "13.06",
      "14.06",
      "15.06",
      "16.06",
      "17.06",
      "18.06",
      "19.06",
      "20.06",
      "21.06",
      "22.06",
      "23.06",
      "24.06",
      "25.06",
      "26.06",
      "27.06",
      "28.06",
      "29.06",
      "30.06"
   ],
   "couponStripList":{
      "rows":[
         {
            "invid":"1",
            "id":"1",
            "name":"Bild",
            "date01":"28.50",
            "date02":"28.50",
            "date03":"28.50",
            "date04":"28.50",
            "date05":"28.50",
            "date06":"28.50",
            "date07":"28.50",
            "date08":"28.50",
            "date09":"28.50",
            "date10":"28.50",
            "date11":"28.50",
            "date12":"30.95",
            "date13":"30.95",
            "date14":"30.95",
            "date15":"30.95",
            "date16":"30.95",
            "date17":"30.95",
            "date18":"30.95",
            "date19":"30.95",
            "date20":"30.95",
            "date21":"35.50",
            "date22":"35.50",
            "date23":"35.50",
            "date24":"35.50",
            "date25":"35.50",
            "date26":"35.50",
            "date27":"35.50",
            "date28":"35.50",
            "date29":"35.50",
            "date30":"35.50"
            "0":0,
            "1":null,
            "2":false,
            "3":false
         }
      ]
   }
}

Answer 1

（在评论和编辑中回答。请参阅没有答案的问题，但问题在评论中解决（或在聊天中扩展））

OP 写道：

我解决了这个问题。一定是

var colModel= $("#grid").jqGrid('getGridParam', 'colModel');
$("#grid").jqGrid('setLabel', colModel[i]['name'], obj.columnNames[i]);

而不是

var colNames = $("#grid").jqGrid('getGridParam', 'colNames');
$("#grid").jqGrid('setLabel', colNames[$i], obj.columnNames);

在这里您可以看到新代码：

function showMonth(param, month, year){

        console.log(month);
        if(param == 'prevmonth'){
            if(month > 1){
                month -= 1;
            }
        }

        if(param == 'nextmonth'){
            if(month < 12){
                month += 1;
            }
        }

        console.log(month);

        $.post('/price-calendar/get-jq-grid-json/locationId/<?php echo $this->locationId; ?>/serviceId/<?php echo $this->serviceId; ?>/' + param + '/' + month + '/year/' + year, 

        function(data){ 

            $("#grid").jqGrid('clearGridData');
            var obj = $.parseJSON(data);

             for(i = 0; i < obj.columnNames.length; i++)
             {
                 var colModel= $("#grid").jqGrid('getGridParam', 'colModel');
                 var colName = colModel[i]['name'];
                 $("#grid").jqGrid('setLabel', colName, obj.columnNames[i]);

             }

            $("#grid").jqGrid('setGridParam', { colModel: obj.colModelList});
            $("#grid").jqGrid('setGridParam', { data: obj.colData.rows});

            $("#grid").trigger("reloadGrid");
        });
    }