javascript - jqGrid 显示 'edit' 图标用于行内编辑

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 ？

如何修复它？

<小时/>

我通过 struts 2 jquery 标签插件 使用 jqGrid，该插件基于 jqGrid 版本构建

Answer 1

我认为您应该将取消格式化程序( 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();
}

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

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

(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" (或者在 struts2 中可能是 formatter = "yourFormatterName")，就像使用 standard formatters 一样。 “整数”、“日期” 等。