dhtmlx使用翻译（一）dhtmlxgrid 配置部分

最新推荐文章于 2025-06-26 14:07:56 发布

zdrlihang

最新推荐文章于 2025-06-26 14:07:56 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： function destructor button div html input

本文链接：https://blog.youkuaiyun.com/zdrlihang/article/details/5813618

本文详细介绍了dhtmlxGrid的配置方法，包括事件绑定、表头与表脚的设置等，适合初学者及需要深入理解dhtmlxGrid特性的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

dhtmlx使用翻译（一）dhtmlxgrid 配置部分收藏
Dhtmlx是一个半开源的js框架，说是半开源，因为它的有些脚本是收费的。总体感觉很轻巧，可依赖的东西不多，和ext这样的庞然大物，dhtmlx应该定位为一个tool更为合适。我自己一直在使用，很喜欢它。因为网上好像没看见可用的API中文翻译，今天终于鼓起勇气来做这件事情，纯属个人爱好，大伙见笑了，其实我的英文不好，大学四年，英语就挂过四次。好,不废话了，这就开始。

1       dhtmlxgrid
1.1     API
1.1.1                      attachEvent(evName , evHandler)

版本：大众版

参数：

evName 可定义事件名称

evHandler 用户自定义处理函数.

用途：对当前grid事件绑定用户的自定义的处理js函数，这里支持两种格式定义

一匿名函数定义

Js代码 < type="application/x-shockwave-flash" width="14" height="15" src="http://warison-2008.javaeye.com/javascripts/syntaxhighlighter/clipboard_new.swf" flashvars="clipboard=%3Cscript%3E%0A%20%20grid.attachEvent(%22onRowSelect%22%2Cfunction(rowId%2CcellIndex)%7B%0A%20%20%20%20%20alert(%22Row%20with%20id%3D%22%2BrowId%2B%22%20was%20selected%22)%3B%0A%20%20%7D)%3B%0A%3C%2Fscript%3E" quality="high" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer">
<script>
grid.attachEvent("onRowSelect",function(rowId,cellIndex){
     alert("Row with id="+rowId+" was selected");
});
</script>

二命名函数定义

这里也支持一个事件绑定多个处理函数的方法

Grid中可供绑定的事件，参考grid事件介绍。

1.1.2 attachFooter(values, style)
版本：专业版

参数：

values:增加行的每个单元格值，以数组的形式给出，这里支持html的值表示

style：单元格的样式

用途：

在grid的最后动态新增一行(表脚)，注意当前表脚不会随上下滚动条一起移动，并设置各单元数据和格样式

可供参考实例：

//数组形式
grid.attachFooter("A,B,C,D");
//数组形式
grid.attachFooter(["A","B","C","D"])
//跨列增加
grid.attachFooter("A,#cspan,C,#cspan");
//跨行增加
grid.attachFooter("A,#rspan,C,#rspan");
//表达式html值
grid.attachFooter ("A,<strong>B</strong>,C,<a href='http://test.com'>D</a>");
//指定各单元格样式
grid.attachFooter ("A,B,C,D",["","color:red;","",""]);

在onload事件中调用
grid.load("grid.xml",function(){
        grid.attachFooter ('A,B,C');
        grid.attachFooter ('G,H,I');
        grid.setSizes();//文档上说这里必须加上，但没发现其必要性
   });


1.1.3                      attachHeader(values, style)
版本：大众版

参数：

values:增加行的每个单元格值，以数组的形式给出，这里支持html的值表示

style：单元格的样式

用途：

定义grid的表头，注意当前表头不会随上下滚动条一起移动，并设置各单元数据和格样式

具体运用与attachHeader类似

1.1.4 attachToObject(obj)
版本：大众版

参数：

Obj:当前绑定的grid的对象

用途：

将当前定义grid对象重新绑定到某个容器中，可实现grid在页面上容器间（如div）的动态切换，好像不能重新绑定到原有的容器定义，使用原有的容器仅是display=none而已，因为：通过alert 容器的innerHTML发现，原有容器和新绑定容器值一致

参考实例：

<!—原有容器-->
<div id="listdiv"   style=" border-style:solid;width:100%;height:316px;"></div>
<table width="700">
    <tr>
        <td width="50%" valign="top">
<!—可绑定新容器-->
<div id="gridbox" style="width=350px;height:150px;background-color:white;"></div>
        </td>
        <td valign="top">
<!—可绑定新容器-->
<div id="gridbox2" style="width=350px;height:150px;background-color:white;border:1px solid blue;" align="right"></div>
        </td>
    </tr>
<table>
<input type="button" onclick="dotacche()" value="00000"/>
<input type="button" onclick="doctacche()" value="1111"/>
<script>
function dotacche() {
         ckmygrid.attachToObject(document.getElementById("gridbox2"));

}
function doctacche() {
         ckmygrid.attachToObject(document.getElementById("gridbox"));
//      ckmygrid.attachToObject(document.getElementById("listdiv"));这里执行没有效果
}
</script>