雷林鹏分享:jQuery EasyUI 数据网格 - 条件设置行背景颜色

  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(编辑:雷林鹏 来源:网络 侵删)

原文地址:https://www.cnblogs.com/pengpeng1208/p/10729425.html

时间: 2024-11-02 00:39:21

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

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

数据网格(DataGrid)列可以使用 'columns' 属性简单地定义.如果您想动态地改变列,那根本没有问题.为了改变列,您可以重新调用datagrid 方法,并传递一个新的 columns 属性. 创建数据网格(DataGrid) url="data/datagrid_data.json" singleSelect="true" iconCls="icon-save"> $('#tt').datagrid({ columns:[[ {

雷林鹏分享jQuery EasyUI 布局 - 在面板中创建复杂布局

面板(Panel)允许您创建用于多种用途的自定义布局.在本实例中,我们使用面板(panel)和布局(layout)插件来创建一个 msn 消息框. 我们在区域面板中使用多个布局(layout).在消息框的顶部我们放置一个查询输入框,同时在右边放置一个人物图片.在中间的区域我们通过设置 split 属性为 true,把这部分切割为两部分,允许用户改变区域面板的尺寸大小. 以下就是所有代码: Search: Hi,I am easyui. 我们不需要写任何的 javascript 代码,它自己有非常

雷林鹏分享:jQuery EasyUI 数据网格 - 创建属性网格

jQuery EasyUI 数据网格 - 创建属性网格 属性网格(property grid)带有一个内置的 expand(展开)/collapse(合并) 按钮,可以简单地为行分组.您可以简单地创建一个可编辑属性的分层(hierarchical)列表. 设置 HTML url="propertygrid_data.json" showGroup="true" scrollbarSize="0" > 准备 json 数据 [ {"

雷林鹏分享:jQuery EasyUI 数据网格 - 列运算

jQuery EasyUI 数据网格 - 列运算 在本教程中,您将学习如何在可编辑的数据网格(datagrid)中包含一个运算的列.一个运算列通常包含一些从一个或多个其他列运算的值. 首先,创建一个可编辑的数据网格(datagrid).这里我们创建了一些可编辑列,'listprice'.'amount' 和 'unitcost' 列定义为 numberbox 编辑类型.运算列是 'unitcost' 字段,将是 listprice 乘以 amount 列的结果. title="Editable

雷林鹏分享:jQuery EasyUI 数据网格 - 添加查询功能

jQuery EasyUI 数据网格 - 添加查询功能 本实例演示如何从数据库得到数据,并将它们显示在数据网格(datagrid)中.然后演示如何根据用户输入的搜索关键词搜寻显示结果. 创建数据网格(DataGrid) 创建带有分页功能的数据网格(datagrid),然后添加工具栏到其中. url="datagrid24_getdata.php" toolbar="#tb" title="Load Data" iconCls="icon

JQuery EasyUI DataGrid根据条件设置表格行样式(背景色)

1.javascript定义函数返回样式 <script type="text/javascript"> //根据条件设置表格行背景颜色 function setRowBgColor(index, row) { if (row.ERROR_INFO != null && row.ERROR_INFO != "") { return 'background-color:yellow;color:black;'; } } </scrip

jquery easyui datagrid 获取Checked选择行(勾选行)数据

原文:jquery easyui datagrid 获取Checked选择行(勾选行)数据 getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录. getSelections:取得所有选中行数据,返回元素记录的数组数据. getChecked:取得checkbox选择行的数据,返回元素记录的数组数据. getSelected跟getSelections是选中行,而且getChecked是选择行. 选中行的意思就是,我们单击到某一个行,这个时候该行的背景色为

Silverlight DataGrid数据行背景颜色控制

sdk:DataGrid数据绑定后,部分特殊的行需要用不同的背景颜色来显示.(注册DataGrid的LoadingRow事件) 1 private void radGridView_LoadingRow(object sender, DataGridRowEventArgs e) 2 { 3 4 //获取当前加载的行标(从0开始) 5 int i = e.Row.GetIndex(); 6 7 //获取DataGrid绑定的数据集合 8 ObservableCollection<CntrMstM

雷林鹏分享:jQuery EasyUI 应用 - 创建 CRUD 数据网格(DataGrid)

在上一章节中,我们使用对话框(dialog)组件创建了 CRUD 应用来创建和编辑用户信息.本教程我们将告诉您如何创建一个 CRUD 数据网格(DataGrid). 我们将使用 可编辑的数据网格(DataGrid)插件 来完成这些 CRUD 操作动作. 步骤 1:在 HTML 标签中定义数据网格(DataGrid) toolbar="#toolbar" idField="id" rownumbers="true" fitColumns="