zoukankan      html  css  js  c++  java
  • 下拉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;
    }
    

      

  • 相关阅读:
    Asp.net Core 系列之--5.认证、授权与自定义权限的实现
    Asp.net Core 系列之--4.事务、日志及错误处理
    Asp.net Core 系列之--3.领域、仓储、服务简单实现
    Asp.net Core 系列之--2.ORM初探:Dapper实现MySql数据库各类操作
    Asp.net Core 系列之--1.事件驱动初探:简单事件总线实现(SimpleEventBus)
    Cocos2d-x项目创建
    Cocos2d-x编译Android环境
    Linux 之 RPM
    Channels实现扫码登录
    SQLALchemy中关于复杂关系表模型的映射处理
  • 原文地址:https://www.cnblogs.com/Evan-Pei/p/11775425.html
Copyright © 2011-2022 走看看