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

话不多说,上图上源码

1.先看效果图

2.前端页面部分:

        1)页面

    
    
    



    
    
    
    
    
    




    
具有搜索定位功能的Ztree
    

        
        

    
    

        2)前端javascript脚本

3.后端Flask代码

        1)searchztree.py

#=============================================================
#---------------------阿桂天山 Ewangda--------------------------
import op_sql
import json

from flask import Flask, render_template, request

app = Flask(__name__)


# 前端主页面
@app.route('/')
def searchztree():
    return render_template('searchztree.html')


# 后台返回所有数据
@app.route('/_get_tree')
def get_tree():
    return json.dumps(op_sql.transport())


# 启动主页面
if __name__ == "__main__":
    app.run(debug=True)

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

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

CREATE TABLE `t_ztree` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) DEFAULT NULL,
  `pId` int(11) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=42 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of t_ztree
-- ----------------------------
INSERT INTO t_ztree VALUES ('1', 'Ewangda', '0');
INSERT INTO t_ztree VALUES ('2', '数智化服务', '1');
INSERT INTO t_ztree VALUES ('3', '创新视觉服务', '1');
INSERT INTO t_ztree VALUES ('4', '精准系列', '2');
INSERT INTO t_ztree VALUES ('5', '精细系列', '2');
INSERT INTO t_ztree VALUES ('8', 'EDS企业数字服务平台', '4');
INSERT INTO t_ztree VALUES ('9', 'PDS精准数字服务云平台', '4');
INSERT INTO t_ztree VALUES ('23', '精工系列', '2');
INSERT INTO t_ztree VALUES ('36', '精致系列', '3');
INSERT INTO t_ztree VALUES ('37', 'AR智能电商', '36');
INSERT INTO t_ztree VALUES ('38', '精彩系列', '3');
INSERT INTO t_ztree VALUES ('39', '大屏展示', '38');
INSERT INTO t_ztree VALUES ('40', '智能美唇', '37');
INSERT INTO t_ztree VALUES ('41', '智能靓镜', '37');

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

def query(sql_select):
    conn = pymysql.connect(user="aaa", password="123xxxx", host="127.0.0.1", database="test-ztree")
    cursor = conn.cursor()
    try:

        cursor.execute(sql_select)
        result = cursor.fetchall()
        return result
    finally:
        conn.close()

# 将数据库查询数据标准化json数据以便传入后台
def transport():
    zNdodes = []

    for i in query("select id, name, pId from t_ztree;"):
        zNdode = {}
        zNdode['id'] = i[0]
        zNdode['name'] = i[1]
        zNdode['pId'] = i[2]

        zNdodes.append(zNdode)
    return zNdodes

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

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