随笔-55  评论-72  文章-2  trackbacks-0

   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 = “&nbsp;”;即可,但这样grid创建的全局js变量没有完成销毁过程

参考实例:无

1.1.6     detachEvent(id)

版本:大众版

参数:

id 事件序号,全局唯一

用途:

删除grid中某个事件的处理过程

参考实例:无

1.1.7                      detachFooter(index)

版本:专业版

参数:

index 表脚索引

用途:

删除grid的某个表脚,与attachFooter配对使用

 参考实例:无

(注:本人文章均为原创,转载请注明出处!20100620写于深圳。)



一篇好的文章应该如一坛佳酿,未偿已久醉于心;或如一壶好茶,品尝之间回味无穷;或如与心爱的人共进晚餐,仅餐秀色足以饱食。我不妄想自己的文章能惊世骇俗,但始终期待有“和旋之音,击缶之伴”。
posted on 2010-06-24 22:09 刀光剑影 阅读(859) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航: