下拉Tree 与递归的使用

//下拉Tree

//网上下载tree js css文件

// 动态加载js css, tree html, event

//下拉菜单tree
var BootStrapTextTree = {
    textID: ""
    //下拉树
    , onLoadScriptAndCss: function () {
        //动态加载js
        $.getScript('../Content/Bootstrap/bootstrap-3.3.7-dist-new/bootstrap-treeview/bootstrap-treeview.js');
        //动态加载css
        $("head").append("<link>");
        var css = $("head").children(":last");
        css.attr({ rel: "stylesheet", type: "text/css", href: "../Content/Bootstrap/bootstrap-3.3.7-dist-new/bootstrap-treeview/bootstrap-treeview.min.css" });
    }
    , onLoad_Text_Tree: function (txtid) {
        textID = txtid;
        //加载html
        var html = "<div class='form-group' style='100%;'>"
                    + "<div class='btn-group' role='group' style='100%;'>"
                     + "<input id='" + txtid + "' class='form-control' name='selectCatalog' type='text' autocomplete='off' onclick="$('#div_TextTree').show();$(this).blur();">"
                      + "<div id='div_TextTree' style='height:200px;overflow: auto;display:none;position: absolute; 100%;'></div>"
                      + "</div>"
                     + "</div>";
        //返回html
        return html;
    }
    , bindFun: function (_data) {
        $("#" + textID).click(function () {
            _data = ConvertTreeData(_data);
            var options = {
                levels: 1,
                data: _data,
                onNodeSelected: function (event, data) {
                    $("#" + textID).val(data.text);
                    $("#div_TextTree").hide();//选中树节点后隐藏树
                }
            };
            jq1124('#div_TextTree').treeview(options);
        });
    }
};

//Tree 需要的数据格式为 :

//[{ id: "1", text: "1#LF高压室", nodes: [{ id: "2", text: "aaa" }, { id: "3", text: "bbb" }] }, { id: "4", text: "aaaaaaaa", nodes: [{ id: "5", text: "aaa" }, { id: "6", text: "bbb" }] }];

//但是数据通过sql查出来的格式为：

//[{ Id: "1", name: "aaa", parentId: "0" }, { Id: "2", name: "bbb", parentId: "1" }, { Id: "3", name: "ccc", parentId: "2" }, { Id: "4", name: "ddd", parentId: "2" }];

//sql:　

WITH TEMP AS(
SELECT AreaID, AreaName, ParentID FROM t_CM_Area WHERE AreaID =54--最高父级id
UNION ALL 
SELECT B.AreaID, B.AreaName, B.ParentID FROM TEMP A 
INNER JOIN 
t_CM_Area B ON B.ParentId = A.AreaID) 
SELECT AreaID, AreaName, ParentID FROM TEMP

//需要对上面的数据进行转换使用

function ConvertTreeData(_array) {
    var result = [];
    for (var j = 0; j < _array.length; j++) {
        _array[j].nodes = [];
        _array[j].text = _array[j].name;
        if (_array[j].parentId == "0") {//从哪里开始组织下的数据
            Recursion(_array[j]);
            result.push(_array[j]);
        }
    }
    function Recursion(obj) {
        for (var i = 0 ; i < _array.length ; i++) {
            if (_array[i].parentId == obj.id) {
                var b = { id: _array[i].id, text: _array[i].name, nodes: [] };
                obj.nodes.push(b);
                Recursion(b, _array);
            }
        }
    }
    return result;
}

下拉Tree 与 递归的使用

下拉Tree 与递归的使用