easyui datagrid 表格组件列属性formatter和styler使用方法

最新推荐文章于 2022-05-09 17:22:30 发布

原创最新推荐文章于 2022-05-09 17:22:30 发布 · 3.6k 阅读

0 ·

CC 4.0 BY-SA版权

EasyUI框架专栏收录该内容

3 篇文章

订阅专栏

博客介绍了formatter和styler的含义。formatter是格式化，可将纯文本呈现为不同形式，如checkbox、input输入框等，使用时需注意格式化DOM的包裹、函数返回值及作用范围。styler是样式，利用jQuery的css函数修改默认td标签样式，但易被默认div标签样式覆盖。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

理解formatter是什么

顾名思义，formatter是格式化的意思，也就是以何种形式呈现的意思，对于一个纯文本，我可以将它呈现为checkbox，也可以呈现为 input输入框，甚至下拉框等等，或者是在文本外层包裹更多的DOM(当然包裹这样做并没有多大意义)，这就是formatter的真正意义。

定义示例:

formatter: function(value, row, index){
    if (value == "007") {
        return '<font color="red">' + value + '</font>';
    }
    else {
        return value;
    }
}

情景一：我有一个启用禁用字段，使用数字表示，1表示启用，2表示禁用，展示给客户的时候我当然希望是中文的形式。

function formatter(value,row,index){
    if(row.isu==1){
        return "启用";
    }else{
        return "禁用";
    }
}

重点链接
https://blog.youkuaiyun.com/ytangdigl/article/details/71278118

使用formatter需要注意以下几点：

1：无论formatter出何种形式，格式化出的DOM一定都是被包含在默认的div标签内
2：在写formatter函数时要保证有值返回，否则单元格没有内容可展示，所以if的时候别忘了else
3：formatter函数不会作用在列属性checkbox为true的单元格上，checkbox列是组件预留的。

理解styler是什么

顾名思义，styler是样式的意思，听起来跟formatter容易混淆，其实它只是利用jQuery的css函数修改默认td标签的样式，所以styler属于低能儿，只能定义单元格的背景色等，而且往往被默认的div标签样式覆盖。

定义示例：

styler: function(value, row, index){
    if (value == "007") {
        return 'background-color:blue;';
    }
}