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 ...
随机推荐
- IIS 请求 超时设置
asp.net 默认的 session state 模式是 in proc(进程内),数据是在网站的应用程序池里面保存的.这样在 web.config 设置的超时时间,是在应用程序池没有发生回收的基础 ...
- springboot-multisource
项目中经常会出现需要同时连接两个数据源的情况,这里基于MyBatis来配置两个数据源,并演示如何切换不同的数据源. 通过自定义注解+AOP的方式,来简化这种数据源的切换操作. <properti ...
- 乾坤合一~Linux设备驱动之块设备驱动
1. 题外话 在蜕变成蝶的一系列学习当中,我们已经掌握了大部分Linux驱动的知识,在乾坤合一的分享当中,以综合实例为主要讲解,在一个月的蜕茧成蝶的学习探索当中,觉得数据结构,指针,链表等等占据了代码 ...
- 蜕变成蝶~Linux设备驱动之中断与定时器
“我叮咛你的 你说 不会遗忘 你告诉我的 我也全部珍藏 对于我们来说 记忆是飘不落的日子 永远不会发黄 相聚的时候 总是很短 期待的时候 总是很长 岁月的溪水边 捡拾起多少闪亮的诗行 如果你要想念我 ...
- jQuery UI =>jquery-ui.js中sortable方法拖拽对象位置偏移问题
今天要处理sortable方法处理的对象,拖拽的时候,位置偏移的问题. 按理应该是鼠标在哪,对象就跟着在哪的 百度了一下问题,http://blog.csdn.net/samed/article/de ...
- android 常用框架
网络框架:okhttp.volley.android-async-http图片框架:Picasso.Fresco.Glide.Android-Universal-Image-Loader缓存框架:Di ...
- 进程池的回调函数callback
如下代码: from multiprocessing import Pool def func1(n): print('in func1') return n*n def func2(nn): pri ...
- Nginx打卡
Nginx打卡 此括号中的是干货 [ 直接说最关心的事:如何去掉访问路径的端口号? 答案:使用Nginx啊 具体安装还需看底下啰嗦的东东,安装OK且完美启动的同学,server proxy_pass ...
- react子传父
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 几个dos命令