Пользовательский вызов форматирования в jqgrid не работает

Question

Я пытаюсь вызвать функцию форматирования из моего jqgrid.I поставить предупреждение внутри моей функции форматирования. Но это не сработало. Я последовал за http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter учебником.

Вот мой код

function jqGridMethod() { 
    var jsonData = { 
     "model" : [ { 
      "name" : "code", 
      "index" : "code", 
      "width" : "100", 
      "sortable" : false, 
      "editable" : false, 
      formatter : "showlink", 
      formatoptions : { 
       baseLinkUrl : 'javascript:', 
       showAction : "seasonEdit('", 
       addParam : "');" 
      } 
     }, { 
      "name" : "name", 
      "index" : "name", 
      "width" : 100 
     },{ 
      "name" : "colorCode", 
      "index" :"colorCode" , 
      "width" : 100, 
      formatter:colorformatter 

     },{ 
      "name" : "startDay", 
      "index" : "startDay", 
      "width" : 100 
     }, { 
      "name" : "startMonth", 
      "index" : "startMonth", 
      "width" : 100 
     },{ 
      "name" : "endDay", 
      "index" : "endDay", 
      "width" : 100 
     },{ 
      "name" : "endMonth", 
      "index" : "endMonth", 
      "width" : 100 
     },{ 
      "name" : "encryption", 
      "index" : "encryption", 
      "width" : "100", 
      "hidden" : true, 
     } ], 
     "sort" : { 
      "sortcount" : "2", 
      "sortColumn1" : "#jqgh_jqGrid_list_grid_code", 
      "sortColumn2" : "#jqgh_jqGrid_list_grid_name" 
     }, 
     "column" : [ "Code", "Name","Color","Start Day","Start Month","End Day","End Month", "Encryption" ], 
     "url" : { 
      "serverurl" : "/pms/season/list" 
     }, 
    }; 
    jqGridData(jsonData); 
} 
///////////////////////////////// 


    function colorformatter(cellvalue, options, rowObject) 
{ 
    //return '<img src="'+cellvalue+'" />'; 

    alert("cellvalue"+cellvalue); 
// format the cellvalue to new format 
    var myGrid = $('#jqGrid_list_grid'), 
    selRowId = myGrid.jqGrid ('getGridParam', 'selrow'), 
    celValue = myGrid.jqGrid ('getCell', selRowId, 'Color'); 
return cellvalue; 
} 

Есть ли что случилось с моим code.Why DonT мое предупреждение получает работал?

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

Answer 1

Вы отправили только небольшую часть своего кода, но внутри можно увидеть много проблем.

Первый: вы должны быть осторожны в типе используемых свойств. Например, значение width свойство colModel элементов должно быть числом вместо строки ("width" : 100 вместо "width" : "100"). Более важно то, что значение formatter должно быть функцией вместо строки, которая содержит имя функции. JavaScript анализирует код JavaScript и видит все переменные, определенные в той же области (например, вы можете определить функцию colorformatter непосредственно внутри функции jqGridMethod) или во внешней области. Если вы получите colModelс сервера с помощью вызова Ajax, вы не можете напрямую указать функцию, потому что JSON не поддерживает тип fuction. В этом случае вы должны использовать jqGrid версии 4.7 или выше (рекомендую использовать free jqGrid 4.9.2). Он позволяет вам определять общие шаблоны, которые используют пользовательский форматтер, и использовать строку в качестве значения formatter. См. here. В качестве альтернативы вы можете определить пользовательские форматирования, установив colorformatter свойство объекта $.fn.fmatter. См. the code или another one, который определяет formatter: "dynamicLink" и formatter: "checkboxFontAwesome4".

Вторая важная проблема заключается в понимании цели форматирования. Проблема заключается в следующем. jqGrid необходимо заполнить контент (тело) сетки. Веб-браузер предоставляет интерфейс для динамического управления содержимым страницы HTML, но очень важно понять, что изменение одного элемента на странице сопровождается изменением других элементов. Например, если вы вставляете строку в таблицу, то положение строк ниже и положение других элементов ниже таблицы можно изменить. Точно так же может быть изменен стиль CSS и другие элементы. Поэтому веб-браузер должен пересчитать многие свойства всех существующих элементов страницы после любой модификации HTML-страницы. Процесс имеет название reflow (см. here). Для повышения производительности заполнения большой сетки jqGrid используйте следующий сценарий. Он собирает содержимое всего тела сетки в виде фрагментов HTML-строк, а затем размещает innerHTML свойство <tbody> элемент сетки как одна операция. Это значительно улучшает производительность заполнения большой сетки. Теперь должно быть ясно, что formatter должен вернуть фрагмент HTML ячейки как строку. Точно так же вы не можете использовать myGrid.jqGrid ('getCell', selRowId, 'Color'), чтобы получить значение из тела сетки, потому что пользовательский форматтер будет называться до тело будет заполнено.

Если пользовательский форматтер должен получить доступ к значению из другого столбца той же строки, то он должен использовать параметры options или rowObject. В случае использования free jqGrid вы можете удалить параметр rowObject, потому что вся необходимая информация находится в options. Ряд текущей строки заполнения находится в options.rowId. Значения от входных данных для текущей строки можно найти в options.rowData. Чтобы получить значение от Color, вы можете использовать options.rowData.Color.

Если вам нужно использовать старые версии jqGrid, вы должны использовать параметр rowObject. Формат данных объекта rowObject зависит от многих факторов. Во время начального заполнения сетки объект rowObject содержит данные в том же формате, что и входные данные, возвращаемые с сервера. Если вы загружаете данные с сервера в формате

{ 
    "total": "xxx", 
    "page": "yyy", 
    "records": "zzz", 
    "rows": [ 
     {"id":"12", "cell":["cell11", "cell12", "cell13"]}, 
     {"id":"34", "cell":["cell21", "cell22", "cell23"]}, 
      ... 
    ] 
} 

, то вы должны использовать rowObject[i] для доступа Color колонки, и вы должны использовать i, соответствующий номер Color столбца в colModel массиве. options.pos может быть индексом, который вы должны использовать вместо i, но значение может различаться с 1 по 3, зависит от того, используете ли вы или нет опции multiselect: true, subGrid: true или rownumbers: true.

Если вы используете другой формат входных данных

{ 
    "total": "xxx", 
    "page": "yyy", 
    "records": "zzz", 
    "rows": [ 
     {"id":"12", "colName1":"cell11", "Color":"cell12", ...}, 
     {"id":"34", "colName1":"cell21", "Color":"cell22", ...}, 
      ... 
    ] 
} 

тогда rowObject.Color поможет вам необходимые данные.

В случае использования первого (массива) формата входных данных и с использованием loadonce: true дополнительно у вас будет более сложная ситуация. Во время начальной загрузки данных вам нужно будет использовать rowObject[2] для доступа Color, но при последующем заполнении сетки формат rowObject будет изменен, и вместо этого вам придется использовать rowObject.Color. Поэтому вам нужно будет проверить, является ли массив rowObject или нет, и использовать соответствующий формат. Использование rowObject.Color || rowObject[2] может иметь хорошие результаты.

Я подробно описал формат rowObject, чтобы вы поняли, как использовать бесплатный jqGrid 4.9.2, который упрощает код. Вы можете просто использовать options.rowData.Color для доступа к Color независимо от формата входных данных и независимо от использования опции loadonce: true.