jqGrid的表显示之前修改从Ajax调用返回的数据 [英] jqgrid modify data returned from ajax call before display in table

问题描述

我要显示我从服务器接收的一些数据，这样的JSON对象

I have to display some data that I receive from the server as json object like this

{"rowndx":"0","rows":"25","rowstotal":"100","rowsdata":[ 
["00","DEVICE001","T0_IHOME","1","***","1","10"], 
["01","DEVICE002","NO_DEVICE","1","***","1","10"],
["02","DEVICE003","NO_DEVICE","0","***","1","10"],
.....

在一个表中显示接收到的数据，我想做出必要的更改增加单元的数字或文字代替数字（如0 - >关闭1> ON） 要做到这一点，我有关联的阿贾克斯选择成功我的编码功能。在这种情况下，但是，仍然总是可见的消息加载和任何其他操作是允许的。 我动了我的重新编码程序的完整的AJAX选项，这一次，它似乎工作。 但我不明白什么是我的错，我不知道如果我的程序能正常工作。 这是我的表AJAX配置

Before displaying the received data in a table I would like to make changes where necessary adding units to the numbers or replacing the numbers with words (eg 0 ->OFF 1-> ON) To do this I have associated at the ajax option "success" my encoding function. In this case, however, remains always visible the message "Loading ..." and no other action is permitted. I moved my re-encoding procedure to the "complete" ajax option and this time it seems to work. But I did not understand what was my mistake and I do not know if my procedure can work. This is my table ajax configuration

    url      : "devtbl.json",
    mtype    : "POST",
    datatype : "json",
    postData : ......

    ajaxGridOptions: {
      type       : 'post',
      contentType: 'application/json',
      async      : false,
      complete   : DEVparse_serverdata,
      error      : function() { alert('Something bad happened. Stopping');},
    },

    jsonReader : {
      root        : "tablerows",
      page        : "currentpage",
      total       : "totalpages",
      records     : "totalrecords",
      cell        : "",
      id          : "0",
      userdata    : "userdata",
      repeatitems : true
    },

和我的编码功能

    function DEVparse_serverdata(js , textStatus) {

  var jsontablereply = {} ;
  var rowsxpage_int  = parseInt(UB.rowsxpage.DEVtable) ;
  var jsonreply =  jQuery.parseJSON(js.responseText) ;

  jsontablereply.currentpage  = "" + (1 + (parseInt(jsonreply.rowndx) / rowsxpage_int));
  jsontablereply.totalpages   = "" + parseInt((parseInt(jsonreply.rowstotal) + (rowsxpage_int-1)) / rowsxpage_int) ;
  jsontablereply.totalrecords = jsonreply.rowstotal;

  jsontablereply.tablerows = [] ;
  $.each(jsonreply.rowsdata, function(ndx, row) {
     var rowarray = [] ;

     rowarray[0] = row[0] ;
     rowarray[1] = row[1] ;
     rowarray[2] = row[2] ;
     rowarray[3] = row[3] ;
     rowarray[4] = row[4] ;

     switch (row[2]) {
       case "NO_DEVICE":
            rowarray[5] = "***" ;
            break ;

       case "T0_IHOME":
            rowarray[5] = "T=" + row[5] + "°C" ;
            break ;
     }
     jsontablereply.tablerows[ndx] = rowarray ;
  }) ; // each

  jQuery("#DEVtbl")[0].addJSONData(jsontablereply);
}

（我是用jQuery初学者我的编码风格是穷人）

(I am a beginner with Jquery my coding style is poor)

推荐答案

有，你要实现你的要求很多可能性。

There are many possibilities which you have to implement your requirements.

在许多情况下，可以使用predefined <一href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3a$p$pdefined_formatter#formatter_type_select">formatter: 选择或<一href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3a$p$pdefined_formatter#$p$pdefined_format_types">formatter: 复选框的情况下 0 - ＆GT;关闭1→ ON 。

In many case one can use predefined formatter: "select" or formatter: "checkbox" for the case 0 ->OFF 1-> ON.

另一种可能性是自定义格式的使用和<一href="http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3acustom_formatter#unformatting">unformatter.定制格式化器是刚回调其相应的列的单元的HTML片断的建筑期间将使用jqGrid的。如果你需要共同显示一些文本的格式看起来像

Another possibility is the usage of custom formatter and unformatter. The custom formatter is just callback which will be used by jqGrid during building of HTML fragment of cells of the corresponding column. If you need common displaying of some text the formatter will look like

formatter: function (cellValue) { return $.jgrid.htmlEncode(cellValue); }

自定义格式的好处是，你可以在源文本不仅很多任何修改，但可以构建单元包含基于信息的等栏目的（见 RAWDATA 参数如下图）

The advantage of custom formatter is that you can not only many any modification of the source text, but you can build the cell contain based of information from other columns (see rawData parameter below)

formatter: function (cellValue, options, rawData, action) {
    // options is the the object defined as
    //         {rowId:rowId, colModel:cm, gid:gridId, pos:colpos }
    // rawData contains the representation of the WHOLE row
    //         the most problem of the value is that it is in the same
    //         format as the input data. So if will be array of items
    //         in your case or if could be XML fragment for the row.
    //         Additional problem one will have in case of usage of
    //         loadonce:true. Ath the first load the rawData will be
    //         array of strings and on later could be named object
    //         with the properties corresponds to the column names.
    // action is typically non-important and is 'add' or 'edit'
}

例如5个栏的自定义格式可以是

For example the custom formatter of the 5-th column can be

formatter: function (cellValue, options, rawData, action) {
    switch (rawData[2]) {
    case "NO_DEVICE":
        return "***";
    case "T0_IHOME":
        return "T=" + $.jgrid.htmlEncode(cellValue) + "°C" ;
    default:
        return $.jgrid.htmlEncode(cellValue);
    }
}

还有一个选择是 beforeProcessing 回调的使用。这主要是靠近tothe对你目前的code逻辑。在 beforeProcessing 回调可以使数据returend的任何修改弗朗服务器的在的数据将被jqGrid的处理。

One more option is the usage of beforeProcessing callback. It is mostly close tothe logic of your current code. Inside of beforeProcessing callback you can make any modifications of the data returend fron the server before the data will be processed by jqGrid.

这篇关于jqGrid的表显示之前修改从Ajax调用返回的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！