Нестандартный форматировщик JQGrid не работает

Question

Я пытаюсь использовать собственный форматировщик для jqgrid в моем приложении Ruby on Rails, но у меня есть ужасная трудность в его ответе.

Вот функция, я использую:

function YNFormatter(cellvalue, options, rowObject) 
{ 
    var color = (cellvalue >= 10) ? "green" : "red"; 

    return '<span style="background-color:' + color + ';">' + cellvalue + '</span>'; 
} 

Однако моя сетка по-прежнему отображается, но без какого-либо форматирования происходящего.

Кроме того, чтобы дать контекст, ниже остальной код jqgrid для моего index.html.erb с вышеуказанной функции включены:

<div id="ItmDisplay"></div> 

<table id="grid" class="jqInquiryGrid tblGen tblInlineEdit"></table> 
<div id="gridPager"></div> 


<script> 
    $("#grid").jqGrid({ 
     url:'http://localhost:3000/ItmList', 
     datatype: "json", 
     altRows:true, 
     altclass:'oddRow', 

     jsonReader : { 
      root:"itmdata", 
      page: "currpage", 
      total: "totalpages", 
      records: "totalrecords", 
      cell: "itmrow" 
     }, 

     rowNum:10, 
     rowList:[10,20,30], 
     mtype: "GET", 

     width:796, 
     hidegrid:false, 
     loadonce: true, 

     pager: 'gridPager', 

     sortname: 'id', 
     viewrecords: true, 
     sortorder: "asc", 

     search: true, 

     height: 250, 
     width: 600, 
     colNames: ['Itm No', 'Title', 'Quantity', 'Category'], 
     colModel: [{ 
      name: 'id', 
      index: 'id', 
      width: 30, 
      sorttype: "int"}, 
     { 
      name: 'title', 
      index: 'title', 
      width: 90, 
      sorttype: "String"}, 
     { 
      name: 'quantity', 
      index: 'quantity', 
      width: 90, 
      sorttype: "float"}, 
     { 
      name: 'category', 
      index: 'category', 
      width: 80, 
      sorttype: "String"} 
     ], 
     caption: "Items List ", 
     // ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');} 
    }); 

function YNFormatter(cellvalue, options, rowObject) 
{ 
    var color = (cellvalue >= 10) ? "green" : "red"; 

    return '<span style="background-color:' + color + ';">' + cellvalue + '</span>'; 
} 



    $("#grid").jqGrid('setGridParam', {ondblClickRow: function(rowid,iRow,iCol,e){loadForm(rowid);}}); 

<script> 
// Global variable to hold the record id currently being dealt with 
item_id = 0; 

// Function to load the edit form for a given id via AJAX 
function loadForm(id) { 
    path = "/items/" + id + "/edit" 
    item_id = id; 
    $("#ItmDisplay").load(path); 
} 

// function to return the current record id 
function get_item_id() { 
    return item_id; 
} 

$(document).delegate('form', 'submit', function(e) { 
    e.preventDefault(); 
     var valuesToSubmit = $(this).serialize(); 

    // Rails path to pass the update request to  
    updatePath = '/items/' + get_item_id(); 

$.ajax({ 
    url: updatePath, //submits it to the given url of the form 
    type: "post", 
    data: valuesToSubmit, 
    dataType: "JSON" 
}).success(function(json){ // the json variable holds the return from the server (JSON Object) 
    //act on result. 
    $("#ItmDisplay").text("Record Successfully Saved!!").fadeOut(3500); 

    var $myGrid = jQuery("#grid"); 
    data = $myGrid.jqGrid('getGridParam', 'data'); 
    index = $myGrid.jqGrid('getGridParam', '_index'); 
    var rowId = json.id, itemIndex = index[rowId], rowItem = data[itemIndex]; 
    console.log(rowItem); 
    rowItem.title = json.title; 
    rowItem.quantity = json.quantity; 
    rowItem.category = json.category; 
    console.log(rowItem); 
    $myGrid.jqGrid('setRowData',json.id,rowItem); 

}); 
}); 

</script>! 

jqrid output

Если кто-то знает, что я делаю неправильно, ваша помощь будет очень благодарна! Благодарю.

Answer 1

Я не вижу, где вы используете YNFormatter в своем коде. Вы должны указать formatter: YNFormatter для некоторого столбца в colModel.

Другая проблема заключается в следующем: вы используете стиль CSS background-color, но существуют и другие стили CSS background, которые применяются к родительским элементам. Чтобы увидеть цвет фона, необходимо удалить background-image. Таким образом, можно исправить проблему, используя background-image: none в сочетании с background-color. Это основная причина проблемы, которую вы описали.

Использование форматирования для установки цвета фона не является лучшим выбором, если вы не используете старую версию jqGrid. Гораздо лучше использовать cellattr (см. my original suggestion, чтобы включить функцию в jqGrid и the answer, например). Главное преимущество - вы можете установить цвет фона, но по-прежнему использовать предопределенный форматтер, например formatter: "date" или formatter: "float".

Некоторые общие замечания к коду, который вы отвечал:

• не используют http://localhost:3000 префикс в URL. Вместо url:'http://localhost:3000/ItmList' лучше использовать url:'/ItmList'. Это не только короче, но и уменьшает вероятность ошибок из-за ограничения the same origin Ajax.
• вы всегда должны добавить gridview:true для ваших сетей, чтобы повысить производительность.
• Я рекомендую использовать опцию pager всегда в форме выбора pager: '#gridPager'. Если вы используете форму pager: 'gridPager' или pager: $('#gridPager'), то jqGrid должен будет «нормализовать» ее и изменить ее на pager: '#gridPager'.
• Я рекомендую использовать опцию autoencode: true, если данные, возвращаемые с сервера, содержат чистые данные вместо фрагментов HTML, размещенных в ячейках сетки. Эта опция позволяет убедиться, что все тексты, возвращенные из раздела, будут правильно отображаться, даже если тексты содержат символы, используемые для разметки HTML.
• Недвижимость sorttype: "String" неизвестно (см. the documentation). Значение по умолчанию sorttype - "text".Лучше не указывать никакого свойства sorttype, если вам нужно использовать сортировку по тексту.
• вы должны удалить index объектов недвижимости от colModel элементов, значение которых совпадает с значением name. Кстати, если вы используете loadonce: true, значения index должны быть равны значению name собственности некоторых столбцов от colModel. Итак, почему увеличить код, включив ненужные index свойства? Чем короче версия colModel мне кажется, лучше для чтения:

colModel: [ 
    { name: 'id',  width: 30, sorttype: "int"}, 
    { name: 'title', width: 90 }, 
    { name: 'quantity', width: 90, sorttype: "float" }, 
    { name: 'category', width: 80 } 
]