鹿泉区建设局网站,关于网站设计的论文,网站源码上传完后怎么做,国内医院网站开发现状由于工作需要#xff0c;要直观的看到某个业务是由那些子业务引起的异常#xff0c;所以我需要用树表的方式来展现各个层次的数据。 需求#xff1a; 1、数据层次分明#xff1b; 2、数据读取慢、需要动态加载孩子节点#xff1b; 3、支持默认展开多少层。 在网上找到了很… 由于工作需要要直观的看到某个业务是由那些子业务引起的异常所以我需要用树表的方式来展现各个层次的数据。 需求 1、数据层次分明 2、数据读取慢、需要动态加载孩子节点 3、支持默认展开多少层。 在网上找到了很多资料发现treeTable方面的组件质量都不高有些还不错样式不符合性能也比较差。想想树表也挺简单的不就是通过隐藏或者展现某些tr来实现嘛。于是乎自己写一个。 2011年5月4号恰好放假一个下午于是在家里风风火火开始构造自己的树表插件。 样式我就用了http://www.hanpau.com/index.php?pagejqtreetable包括图片以及参数命名都借鉴了。但这款插件质量不怎样使用方式很麻烦效率低。 一、使用接口 个人觉得接口这部分是一款插件是否好用的核心。 jqTreeTable的用法 html结构 Html代码 span stylefont-size: small;table idid trtd1/td/tr trtd2/td/tr trtd3/td/tr trtd4/td/tr /table/span js调用 Js代码 span stylefont-size: small;var map [0, 1, 1, 0, 4, 5]; var options {}; $(#id).jqTreeTable(map, options);/span 这个使用方式比较麻烦后台不仅要构造html而且还要构造出map的数组。 所以我自己的组件改造了这种结构如下 html结构 Html代码 span stylefont-size: small;table idid tr id1td1/td/tr tr id2 pId1td2/td/tr tr id3 pId1td3/td/tr tr id4 pId3td4/td/tr /table/span js调用 Js代码 span stylefont-size: small;var options {}; $(#id).jqTreeTable(options);/span 我这种方式只需要构造html把父子关系当作自定义属性放在html中使用相对方便。注意我刚开始是使用 key1 pKey2的方式来标识一行的数据以及行之间的关系但想到以后通过自定义属性key来选择行效率比较低所以改为id来存储行的唯一标识。 二、html的格式 在jqTreeTable中 扣红的html对应的格式是 Html代码 span stylefont-size: small;tr td6/td td img src../images/vertline.gif classpreimg img src../images/vertline.gif classpreimg img src../images/blank.gif classpreimg img src../images/tv-collapsable.gif classparimg idtreet16Child of 4 /td td[0, 2, 3, 4, 6]nbsp;/td td4/td td[7]/td /tr/span 这里有两个问题 1、都用图片在网速慢的情况时会产生很多图片占用符...不好看。 2、直接用图片会产生很多小图片且不能合并。 以下是我优化的结构 Html代码 span stylefont-size: small;tr td6/td td span classpre_span span classvertline/span span classvertline/span span classblank/span /span span classcollapsable/span Child of 4 /td td[0, 2, 3, 4, 6]nbsp;/td td4/td td[7]/td /tr/span 这样解决了上述问题 1、在网速慢的情况时只不过看不到背景可不会出现图片占用符。 2、使用背景偏移的方式可以把小图片合并在同张图片中。 三、原创treeTable的实现 基本逻辑 1、展开节点的图标有分最后一个跟非最后一个例如展开节点时最后一个的展开和最后一个的展开。需要isLastOne 2、如果父节点是最后一个节点则前缀加如果父节点不是最后一个节点则前缀加。需要isLastOne、hasChild 3、如果有孩子则显示或-号如果没有则是普通的叶子节点。需要hasChild 4、有孩子的节点点击则展开或者隐藏相应的子节点。需要hasChild 5、如果存在前一个兄弟节点则使用节点的前缀图标若不存在则用父节点的图标。需要isFirstOne 实现过程 1、在html中我只是把父子节点的关系写在自定义属性但对于节点是否有孩 子(hasChild)是否是最后一个节点(isLastOne)是否是第一个节点(isFirstOne)都还不知道。所以第一步要分析出这些信 息把这些信息都记录到自定义属性。【注意这些信息其实也可以记录到DOM对象的自定义属性中但DOM对象的自定义属性无法在生成html的时候初始 化所以不采用。】 2、先扫描所有的tr构造出两个map分别记录{pId [id1, id2]}和{id pId}的关系。 3、再次扫描所有的tr根据两个map的关系给tr增加hasChild、isLastOne、isFirstOne等自定义标签并开始构造节点图标。 4、给整个table增加点击事件监控如果是来自(hasChild)的父节点则进行点击事件。【亮点jqTreeTable是给每个图标都绑定事件而我是给整个table绑定一个点击事件提高性能。】 最后效果 5月4号那天花了下午完成基本功能晚上一直自主加班到1点完善功能和优化性能包括使用span替换img使用table整体的点击事件等。为自己的执着而加班最后效果还比较满意。还差将图片合并成一张再改改css就ok了。 原创jquery插件treeTable v1.1 这个版本提高了性能做了以下改进 * 1、使用了Css Sprite Tools 合并了分散的图标 * 2、使用了.id的方式来代替原来[pIdid]这样选择孩子效率更高 * 3、把css剥离出来增加动态添加css每次家在前判断是否添加过 关于第二点非常感谢onli同学的提醒。但我并没有直接修改我的接口直接除去pId而是在第一次遍历时将pId作为class名添加到节点中。这样有两个好处 1接口可读性会比较好pId比class更容易理解。 2第二点如果直接使用class那节点本来就有样式这样获取到的className还要去分解空格得到pId挺麻烦的。 原创jquery插件treeTable V1.3 这个版本扩展了事件做了以下改进 * 1、增加onSelect事件onSelect: function($treeTable, id){} * 2、增加beforeExpand事件beforeExpand : function($treeTable, id){} 动态加载节点就靠beforeExpand 事件了。 原创jquery插件treeTable V1.4.2 这个版本修复了bug做了以下改进 * 1、修复了多个tableTree不在同个页面的bug并且可以让不同的tableTree使用不同的主题。 * 2、增加了controller的自定义标签来控制可点击的区域。 转http://zhanchaojiang.iteye.com/blog/1036454 treeTable.rar (35.1 KB)描述: treeTable V1.0下载次数: 210treeTable_V1.1.rar (28.8 KB)下载次数: 54treeTable_v1.3.rar (29.5 KB)下载次数: 87treeTable_v1.4.2.rar (42.6 KB)下载次数: 716转载于:https://www.cnblogs.com/zhoujg/archive/2013/04/24/3039486.html
