Easyui之datagrid实现点击单元格修改单元格背景颜色
2016-04-24 18:42
609 查看
前段时间有个需求中有点击datagrid的单元格实现某种事件,调用datagrid的onclickCell这个方法很容易实现,但是体验不好啊,完全不知道自己刚才点击的是哪个单元格,然后就尝试单击单元格的时候给改变单元格的颜色,经过一番折腾,最终实现该功能,然后写下来记录一下实现过程。
关于Easyui这里就不再多说,其是一组基于JQuery的UI插件的集合。其中datagrid估计是Easyui中最常用的一个插件了。
再介绍实现点击单元格修改单元格背景颜色之前,先来简单的介绍下datagrid的用法
第一种:从现在的表格元素创建Datagrid,在HTML中定义列、行和数据
第二种:通过table标签创建DataGrid控件.在表格内使用th标签定义列
第三种:使用Javascript去创建Datagrid控件
很明显考虑通用性,我们选择第三种的创建方式
最终效果图如下:
要想实现这样的效果,我们需要做好准备工作
让我们将步骤一步一步分解。
下图的datagrid 的id为 header
通过google浏览器进行调试
在watch栏添加观察的元素
然后点击右侧的元素,得到下图结果
是不是发现了什么,原有的table经过渲染,产生了一些的其他的元素,
如果你接着讲鼠标移至到相应元素上,你会发现,当移动到"class = 'datagrid-view2'"元素
datagrid的数据被着色了,说明数据存放在这个元素中
然后我们接着将存放数据的元素展开,得到如下图
我们发现该元素有三个节点:很容易发现"class='datagrid-header'"的节点对应着datagrid的列头,
”class='datagrid-footer'“的节点对应着datagrid的尾部,我们的数据则保存在"class='datagrid-body'"的节点里
,最重要的一步,展开datagrid-body的节点。
发现有好多td标签,td标签代表着什么?将鼠标移动到上面,发现每个td标签,代表着一个单元格。
如果我们可以成功获取到每个单元格元素,那么修改单元格的颜色就显得一碟了。
那么如果通过代码获取到这些元素呢?
注意:原来的table节点跟这些div节点是同一个节点的子节点
so,
第一步.获取table的父节点
在watch添加上述代码,然后展开,再展开childNodes
获取"class='datagrid-view2'"节点元素
然后再次展开
获取”class='datagrid-body'“节点元素
again展开
获取table节点
重复上述过程展开过程,获取tbody
接下来如果想获取第i行第j列的td元素
使用如下代码
修改颜色就不用我多说了吧
大功告成,通过上述方法可以实现自定义点击单元格的背景颜色了。
关于Easyui这里就不再多说,其是一组基于JQuery的UI插件的集合。其中datagrid估计是Easyui中最常用的一个插件了。
再介绍实现点击单元格修改单元格背景颜色之前,先来简单的介绍下datagrid的用法
datagrid的创建
有三种创建方法第一种:从现在的表格元素创建Datagrid,在HTML中定义列、行和数据
<table class="easyui-datagrid"> <thead> <tr> <th data-options="field:'code'">编码</th> <th data-options="field:'name'">名称</th> <th data-options="field:'price'">价格</th> </tr> </thead> <tbody> <tr> <td>001</td><td>name1</td><td>2323</td> </tr> <tr> <td>002</td><td>name2</td><td>4612</td> </tr> </tbody> </table>
第二种:通过table标签创建DataGrid控件.在表格内使用th标签定义列
<table class="easyui-datagrid" style="width:400px;height:250px" data-options="url:'datagrid_data.json',fitColumns:true,singleSelect:true"> <thead> <tr> <th data-options="field:'code',width:100">编码</th> <th data-options="field:'name',width:100">名称</th> <th data-options="field:'price',width:100,align:'right'">价格</th> </tr> </thead> </table>
第三种:使用Javascript去创建Datagrid控件
<table id="dg"></table> <script type="javascript/text"> $('#dg').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',width:100}, {field:'name',title:'Name',width:100}, {field:'price',title:'Price',width:100,align:'right'} ]] }); <script>
很明显考虑通用性,我们选择第三种的创建方式
最终效果图如下:
要想实现这样的效果,我们需要做好准备工作
让我们将步骤一步一步分解。
下图的datagrid 的id为 header
通过google浏览器进行调试
在watch栏添加观察的元素
然后点击右侧的元素,得到下图结果
是不是发现了什么,原有的table经过渲染,产生了一些的其他的元素,
如果你接着讲鼠标移至到相应元素上,你会发现,当移动到"class = 'datagrid-view2'"元素
datagrid的数据被着色了,说明数据存放在这个元素中
然后我们接着将存放数据的元素展开,得到如下图
我们发现该元素有三个节点:很容易发现"class='datagrid-header'"的节点对应着datagrid的列头,
”class='datagrid-footer'“的节点对应着datagrid的尾部,我们的数据则保存在"class='datagrid-body'"的节点里
,最重要的一步,展开datagrid-body的节点。
发现有好多td标签,td标签代表着什么?将鼠标移动到上面,发现每个td标签,代表着一个单元格。
如果我们可以成功获取到每个单元格元素,那么修改单元格的颜色就显得一碟了。
那么如果通过代码获取到这些元素呢?
注意:原来的table节点跟这些div节点是同一个节点的子节点
so,
第一步.获取table的父节点
a = document.getElementById("header") parent = = a.parentNode
在watch添加上述代码,然后展开,再展开childNodes
获取"class='datagrid-view2'"节点元素
view2 = parent.childNodes[1]
然后再次展开
获取”class='datagrid-body'“节点元素
datagridbody = view2.childNodes[1]
again展开
获取table节点
tablenode = datagridbody.childNodes[0]
重复上述过程展开过程,获取tbody
tbodynode = tablenode.childeNodes[0]
接下来如果想获取第i行第j列的td元素
使用如下代码
tdnode = tbodynode.childNodes[i-1].childNodes[j-1] //下标从0开始的
修改颜色就不用我多说了吧
tdnode.style.backgroundColor = "颜色"
大功告成,通过上述方法可以实现自定义点击单元格的背景颜色了。
相关文章推荐
- PHP中include和require
- Leetcode Increasing Triplet Subsequence
- [UIPasteboard generalPasteboard]剪贴板的使用
- AmazeUI 模态框封装
- flex build 4 三个命名空间fx,mx,s
- IOS本地推送通知的一些属性 UILocalNotification
- 软件设计模式——建造者模式(Builder)
- 码农小汪-SQL 图形界面设计约束,unqiue,check Default Foreign
- 利用uitouch简单的实现了微信cell效果
- Restricted Boltzmann Machine(to be continued)
- 51. N-Queens
- easyui里关于datagrid日期不能正常显示
- 【UE4学习】07——设置自己的模板 Converting a Project to a Template
- GUI编程基础
- Easyui datagrid 渲染
- StringBuffer和StringBuilder
- UIView Animation
- Codeforces #591 D Chip 'n Dale Rescue Rangers(二分查找/转换参考系)
- Rescue宽度搜索的最优解
- 解密uiautomator-API之UiDevice实例化方法