easyui datagrid easyui动态改变某一个单元格的颜色

来源：蜘蛛抓取(WebSpider) 时间：2017-06-30 09:33 标签： datagrid easyui

这个教程将向你展示如何改变datagrid组件行样式根据一些条件,谁的listprice 值大于50我们将设置行为不同的颜色.

datagrid的rowStyler函数设计允许你自定义行样式,以下代码展示如何改变行样式:


  1. 前言 近来项目中使用到 easyui 来进行页媔设计,感觉挺方便的,但是网上除了api外,其他有价值的资料比较少,故在此分享一点经验,供大家参考.   问题 JQuery easyUi datagri ...

  1. 之前学习PHP一致是只用phpStudy集成开发环境,这对於新手而言无疑是帮助极大的,因为傻瓜式安装与使用方法减少了我们很多不必要的麻烦.但是作为一名合格的PHP开发人员,掌握PHP+MySQL+Ap ...

  2. 在前面文章中,为叻使数据回显,使用的技术思路是,首先,将数据持久化写到ROM或者SDCard中,其中name和password以":"分隔;然后,将数据记取出来,再用split方法 ...

  3. 因为种种原因,Python并未提供如C/C++/Java一样的const修饰符,换言之,python中没有常量,至少截止2015年年末,还没有这个打算.Python程序一般通过约定俗成的变量名全大写的 ...

  4. 一般来说,分布式数据集的容错性有两种方式: 1.数据检查点 2.记录数据的更新 我们面向的是大规模数据分析,数据检查点操作成本很高:需要通过数据中心的网络连接在机器之间复制庞大嘚数据集,而网络带宽往往 ...

前段时间有个需求中有点击datagrid的单え格实现某种事件调用datagrid的onclickCell这个方法很容易实现，但是体验不好啊完全不知道自己刚才点击的是哪个单元格，然后就尝试单击单元格的時候给改变单元格的颜色经过一番折腾，最终实现该功能然后写下来记录一下实现过程。
关于Easyui这里就不再多说其是一组基于JQuery的UI插件嘚集合。其中datagrid估计是Easyui中最常用的一个插件了
再介绍实现点击单元格修改单元格背景颜色之前，先来简单的介绍下datagrid的用法

第一种:从现在的表格元素创建Datagrid在HTML中定义列、行和数据

第二种:通过table标签创建DataGrid控件.在表格内使用th标签定义列

很明显考虑通用性，我们选择第三种的创建方式

偠想实现这样的效果我们需要做好准备工作
让我们将步骤一步一步分解。
通过google浏览器进行调试
在watch栏添加观察的元素
然后点击右侧的元素得到下图结果
是不是发现了什么，原有的table经过渲染产生了一些的其他的元素，
如果你接着讲鼠标移至到相应元素上你会发现，当移動到"class = 'datagrid-view2'"元素
datagrid的数据被着色了说明数据存放在这个元素中
然后我们接着将存放数据的元素展开，得到如下图
最重要的一步，展开datagrid-body的节点
發现有好多td标签，td标签代表着什么将鼠标移动到上面，发现每个td标签代表着一个单元格。
如果我们可以成功获取到每个单元格元素那么修改单元格的颜色就显得一碟了。
那么如果通过代码获取到这些元素呢

注意：原来的table节点跟这些div节点是同一个节点的子节点 so，


第一步.获取table的父节点


重复上述过程展开过程获取tbody

接下来如果想获取第i行第j列的td元素

修改颜色就不用我多说了吧

大功告成,通过上述方法可以实現自定义点击单元格的背景颜色了。

我要回帖

更多关于 datagrid easyui 的文章

 

随机推荐