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

2024-05-19 20:20:48

明确单元格DOM结构

要想弄清楚formatter和styler属性是怎么工作的，首先要弄清楚datagrid组件内容单元格的DOM接口，注意，这里指的是内容单元格，不包括标题单元格，标题单元格的结构有所区别。我们所有内容单元格的默认DOM结构如下：

1

2

3

4

5

<td field="code">

<div style="text-align:left" class="datagrid-cell datagrid-cell-c1-code">

文字

</div>

</td>

很简单，其实只是两层结构，td标签的field属性便是字段的编码，而单元格内容统一用一个div包裹起来，在我举的这个例子中，div标签有个 text-align样式，这个样式其实是由列属性align决定的，同时div标签的class属性值并不是一个定值，需要注意一下。

理解formatter是什么

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

定义示例:

1

2

3

4

5

6

7

8

formatter: function(value, row, index){

if (value == "007") {

return '<font color="red">' + value + '</font>';

}

else {

return value;

}

}

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

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

理解styler是什么

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

定义示例：

1

2

3

4

5

6

styler: function(value, row, index){

if (value == "007") {

return 'background-color:blue;';

}

}

<br><br>

1	`<br><br>`

表格组件列属性formatter和styler使用方法相关推荐

easyui datagrid 表格组件列属性formatter和styler使用方法
明确单元格DOM结构要想弄清楚formatter和styler属性是怎么工作的,首先要弄清楚datagrid组件内容单元格的DOM接口,注意,这里指的是内容单元格,不包括标题单元格,标题单元格 ...
冻结html表格标题列,jQuery实现冻结表头的方法
本文实例讲述了jQuery实现冻结表头的方法.分享给大家供大家参考.具体如下: 前段时间做项目时候由于需要显示一个列表,但是由于数据太多在滚动的时候表头必须冻结住,所以就写了下面这个脚本(曾经在网上也 ...
html 如何使表格一列都变颜色的简单方法！！
html怎么让一列变颜色用到属性colgroup 重点我都加粗了!! <colgroup span="3" bgcolor="yellow">&l ...
jsp页面中Table表格首列合并同类项的脚本调用方法
在JSP页面头部引入以下脚本: <script type="text/javascript"> function parallelTable(tb) { var ...
ant design vue table表格组件实现隔行变色
ant design vue table表格组件实现隔行变色一.使用方法 html代码: <a-table:columns="patient":data-source=&q ...
Qt高仿Excel表格组件-支持冻结列、冻结行、内容自适应和合并单元格
目录一.概述二.效果展示三.实现思路 1.冻结行.冻结列 2.行高自适应 3.蚂蚁线四.测试代码 1.添加表格数据 2.设置冻结行.列 3.行高.列宽 4.单元格背景色 5.单元格文字 6.其 ...
elementUI表格组件：自定义列模板（完整案例）
elementUI表格组件:自定义列模板(含效果图) 所谓的自定义列模板,你也可以理解为自定义td的格式. 官方文档地址 :查看地址页面· 效果图 · 对比 : 代码块1 · 对比:<temp ...
表格html5 隐藏字段,element-ui表格组件table实现列的动态显示与隐藏
首先,写一个基础的表格.(参考element-ui基础表格) export default { data() { return { tableData: [ { date: "2016-05 ...
elementUI表格table的列内置样式修改方法/对比template，列属性class-name，table属性cell-class-name
1,table属性cell-class-name的使用可以作用到某一行,或者某一列等等.但是在style标签中要去掉scoped,不然无效. (在elementUI中,row-class-name ...
【EasyUI篇】PropertyGrid属性表格组件
微信公众号:程序yuan 关注可获得更多资源.问题或建议,请公众号留言; 查看--> 全套EasyUI示例目录 28.PropertyGrid属性表格组件 JSP文件 <%--Create ...

最新文章

热门文章