Question

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

这是我正在使用的功能：

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

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

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

另外，为了给出上下文，下面是我的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);}});

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

另一个问题如下：您使用background-color CSS样式，但还有其他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:'http://localhost:3000/ItmList'，最好使用url:'/ItmList'。它不仅更短，而且由于the same origin限制Ajax而减少了出错的可能性。
您应始终为网格添加gridview:true选项以提高效果。
我建议始终在选择器表单pager中使用pager: '#gridPager'选项。如果您使用pager: 'gridPager'或pager: $('#gridPager')表单，则jqGrid必须对其进行“规范化”并将选项更改为pager: '#gridPager'。
如果从服务器返回的数据包含纯数据而不是放置在网格单元格中的HTML片段，我建议使用autoencode: true选项。该选项可确保即使文本包含用于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 }
]

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

1 个答案: