3

このようなjsonオブジェクトとしてサーバーから受信したデータを表示する必要があります

{"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 ->OFF 1-> ON) これを行うには、ajax オプション "success" で関連付けました" 私のエンコーディング関数。ただし、この場合、「Loading ...」というメッセージが常に表示されたままになり、他のアクションは許可されません。再エンコード手順を「完全な」ajax オプションに移動しましたが、今回はうまくいくようです。しかし、何が自分の間違いなのか理解できず、自分の手順が機能するかどうかもわかりません。これは私のテーブルのajax構成です

    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の初心者で、コーディングスタイルが貧弱です）

4

1 に答える 1

7

要件を実装するために必要な多くの可能性があります。

多くの場合、事前定義されたformatter: "select"またはformatter: "checkbox"を使用できます0 ->OFF 1-> ON。

もう 1 つの可能性は、カスタム formatterおよびunformatterの使用です。カスタム フォーマッタは、対応する列のセルの HTML フラグメントの構築中に jqGrid によって使用される単なるコールバックです。テキストの共通表示が必要な場合、フォーマッタは次のようになります

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

カスタム フォーマッタの利点は、ソース テキストを変更できるだけでなく、他の列からの情報に基づいてセルを作成できることです(以下のrawDataパラメータを参照)。

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 番目の列のカスタム フォーマッタは次のようになります。

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);
    }
}

もう 1 つのオプションは、beforeProcessingコールバックの使用です。これは、現在のコードのロジックにほとんど近いものです。コールバック内では、データが jqGrid によって処理される前にbeforeProcessing、サーバーから返されるデータの変更を行うことができます。

于 2012-11-25T11:02:36.437 に答える