jQuery EasyUI 数据网格 - 条件设置行背景颜色

  本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式。当 listprice 值大于 50 时,我们将为该行设置不同的颜色。

  数据网格(datagrid)的 rowStyler 函数的设计目的是允许您自定义行样式。以下代码展示如何改变行样式:

  

  url="data/datagrid_data.json"

  singleSelect="true" fitColumns="true">

  

  

  

  

  

  

  

  

  

  

  

Item ID Product ID List Price Unit Cost Attribute Stauts

  $('#tt').datagrid({

  rowStyler:function(index,row){

  if (row.listprice>50){

  return 'background-color:pink;color:blue;font-weight:bold;';

  }

  }

  });

  正如您所看到的,我们根据一些条件设置 background-color(背景色)为 pink(粉红色),设置文本颜色为 blue(蓝色)。

  下载 jQuery EasyUI 实例

  jeasyui-datagrid-datagrid18.zip

  本文转载自:w3cschool(编辑:雷林鹏 来源:网络 侵删)

雷林鹏分享:jQuery EasyUI 数据网格 - 条件设置行背景颜色的更多相关文章

  1. jQuery EasyUI 数据网格 - 条件设置行背景颜色

    $('#tt').datagrid({ rowStyler:function(index,row){ if (row.listprice>50){ return 'color:blue;font ...

  2. EasyUI 条件设置行背景颜色

    数据网格(datagrid)的 rowStyler 函数的设计目的是允许您自定义行样式. rowStyler 函数需要两个参数: rowIndex:行的索引,从 0 开始. rowData:该行相应的 ...

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

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

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

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

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

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

  6. 雷林鹏分享:jQuery EasyUI 数据网格 - 格式化列

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

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

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

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

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

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

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

随机推荐

  1. 使用Xshell调用linux的图形界面!

    环境说明: OS: centos 6.5 64位,最小化安装. Xmanager: 17.0.0.714 1.设置Xshell 2.将操作系统安装如下包 yum  install xclock xte ...

  2. Gym 101981G - Pyramid - [打表找规律][2018-2019 ACM-ICPC Asia Nanjing Regional Contest Problem G]

    题目链接:http://codeforces.com/gym/101981/attachments The use of the triangle in the New Age practices s ...

  3. jQuery Mobile的默认配置项具体解释,jQuery Mobile的中文配置api,jQuery Mobile的配置说明,配置大全

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/xmt1139057136/article/details/35258199 学习jQuery Mob ...

  4. docker安装和基础操作

    docker安装 yum install docker 配置镜像下载加速器 curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh ...

  5. ORACLE删除分区

    业务需求:定期删除表中三个月之前的数据 说明:由于表采取一个月一个分区的设计,所以删除三个月之前的数据也就是删除三个月之前的分区.但需要注意的是删除分区后全局索引会失效,而本地local索引不会受到影 ...

  6. [js]nodejs初探http/url/fs模块

    难怪我没学会, 因为我的套路有问题. 错误点, 1,大而全 2,不注重思路 学习要领: 1, 小而精 2, 重思路(总结) nodejs特点: 1.node提供了js的运行环境, 一般将node运行在 ...

  7. kafka安装步骤

    kafka 安装内存会报不够 https://stackoverflow.com/questions/9350437/incompatible-initial-and-maximum-heap-siz ...

  8. Linux下安装Gensim

    依赖软件包:numpy 直接使用pip安装: [root@mycentos ~]#pip install gensim 安装gensim的时候会遇到下面的一系列错误: Cannot uninstall ...

  9. cocos2d JS-(JavaScript) 冒泡排序

    思想: 比较相邻的元素.如果第一个比第二个大,就交换他们两个. 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.在这一点,最后的元素应该会是最大的数. 针对所有的元素重复以上的步骤,除了最 ...

  10. 蓝桥杯近三年初赛题之一(15年b组)

    临近比赛,自己定时做了近三年的初赛题,不是很理想,10道题平均做对5+道.为了这次比赛,总共做了200题左右吧,估计去北京参加决赛有点难,不过不管怎样,对得起自己万余行代码就好. 一.15年初赛题(第 ...