Easyui之datagrid实现点击单元格修改单元格背景颜色

前段时间有个需求中有点击datagrid的单元格实现某种事件,调用datagrid的onclickCell这个方法很容易实现,但是体验不好啊,完全不知道自己刚才点击的是哪个单元格,然后就尝试单击单元格的时候给改变单元格的颜色,经过一番折腾,最终实现该功能,然后写下来记录一下实现过程。

关于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>

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

最终效果图如下:

Easyui之datagrid实现点击单元格修改单元格背景颜色

要想实现这样的效果,我们需要做好准备工作

让我们将步骤一步一步分解。

下图的datagrid 的id为 header

通过google浏览器进行调试

在watch栏添加观察的元素

Easyui之datagrid实现点击单元格修改单元格背景颜色

然后点击右侧的元素,得到下图结果

Easyui之datagrid实现点击单元格修改单元格背景颜色

是不是发现了什么,原有的table经过渲染,产生了一些的其他的元素,

如果你接着讲鼠标移至到相应元素上,你会发现,当移动到"class = 'datagrid-view2'"元素

Easyui之datagrid实现点击单元格修改单元格背景颜色

datagrid的数据被着色了,说明数据存放在这个元素中

然后我们接着将存放数据的元素展开,得到如下图

Easyui之datagrid实现点击单元格修改单元格背景颜色

我们发现该元素有三个节点:很容易发现"class='datagrid-header'"的节点对应着datagrid的列头,

”class='datagrid-footer'“的节点对应着datagrid的尾部,我们的数据则保存在"class='datagrid-body'"的节点里

,最重要的一步,展开datagrid-body的节点。

Easyui之datagrid实现点击单元格修改单元格背景颜色

发现有好多td标签,td标签代表着什么?将鼠标移动到上面,发现每个td标签,代表着一个单元格。

如果我们可以成功获取到每个单元格元素,那么修改单元格的颜色就显得一碟了。

那么如果通过代码获取到这些元素呢?

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

so,

第一步.获取table的父节点

a = document.getElementById("header")
parent = = a.parentNode

在watch添加上述代码,然后展开,再展开childNodes

Easyui之datagrid实现点击单元格修改单元格背景颜色

获取"class='datagrid-view2'"节点元素

view2 = parent.childNodes[1]

然后再次展开

Easyui之datagrid实现点击单元格修改单元格背景颜色

获取”class='datagrid-body'“节点元素

datagridbody = view2.childNodes[1]

again展开

Easyui之datagrid实现点击单元格修改单元格背景颜色

获取table节点

tablenode = datagridbody.childNodes[0]

Easyui之datagrid实现点击单元格修改单元格背景颜色

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

tbodynode = tablenode.childeNodes[0]

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

使用如下代码

tdnode = tbodynode.childNodes[i-1].childNodes[j-1]  //下标从0开始的

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

tdnode.style.backgroundColor = "颜色"

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

上一篇:获取wpf datagrid当前被编辑单元格的内容


下一篇:数据库的约束规则与语义优化