格式化程序

格式化程序

关注
发信
关注(28)粉丝(399)

JQGrid自定义格式化程序不起作用

本文介绍了JQGrid自定义格式化程序不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在Ruby on Rails应用程序中为jqgrid使用自定义格式器，但是在使其响应方面遇到了很大的困难.

I am trying to use a custom formatter for jqgrid in my Ruby on Rails application, but I am having terrible difficulty in getting it to respond.

这是我正在使用的功能:

Here is the function I am using:

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

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

但是，我的网格仍然显示，但是没有任何格式发生.

However, my grid still displays, but without any formatting occurring.

另外，为了提供上下文，以下是我的index.html.erb的jqgrid代码的其余部分，其中包括上述功能:

Also, to give context, below is the rest of the jqgrid code for my index.html.erb with the above function included:

<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输出

如果有人知道我在做什么错，非常感谢您的帮助！谢谢.

If anyone knows what I am doing wrong, your help would be very gratefully appreciated! Thanks.

推荐答案

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

I don't see where you use YNFormatter in your code. You should specify formatter: YNFormatter for some column in colModel.

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

Another problem is the following: you use background-color CSS style, but there are other CSS styles background which applied from the parent elements. To see the background color one have to remove background-image. So one can fix the problem by usage background-image: none in combination with background-color. It's the main reason of the problem which you described.

如果不使用旧版本的jqGrid，则使用格式化程序设置背景颜色不是最佳选择.使用cellattr更好(请参见我的原始建议将功能纳入jqGrid和答案).主要优点-您可以设置背景颜色，但仍使用formatter: "date"或formatter: "float"之类的预定义格式器.

The usage of formatter for setting of background color is not the best choice if you use no so old version of jqGrid. It's much better to use cellattr (see my original suggestion to include the feature in jqGrid and the answer for example). The main advantage - you can set background color, but still use predefined formatter like formatter: "date" or formatter: "float".

对您发布的代码的一些常见说明:

Some common remarks to the code which you posted:

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

这篇关于JQGrid自定义格式化程序不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-30 08:44
Powered by LMLPHP ©2024 格式化程序 0.052512