前段时间有个需求中有点击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 = "颜色"
大功告成,通过上述方法可以实现自定义点击单元格的背景颜色了。