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>

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

最终效果图如下:

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

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

下图的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 = "颜色"

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