• 阿桂天山的技术小结:Flask对Ztree树节点搜索定位

    话不多说,上图上源码

    1.先看效果图

    2.前端页面部分:

            1)页面

    1. <!DOCTYPE html>
    2. <HTML>
    3.  
    4. <HEAD>
    5.     <TITLE>Ewangda 阿桂天山的Ztree实战</TITLE>
    6.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    7.     <link rel="stylesheet" href="/static/css/bootstrapStyle/bootstrapStyle.css" type="text/css">
    8.  
    9. <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    10.  
    11.     <script type="text/javascript" src="/static/js/jquery-2.2.0.min.js"></script>
    12.     <script type="text/javascript" src="/static/ztree/js/jquery.ztree.core-3.5.js"></script>
    13.     <script type="text/javascript" src="/static/ztree/js/jquery.ztree.excheck-3.5.js"></script>
    14.     <script type="text/javascript" src="/static/ztree/js/jquery.ztree.exedit-3.5.js"></script>
    15.     <!--  gtj 实现对ztree节点筛选功能用  -->
    16.     <script type="text/javascript" src="/static/ztree/js/jquery.ztree.exhide-3.5.js"></script>
    17.  
    18. </HEAD>
    19.  
    20. <BODY>
    21.     <h2>具有搜索定位功能的Ztree</h2>
    22.     <div class="input-group" style="width:300px">
    23.         <input type="text" id="search-input" onkeyup="autoMatchForZtree();" class="form-control" placeholder="模糊查询" style="border: 1px solid #cccccc; border-right: 0;"/>
    24.         <div class="input-group-addon"><i class="glyphicon glyphicon-search"></i></div>
    25.     </div>
    26.     <ul id="treeDemo" class="ztree"></ul>
    27. </BODY>
    28.  
    29. </HTML>

            2)前端javascript脚本

    1. <script >
    2. $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
    3. var setting = {
    4.     view: {
    5.         selectedMulti: false
    6.     },
    7.     check: {
    8.         enable: true
    9.     },
    10.     data: {
    11.         simpleData: {
    12.             enable: true
    13.         }
    14.     },
    15. };
    16.  
    17. $(document).ready(function() {
    18.     $.getJSON($SCRIPT_ROOT+'/_get_tree','',function(data){
    19.             var zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, data);
    20.             zTreeObj.expandAll(true); //---gtj 所有节点都会默认展开
    21.     })
    22.  
    23. });
    24.  
    25. /*** 功能：gtj 搜索匹配树节点 ***/
    26. function searchChildren(keyword, children){
    27.     if(children == null || children.length == 0){
    28.         return false;
    29.     }
    30.     for(var i = 0; i < children.length; i++){
    31.         var node = children[i];
    32.         if(node.name.indexOf(keyword) != -1 && node.isHidden === false){
    33.             return true;
    34.         }
    35.         var result = searchChildren(keyword, node.children);
    36.         if(result){
    37.             return true;
    38.         }
    39.     }
    40.     return false;
    41. }
    42.  
    43. function searchParent(keyword, node){
    44.     if(node == null){
    45.         return false;
    46.     }
    47.     if(node.name.indexOf(keyword) != -1 && node.isHidden === false){
    48.         return true;
    49.     }
    50.     return searchParent(keyword, node.getParentNode());
    51. }
    52.  
    53. var hiddenNodesForZtree = [];
    54.  
    55. function autoMatchForZtree(){
    56.     setTimeout(function(){
    57.         var ztreeObj = $.fn.zTree.getZTreeObj("treeDemo");
    58.  
    59.         ztreeObj.showNodes(hiddenNodesForZtree);
    60.  
    61.         function filterFunc(node){
    62.             var keyword = $("#search-input").val();
    63.  
    64.             if(searchParent(keyword, node) || searchChildren(keyword, node.children)){
    65.                 return false;
    66.             }
    67.             return true;
    68.         };
    69.  
    70.         hiddenNodesForZtree = ztreeObj.getNodesByFilter(filterFunc);
    71.  
    72.         ztreeObj.hideNodes(hiddenNodesForZtree);
    73.  
    74.     }, 300);
    75. }
    76.  
    77. </script>

    3.后端Flask代码

            1)searchztree.py

    1. #=============================================================
    2. #---------------------阿桂天山 Ewangda--------------------------
    3. import op_sql
    4. import json
    5.  
    6. from flask import Flask, render_template, request
    7.  
    8. app = Flask(__name__)
    9.  
    10.  
    11. # 前端主页面
    12. @app.route('/')
    13. def searchztree():
    14.     return render_template('searchztree.html')
    15.  
    16.  
    17. # 后台返回所有数据
    18. @app.route('/_get_tree')
    19. def get_tree():
    20.     return json.dumps(op_sql.transport())
    21.  
    22.  
    23. # 启动主页面
    24. if __name__ == "__main__":
    25.     app.run(debug=True)

            2)连接数据库获取数据:

                    2.1)mysql建表语句及测试数据

    1. CREATE TABLE `t_ztree` (
    2.   `id` int(11) NOT NULL AUTO_INCREMENT,
    3.   `name` varchar(50) DEFAULT NULL,
    4.   `pId` int(11) DEFAULT NULL,
    5.   PRIMARY KEY (`id`)
    6. ) ENGINE=InnoDB AUTO_INCREMENT=42 DEFAULT CHARSET=utf8;
    7.  
    8. -- ----------------------------
    9. -- Records of t_ztree
    10. -- ----------------------------
    11. INSERT INTO t_ztree VALUES ('1', 'Ewangda', '0');
    12. INSERT INTO t_ztree VALUES ('2', '数智化服务', '1');
    13. INSERT INTO t_ztree VALUES ('3', '创新视觉服务', '1');
    14. INSERT INTO t_ztree VALUES ('4', '精准系列', '2');
    15. INSERT INTO t_ztree VALUES ('5', '精细系列', '2');
    16. INSERT INTO t_ztree VALUES ('8', 'EDS企业数字服务平台', '4');
    17. INSERT INTO t_ztree VALUES ('9', 'PDS精准数字服务云平台', '4');
    18. INSERT INTO t_ztree VALUES ('23', '精工系列', '2');
    19. INSERT INTO t_ztree VALUES ('36', '精致系列', '3');
    20. INSERT INTO t_ztree VALUES ('37', 'AR智能电商', '36');
    21. INSERT INTO t_ztree VALUES ('38', '精彩系列', '3');
    22. INSERT INTO t_ztree VALUES ('39', '大屏展示', '38');
    23. INSERT INTO t_ztree VALUES ('40', '智能美唇', '37');
    24. INSERT INTO t_ztree VALUES ('41', '智能靓镜', '37');

            2.2)生成ztree数据函数文件op_sql.py

    1. def query(sql_select):
    2.     conn = pymysql.connect(user="aaa", password="123xxxx", host="127.0.0.1", database="test-ztree")
    3.     cursor = conn.cursor()
    4.     try:
    5.  
    6.         cursor.execute(sql_select)
    7.         result = cursor.fetchall()
    8.         return result
    9.     finally:
    10.         conn.close()
    11.  
    12. # 将数据库查询数据标准化json数据以便传入后台
    13. def transport():
    14.     zNdodes = []
    15.  
    16.     for i in query("select id, name, pId from t_ztree;"):
    17.         zNdode = {}
    18.         zNdode['id'] = i[0]
    19.         zNdode['name'] = i[1]
    20.         zNdode['pId'] = i[2]
    21.  
    22.         zNdodes.append(zNdode)
    23.     return zNdodes
    24.

    总结:所有内容都在这了,对你有用给个赞吧!!!

    最后要注意:要让树节点能被筛选,一定要有ztree.exhide库

                 

  • 相关阅读:
    VoLTE基础自学系列 | eSRVCC稳态呼叫切换流程
    BERT变体（1）：ALBERT、RoBERTa、ELECTRA、SpanBERT
    【C++】单例模式
    腾讯云CentOS7下安装GUI图形界面
    如何实现购物车一键全选？
    Spark基础
    linux-伪首部校验和 和 icmpv6 socket组播
    vue中预览zip(完整版)
    C++小程序——“靠谱”的预测器
    智能疾病查询接口
  • 原文地址：https://blog.csdn.net/gui818/article/details/133696956