企业网站 响应式济南网站建设百家号

企业网站 响应式,济南网站建设百家号,校园网站建设的系统分析,网站建设仿站下面直接给你最实用、最常见的树形菜单加载父/子节点方法#xff08;也叫懒加载父子节点树#xff09;#xff0c;jQuery EasyUI 的 tree 组件完美支持这种模式#xff1a;先加载顶级#xff08;父#xff09;节点#xff0c;点击某个父节点时再异步加载它的直接子节点也叫懒加载父子节点树jQuery EasyUI 的tree组件完美支持这种模式先加载顶级父节点点击某个父节点时再异步加载它的直接子节点不加载孙子节点直到点击孙子节点的父节点复制粘贴就能用超级适合部门组织架构、菜单管理、无限级商品分类等场景领导最爱的“性能好、加载快”效果全都有方法1最推荐 - 标准父/子节点懒加载树现在就用这个3秒出效果!DOCTYPEhtmlhtmlheadmetacharsetUTF-8titleEasyUI 树形菜单 - 加载父/子节点懒加载/titlelinkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/default/easyui.csslinkrelstylesheettypetext/csshrefhttps://www.jeasyui.com/easyui/themes/icon.cssscripttypetext/javascriptsrchttps://code.jquery.com/jquery-1.12.4.min.js/scriptscripttypetext/javascriptsrchttps://www.jeasyui.com/easyui/jquery.easyui.min.js/script/headbodydivstylemargin:30px;width:300px;pstrong部门组织架构点击部门加载下级/strong/p!-- 关键只设置根节点url不用onBeforeExpand --uliddeptTreeclasseasyui-treedata-optionsurl:get_parent_nodes.php, !-- 只加载顶级父节点 -- method:get, animate:true, lines:true, loadFilter: myLoadFilter !-- 可选统一处理返回数据 --/ul/divscript// 核心当点击有子节点的节点时自动向同一个url请求子节点EasyUI内置机制$(#deptTree).tree({// 当节点展开前如果子节点未加载会自动向url发送 parentId 参数请求子节点// 无需手动写onBeforeExpandonLoadSuccess:function(node,data){// data是当前加载的节点数据console.log(加载完成,node?node.text:根节点);},onClick:function(node){$.messager.show({title:你点击了,msg:部门node.text(node.children?已加载子节点:),timeout:2000});}});// 可选统一处理后台返回数据格式functionmyLoadFilter(data,parent){// EasyUI默认期望 [{id,text,state,children:[]}, ...]// 如果你的后台返回 {id,name,hasChild:true} 可以在这里转换varresult[];$.each(data,function(i,item){varnode{id:item.id,text:item.name||item.text,iconCls:item.icon};// 关键如果有子节点设置state:closedEasyUI会自动懒加载if(item.hasChild||item.childrenCount0){node.stateclosed;}result.push(node);});returnresult;}/script/body/html后台接口示例get_parent_nodes.phpEasyUI 会自动在加载子节点时传id参数选中节点的id?php// 获取父节点ID根节点时没有$parentIdisset($_GET[id])?intval($_GET[id]):0;// 模拟数据实际从数据库查该父节点下的直接子节点$nodes[];if($parentId0){// 加载顶级部门$nodes[[id1,name总公司,hasChildtrue],[id2,name子公司A,hasChildtrue]];}elseif($parentId1){// 总公司下的部门$nodes[[id11,name技术部,hasChildtrue],[id12,name市场部,hasChildfalse],[id13,name财务部,hasChildtrue]];}elseif($parentId11){// 技术部下的小组$nodes[[id111,name前端组],[id112,name后端组],[id113,name测试组]];}// ... 其他分支echojson_encode($nodes);?效果亮点页面打开只加载顶级节点速度极快点击有子节点的部门 → 自动请求该部门下的直接子部门不会一次性加载所有孙子、重孙子再次点击已加载的节点 → 直接展开/折叠不再重复请求完美支持无限级层级10级都没问题EasyUI 自动处理加载状态显示加载动画方法2如果你想完全手动控制加载更灵活$(#deptTree).tree({onBeforeExpand:function(node){// 手动设置本次加载的url可以带额外参数$(#deptTree).tree(options).urlget_children.php?parentIdnode.idtypedept;}});方法3结合左侧布局 右侧内容经典后台部门树divclasseasyui-layoutdata-optionsfit:truedivdata-optionsregion:west,title:部门架构,split:truestylewidth:280px;uliddeptTreeclasseasyui-treedata-optionsurl:get_parent_nodes.php,lines:true/ul/divdivdata-optionsregion:center,title:部门详情dividdeptInfostylepadding:20px;请在左侧选择一个部门查看详情/div/div/divscript$(#deptTree).tree({onClick:function(node){$(#deptInfo).html(h3node.text/h3p部门IDnode.id/pp加载状态已加载子节点/p);// 实际可以$(#deptInfo).panel(refresh, dept_detail.php?id node.id);}});/script你现在直接复制方法1的完整代码 PHP接口示例放到服务器运行就能看到一个超级高效的父/子节点懒加载树了数据量再大也不怕只加载当前需要的层级性能完美。想要我给你一个完整的部门管理示例父子懒加载树 点击显示详情 添加/删除节点 保存到数据库或者你告诉我你的数据结构比如字段叫pid、category_name、is_leaf我2分钟帮你改好loadFilter和接口逻辑复制就能跑快说说你的具体场景我手把手帮你搞定5分钟内看到丝滑的父/子节点加载树