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 tags plugin 使用 jqGrid，它基于 jqGrid 版本

Answer 1

这将在网格中显示 "edit" 图标而不是 "you can edit this"

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

Answer 2

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

它将允许您像使用 standard formatters "integer" 一样使用 formatter: "yourFormatterName"（或者可能 struts2 中的 formatter = "yourFormatterName"）， "date" 和其他。

jqGrid 显示一个 'edit' 图标用于行内编辑

jqGrid show an 'edit' icon for in line editing

javascript

jquery

struts2

jqgrid

struts2-jquery-grid