How to Change the ColModel with a function, using clearGridData,setGridParam and reloadGrid? JAVASCRIPT/HTML

问题

well.... first i need how change the colmodel whith a function that is call for a SELECT because my grid have periods and have a change with a select (cost and tons).

This is my GRID

        $("#grid").jqGrid({
                            .......
                            .......
                            url:'example1.json',
                            datatype: "json",
                            colNames: NAMESCOL,
                            colModel: MODEL,
                            .......
                            .......
                            caption:"Example 1"         
        });

where NAMESCOL and MODEL is:

var NAMESCOL = ["plant","town","name plant","Total","period1","period2","period3"];



var MODEL = [{name:'id_plant',index:'id_plant',width: 40},
          {name:'id_town',index:'id_town',width: 80},
              {name:'name_plant',index:'name_plant',width: 110},
              {name:'tot_ton',index:'tot_ton',width: 50},
              {name:'ton_per1',index:'ton_per1',width: 50},
              {name:'ton_per2',index:'ton_per2',width: 50},
              {name:'ton_per3',index:'ton_per3',width: 50}];

var MODEL2 = [{name:'id_plant',index:'id_plant',width: 40},
          {name:'id_town',index:'id_town',width: 80},
              {name:'name_plant',index:'name_plant',width: 110},
              {name:'tot_cost',index:'tot_ton',width: 50},
              {name:'cost_per1',index:'cost_per1',width: 50},
              {name:'cost_per2',index:'cost_per2',width: 50},
              {name:'cost_per3',index:'cost_per3',width: 50}];

and my function is:

 function CHANGE(){
           .......
           .......
           jQuery('#grid').jqGrid('clearGridData');
           jQuery('#grid').jqGrid('setGridParam', {colModel: MODEL2});
           jQuery('#grid').trigger('reloadGrid');       
 }

and try using jQuery('#grid').jqGrid('setGridParam', {data: MODEL2}); but only refreshes the same information.

回答1:

You don't included the format of "JSON" data returned from the server. An example of the data could clear many things. Moreover the knowledge of some other parameters like datatype, loadonce and jsonReader could be very important too. In any way I can give you some advises which should help to solve your problem.

First of all I recommend you don't specify any index property in the colModel. If no index property specified then jqGrid makes index property by copying of the value of the name property. Different values for index and name properties like

{name:'tot_cost',index:'tot_ton',width: 50}

are typically an error.

Seconds, the value of name property of colModel items will be used to construct id attributes of internal jqGrid structures and the properties of some internal JavaScript objects used by jqGrid. The values of name property need be just different (unique). To read the data for the column from the JSON input jqGrid uses jsonmap property (with some exceptions). Only if jsonmap property is not defined in colModel then the name property is used instead of jsonmap.

So if JSON input of jqGrid (the rows part typically) consists mostly from objects like

{"id_plant": ..., "id_town": ..., "name_plant": ..., "tot_ton": ..., ...}

you can use

jsonReader: {repeatitems: false}, // it can be skipped starting with jqGrid 4.4.5
colModel: [
    { name: "id_plant", width: 40 },
    { name: "id_town", width: 80 },
    { name: "name_plant", width: 110 },
    { name: "tot_ton" },
    { name: "ton_per1" },
    { name: "ton_per2" },
    { name: "ton_per3" }
]
cmTemplate: { width: 50 }, // default properties for colModel items
...

or for example

jsonReader: {repeatitems: false}, // it can be skipped starting with jqGrid 4.4.5
colModel: [
    { name: "c1", jsonmap: "id_plant", width: 40 },
    { name: "c2", jsonmap: "id_town", width: 80 },
    { name: "c3", jsonmap: "name_plant", width: 110 },
    { name: "c4", jsonmap: "tot_ton" },
    { name: "c5", jsonmap: "ton_per1" },
    { name: "c6", jsonmap: "ton_per2" },
    { name: "c7", jsonmap: "ton_per3" }
]
cmTemplate: { width: 50 }, // default properties for colModel items
...

It's important to understand that it's really difficult to change values of name properties of colModel (for example using setColProp method inside of beforeProcessing callback), but you can any time change the value of jsonmap property or specify the value of jsonmap property as a function. For example the following definition of the column tot_ton of colModel can solve your current problem:

{
    name: "tot_ton",
    jsonmap: function (obj) {
        return obj.tot_ton || obj.tot_cost;
    }
}

It try to read tot_ton from the item of input data. If the value of tot_ton is undefined (or null or 0) then the value of obj.tot_cost will be used. Depend of the type of the data of the tot_ton (for example if it's value is integer which can be 0) one can better use the following jsonmap instead:

{
    name: "tot_ton",
    jsonmap: function (obj) {
        return obj.tot_ton !== undefined ? obj.tot_ton : obj.tot_cost;
    }
}

I would recommend you to read this and this answers which show how one can adjust some grid options based on the JSON data returned from the server. If you place such adjustment in beforeProcessing callback then the processing of the server response will be done using new settings. In the way you can make jqGrid really dynamical.

来源：https://stackoverflow.com/questions/19844851/how-to-change-the-colmodel-with-a-function-using-cleargriddata-setgridparam-and

标签

javascript

html

json

jqgrid

reload