【EasyUI tree】Python 异步菜单树的实现

加载效果

如果使用 EasyUI tree 加载10000+项菜单项，全部加载出来耗时10s+，改为异步后，瞬间加载完成，极大提升用户体验。下图小圆圈是正在加载的菜单项效果。

Easyui tree 异步树

EasyUI官方文档
EasyUI 创建异步树形菜单 - 官方教程示例

树支持内置的异步加载模式，因此用户可以创建一个空的树，然后指定一个动态返回 JSON 数据的服务器端，用于根据需求异步填充树。
官方给了一个 PHP 的示例，这里就不贴代码了。

下面放上使用 Python Flask 创建异步树的代码示例：

表结构：

view层

@main.route('/basic_tree_fast/', methods=['GET', 'POST'])
@login_required
def basic_tree_fast():result = Basic_menu.query.filter_by(isactive=True, pid=0).order_by(Basic_menu.id.asc()).all()return render_template('basic_tree_fast.html', result=result)@main.route('/basic_tree_async/', methods=['GET', 'POST'])
@login_required
def basic_tree_async():"""异步树"""param_dic = request.values.to_dict()pid = convert.get_pid_from_dic(param_dic)result = Basic_menu.query.filter_by(isactive=True, pid=pid).order_by(Basic_menu.id.asc()).all()node_list = []for one in result:node = {}state = convert.closed_or_open(convert.has_child(one.id))node['id'] = one.idnode['text'] = one.namenode['state'] = statenode['attributes'] = one.urlnode_list.append(node)return json.dumps(node_list)

工具类

def has_child(id):"""判断某个菜单是否有子节点"""result = Basic_menu.query.filter_by(isactive=True, pid=id).all()if result:return Trueelse:return Falsedef closed_or_open(has_child):if has_child:return 'closed'else:return 'open'

前端 HTML 代码

<div id="basic_menu" data-options="region:'west',title:'菜单',split:true" style="width:200px;"><ul id="tree" class="easyui-draggable" style="padding: 10px" data-options="handle:'#title'"></ul>
</div><script type="text/javascript">//异步加载树内容$('#tree').tree({url:'{{ url_for('main.basic_tree_async') }}',checkbox: "true",onlyLeafCheck:true,//仅叶子结点带有复选框lines: true,prerendered: false,// 提前渲染onClick: function(node) { //拼装最后一个参数// do something}}});// 清除勾选function clean() {var selected = $('#tree').tree('getChecked');for (var i = 0; i < selected.length; i++) {$('#tree').tree('uncheck', selected[i].target)}}// 重新加载树function reset() {$("#tree").tree("reload");}
</script>

一个小问题

使用异步加载树时，不知什么原因，官方提供的$("#tree").tree("collapseAll");失效，无法一次性折叠全部节点。

因此使用$("#tree").tree("reload");作为替代，这样做的缺点是折叠后不能保持原有已经勾选的框框。

【EasyUI tree】Python 异步菜单树的实现相关推荐

easyui menu tree 实现左侧菜单树
1.首先引入easyui 相关js和样式. 2.构建树 <ul id="tree" class="easyui-tree"></ul& ...
easyUI tree 异步加载数据
easyUI 的 Tree组件在大部分时候都要从数据库读取数据,本文基于Java语言来实现easyUI tree的异步加载. 先看一下实现的效果: 整个过程采用的是简单三层架构,无论采用哪种模式,只要 ...
使用EasyUI Tree异步加载JSON数据生成树
这几天因为工作需要,要做一个支持无限级的菜单. 我也是菜鸟一只,能想到的东西不多,所以用了Easy UI的tree组件. 不得不说,easyui确实很强大. 因为是无限级菜单,数据量可能有点大,所以考 ...
数据库树形结构，EasyUI Tree 树
通过 $.fn.tree.defaults 重写默认的 defaults. 树(tree)在网页中以树形结构显示分层数据.它向用户提供展开.折叠.拖拽.编辑和异步加载功能. 树的数据格式(Tree D ...
php easyui tree 结构,EasyUI Tree树组件无限循环的解决方法
在学习jquery easyui的tree组件的时候,在url为链接地址的时,发现如果最后一个节点的state为closed时,未节点显示为文件夹,单击会重新加载动态(Url:链接地址)形成无限循环. ...
Huffman Tree哈夫曼树权值路径长度WPL计算，binarytree ，Python
Huffman Tree哈夫曼树(霍夫曼树.赫夫曼树)权值路径长度WPL计算,binarytree ,Python 计算定义:把构建成功的哈夫曼树的每一个边缘节点(叶子)值乘以该节点到根的路径长度,最 ...
EasyUI Tree判断节点是否是叶
方法1: $('#domaincatalog').tree('isLeaf', node.target); 返回true或false ,true表示是叶节点, false即不是方法2:官方文档中: ...
6.easyui+ztree案例：zTree树
做的就是西部区域面板中的树形导航图. Easyui中也有树,但是这个树不够强大. zTree性能非常好,功能强大. 介绍: l 什么是zTree呢? zTree是一个依靠jQuery实现的多功能&q ...
Jquery easyui tree的使用
这个ui用的一切都是json数据.树也是如此! 后台需要返回与格式匹配的json数据才能正确加载树. 页面定义一个ui: [html] view plain copy print ? <ul ...

【EasyUI tree】Python 异步菜单树的实现

加载效果

Easyui tree 异步树

一个小问题

【EasyUI tree】Python 异步菜单树的实现相关推荐

最新文章

热门文章