现在的位置: 首页 > easyui > Grid > propertygrid > 正文
技巧:propertygrid组件formatter字段内容
2012年10月18日 propertygrid ⁄ 共 650字 评论数 3 ⁄ 被围观 18,037 views+
文章目录
[隐藏]

Easyui 提供了一个较为简单的属性控件:propertygrid,其实也就是重写了默认datagrid的view对象,然后只分配两个字段“name”和“value”,value字段的editor可以为datagrid支持的常用可编辑类型,看起来算是麻雀虽小,五脏俱全了。

不过有一个遗憾,那就是没法给colunm增加formatter属性,为什么要formatter属性?当你用的行editor为combobox的时候,你就明白为什么要用到formatter了,比如说,某一列为“性别属性”,其值包含“男”,“女”,editor为combobox,这时候propertygrid显示的总是combobox的valueField值。

这时候我们需要datagrid组建的列属性formatter来格式化“性格属性”,其实思路很简单,在引入easyui核心代码后,我们强行扩展colounm属性就可以了,直接上代码:

实现代码:

$.extend($.fn.propertygrid.defaults.columns[0][1], {
	formatter : function(value, rowData, rowIndex) {
		if (rowData.name == "sex") {// 如果是"性格属性"
			return value == "man" ? "男" : "女";
		} else {
			return value;
		}
	}
});

效果演示:

http://www.easyui.info/easyui/demo/propertygrid/061.html

目前有 3 条留言 其中:访客:2 条, 博主:1 条

  1. Zyan : 2015年09月15日12:16:04  -49楼 @回复 回复

    在propertygrid 中combobox 显示值一直是value 而不是text 怎么解决? 请大神救救我!
    详细的问题描述请看这里http://note.youdao.com/share/?id=2d3316cffbe429d9fe106afc0d51310b&type=note


    • 管理员
      世纪之光 : 2015年09月16日09:42:39  地下1层 @回复 回复

      各个版本都不太一样,建议你分析一下1.4.3 propertygrid 控件的源代码,我最近比较忙,不一定有时间看。

    • 艺夫 : 2015年11月08日18:04:02  地下1层 @回复 回复

      思路:
      判断编辑器是不是combobox, 如果是,用选中的值到 editor.options.data 数组对象中去找对应的text, 返回它。如果没有,直接返回 value.

      $(“#pg”).propertygrid({
      columns:[
      [
      {field:’name’,title:”评估项”},
      {field:’value’,title:”评估结果 : 得分”,width:300,
      formatter:function(value,row,index){
      if(row.editor.type==”combobox”){
      for(var i=0; i<row.editor.options.data.length; i++){
      if(row.editor.options.data[i].value===value)
      return row.editor.options.data[i].text;
      };
      return value ;
      }
      }
      }
      ]
      ]
      });

给我留言

留言无头像?


×