easyui---formatter

为了格式化一个数据网格（DataGrid）列，我们需要设置 formatter 属性，它是一个函数。这个格式化函数包含三个参数：

value：当前列对应字段值。( value ---- 字段值字段price --- value就是价格比如15
row：当前的行记录数据。（row---- 这里一般是object对象转换为JSON字符串 alert 可以看到， alert是当前行记录的每一个数据
index：当前的行下标。用到这个属性比较少

这个是官网的例子

http://www.jeasyui.net/tutorial/28.html 实例下载里面有

<table id="tt" title="Formatting Columns" class="easyui-datagrid" style="width:550px;height:250px"url="data/datagrid_data.json"singleSelect="true" iconCls="icon-save"><thead><tr><th field="itemid" width="80">Item ID</th><th field="productid" width="80">Product ID</th><th field="listprice" width="80" align="right" formatter="formatPrice">List Price</th><th field="unitcost" width="80" align="right">Unit Cost</th><th field="attr1" width="100">Attribute</th><th field="status" width="60" align="center">Stauts</th></tr></thead></table><script type="text/javascript">
function formatPrice(val,row){alert(JSON.stringify(row));if (val < 20){return '<span style="color:red;">('+val+')</span>';} else {return val;}}

记住 val --- 字段名下的所有值例如 price 下的所有数据 16.5 --93.5

row ----一般是个对象 Object 我们常用到员工的某个属性直接 row.gender

return 的就是要显示在页面的

var columns=[[{field:'uuid',title:'编号',width:100},{field:'username',title:'登陆名',width:100},{field:'name',title:'真实姓名',width:100},{field:'gender',title:'性别',width:100,formatter:function(value, row, index){value = row.gender;if(1 == value * 1){return '男';}if(0 == value * 1){return '女';}}},

easyui---formatter相关推荐

jQuery EasyUI DataGrid - 格式化列（formatter ）
以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色. 为了格式化一个数据网格(DataGrid)列,我们需要设置 ...
EasyUI DataGrid 中字段 formatter 格式化不起作用
今天用 EasyUI datagrid 来做列表,要对一些数据进行格式化,推断某字段状态时,发现 formatter 格式化相应的函数不起作用. <table id="list_dat ...
easyui datagrid 表格组件列属性formatter和styler使用方法
明确单元格DOM结构要想弄清楚formatter和styler属性是怎么工作的,首先要弄清楚datagrid组件内容单元格的DOM接口,注意,这里指的是内容单元格,不包括标题单元格,标题单元格 ...
php easyui tree 结构,EasyUI Tree树组件无限循环的解决方法
在学习jquery easyui的tree组件的时候,在url为链接地址的时,发现如果最后一个节点的state为closed时,未节点显示为文件夹,单击会重新加载动态(Url:链接地址)形成无限循环. ...
（转）基于MVC4+EasyUI的Web开发框架形成之旅--界面控件的使用
http://www.cnblogs.com/wuhuacong/p/3317223.html 在前面介绍了两篇关于我的基于MVC4+EasyUI技术的Web开发框架的随笔,本篇继续介绍其中界面部分的 ...
关于如何在使用easyui的时候添加一个操作列的问题
关于如何在使用easyui的时候添加一个操作列的问题首先分为不同的情况:在这里只介绍使用的是datagrid数据网格的列属性来添加操作列的方法: 就是跟普通的列属性的使用时一样的,当我们要想在每一行 ...
easyui展示年月
easyui展示年月,不要日 <!DOCTYPE html> <html><head><meta charset="utf-8" /> ...
easyUI显示echarts
easyUi加载echarts图表: <%@ page language="java" contentType="text/html; charset=UTF-8& ...
EasyUI –tree、combotree学习总结
2019独角兽企业重金招聘Python工程师标准>>> 一. tree总结 (一).tree基本使用 tree控件是web页面中将数据分层一树形结构显示的. 使用$.fn.tre ...
EasyUi – 4.datagrid
测试的时候用Json来测试就好啦. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> ...

easyui---formatter

easyui---formatter相关推荐

最新文章

热门文章