原创jquery插件treeTable.docxVIP

jquery插件treeTabletreeTable是跨浏览器、性能很高的jquery的树表组件，它使用非常简单，只需要引用jquery库和一个js文件，接口也很简单。优点兼容主流浏览器: 支持IE6和IE6+, Firefox, chrome, Opera, Safari接口简洁: 在普通表格的基础上增加父子关系的自定义标签就可以组件性能高: 内部实现了只绑定了table的事件、使用了css sprite合并图片等提供两种风格: 通过参数来设置风格效果图接口配置参数theme: string {主题，有两个选项：default、vsStyle. 默认:default}expandLevel: int {树表的展开层次. 默认:1}column: int {可控制列的序号. 默认:0，即第一列}onSelect: function {拥有controller自定义属性的元素的点击事件，return false则中止展开. 默认值:function($treeTable, id) { //$treeTable 当前树表的jquery对象. //id 当前行的id //返回false，则直接退出，不会激发后面的beforeExpand和子节点的展开 return true; }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({}) 如:引用的文件script src=/script/jquery.js type=text/javascript /script script src=/script/treeTable/jquery.treeTable.js type=text/javascript /scriptjs代码?script?type=text/javascript?$(function(){?var?option?=?{?theme:vsStyle,?expandLevel?:?2,?beforeExpand?:?function($treeTable,?id)?{?//判断id是否已经有了孩子节点，如果有了就不再加载，这样就可以起到缓存的作用?if?($(.?+?id,?$treeTable).length)?{?return;?}?//这里的html可以是ajax请求?var?html?=?tr?id=8?pId=6td5.1/tdtd可以是ajax请求来的内容/td/tr?+?tr?id=9?pId=6td5.2/tdtd动态的内容/td/tr;?$treeTable.addChilds(html);?},?onSelect?:?function($treeTable,?id)?{?window.console??console.log(onSelect:?+?id);??}?};?$(#treeTable1).treeTable(option); });?/script?html结构?table?id=treeTable1?style=width:?100%?tr?td?style=width:?200px;?标题/td?td?内容/td?/tr?tr?id=1?td?span?controller=true1/span/td?td?内容/td?/tr?tr?id=2?pid=1?td?span?controller=true2/span/td?td?内容/td?/tr?tr?id=3?pid=2?td?3/td?td?内容/td?/tr?tr?id=4?pid=2?td?4/td?td?内容/td?/tr?tr?id=5?pid=4?td?4.1/td?td?内容/td?/tr?tr?id=6?pid=1?haschild=true?td?5/td?td?注意这个节点是动态加载的/td?/tr?tr?id=7?td?