2011-03-02 21 views
6

Bu, önceki bir sorunun neredeyse devamıdır. Problem showing jqgrid with dynamic column bindingDinamik sütun bağlama ile jqgrid için özel Biçimlendirme nasıl eklenir

Aşağıdaki gibi sütunlar için bir Özel Biçimlendirici yerleştirmeye çalışıyorum. Ama hiçbir şey olmadı. Lütfen yardım et.

JSP: eylemden

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
    $.ajax({ 
    type : "GET", 
    url : "interFinalTbaAction", 
    data : "", 
    dataType : "json", 
    success : function(result) { 
     var colD = result.couponStripList, colM = result.colModelList; 
     jQuery("#InterFinalTBAGrid").jqGrid({ 
      data : colD.rootVar, 
      datatype : 'local', 
      gridview : true, 
      colModel : colM, 
      loadComplete : function(data) { 
      }, 
      loadError : function(xhr, status, error) { 
       alert('grid loading error'); 
      } 
     }); 
    }, 
    error : function(x, e) { 
     alert(x.readyState + " " + x.status + " " + e.msg); 
    } 
}); 
    }); 
</script> 
</head> 
<body> 
<table id="InterFinalTBAGrid"> 
<tr> 
    <td /> 
</tr> 
</table> 
</body> 
</html> 

JSON sonucu: biçemleyicilerle için

{ 
"colModelList": [ 
    { 
     "formatter": "CouponFormatter", 
     "index": 0, 
     "jsonmap": null, 
     "key": false, 
     "label": "Coupon", 
     "name": "coupon", 
     "resizable": true, 
     "search": true, 
     "sortable": false, 
     "title": true, 
     "width": 100 
    }, 
    { 
     "formatter": "InterFinalPriceFormatter", 
     "index": 1, 
     "jsonmap": null, 
     "key": false, 
     "label": "03-10-11", 
     "name": "prceCM", 
     "resizable": true, 
     "search": true, 
     "sortable": false, 
     "title": true, 
     "width": 150 
    }, 
    { 
     "formatter": "InterFinalPriceFormatter", 
     "index": 2, 
     "jsonmap": null, 
     "key": false, 
     "label": "04-13-11", 
     "name": "prceCMPlusOne", 
     "resizable": true, 
     "search": true, 
     "sortable": false, 
     "title": true, 
     "width": 150 
    }, 
    { 
     "formatter": "InterFinalPriceFormatter", 
     "index": 3, 
     "jsonmap": null, 
     "key": false, 
     "label": "05-12-11", 
     "name": "prceCMPlusTwo", 
     "resizable": true, 
     "search": true, 
     "sortable": false, 
     "title": true, 
     "width": 150 
    }, 
    { 
     "formatter": "InterFinalPriceFormatter", 
     "index": 4, 
     "jsonmap": null, 
     "key": false, 
     "label": "06-13-11", 
     "name": "prceCMPlusThree", 
     "resizable": true, 
     "search": true, 
     "sortable": false, 
     "title": true, 
     "width": 150 
     } 
    ], 
    "couponStripList": { 
    "rootVar": [ 
     { 
      "coupon": 5.0, 
      "prceCM": "103.734375,103.734375", 
      "prceCMPlusOne": "103.359375,99.03", 
      "prceCMPlusThree": "102.671875,102.671875", 
      "prceCMPlusTwo": "103.015625,103.015625" 
     }, 
     { 
      "coupon": 5.5, 
      "prceCM": "105.984375,105.984375", 
      "prceCMPlusOne": "105.671875,99.2", 
      "prceCMPlusThree": "105.046875,105.046875", 
      "prceCMPlusTwo": "105.359375,105.359375" 
     } 

    ] 
    }, 
    "deliveredDataTimestamp": "03-02-11 11:52:57", 
    "requestedTimestamp": null 
    } 

JavaScript işlevleri:

function CouponFormatter(cellValue, opts, rowObject) { 
return cellValue + "Testing coupon formatter"; 
    } 

function InterFinalPriceFormatter(cellValue, opts, rowObject) { 
return cellValue + "Testing price formatter"; 
} 

cevap

11

kullanırsanız

"formatter": "InterFinalPriceFormatter" 

"formatter" özelliğinin değerini işlev'a ayarlamazsınız.

Sorunu çözmenin bir yolu, result.colModelList aracılığıyla döngü yapmak ve JavaScript'de işlev olarak uygulamanıza sahip olduğunuz bazı dize değeri olan "biçimlendirici" özelliğini kullanıp kullanmadığını doğrulamaktır. Ardından, ilgili biçimlendirici işlevinin değeriyle mülkün üzerine yazabilirsiniz. Bir başka yolu biçimlendiricisine kullanımı inline fonksiyonlar olacak

: olacaksın şekilde

"formatter": "function (cellValue, opts, rowObject) { return cellValue + \"Testing price formatter\"; }" 

değil kodu ve ızgara parametrelerinin net bir ayrım vardır, ama içinizde biçimlendiricisine bazı kapsülleme almak Kafes.

GÜNCELLEME: Bu kayıt daha iyi olurdu: I (denenmemiş) bir sonraki kod parçası ben 2 GÜNCELLEME ilk uygulama yolu

var functionsMapping = { 
    // here we define the implementations of the custom formatter which we use 
    "CouponFormatter": function (cellValue, opts, rowObject) { 
     return cellValue + "Testing coupon formatter"; 
    }, 
    "InterFinalPriceFormatter": function (cellValue, opts, rowObject) { 
     return cellValue + "Testing price formatter"; 
    } 
}; 
$.ajax({ 
    type: "POST", 
    url: "interFinalTbaAction.action", 
    data: "", 
    dataType: "json", 
    success: function(result) { 
     var i, cm, colD = result.couponStripList, 
      colN = result.columnNames, 
      colM = result.colModelList; 
     for (i=0;i<colM.length,i++) { 
      cm = colM[i]; 
      if (cm.hasOwnProperty("formatter") && 
       functionsMapping.hasOwnProperty(cm.formatter)) { 
       // fix colM[i].formatter from string to the function 
       cm.formatter = functionsMapping[cm.formatter]; 
      } 
     } 
     jQuery("#dataGrid").jqGrid({/* all parameters from your code */}); 
    },   
    error: function(jqXHR, textStatus, errorThrown){ 
     alert("Error Occured!" + " | " + jqXHR.responseText + " | " + 
       textStatus + " | " + errorThrown); 
    } 
}); 

altında mı açıktır yapmak umuyoruz standart biçimlendiriciler gibi özel biçimlendiriciler ve biçimlendiriciler, the old answer veya answer one içinde açıklandığı gibi standart biçimlendiriciler olarak. Bundan sonra "formatter": "InterFinalPriceFormatter" gibi sözdizimini kullanabilir ve özel tanımlı işlevler $.fn.fmatter.InterFinalPriceFormatter ve $.fn.fmatter.InterFinalPriceFormatter.unformat otomatik olarak jqGrid tarafından çağrılacaktır.

+0

Satır içi işlev bölümünü anladım ancak ilk kısmı almadım. "Result.colModelList" ile döngü yaptığımda, biçimlendirici doldurma ile nasıl değiştiririm? Biraz sahte kod örneği koyabilir misiniz lütfen? – silpa

+0

Böyle bir şey var mı, var InterFinalPriceFormatter = "function (cellValue, opts, rowObject) {return cellValue + \" Test biçimi biçimlendirici \ ";}" – silpa

+0

@silpa: Cevabımı güncelliyorum. "Var InterFinalPriceFormatter =" işlevi (cellValue, opts, rowObject) {return cellValue + \ "Test biçimi biçimlendirici \";} ";' '' InterFinalPriceFormatter 'değişkenini' typeof (InterFinalPriceFormatter) === "string" 've 'var InterFinalPriceFormatter = işlev (cellValue, opts, rowObject) {return cellValue + \" Test fiyat biçimlendiricisi \ "; }; 'işlevi tanımlar ve' typeof (InterFinalPriceFormatter) === işlev "' " – Oleg