下拉Tree 与 递归的使用
2019-11-01 10:03 Evan.Pei 阅读(210) 评论(0) 编辑 收藏 举报//下拉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='width:100%;'>" + "<div class='btn-group' role='group' style='width: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;width: 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; }