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>

时间: 2024-10-01 09:36:59

easyui datagrid 表格组件列属性formatter和styler使用方法的相关文章

列标题不显示-easyUI datagrid里面的列标题在IE浏览器下不显示

问题描述 easyUI datagrid里面的列标题在IE浏览器下不显示 easyUI datagrid里面的列标题在IE浏览器下不显示,在其他浏览器下是正常显示的 1.代码 //数据列表显示 function queryAll(){ $("#tt").datagrid({ title : '图片数据显示列表', url : 'PhotoAction_querylist.action', fitColumns:true, singleSelect:true, //隔行变色 stripe

easyui datagrid 大数据加载效率慢,优化解决方法(推荐)_jquery

在使用easyui datagrid途中发现加载数据的效率真的不是一般的差.经测试IE8加载300条数据就感觉明显的慢了,加载2000条数据就另人崩溃用时差不多60秒,就算在google浏览器测试结果也快不了几秒. 平时听闻easyui datagrid效率底下,自己测试才发现真是使人无法忍受. 笔者只好百度,google解决方法,发现一篇文章说改 //1.3.3版本是这样的,其它版本也是这句代码 $(_1e0).html(_1e4.join("")); 改为: $(_1e0)[0].

jQuery实现表格行和列的动态添加与删除方法【测试可用】_jquery

本文实例讲述了jQuery实现表格行和列的动态添加与删除方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19

easyui datagrid 选择执行列导出excel

问题描述 我有个类似的多维表头,想做个选择想导出的列头功能,但是合并列的子列,父列头也要跟着导出,列头数据没有关系,不懂怎么弄了 解决方案 解决方案二:可以根据表头创建一个excel的模板,每次导出时,从复制模板文件,然后在对复制的文件进行数据导出解决方案三:引用1楼byronqiji的回复: 可以根据表头创建一个excel的模板,每次导出时,从复制模板文件,然后在对复制的文件进行数据导出 不行,我都表格头部都是动态的,没办法用你这种方法解决方案四:表头动态,easyui也是需要定制的呀,eas

Asp.Net中DataGrid的模版列(TemplateColumn)内容控制简单方法

asp.net|datagrid|控制 最近写了几个asp.net的项目.其中,Asp.Net的控件DataGrid使用的最多了,前几天需要一个功能,我研究了很长时间,发现一个方法,应该是最简单的实现.现表述如下. DataGrid的html定义很简单,如下 <Asp:DataGrid ID="myDatagrid" runat="server" datakeyfield="fID" AutoGenerateColumns="Fa

框架-请问easyui怎么让footer计算datagrid表格列

问题描述 请问easyui怎么让footer计算datagrid表格列 请问easyui怎么让footer计算datagrid表格的列的值.... 解决方案 配置showFooter: true,然后配置loadFilter,自己遍历返回的数据行,增加footer数据节点,json对象数据项和你columns配置的一样

JS表格组件神器bootstrap table详解(基础版)_javascript技巧

一.Bootstrap Table的引入 关于Bootstrap Table的引入,一般来说还是两种方法: 1.直接下载源码,添加到项目里面来. 由于Bootstrap Table是Bootstrap的一个组件,所以它是依赖Bootstrap的,我们首先需要添加Bootstrap的引用. 2.使用我们神奇的Nuget 打开Nuget,搜索这两个包 Bootstrap已经是最新的3.3.5了,我们直接安装即可. 而Bootstrap Table的版本竟然是0.4,这也太坑爹了.所以博主建议Boot

JS组件系列——表格组件神器:bootstrap table

原文:JS组件系列--表格组件神器:bootstrap table 前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少使用方面的问题,也做了一部分笔记,在此分享出来供需要使用的园友参考.还记得前两天有园友加群问我Bootstrap Table的使用问题,呵呵,巧了,今天博主也遇到同样的问题了,在此还是要表示抱歉,没有将这篇提前发出来. bootst

C#技巧:给datagrid的按钮列添加css

css|datagrid|按钮|技巧 今天改界面,发现datagrid可以用cssclass设置css风格,但是按钮列没有cssclass属性.忙活了半天,发现只能用程序设置按钮列属性. 设置方法如下(C#版本) 为datagrid添加ItemCreat事件,在ItemCreat事件里面添加如下代码 private void dgBoxList_ItemCreated(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e