easyui datagrid 表格组件列属性formatter和styler使用方法
明确单元格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> |
easyui datagrid 表格组件列属性formatter和styler使用方法的更多相关文章
- 一步步实现 easyui datagrid表格宽度自适应,效果非常好
一步步实现 easyui datagrid表格宽度自适应,效果非常好: 一.设置公共方法,使得datagrid的属性 fitColumns:true $(function(){ //初始加载,表格宽 ...
- 完美实现保存和加载easyui datagrid自定义调整列宽位置隐藏属性功能
需求&场景 例表查询是业务系统中使用最多也是最基础功能,但也是调整最平凡,不同的用户对数据的要求也不一样,所以在系统正式使用后,做为开发恨不得坐在业务边上,根据他们的要求进行调整,需要调整最多 ...
- easyui datagrid 绑定json对象属性的属性
今天用easyui 的datagrid绑定数据时,后台提供的数据是实体类类型的,其中有一个实体类A的属性b是另一个实体类B类型的,而前台需要显示b的属性c,这下就悲剧了,前台没法直接绑定了,后来脑筋一 ...
- easyui datagrid 动态添加columns属性
公司在项目设计的时候,有一个需求,就是查出来的表的字段不唯一,一张表的字段可能是三个,也可能是五个,但是却要把它显示到页面,这个给我做ui的带来一点麻烦.因为以前一般用easyui 的datagrid ...
- (转)扩展jquery easyui datagrid 之动态绑定列和数据
本文转载自:http://blog.csdn.net/littlewolf766/article/details/7336550 easyui datagrid 不支持动态加载列,上次使用的方法是自己 ...
- easyui datagrid Column Group 列组、 复杂表头 嵌套表头 组合表头 (转载)
核心: rowspan:2 //占两行 colspan:3 //占三列 所有的colspan下的二级列表头,统一放在一个数组里. 文章一: 转载来源:https://blog.csdn.ne ...
- 扩展-Easyui Datagrid相同连续列合并扩展(一)
一.autoMergeCellAndCells实现效果 调用方法: function onLoadSuccess(data){ $(this).datagrid("autoMerge ...
- EasyUI DataGrid 相同连续列合并
扩展方法:$.extend($.fn.datagrid.methods, { autoMergeCells: function(jq, fields) { return jq.each(functio ...
- easyui datagrid生成序号列formatter
var opts1; $('#datagrid_1').datagrid({ columns: [ [{ field: 'myNo', title: '序号', align: 'center', wi ...
随机推荐
- Eclipse中一些快捷键
用到哪里更新到哪里~~~ 1,代码自动对齐 ctrl+shift+f 2,自动填充相关的包 alt+/ 注意选择好需要的包 3,注释某几行代码 选定后ctrl+/ 4,设置自动补全 最简单的修改方 ...
- Cisco路由器的6种模式
Cisco路由器的6种模式 -------------------------------------------------------------------------------------- ...
- Python入门(四,高级)
一,面向对象 面向对象技术简介 类(Class): 用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法.对象是类的实例. 类变量:类变量在整个实例化的对象中是公用的. ...
- Best Cow Fences_二分&&DP
Description Farmer John's farm consists of a long row of N (1 <= N <= 100,000)fields. Each fie ...
- PHP 上传图片和安全处理
上传图片 public function images() { $data = $_FILES['file']; switch($data['type']) { case 'image/jpeg': ...
- JS回车键处理
HTML <input type="text" id="keyword" name="keyword" autocomplete=&q ...
- Hooks
function getValType(elem) { var ret = elem.tagName.toLowerCase() return ret === "input" &a ...
- Kali 找回root 密码的操作步骤
1. 重启kali 进入grub 界面,选择 “kali GNU/Linux, Linux 3.7-trunk-686-pae(恢复模式)” 2. 然后按下键盘E 键 3.进入编辑模式,找到Linux ...
- TC HTB r2q
HTB: quantum of class 10001 is big. Consider r2q change. 根据HTB的官方文档显示,quantum是在可以“借”的情况下,一次可以“借”多少,并 ...
- Java字符串null相加
Java字符串null相加 最近和同事讨论了下面的一段代码: String a = null; a += a; System.out.println(a); 运行结果: nullnull 本着学习的态 ...