Jquery JQGrid自定义格式化程序不工作

我试图在RubyonRails应用程序中使用jqgrid的自定义格式化程序，但在让它响应时遇到了极大的困难

以下是我正在使用的函数：

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

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

函数YNFormatter（单元格值、选项、行对象）
{
变量颜色=（单元格值>=10）？“绿色”：“红色”；
返回“”+单元格值+“”；
}

但是，“我的网格”仍会显示，但不会出现任何格式设置

另外，为了提供上下文，下面是my index.html.erb的jqgrid代码的其余部分，包括上述函数：

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

$（“#网格”）.jqGrid({
网址：'http://localhost:3000/ItmList',
数据类型：“json”，
阿尔特罗斯：是的，
altclass:'oddRow'，
jsonReader：{
root:“itmdata”，
第页：“第页”，
总计：“总计页数”，
记录：“totalrecords”，
单元格：“itmrow”
},
rowNum:10，
行列表：[10,20,30]，
mtype:“获取”，
宽度：796，
希德格里德：错，
有一次：是的，
寻呼机：“gridPager”，
sortname:'id'，
viewrecords：是的，
分拣员：“asc”，
搜索：对，
身高：250，
宽度：600，
ColName:['Itm编号'、'标题'、'数量'、'类别']，
colModel：[{
名称：“id”，
索引：“id”，
宽度：30，
sorttype:“int”}，
{
姓名：'头衔'，
索引：'标题'，
宽度：90，
sorttype:“字符串”}，
{
名称：“数量”，
索引：“数量”，
宽度：90，
sorttype:“float”}，
{
名称：'类别'，
索引：'类别'，
宽度：80，
sorttype:“字符串”}
],
标题：“项目列表”，
//ondblClickRow：函数（rowid、iRow、iCol、e）{alert（'double clicked'）；}
});
函数YNFormatter（单元格值、选项、行对象）
{
变量颜色=（单元格值>=10）？“绿色”：“红色”；
返回“”+单元格值+“”；
}
$（“#grid”）.jqGrid（'setGridParam'，{ondblClickRow:function（rowid，iRow，iCol，e）{loadForm（rowid）；}）；

//用于保存当前正在处理的记录id的全局变量
项目id=0；
//函数通过AJAX加载给定id的编辑表单
函数加载窗体（id）{
path=“/items/”+id+“/edit”
项目_id=id；
$（“#ItmDisplay”）.load（路径）；
}
//函数返回当前记录id
函数get_item_id（）{
退货项目标识；
}
$（文档）.delegate（'form'，'submit'，函数（e）{
e、 预防默认值（）；
var valuesToSubmit=$（this）.serialize（）；
//将更新请求传递到的Rails路径
updatePath='/items/'+get_item_id（）；
$.ajax({
url:updatePath，//将其提交到表单的给定url
类型：“post”，
数据：价值待提交，
数据类型：“JSON”
}).success（函数（json）{//json变量保存来自服务器的返回（json对象）
//根据结果采取行动。
$（“#ItmDisplay”）.text（“记录成功保存！！”）.fadeOut（3500）；
var$myGrid=jQuery（“网格”）；
data=$myGrid.jqGrid（'getGridParam'，'data'）；
index=$myGrid.jqGrid（'getGridParam'，'u 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）；
});
});
!

---

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

我看不出您在代码中使用了

YNFormatter

。您应该为

colModel

中的某些列指定

formatter:YNFormatter

另一个问题是：您使用CSS样式，但是还有其他从父元素应用的CSS样式。要查看背景色，必须删除

背景图像

。因此，可以通过使用

背景图像：none

和

背景颜色

来解决这个问题。这是你所描述的问题的主要原因

如果您使用的jqGrid版本不太旧，那么使用格式化程序设置背景色并不是最佳选择。最好使用

cellattr

（请参阅在jqGrid中包含该功能，例如）。主要优点-您可以设置背景颜色，但仍然使用预定义的格式化程序，如

格式化程序：“日期”

或

格式化程序：“浮动”

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

• 不要使用

  http://localhost:3000

  URL中的前缀。而不是

  url:'http://localhost:3000/ItmList“

  最好使用

  url:”/ItmList“

  。它不仅更短，而且由于Ajax的限制，减少了出错的可能性
• 您应该始终向网格添加选项以提高性能
• 我建议使用

  pager

  选项，该选项始终采用选择器形式

  pager:“#gridPager”

  。如果使用

  pager:'gridPager'

  或

  pager:$（'#gridPager'）

  jqGrid必须对其进行“规范化”，并将选项更改为

  pager:'#gridPager'

• 如果从服务器返回的数据包含纯数据，而不是放在网格单元格中的HTML片段，我建议使用

  autoencode:true

  选项。该选项确保从服务器返回的所有文本都将正确显示，即使文本包含用于HTML标记的符号
• 属性

  sorttype:“字符串”

  未知（请参阅）。

  sorttype

  属性的默认值是

  “text”

  。如果需要使用基于文本的排序，最好不要指定任何

  sorttype

  属性
• 您应该从

  colModel

  项目中删除

  index

  属性，这些项目的值与

  name

  属性的值相同。通过

  <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>!