Hinzufügen von benutzerdefinierten Formatter-für jqgrid mit der dynamischen Spalte binden

Dies ist fast eine Fortsetzung von einer vorherigen Frage. Problem zeigt jqgrid mit der dynamischen Spalte binden

Ich versuche setzen, um eine Benutzerdefinierte Formatierung für die Spalten wie unten aus. Aber es passiert nichts. Bitte helfen Sie.

JSP:

   <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-Ergebnis aus Aktion:

 {
"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-Funktionen für Formatierer:

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

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

InformationsquelleAutor silpa | 2011-03-02

jqgrid

12

Wenn Sie
```
"formatter": "InterFinalPriceFormatter"
```
Sie nicht, setzen Sie den Wert von "formatter" - Eigenschaft, um die Funktion.

Einen Weg, um das problem zu beheben ist, um eine Schleife durch result.colModelList und stellen Sie sicher, dass eine Verwendung der "formatter" - Eigenschaft mit einigen string-Wert, für die Sie hat-Implementierung der Funktion in den JavaScript. Dann können Sie überschreiben die Eigenschaft mit dem Wert des entsprechenden formatter-Funktion.

Anderen Weg wird sein, verwenden Sie inline-Funktionen in den Formatierer:
```
"formatter": "function (cellValue, opts, rowObject) { return cellValue + \"Testing price formatter\"; }"
```
In der Weise, die Sie nicht hat, eine klare Trennung von code-und der grid-Parameter, aber Sie erhalten einige Kapselung der formatter innerhalb des Gitters.

AKTUALISIERT: ich hoffe, dass der nächste code-fragment (ungetestet) könnte deutlich machen, was ich meine unter der ersten Umsetzung Weg
```
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);
    }
});
```
AKTUALISIERT 2: Es wäre besser, registrieren die benutzerdefinierten Formatierungen und unformatters als standard-Formatierer wie es beschrieben wird, in die alte Antwort oder in Antwort. Danach kann man wirklich die syntax wie "formatter": "InterFinalPriceFormatter" und die benutzerdefinierten Funktionen $.fn.fmatter.InterFinalPriceFormatter und $.fn.fmatter.InterFinalPriceFormatter.unformat wird automatisch aufgerufen, von jqGrid.
- Ich Verstand die inline-Funktion Teil, aber nicht den ersten Teil. Wenn ich eine Schleife durch die result.colModelList wie Ersetze ich mit der formatter-Funktion? Können Sie etwas pseudo-code-Beispiel bitte?
- Ist es so etwas wie "var InterFinalPriceFormatter =" Funktion (cellValue, entscheidet sich, rowObject) { return cellValue + \"Test-Preis-formatter\"; }"
- Ich aktualisiert meine Antwort. Die var InterFinalPriceFormatter = " function (cellValue, opts, rowObject) { return cellValue + \"Testing price formatter\"; }"; definiert die variable InterFinalPriceFormatter mit typeof(InterFinalPriceFormatter) === "string" und var InterFinalPriceFormatter = function (cellValue, opts, rowObject) { return cellValue + \"Testing price formatter\"; }; definiert die Funktion und die typeof(InterFinalPriceFormatter) === function""
- Danke. Funktioniert perfekt. Ich war auch auf der Suche in diesem linksenden javascript-Funktionen, die über json, bevor Sie aktualisiert die Antwort.
- Danke, Oleg, funktioniert bei mir auch!
- Sie sind herzlich willkommen! Es ist relativ alt zu beantworten. Jetzt würde ich dir empfehlen, besser zu erweitern $.fn.fmatter Objekt definierten Formatierungen, die Sie direkt verwenden als Zeichenfolge: formatter: "InterFinalPriceFormatter". Sie finden entsprechende code-Beispiele hier und im die Antwort. Es ist wichtig, dass es ermöglicht, um formatter as string formatter: "dynamicLink" statt der Funktion formatter: dynamicLinkFunction.
- ich bin Nummer verwenden formatter, so will ich ändern dezimalstellenanzeige dynamisch ist es poosible?
- Sie können ändern Sie irgendeinem - Eigenschaft des colModel inclusive formatoptions. Sie können setColProp Methode, die zu einer Vereinfachung verpasst. Wenn Sie laden die Informationen aus dem server, die Sie ändern können formatoptions innerhalb von beforeProcessing Rückruf. Im Falle der Füllung von jqGrid wird verwendet, die geändert colModel Werte.
- Ich bin, sorry: wie bekomme ich die Spalte name oder ID ? rowObject.columnid wird nicht funktionieren !
- Man kann nicht Antwort auf Ihre Frage, ohne zu wissen, details. Die datatype Sie verwenden? Verwenden Sie loadonce (wenn datatype: "json")? Welches format haben input data von jqGrid (die jsonReader Sie verwenden)? Wie colModel definiert ist? und so weiter. Es ist besser, du fragst neue Frage stellen, wo Sie alle details.
- href="http://stackoverflow.com/questions/20634037/jqsuite-php-get-column-name-or-id">meine Frage
InformationsquelleAutor Oleg

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.