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. [No0000197]Windows用户都应该知道的运行命令

    通过"运行"命令,运行Windows丰富工具的方法.如果您知道工具或任务的相应"运行"命令,那么您就知道访问所述工具或任务的最快方法. 以下是我们最喜欢的Run ...

  2. POJ 3264 线段树入门解题报告

    题意:给n个值, Q次询问, 每次询问给定一个区间, 要求输出该区间最大最小值之差 思路:暴力的话每次询问都要遍历多次for循环一定会超时, 用线段树记录区间的信息(左边界右边界, 该区间最大值最小值 ...

  3. redis发布订阅、事务、脚本

    Redis 发布订阅 Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息. Redis 客户端可以订阅任意数量的频道. 下图展示了频道 cha ...

  4. [js]设计模式小结&对原型的修改

    js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototyp ...

  5. Codeforces 799D Field expansion(随机算法)

    Field expansion [题目链接]Field expansion [题目类型]随机化算法 &题解: 参考自:http://www.cnblogs.com/Dragon-Light/p ...

  6. phpstudy----------如何将phpstudy里面的mysql升级到指定版本,如何升级指定PHP版本

    1.下载指定版本:从官网上下载高版本的 MySQL :https://dev.mysql.com/downloads/file/?id=467269,选的版本是 5.7.17 2.请注意第四部以前是可 ...

  7. GTK# on Ubuntu DllMap

    修改配置:/etc/mono/config 新增以下代码 <dllmap dll="libglib-2.0-0.dll" target="libglib-2.0.s ...

  8. Field amqpTemplate in * required a single bean, but 3 were found:

    Field amqpTemplate in * required a single bean, but 3 were found: Spring Boot 启动的时候报的错 使用Spring Boot ...

  9. Nginx+keepalived 双机热备(主从模式)

    负载均衡技术对于一个网站尤其是大型网站的web服务器集群来说是至关重要的!做好负载均衡架构,可以实现故障转移和高可用环境,避免单点故障,保证网站健康持续运行.关于负载均衡介绍,可以参考:linux负载 ...

  10. MySQL5.7 编译安装

    准备 yum install cmake yum install -y bison yum install -y libaio-devel yum install -y boost 下载 percon ...