加載效果

如果使用 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 异步菜单树的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。