您好,欢迎访问三七文档
当前位置:首页 > 办公文档 > 其它办公文档 > 原创jquery插件treeTable
jquery插件treeTabletreeTable是跨浏览器、性能很高的jquery的树表组件,它使用非常简单,只需要引用jquery库和一个js文件,接口也很简单。优点1.兼容主流浏览器:支持IE6和IE6+,Firefox,chrome,Opera,Safari2.接口简洁:在普通表格的基础上增加父子关系的自定义标签就可以3.组件性能高:内部实现了只绑定了table的事件、使用了csssprite合并图片等4.提供两种风格:通过参数来设置风格效果图接口配置参数theme:string{主题,有两个选项:default、vsStyle.默认:default}expandLevel:int{树表的展开层次.默认:1}column:int{可控制列的序号.默认:0,即第一列}onSelect:function{拥有controller自定义属性的元素的点击事件,returnfalse则中止展开.默认值:function($treeTable,id){//$treeTable当前树表的jquery对象.//id当前行的id//返回false,则直接退出,不会激发后面的beforeExpand和子节点的展开returntrue;}beforeExpand:{展开子节点前触发的事件,默认值:function($treeTable,id){//$treeTable当前树表的jquery对象.//id当前行的id}属性说明id:string行的idpId:string父行的idcontroller:bool指定某一个元素是否可以控制行的展开hasChild:bool指定某一个tr元素是否有孩子(动态加载需用到)isFirstOne:bool指定某一个tr元素是否是第一个孩子(自动生成属性,只读)isLastOne:bool指定某一个tr元素是否是最后一个孩子(自动生成属性,只读)prevId:string前一个兄弟节点的id(自动生成属性,只读)depth:string当前行的深度(自动生成属性,只读)使用方式$(#元素id).treeTable({})如:引用的文件scriptsrc=/script/jquery.jstype=text/javascript/scriptscriptsrc=/script/treeTable/jquery.treeTable.jstype=text/javascript/scriptjs代码scripttype=text/javascript$(function(){varoption={theme:'vsStyle',expandLevel:2,beforeExpand:function($treeTable,id){//判断id是否已经有了孩子节点,如果有了就不再加载,这样就可以起到缓存的作用if($('.'+id,$treeTable).length){return;}//这里的html可以是ajax请求varhtml='trid=8pId=6td5.1/tdtd可以是ajax请求来的内容/td/tr'+'trid=9pId=6td5.2/tdtd动态的内容/td/tr';$treeTable.addChilds(html);},onSelect:function($treeTable,id){window.console&&console.log('onSelect:'+id);}};$('#treeTable1').treeTable(option);});/scripthtml结构tableid=treeTable1style=width:100%trtdstyle=width:200px;标题/tdtd内容/td/trtrid=1tdspancontroller=true1/span/tdtd内容/td/trtrid=2pid=1tdspancontroller=true2/span/tdtd内容/td/trtrid=3pid=2td3/tdtd内容/td/trtrid=4pid=2td4/tdtd内容/td/trtrid=5pid=4td4.1/tdtd内容/td/trtrid=6pid=1haschild=truetd5/tdtd注意这个节点是动态加载的/td/trtrid=7td8/tdtd内容/td/tr/table
本文标题:原创jquery插件treeTable
链接地址:https://www.777doc.com/doc-2602565 .html