Dhtmlx是一个半开源的js框架,说是半开源,因为它的有些脚本是收费的。总体感觉很轻巧,可依赖的东西不多,和ext这样的庞然大物,dhtmlx应该定位为一个tool更为合适。我自己一直在使用,很喜欢它。因为网上好像没看见可用的API中文翻译,今天终于鼓起勇气来做这件事情,纯属个人爱好,大伙见笑了,其实我的英文不好,大学四年,英语就挂过四次。好,不废话了,这就开始。
1 dhtmlxgrid
1.1 API
1.1.1 attachEvent(evName , evHandler)
版本:大众版
参数:
evName 可定义事件名称
evHandler 用户自定义处理函数.
用途:对当前grid事件绑定用户的自定义的处理js函数,这里支持两种格式定义
一 匿名函数定义
<script>
grid.attachEvent("onRowSelect",function(rowId,cellIndex){
alert("Row with id="+rowId+" was selected");
});
</script>
二 命名函数定义
<script>
grid.attachEvent("onEditCell",doOnEditCell);
function doOnEditCell(stage,rowId,cellIndex,newValue,oldValue){
if ((stage==2)&&(newValue!=oldValue)){
alert("Cell with id="+rowId+" and index="+cellIndex+" was edited");
return true;
}
return true;
}
</script>
这里也支持一个事件绑定多个处理函数的方法
<script>
grid.attachEvent("onCheck",doOnCheck1);
grid.attachEvent("onCheck",doOnCheck2);
function doOnCheck1(rowId,cellIndex,state){
if (state){
alert("Checkbox in the row with id="+rowId+" was checked");
}
}
function doOnCheck2(rowId,cellIndex,state){
if (state){
alert("Checkbox in column with index="+cellIndex+" was checked");
}
}
</script>
执行顺序为doOnCheck1 –》doOnCheck2,这里可以用于通过全局js变量实现grid连动效果的实现。如,先onRowSelect获得当前选中单元格的值,针对当前值,定义一个函数改变当前cell的样式等,当然这样的操作也可以一个function中实现,这里定义为分离,可实现两个函数的被其他地方公共使用。
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>
1.1.5 destructor
版本:大众版
参数:
Obj:当前绑定的grid的对象
用途:
彻底销毁当前grid在页面中的使用,并释放其对象占用的资源(如js数组置空等),若重新使用,必须通过init创建,有别于clearAll,后者仅把grid中的所有行删除,grid本身还可以进行数据的重填充。
这里也可以采用比较暴力的销毁方式,其grid负载的容器.innerHTML = “ ”;即可,但这样grid创建的全局js变量没有完成销毁过程
参考实例:无
1.1.6 detachEvent(id)
版本:大众版
参数:
id 事件序号,全局唯一
用途:
删除grid中某个事件的处理过程
参考实例:无
1.1.7 detachFooter(index)
版本:专业版
参数:
index 表脚索引
用途:
删除grid的某个表脚,与attachFooter配对使用
参考实例:无
(注:本人文章均为原创,转载请注明出处!20100620写于深圳。)