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

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

转载于:https://www.cnblogs.com/leetao94/p/5427704.html