Как добавить пользовательский форматтер для jqgrid с динамической привязкой столбцов - PullRequest
Новая
       1

Как добавить пользовательский форматтер для jqgrid с динамической привязкой столбцов

7 голосов
/ 02 марта 2011

Это почти продолжение предыдущего вопроса. Проблема с отображением jqgrid с динамической привязкой столбцов

Я пытаюсь установить пользовательский форматер для столбцов, как показано ниже.Но ничего не происходит.Пожалуйста помоги.

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 от действия: 

 {
"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 для форматеров: 

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

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

1 Ответ

12 голосов
/ 03 марта 2011

Если вы используете 

"formatter": "InterFinalPriceFormatter"

Вы не устанавливаете значение свойства "formatter" для функции .

Один из способов решения этой проблемы - перебрать result.colModelList и проверить, что одно из них использует свойство «formatter» с некоторым строковым значением, для которого у вас есть реализация в качестве функции в JavaScript. Затем вы можете перезаписать свойство значением соответствующей функции форматирования.

Другим способом будет использование встроенных функций в форматере: 

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

Таким образом, у вас не будет четкого разделения кода и параметров сетки, но вы получите некоторую инкапсуляцию средства форматирования внутри сетки.

ОБНОВЛЕНО : Я надеюсь, что следующий фрагмент кода (непроверенный) мог бы прояснить, что я имею в виду под первым способом реализации 

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

ОБНОВЛЕНО 2: Было бы лучше зарегистрировать пользовательские средства форматирования и форматирования как стандартные средства форматирования , как это описано в старый ответ или ответ один . После этого можно реально использовать синтаксис, такой как "formatter": "InterFinalPriceFormatter", и jqGrid автоматически вызовет пользовательские функции $.fn.fmatter.InterFinalPriceFormatter и $.fn.fmatter.InterFinalPriceFormatter.unformat.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...