javascript - jqGrid 显示用于行内编辑的“编辑”图标

Question

我正在使用带有内联编辑选项的 jqGrid。如果单元格没有任何值，我想显示一个编辑图标。

所以我写了一个格式化程序：

 function aFormatter(cellvalue, options, row) {
        if(cellvalue == null){          
              return 'you can edit this';
        }else{
            return cellvalue;
        }
 }

显示you can edit this文本，当我单击它时，输入框正确显示，但是输入框作为初始值you can edit this？

我该如何解决？

---

我正在使用 jqGrid through struts 2 jquery tags plugin，它是建立在 jqGrid 版本上的

Answer 1

我认为您应该将 unformatter ( unformat ) 与格式化程序一起定义。例如，

formatter: function (cellvalue) {
   if (cellvalue == null) {          
      return "<span class='ui-icon ui-icon-pencil'></span>";
   } else {
      return cellvalue;
   };
},
unformat: function (cellValue, options, elem) {
    return $(elem).text();
}

我不确定如何unformat在 struts2 网格插件中指定。

另一种方法是通过以下方式定义格式化程序

(function ($) {
    "use strict";
    /*jslint unparam: true */
    $.extend($.fn.fmatter, {
        yourFormatterName: function (cellValue, options) {
            if (cellvalue == null) {          
                return "<span class='ui-icon ui-icon-pencil'></span>";
            } else {
                return cellvalue;
            };
        }
    });

    $.extend($.fn.fmatter.yourFormatterName, {
        unformat: function (cellValue, options, elem) {
            return $(elem).text();
        }
    });
}(jQuery));

它将允许您以与使用标准格式化程序等相同的方式使用formatter: "yourFormatterName"（或可能formatter = "yourFormatterName"在 struts2 中）。 "integer""date"

Answer 2

这将在网格中显示“编辑”图标而不是“您可以编辑”

function aFormatter(cellvalue, options, row) {
   if(cellvalue == null) {          
      return '<span class="ui-icon ui-icon-pencil"></span>'
   } else {
      return cellvalue;
   }
}