jquery TreeView asp.net版

数据库设计部分




js部分  Tree.js

(function($) {
    $.fn.swapClass = function(c1, c2) {
        return this.removeClass(c1).addClass(c2);
    }
    $.fn.switchClass = function(c1, c2) {
        if (this.hasClass(c1)) {
            return this.swapClass(c1, c2);
        }
        else {
            return this.swapClass(c2, c1);
        }
    }
    $.fn.treeview = function(settings) {
        var dfop =
            {
                method: "POST",
                datatype: "json",
                url: false,
                cbiconpath: "Themes/default/images/tree/",
                icons: ["checkbox_0.gif", "checkbox_1.gif", "checkbox_2.gif"],
                showcheck: false, //是否显示选择            
                oncheckboxclick: false, //当checkstate状态变化时所触发的事件，但是不会触发因级联选择而引起的变化
                onnodeclick: false,
                cascadecheck: true,
                data: null,
                clicktoggle: true, //点击节点展开和收缩子节点
                theme: "bbit-tree-arrows" //bbit-tree-lines ,bbit-tree-no-lines,bbit-tree-arrows
            }

        $.extend(dfop, settings);
        var treenodes = dfop.data;
        var me = $(this);
        var id = me.attr("id");
        if (id == null || id == "") {
            id = "bbtree" + new Date().getTime();//5+1+a+s+p+x 
            me.attr("id", id);
        }

        var html = [];
        buildtree(dfop.data, html);
        me.addClass("bbit-tree").html(html.join(""));
        InitEvent(me);
        html = null;
        //预加载图片
        if (dfop.showcheck) {
            for (var i = 0; i < 3; i++) {
                var im = new Image();
                im.src = dfop.cbiconpath + dfop.icons[i];
                //alert(im.src)
            }
        }
        //region 
        function buildtree(data, ht) {
            ht.push("<div class='bbit-tree-bwrap'>"); // Wrap ;
            ht.push("<div class='bbit-tree-body'>"); // body ;
            ht.push("<ul class='bbit-tree-root ", dfop.theme, "'>"); //root
            var l = data.length;
           
            for (var i = 0; i < l; i++) {
                buildnode(data[i], ht, 0, i, i == l - 1);
            }
            ht.push("</ul>"); // root and;
            ht.push("</div>"); // body end;
            ht.push("</div>"); // Wrap end;
        }
        //endregion
        function buildnode(nd, ht, deep, path, isend) {
            ht.push("<li class='bbit-tree-node'>");
            ht.push("<div id='", id, "_", nd.id, "' tpath='", path, "' unselectable='on'");
            var cs = [];
            cs.push("bbit-tree-node-el");
            if (nd.hasChildren) {
                cs.push(nd.isexpand ? "bbit-tree-node-expanded" : "bbit-tree-node-collapsed");
              //  alert("push的值" + cs.length)
            }
            else {
                cs.push("bbit-tree-node-leaf");
            }
            if (nd.classes) { cs.push(nd.classes); }

            ht.push(" class='", cs.join(" "), "'>");
            //span indent
            ht.push("<span class='bbit-tree-node-indent'>");
            if (deep == 1) {
                ht.push("<img class='bbit-tree-icon' src='Themes/default/images/tree/s.gif'/>");
            }
            else if (deep > 1) {
            ht.push("<img class='bbit-tree-icon' src='Themes/default/images/tree/s.gif'/>");
                for (var j = 1; j < deep; j++) {
                    ht.push("<img class='bbit-tree-elbow-line' src='Themes/default/images/tree/s.gif'/>");
                }
            }
            ht.push("</span>");
            //img
            cs.length = 0;
            if (nd.hasChildren) {
                if (nd.isexpand) {
                    cs.push(isend ? "bbit-tree-elbow-end-minus" : "bbit-tree-elbow-minus");
                }
                else {
                    cs.push(isend ? "bbit-tree-elbow-end-plus" : "bbit-tree-elbow-plus");
                }
            }
            else {
                cs.push(isend ? "bbit-tree-elbow-end" : "bbit-tree-elbow");
            }
            ht.push("<img class='bbit-tree-ec-icon ", cs.join(" "), "' src='Themes/default/images/tree/s.gif'/>");
            ht.push("<img class='bbit-tree-node-icon' src='Themes/default/images/tree/s.gif'/>");
            //checkbox
            if (dfop.showcheck && nd.showcheck) {
                if (nd.checkstate == null || nd.checkstate == undefined) {
                    nd.checkstate = 0;
                }
                ht.push("<img  id='", id, "_", nd.id, "_cb' class='bbit-tree-node-cb' src='", dfop.cbiconpath, dfop.icons[nd.checkstate], "'/>");
            }
            //a
            ht.push("<a hideFocus class='bbit-tree-node-anchor' tabIndex=1 href='javascript:void(0);'>");
            ht.push("<span unselectable='on'>", nd.text, "</span>");
            ht.push("</a>");
            ht.push("</div>");
            //Child
            if (nd.hasChildren) {
    
                if (nd.isexpand) {
                    ht.push("<ul  class='bbit-tree-node-ct'  style='z-index: 0; position: static; visibility: visible; top: auto; left: auto;'>");
                    if (nd.ChildNodes) {
                        var l = nd.ChildNodes.length;
                        for (var k = 0; k < l; k++) {
                            nd.ChildNodes[k].parent = nd;
                            buildnode(nd.ChildNodes[k], ht, deep + 1, path + "." + k, k == l - 1);
                        }
                    }
                    ht.push("</ul>");
                }
                else {
                    ht.push("<ul style='display:none;'></ul>");
                }
            }
            ht.push("</li>");
            nd.render = true;
        }
        function getItem(path) {
            var ap = path.split(".");
            var t = treenodes;
            for (var i = 0; i < ap.length; i++) {
                if (i == 0) {
                    t = t[ap[i]];
                }
                else {
                    t = t.ChildNodes[ap[i]];
                }
            }
            return t;
        }
        function check(item, state, type) {
            var pstate = item.checkstate;
            if (type == 1) {
                item.checkstate = state;
            }
            else {// 上溯
                var cs = item.ChildNodes;
                var l = cs.length;
                var ch = true;
                for (var i = 0; i < l; i++) {
                    if ((state == 1 && cs[i].checkstate != 1) || state == 0 && cs[i].checkstate != 0) {
                        ch = false;
                        break;
                    }
                }
                if (ch) {
                    item.checkstate = state;
                }
                else {
                    item.checkstate = 2;
                }
            }
            //change show           
            if (item.render && pstate != item.checkstate) {
                var et = $("#" + id + "_" + item.id + "_cb");
                if (et.length == 1) {
                    et.attr("src", dfop.cbiconpath + dfop.icons[item.checkstate]);
                }
            }
        }
        //遍历子节点
        function cascade(fn, item, args) {
            if (fn(item, args, 1) != false) {
                if (item.ChildNodes != null && item.ChildNodes.length > 0) {
                    var cs = item.ChildNodes;
                    for (var i = 0, len = cs.length; i < len; i++) {
                        cascade(fn, cs[i], args);
                    }
                }
            }
        }
        //冒泡的祖先
        function bubble(fn, item, args) {
            var p = item.parent;
            while (p) {
                if (fn(p, args, 0) === false) {
                    break;
                }
                p = p.parent;
            }
        }
        function nodeclick(e) {
            var path = $(this).attr("tpath");
            var et = e.target || e.srcElement;
            var item = getItem(path);

            //debugger;
            if (et.tagName == "IMG") {
                // +号需要展开
                if ($(et).hasClass("bbit-tree-elbow-plus") || $(et).hasClass("bbit-tree-elbow-end-plus")) {
                    var ul = $(this).next(); //"bbit-tree-node-ct"
                    if (ul.hasClass("bbit-tree-node-ct")) {
                        ul.show();
                    }
                    else {
                        var deep = path.split(".").length;
                        if (item.complete) {
                            item.ChildNodes != null && asnybuild(item.ChildNodes, deep, path, ul, item);
                        }
                        else {
                            $(this).addClass("bbit-tree-node-loading");
                            asnyloadc(ul, item, function(data) {
                                item.complete = true;
                                item.ChildNodes = data;
                                asnybuild(data, deep, path, ul, item);
                            });
                        }
                    }
                    if ($(et).hasClass("bbit-tree-elbow-plus")) {
                        $(et).swapClass("bbit-tree-elbow-plus", "bbit-tree-elbow-minus");
                    }
                    else {
                        $(et).swapClass("bbit-tree-elbow-end-plus", "bbit-tree-elbow-end-minus");
                    }
                    $(this).swapClass("bbit-tree-node-collapsed", "bbit-tree-node-expanded");
                }
                else if ($(et).hasClass("bbit-tree-elbow-minus") || $(et).hasClass("bbit-tree-elbow-end-minus")) {  //- 号需要收缩                    
                    $(this).next().hide();
                    if ($(et).hasClass("bbit-tree-elbow-minus")) {
                        $(et).swapClass("bbit-tree-elbow-minus", "bbit-tree-elbow-plus");
                    }
                    else {
                        $(et).swapClass("bbit-tree-elbow-end-minus", "bbit-tree-elbow-end-plus");
                    }
                    $(this).swapClass("bbit-tree-node-expanded", "bbit-tree-node-collapsed");
                }
                else if ($(et).hasClass("bbit-tree-node-cb")) // 点击了Checkbox
                {
                    var s = item.checkstate != 1 ? 1 : 0;
                    var r = true;
                    if (dfop.oncheckboxclick) {
                        r = dfop.oncheckboxclick.call(et, item, s);
                    }
                    if (r != false) {
                        if (dfop.cascadecheck) {
                            //遍历
                            cascade(check, item, s);
                            //上溯
                            bubble(check, item, s);
                        }
                        else {
                            check(item, s, 1);
                        }
                    }
                }
            }
            else {
                if (dfop.citem) {
                    $("#" + id + "_" + dfop.citem.id).removeClass("bbit-tree-selected");
                }
                dfop.citem = item;
                $(this).addClass("bbit-tree-selected");
                if (dfop.onnodeclick) {
                    dfop.onnodeclick.call(this, item);
                }
            }
        }
        function asnybuild(nodes, deep, path, ul, pnode) {
            var l = nodes.length;
            if (l > 0) {
                var ht = [];
                for (var i = 0; i < l; i++) {
                    nodes[i].parent = pnode;
                    buildnode(nodes[i], ht, deep, path + "." + i, i == l - 1);
                }
                ul.html(ht.join(""));
                ht = null;
                InitEvent(ul);
            }
            ul.addClass("bbit-tree-node-ct").css({ "z-index": 0, position: "static", visibility: "visible", top: "auto", left: "auto", display: "" });
            ul.prev().removeClass("bbit-tree-node-loading");
        }
        function asnyloadc(pul, pnode, callback) {
            if (dfop.url) {
                var param = builparam(pnode);
                $.ajax({
                    type: dfop.method,
                    url: dfop.url,
                    data: param,
                    dataType: dfop.datatype,
                    success: callback,
                    error: function(e) { alert("error occur!"); }
                });
            }
        }
        function builparam(node) {
            var p = [{ name: "id", value: encodeURIComponent(node.id) }
                    , { name: "text", value: encodeURIComponent(node.text) }
                    , { name: "value", value: encodeURIComponent(node.value) }
                    , { name: "checkstate", value: node.checkstate}];
            return p;
        }
        function InitEvent(parent) {
            var nodes = $("li.bbit-tree-node>div", parent);
            nodes.each(function(e) {
                $(this).hover(function() {
                    $(this).addClass("bbit-tree-node-over");
                }, function() {
                    $(this).removeClass("bbit-tree-node-over");
                })
                .click(nodeclick)
                .find("img.bbit-tree-ec-icon").each(function(e) {
                    if (!$(this).hasClass("bbit-tree-elbow")) {
                        $(this).hover(function() {
                            $(this).parent().addClass("bbit-tree-ec-over");
                        }, function() {
                            $(this).parent().removeClass("bbit-tree-ec-over");//5%1%a%s%p%x
                        });
                    }
                });
            });
        }
        function getck(items, c, fn) {
            for (var i = 0, l = items.length; i < l; i++) {
                items[i].checkstate == 1 && c.push(fn(items[i]));
                if (items[i].ChildNodes != null && items[i].ChildNodes.length > 0) {
                    getck(items[i].ChildNodes, c, fn);
                }
            }
        }
        me[0].t = {
            getSelectedNodes: function() {
                var s = [];
                getck(treenodes, s, function(item) { return item });
                return s;
            },
            getSelectedValues: function() {
                var s = [];
                getck(treenodes, s, function(item) { return item.value });
                return s;
            },
            getCurrentItem: function() {
                return dfop.citem;
            }
        };
        return me;
    }
    //获取所有选中的节点的Value数组
    $.fn.getTSVs = function() {
        if (this[0].t) {
            return this[0].t.getSelectedValues();
        }
        return null;
    }
    //获取所有选中的节点的Item数组
    $.fn.getTSNs = function() {
        if (this[0].t) {
            return this[0].t.getSelectedNodes();
        }
        return null;
    }
    $.fn.getTCT = function() {
        if (this[0].t) {
            return this[0].t.getCurrentItem();
        }
        return null;
    }

})(jQuery);


Html页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Big Tree</title>
    <script src="Javascripts/jquery.js" type="text/javascript"></script>
    <script src="Javascripts/Plugins/tree.js" type="text/javascript"></script>
    <script src="Handler/GetTreeDataFromDB.ashx" type="text/javascript"></script>
    <link href="Themes/Default/tree.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">


        $(document).ready(function () {
            var o = { showcheck: true
            };
            o.data = treedata;


            $("#tree").treeview(o);


            //获取选中的项的值
            $("#showchecked").click(function (e) {
                var s = $("#tree").getTSVs();


                if (s != null)
                    alert(s.join(","));
                else
                    alert("NULL");
            });
            $("#showcurrent").click(function (e) {
                var s = $("#tree").getTCT();
                if (s != null)
                    alert(s.text);
                else
                    alert("NULL");
            });
        });
    </script>
</head>
<body class='ie'>
    <div style="margin-bottom: 5px;">
        <button id="showchecked">
            Get Seleceted Nodes</button>
        <button id="showcurrent">
            Get Current Node</button>
    </div>
    <div style="border-bottom: #c3daf9 1px solid; border-left: #c3daf9 1px solid; width: 250px;
        height: 500px; overflow: auto; border-top: #c3daf9 1px solid; border-right: #c3daf9 1px solid;">
        <div id="tree">
        </div>
    </div>
</body>
</html>








Handler 一般处理文件: 

//获取数据库中的分类数据 

DataSet ds=new DataSet(); 

try { 

SqlDataAdapter da = new SqlDataAdapter( " select * from DeparmentTree with(nolock) where CostCenter!='*All' order by CostCenter asc", ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);


da.Fill(ds); 

TreeItem ti = new TreeItem() 

{ id =0, text = "所有部门", value = "0", isexpand = true }; 

ti.GetTreeItemFromDataTable(ds.Tables[0], "0"); 

context.Response.Write(ti.ToJsonString()); 

} 

catch { 

context.Response.Write("var treedata=null;");

}

//树形类 帮助类 读取数据 序列化成json数据public static class TreeItemHelper{ public static string GetHelp(this TreeItem ti) { return @""; } public static TreeItem GetTreeItemFromDataTable(this TreeItem ti, DataTable dt, string sId) { return ti.GetTreeItemFromDataTable(dt.AsEnumerable(),
 sId); } private static TreeItem GetTreeItemFromDataTable(this TreeItem ti, EnumerableRowCollection<DataRow> drs, string sId) { ti.ChildNodes = new List<TreeItem>(); var drs0 = drs.Where(p => p.Field<int>("parent").ToString() == sId); foreach (DataRow dr in
 drs0) { string parent = dr["Id"].ToString(); var ti0 = new TreeItem() { id = int.Parse(parent), value = dr["CostCenter"].ToString(), text = dr["CostCenter"].ToString()+"-"+ dr["DeparmentName"].ToString() }; ti0 = ti0.GetTreeItemFromDataTable(drs, parent);
 ti.Add(ti0); } return ti; }}public class TreeItem{ public TreeItem() { showcheck=true; checkstate = 0; complete = true; isexpand = false; } #region 属性 /// <summary> /// 项目ID /// </summary> public int id { get; set; } /// <summary> /// 项的文本 /// </summary> public
 string text { get; set; } /// <summary> /// 项的值 /// </summary> public string value { get; set; } /// <summary> /// 是否显示选择框 /// </summary> public bool showcheck { set; get; } /// <summary> /// 子节点是否展开 /// </summary> public bool isexpand { set; get; } /// <summary>
 /// 子节点选择框的状态 /// </summary>public int checkstate { get; set; } /// <summary> /// 是否有子节点 /// </summary> public bool hasChildren { get { return (ChildNodes != null && ChildNodes.Count > 0); } } /// <summary> /// 是否完成（用于区分是否要异步load数据） /// </summary> public bool
 complete { get; set; } /// <summary> /// 子节点列表 /// </summary> public List<TreeItem> ChildNodes { get; set; } #endregion 属性 #region 方法 /// <summary> /// 生成 JSON 字符串， /// </summary> /// <returns></returns> public string ToJsonString() { JavaScriptSerializer
 jss = new JavaScriptSerializer(); string sJson = jss.Serialize(this); return "var treedata=[" + sJson + "];"; } /// <summary> /// 添加一个子节点 /// </summary> /// <param name="ti"></param> /// <returns></returns> public List<TreeItem> Add(TreeItem ti) { if (ChildNodes
 == null) ChildNodes = new List<TreeItem>(); ChildNodes.Add(ti); return ChildNodes; } /// <summary> /// 选择相应的子节点 /// </summary> /// <param name="arrId"></param> /// <returns></returns> public TreeItem SelectItem(int[] arrId) { return SelectImte(this, arrId);
 } private TreeItem SelectImte(TreeItem ti, int value) { ti.checkstate = 1; if (ti.hasChildren) { for (int i = 0; i < ti.ChildNodes.Count; i++) { SelectImte(ti.ChildNodes[i], 1); } } return ti; } private TreeItem SelectImte(TreeItem ti, int[] arrId) { if (arrId.Any(p
 => p.ToString() == ti.value)) { ti.checkstate = 1; if (ti.hasChildren) { for (int i = 0; i < ti.ChildNodes.Count; i++) { SelectImte(ti.ChildNodes[i], 1); } } } else { if (ti.hasChildren) { for (int i = 0; i < ti.ChildNodes.Count; i++) { SelectImte(ti.ChildNodes[i],
 arrId); } int nCount = ti.ChildNodes.Count(p => p.checkstate == 1); if (nCount == 0) { ti.checkstate = 0; } else if (ti.ChildNodes.Count == nCount) { ti.checkstate = 1; } else { ti.checkstate = 2; } } } return ti; } #endregion 方法}