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 ...
随机推荐
- 一款可视化的在线制作H5
一款可视化的在线制作H5 官方网站: http://www.iii66.cn 制作H5网址: http://www.iii66.cn/love/page/index 包括对图片,文字,图形,视频,声音 ...
- Centos 使用Systemctl报Error getting authority: Error initializing authority: Error calling StartServiceByName for org.freedesktop.PolicyKit1: Timeout was reached (g-io-error-quark, 24)
在使用centos7.4 安装服务的时候报错: Error getting authority: Error initializing authority: Error calling StartSe ...
- iOS 裁剪View指定的角裁剪
在开发中碰到view的左上角和右上角需要裁剪,具体实现方法如下: UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:se ...
- Window 产品密钥
2019.4.2 测试可用 window2003 DF74D-TWR86-D3F4V-M8D8J-WTT7M
- 关于linux - Centos 7 系统下使用PXE网络的方式（pxe+dhcpd+tftp+httpd）安装操作系统
PXE(Pre-boot Execution Environment)是由Intel设计的协议,它可以使计算机通过网络而不是从本地硬盘.光驱等设备启动. 现代的网卡,一般都内嵌支持PXE的ROM芯片. ...
- [LeetCode] Clone Graph 克隆无向图
Given a reference of a node in a connected undirected graph, return a deep copy (clone) of the graph ...
- Linux 的基本操作（系统的远程登录）
系统的远程登录 首先要说一下,该部分内容对于linux初学者来讲并不是特别重要的,可以先跳过该章节,先学下一章,等学完后再回来看这一章. Linux大多应用于服务器,而服务器不可能像PC一样放在办公室 ...
- 前端自动化构建工具webpack （二）之css和插件加载总结
1. webpack只识别js文件,其他文件都需要转换成js文件.所有文件都是模块; 2. css解析 css需要css-loader --->style-loader ----- ...
- mac shell 获取ip，自动启动文件http服务
因为工作原因,时常有文件传输需求. rz.nc.rsync都用过,各有各的好处. 但相对的,向别处推文件时总有各种麻烦,尤其是在给同事发送文件时. 然后就想到了提供http服务. 在环境变量中定义别名 ...
- Oracle课程档案，第十五天
restore:恢复数据文件 recover:写日志 1.redo(roll forward)重做 (前进) 2.undo(roll back) 撤销 (回滚) cp -r:删除一个目录 archiv ...