JQGrid自定义格式化程序无法正常工作

我试图在我的Ruby on Rails应用程序中为jqgrid使用自定义格式化程序，但是我很难让它做出响应。

这是我正在使用的function：

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

但是，我的网格仍然显示，但没有任何格式化。

另外，为了给出上下文，下面是我的index.html.erb的其余jqgrid代码，包括上面的函数：

 
  
  $("#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 '' + cellvalue + ''; } $("#grid").jqGrid('setGridParam', {ondblClickRow: function(rowid,iRow,iCol,e){loadForm(rowid);}}); 

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

jqrid输出

如果有人知道我做错了什么，非常感谢你的帮助！ 谢谢。

Answer 1

我没有看到你在代码中使用YNFormatter的位置。 您应该为colModel某些列指定formatter: YNFormatter 。

另一个问题如下：您使用背景色 CSS样式，但还有其他CSS样式背景从父元素应用。 要查看背景颜色，必须删除background-image 。 因此，可以通过使用background-image: none和background-color来解决问题。 这是你描述的问题的主要原因。

如果您不使用旧版本的jqGrid，则使用格式化程序设置背景颜色不是最佳选择。 使用cellattr要好得多（参见我的原始建议 ，将function包含在jqGrid中，例如答案 ）。 主要优点 – 您可以设置背景颜色，但仍然使用格式化程序之类的预定义格式化formatter: "date"或formatter: "float" 。

您发布的代码的一些常见注释：

• 不要在URL中使用http://localhost:3000前缀。 而不是url:'http://localhost:3000/ItmList'最好使用url:'/ItmList' 。 它不仅更短，而且由于Ajax的原点限制，它减少了出错的可能性。
• 您应该始终为网格添加gridview：true选项以提高性能。
• 我建议总是在选择器窗体中使用pager选项pager: '#gridPager' 。 如果您使用表单pager: 'gridPager'或pager: $('#gridPager') jqGrid将必须“规范化”它并将选项更改为pager: '#gridPager' 。
• 如果从服务器返回的数据包含纯数据而不是放置在网格单元格中的HTML片段，我建议使用autoencode: true选项。 该选项可确保即使文本包含用于HTML标记的符号，也可以正确显示从服务器返回的所有文本。
• 属性sorttype: "String"未知（请参阅文档 ）。 sorttype属性的默认值是"text" 。 如果需要使用基于文本的排序，最好不要指定任何sorttype属性。
• 您应该从colModel项中删除index属性，其值与name属性的值相同。 顺便说一句，如果你使用loadonce: true ， index的值必须等于colModel中某些列的name属性的值。 那么为什么要通过包含不需要的index属性来增加代码呢？ 较短版本的colModel在我看来更适合阅读：

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