下手改造柴哥的Html2Tree

动手改造柴哥的Html2Tree

原文发表在：http://www.birchlee.com/post/2011/10/25/31.aspx

最近在使用一些js,jQuery树形控件，大多数都是基于json格式，都是按照要求的数据格式才能出固定的树形。扩展性差，还要研究他们的API。

树形控件有三点我觉得很重要：

1. 直觉是美观（简洁大方很重要）

2. 方便使用

3.易于扩展

项目中要求有复选框，这个很多树形控件实现了，节点后边是否能追加按钮，如增删查等等。大部分不行。

看到柴哥的Html2Tree:http://www.cnblogs.com/chaige/archive/2011/10/20/Html2Tree.html

设计思路如下：

??????????? Html2Tree采用的是以下方式构建树形：
??????????? 全局根元素：<dl></dl> 【dl(definition list):定义了树列表】
??????????? 节点元素：<dt></dt> 【dt(definition title):定义了节点标题】
??????????? 子节点：<dd></dd>【dd(definition description):定义了节点的内容描述】
??????????? 一个简单的树形：
??????????? <dl>
??????????????? <dt>根元素</dt>
??????????????? <dd>
??????????????????? <dl>
??????????????????????? <dt>子元素一</dt>
??????????????????????? <dt>子元素二</dt>
??????????????????????? <dl>子元素三</dt>
??????????????????? </dl>
??????????????? </dd>
??????????? </dl>
??????????? 样式如下：
??????????? .Html2Tree h3{树标题}
??????????? .Html2Tree dl, .Html2Tree dd, .Html2Tree dt,.Html2Tree dt a{所有超链接样式}
??????????? .Html2Tree dd{子节点}
??????????? .Html2Tree dl{节点列表样式}
??????????? .Html2Tree dl.last{}
??????????? .Html2Tree dt{节点样式}
??????????? .Html2Tree dt.open {节点展开样式}
??????????? .Html2Tree dt span{节点文本样式}
??????????? .Html2Tree dt span,.Html2Tree dt a{节点超链接样式}
??????????? .Html2Tree dl dt.focus a{节点获得焦点样式}
??????????? .Html2Tree dt.open span{展开节点文本样式}
??????????? .Html2Tree dt.file span{background:url(Html2Tree_black.gif) no-repeat 1px -98px}
??????????? .Html2Tree dt a:hover{text-decoration:underline;color:#DF2520}
??????????? .Html2Tree dt.file, .Html2Tree dt.error{background:url(Html2Tree_black.gif) no-repeat 3px -250px}
??????????? .Html2Tree_a3 dl {background:none}
??????????? .Html2Tree_a3 dl dt,
??????????? .Html2Tree_a3 dl dt.open ,
??????????? .Html2Tree_a3 dl dt span,
??????????? .Html2Tree_a3 dl dt.open span,
??????????? .Html2Tree_a3 dl dt.file span{background-image:url(Html2Tree_a3.gif)}
??????????? .Html2Tree_a3 dl dt.file{background: none}

?????????? 在mvc3项目中按照上述结构绑定数据列表，然后配合下面的Js，出现相应的效果。

??????????? 由于要添加额外的一些事件，索性把javascript改成了Jquery版本的，效果如下：

?????<script type="text/javascript">
??????? $(document).ready(function () {
??????????? var tree = $("#tree");
??????????? var theme = "black";

??????????? var dllist = tree.find("dl");??????????? for (var i = 0; i < dllist.length; i++) {
??????????????? var dl = $(dllist[i]);
??????????????? var dt = dl.children("dt:first");
??????????????? var dd = dl.children("dd");
??????????????? //当前节点样式
??????????????? if (dd.length == 0) {
??????????????????? dt.attr('class', "file");
??????????????? }
??????????????? else {
??????????????????? (function () {
??????????????????????? //节点的点击事件
??????????????????????? dt.click(function () {
??????????????????????????? var cdt = $(this);
??????????????????????????? var cdd = cdt.next();
??????????????????????????? //节点样式
??????????????????????????? var open = cdd.css("display") == undefined || cdd.css("display") == "none";
??????????????????????????? var dt_class = open ? 'open' : '';
??????????????????????????? cdt.attr("class", dt_class);
??????????????????????????? //子节点列表样式
??????????????????????????? var dd_display = open ? 'block' : 'none';
??????????????????????????? var dd_class = open ? 'open' : '';
??????????????????????????? cdd.css("display", dd_display);
??????????????????????????? cdd.attr("class", dd_class);
??????????????????????? });
??????????????????????? //复选框的事件
??????????????????????? dt.children("input:first").click(function (e) {
??????????????????????????? alert("点击复选框");
??????????????????????????? e.stopPropagation(); //阻止执行节点事件
??????????????????????? });
??????????????????? })(jQuery);
??????????????? }
??????????? }
??????? });
??? </script>点击下载

?

查看更多 下一篇