jqGrid show an '用于行内编辑的图标

jqGrid show an 'edit' icon for in line editing

本文关键字：编辑 图标 用于 show an jqGrid      更新时间：2023-09-26

我使用带有内联编辑选项的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版本

我认为你应该和格式化器一起定义非格式化器(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")，就像你可以使用标准格式化程序"integer", "date"和其他一样。

这将在网格中显示一个"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;
   }
}
相关文章：