jQuery EasyUI 数据网格 - 格式化列

  以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色。

  为了格式化一个数据网格(DataGrid)列,我们需要设置 formatter 属性,它是一个函数。这个格式化函数包含三个参数:

  value:当前列对应字段值。

  row:当前的行记录数据。

  index:当前的行下标。

  创建数据网格(DataGrid)

  

  url="data/datagrid_data.json"

  singleSelect="true" iconCls="icon-save">

  

  

  

  

  

  

  

  

  

  

  

Item ID Product ID List Price Unit Cost Attribute Stauts

  请注意,'listprice' 字段有一个 'formatter' 属性,用来指明格式化函数。

  写格式化函数

  function formatPrice(val,row){

  if (val < 20){

  return '('+val+')';

  } else {

  return val;

  }

  }

  下载 jQuery EasyUI 实例

  jeasyui-datagrid-datagrid7.zip

  本文转载自:w3cschool

  (编辑:雷林鹏 来源:网络 侵删)

雷林鹏分享:jQuery EasyUI 数据网格 - 格式化列的更多相关文章

  1. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建列组合

    jQuery EasyUI 数据网格 - 创建列组合 easyui 的数据网格(DataGrid)可以创建列组合,如下所示: 在本实例中,我们使用平面数据来填充数据网格(DataGrid)的数据,并把 ...

  2. 雷林鹏分享:jQuery EasyUI 数据网格 - 设置冻结列

    jQuery EasyUI 数据网格 - 设置冻结列 本实例演示如何冻结一些列,当用户在网格上移动水平滚动条时,冻结列不能滚动到视图的外部. 为了冻结列,您需要定义 frozenColumns 属性. ...

  3. 雷林鹏分享:jQuery EasyUI 数据网格 - 创建复杂工具栏

    jQuery EasyUI 数据网格 - 创建复杂工具栏 数据网格(datagrid)的工具栏(toolbar)可以包含按钮及其他组件. 您可以通个一个已存在的 DIV 标签来简单地定义工具栏布局,该 ...

  4. 雷林鹏分享:jQuery EasyUI 数据网格 - 动态改变列

    jQuery EasyUI 数据网格 - 动态改变列 数据网格(DataGrid)列可以使用 'columns' 属性简单地定义.如果您想动态地改变列,那根本没有问题.为了改变列,您可以重新调用dat ...

  5. 雷林鹏分享:jQuery EasyUI 数据网格 - 设置排序

    jQuery EasyUI 数据网格 - 设置排序 本实例演示如何通过点击列表头来排序数据网格(DataGrid). 数据网格(DataGrid)的所有列可以通过点击列表头来排序.您可以定义哪列可以排 ...

  6. 雷林鹏分享:jQuery EasyUI 数据网格 - 自定义排序

    jQuery EasyUI 数据网格 - 自定义排序 如果默认的排序行为不满足您的需求,您可以自定义数据网格(datagrid)的排序行为. 最基础的,用户可以在列上定义一个排序函数,函数名是 sor ...

  7. 雷林鹏分享:jQuery EasyUI 数据网格 - 自定义分页

    jQuery EasyUI 数据网格 - 自定义分页 数据网格(datagrid)内置一个很好特性的分页功能,自定义也相当简单.在本教程中,我们将创建一个数据网格(datagrid),并在分页工具栏上 ...

  8. 雷林鹏分享:jQuery EasyUI 数据网格 - 添加复选框

    jQuery EasyUI 数据网格 - 添加复选框 本实例演示如何放置一个复选框列到数据网格(DataGrid).通过复选框,用户将可以选择 选中/取消选中 网格行数据. 为了添加一个复选框列,我们 ...

  9. 雷林鹏分享:jQuery EasyUI 数据网格 - 启用行内编辑

    jQuery EasyUI 数据网格 - 启用行内编辑 可编辑的功能是最近添加到数据网格(datagrid)的.它可以使用户添加一个新行到数据网格(datagrid).用户也可以更新一个或多个行. 本 ...

随机推荐

  1. cocos creator 无法打开项目 dock栏只显示图标问题解决方法

    1.打开项目 2.找到 library和local文件夹 3.清空这两个文件夹的数据 4.问题已解决 原因: 以前生成的旧数据会和新数据发生冲突,把生成的旧数据清理掉就OK了.

  2. Visual Studio 独立 Shell 下载

    https://visualstudio.microsoft.com/zh-hans/vs/older-downloads/isolated-shell/ SSMS 2017 安装问题 https:/ ...

  3. 对int类型的数据,如何让获取长度

    下面为大家写一个列子   int a = 124;<br> Integer a1 = a;//转换为包装类Integer<br> System.out.println(a1.t ...

  4. asp.net导入后台代码

    public void Upload(string information){ int Bank = 0; for (int i = 0; i <Request.Files.Count; i++ ...

  5. Json数据产生树形结构

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  6. centos7 安装oracle 11g数据库

    1.新建oracle用户 groupadd oracle useradd -g oracle oracle .修改操作系统核心参数 在Root用户下执行以下步骤: 1)修改用户的SHELL的限制,修改 ...

  7. Vue系列之 => html-webpack-plugin的两个基本作用

    安装 npm i html-webpack-plugin -D webpack.config.js const path = require('path'); //启用热更新的第二步,导入webpac ...

  8. hdu 6287 口算训练

    题意: 小Q非常喜欢数学,但是他的口算能力非常弱.因此他找到了小T,给了小T一个长度为nn的正整数序列a1,a2,...,ana1,a2,...,an,要求小T抛出mm个问题以训练他的口算能力. 每个 ...

  9. 2018-2019-3 网络对抗技术 20165305 Exp3 免杀原理与实践

    1.实验内容及步骤 1.1 正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion,加壳工具,使用shellcode编程 将做实验二时生成的后门文件用virusto ...

  10. Http请求头和常见响应状态码

    请求头: Accept:指浏览器或其他客户可以接爱的MIME文件格式.可以根据它判断并返回适当的文件格式. Accept-Charset:指出浏览器可以接受的字符编码.英文浏览器的默认值是ISO-88 ...