EasyUI表格DataGrid格式化formatter用法
1.通过HTML标签创建数据表格时使用formatter
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.1/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var data = {
"rows": [{
"stuName": "李斯",
"stuAge": 23
}, {
"stuName": "白起",
"stuAge": 25
}],
"total": 2
}
$('#tt').datagrid('loadData',data);
}) //value：字段值；row：行记录数据；index: 行索引
function formatPrice(value,row,index) {
if(value>=20){
return '<span style="color:blue;">' + value + '</span>';
}
}
</script>
</head> <body>
<table id="tt" title="studentInfo" class="easyui-datagrid" style="width:300px;height:250px">
<thead>
<tr>
<th field="stuName" width="80">学生姓名</th>
<th field="stuAge" width="80" formatter="formatPrice">学生年龄</th>
</tr>
</thead>
</table>
</body> </html>
2.通过JS创建数据表格时使用formatter
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.1/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var data = {
"rows": [{
"stuName": "李斯",
"stuAge": 23
}, {
"stuName": "白起",
"stuAge": 25
}],
"total": 2
} $("#tt").datagrid({
columns: [
[{
field: 'stuName',
title: '学生姓名',
width: 80
},
{
field: 'stuAge',
title: '学生年龄',
width: 80,
formatter: function(value, row, index) {
if(value >= 20) {
return '<span style="color:blue;">' + value + '</span>';
}
}
}
]
] }).datagrid('loadData', data);
})
</script>
</head> <body>
<table id="tt" title="studentInfo" style="width:300px;height:250px"></table>
</body> </html>
EasyUI表格DataGrid格式化formatter用法的更多相关文章
- easyui之datagrid之formatter(后台传递常量自动转换值)
1,datagrid之formatter formatter格式化函数有三个参数: value:字段值(一般为后台传递给前台的值): row:当前行数据: index:当前行索引. return值是显 ...
- EasyUI中datagrid的基本用法
EasyUI中datagrid是最常用的一个控件了,现在整理一下datagrid的基本语法,先展示下页面效果吧,如下图
- EasyUI表格DataGrid前端分页和后端分页的总结
Demo简介 Demo使用Java.Servlet为后台代码(数据库已添加数据),前端使用EasyUI框架,后台直接返回JSON数据给页面 1.配置Web.xml文件 <?xml version ...
- EasyUI表格DataGrid获取数据的方式
第一种方式:直接返回JSON数据 package com.easyuijson.util; import java.text.SimpleDateFormat; import net.sf.js ...
- easyUI中 datagrid 格式化日期
$('#List').datagrid({ url: '@Url.Action("GetList")', width:SetGridWidthSub(10), methord: ' ...
- 第二百二十二节，jQuery EasyUI，DataGrid(数据表格)组件
jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...
- EasyUI 的DataGrid中DateTime的格式化问题
想必用过EasyUI的朋友们都应该会遇到这样的情况吧:(下图) 在EasyUI中DataGrid中如果要显示DateTime的时间时候,便会显示上图这样的格式,很明显,这里的格式不会是我们想要的,我们 ...
- easyUI的datagrid表格的使用
实现easyUI表格的里面数据的增删改查功能.SQL使用Oracle和mybatis. 话不多说,直接上代码. 首先是前段部分的. var session = GetSession(); var pa ...
- easyUI 数据表格datagrid的使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
随机推荐
- Window 产品密钥
2019.4.2 测试可用 window2003 DF74D-TWR86-D3F4V-M8D8J-WTT7M
- MSSQL和MYSQL数据库降权
在服务器上如果是 system 用户在运行 MySQL ,这个是非常危险的,一旦Mysql 出现漏洞,或被其他模式提权,直接就是 system 权限.所以我们现在要给MySQL降权! 作用:增强服务器 ...
- pycharm 2018.1 激活
pycharm 2018.1 License server 填入 https://jetlicense.nss.im/ 激活没有问题 测试时间 2018.4.18
- 《Go语言网络编程》第一章：体系
原书地址:http://tumregels.github.io/Network-Programming-with-Go 如果不知道想要构建什么,是不可能创建一个系统的.而且如果不知道它工作的环境,也同 ...
- vue里使用create、mounted调用方法的正确姿势
参考:https://blog.csdn.net/Honnyee/article/details/82421844
- D5 F
最近见到了好多跟排列有关的状压dp,好像略微会了一点,用 dp[i][s][j]表示第i位状态为s选择j的方案数,然后递推. 早起大概可以提高人的智商但是会导致人甚至不清,初始化写错了自闭了半个小时 ...
- mybatis11--多对多关联查询
多对多关联! 其实就是两个一对多的关联! 比如说 一个学生可以有多个老师!一个老师可以有多个学生! 那么 学生和老师之间的关系 可以理解为 多对多的关联关系! 关键是怎么建立数据库中两个表之间的关系 ...
- roadhog 介绍
官方网站:https://www.npmjs.com/package/roadhog; 项目搭建demo: https://github.com/ght5935/antd-dva-less-webpa ...
- 6.1 Pandora 实操 - 数据收集
添加机器 添加机器命令,在 linux 机器上执行此命令 添加成功 添加收集器 采集机器数据 解析数据 转换数据 发送数据 接着,下一步即,成功创建收集任务. 分发机器 确认收集人物,绑定到机器上. ...
- mac下supervisor安装及简单配置
supervisor是一个用 Python 写的进程管理工具,可以很方便的用来启动.重启.关闭进程(守护进程).可以用他来管理自己的“服务程序”. 安装 首先安装Python,Mac系统好像自带. 执 ...