找到
2
篇与
相关的结果
-
光年模板(V5)侧边栏菜单js修改 主要修改了初始化JSON结构，使菜单层级更清晰。 修改后的代码 // 侧边栏列表 var menu_list = [ { "name": "首页", "url": ["/", "/index/index"], "icon": "mdi mdi-home-variant-outline", "is_out": 0 }, { "name": "链接管理", "url": ["#!"], "icon": "mdi mdi-cookie-outline", "is_out": 0, "children": [ { "name": "链接列表", "url": ["/link/list", "/link/data"], "is_out": 0 }, { "name": "创建链接", "url": ["/link/create", "/link/edit"], "is_out": 0 } ] }, { "name": "财务管理", "url": ["#!"], "icon": "mdi mdi-credit-card-chip-outline", "is_out": 0, "children": [ { "name": "余额充值", "url": ["/finance/recharge"], "is_out": 0 }, { "name": "账单列表", "url": ["/finance/bills"], "is_out": 0 } ] }, { "name": "用户管理", "url": ["/user/list"], "icon": "mdi mdi-account-outline", "is_out": 0, }, { "name": "系统设置", "url": ["#!"], "icon": ["mdi mdi-cog-outline"], "is_out": 0, "children": [ { "name": "个人资料", "url": ["/system/user"], "is_out": 0, }, { "name": "操作日志", "url": ["/system/logs"], "is_out": 0, "children": [ { "name": "账单日志", "url": ["/system/logs/bills"], "is_out": 0, }, { "name": "登录日志", "url": ["/system/logs/login"], "is_out": 0, }, { "name": "链接日志", "url": ["/system/logs/link"], "is_out": 0, } ] } ] }, { "name": "退出登录", "url": ["/user/logout"], "icon": "mdi mdi-location-exit", "is_out": 0 } ]; setSidebar(menu_list); /** * 菜单 * @param data 菜单JSON数据 * name 菜单名称 string * url 菜单链接地址 array 首个为跳转地址。当路由为其中一个时，激活当前菜单选中状态。 * icon 图标 * is_out 是否外链0否|1是 int 外链a标签没有class='multitabs' * children 子菜单 array */ function setSidebar(data) { if (data.length == 0) return false; processMenu(data); console.log(data); html = createMenu(data, true); $('.sidebar-main').append(html); } // 创建html数据 function createMenu(data, is_frist) { var menu_body = is_frist ? '<ul class="nav-drawer">' : '<ul class="nav nav-subnav">'; for (var i = 0; i < data.length; i++) { iframe_class = data[i].is_out == 1 ? 'target="_blank"' : 'class="multitabs"'; icon_div = data[i].is_root == 1 ? '<i class="' + data[i].icon + '"></i>' : ''; menuName = data[i].is_root == 1 ? '<span>' + data[i].name + '</span>' : data[i].name; if (data[i].children && data[i].children.length > 0) { selected = data[i].is_active == 1 ? 'active open' : ''; menu_body += '<li class="nav-item nav-item-has-subnav ' + selected + '"><a href="javascript:void(0)">' + icon_div + menuName + '</a>'; menu_body += createMenu(data[i].children); } else { selected = data[i].is_active == 1 ? 'active' : ''; menu_body += '<li class="nav-item ' + selected + '"><a href="' + data[i].url[0] + '" ' + iframe_class + '>' + icon_div + menuName + '</a>'; } menu_body += '</li>'; } menu_body += '</ul>'; return menu_body; }; // 添加 is_active 和 is_root 属性到所有层级 function addProperties(menu) { menu.forEach(item => { item.is_active = 0; item.is_root = 0; if (item.children && item.children.length > 0) { addProperties(item.children); } }); } // 标记激活状态和父级路径 function markActivePath(menu, currentPath, parentChain = []) { for (let i = 0; i < menu.length; i++) { const item = menu[i]; const newParentChain = [...parentChain, item]; // 检查当前路径是否匹配 const isMatch = item.url.some(url => url === currentPath); if (isMatch) { // 标记当前节点为激活 item.is_active = 1; // 标记整个父链为激活 newParentChain.forEach(node => { node.is_active = 1; node.is_root = 1; }); return true; // 找到匹配路径 } // 递归检查子节点 if (item.children && item.children.length > 0) { const foundInChildren = markActivePath(item.children, currentPath, newParentChain); if (foundInChildren) { // 标记当前节点为激活（因为子节点已激活） item.is_active = 1; item.is_root = 1; return true; } } } return false; // 当前分支未找到匹配 } // 主处理函数 function processMenu(menu) { // 1. 添加初始属性 addProperties(menu); // 2. 标记第一层级为根节点 menu.forEach(item => { item.is_root = 1; }); // 3. 获取当前页面路径 const currentPath = window.location.pathname; // 4. 标记激活路径 markActivePath(menu, currentPath); }光年模板原代码 var menu_list = [ { "id": "1", "name": "后台首页", "url": "lyear_main_1_v5.html", "pid": 0, "icon": "mdi mdi-home", "is_out": 0, "is_home": 1 }, { "id": "2", "name": "布局示例", "url": "#!", "pid": 0, "icon": "mdi mdi-palette", "is_out": 0, "is_home": 0 }, { "id": "3", "name": "表单布局示例", "url": "lyear_layout_form.html", "pid": 2, "icon": "", "is_out": 0, "is_home": 0 }, { "id": "4", "name": "聊天页面示例", "url": "lyear_layout_chat.html", "pid": 2, "icon": "", "is_out": 0, "is_home": 0 }, { "id": "5", "name": "logo处使用文字", "url": "lyear_layout_logo_text.html", "pid": 2, "icon": "", "is_out": 1, "is_home": 0 }, { "id": "6", "name": "多级菜单", "url": "#!", "pid": 0, "icon": "mdi mdi-menu", "is_out": 0, "is_home": 0 }, { "id": "7", "name": "一级菜单", "url": "#!", "pid": 6, "icon": "", "is_out": 0, "is_home": 0 }, { "id": "8", "name": "一级菜单", "url": "#!", "pid": 6, "icon": "", "is_out": 0, "is_home": 0 }, { "id": "9", "name": "二级菜单", "url": "#!", "pid": 8, "icon": "", "is_out": 0, "is_home": 0 }, { "id": "10", "name": "二级菜单", "url": "#!", "pid": 8, "icon": "", "is_out": 0, "is_home": 0 }, { "id": "11", "name": "三级菜单", "url": "#!", "pid": 10, "icon": "", "is_out": 0, "is_home": 0 }, { "id": "12", "name": "三级菜单", "url": "#!", "pid": 10, "icon": "", "is_out": 0, "is_home": 0 } ]; setSidebar(menu_list); /** * 菜单 * @param data 菜单JSON数据 * id 菜单唯一ID * name 菜单名称 * url 菜单链接地址 * icon 图标 * pid 父级ID * is_out 是否外链0否|1是,外链a标签没有class='multitabs' * is_home 是否首页 */ function setSidebar(data){ if (data.length == 0) return false; var treeObj = getTrees(data, 0, 'id', 'pid', 'children'); html = createMenu(treeObj, true); $('.sidebar-main').append(html); } function createMenu(data, is_frist) { var menu_body = is_frist ? '<ul class="nav-drawer">' : '<ul class="nav nav-subnav">'; for(var i = 0; i < data.length; i++){ iframe_class = data[i].is_out == 1 ? 'target="_blank"' : 'class="multitabs"'; icon_div = data[i].pid == 0 ? '<i class="' + data[i].icon + '"></i>' : ''; selected = (data[i].pid == 0) && (data[i].is_home == 1) ? 'active' : ''; menuName = data[i].pid == 0 ? '<span>' + data[i].name + '</span>' : data[i].name; homeIdName = (data[i].pid == 0) && (data[i].is_home == 1) ? 'id="default-page"' : ''; if (data[i].children && data[i].children.length > 0) { menu_body += '<li class="nav-item nav-item-has-subnav"><a href="javascript:void(0)">' + icon_div + menuName + '</a>'; menu_body += createMenu(data[i].children); } else { menu_body += '<li class="nav-item ' + selected + '"><a href="' + data[i].url + '" '+ iframe_class + homeIdName + '>' + icon_div + menuName + '</a>'; } menu_body += '</li>'; } menu_body += '</ul>'; return menu_body; }; /** * 树状的算法 * @params list 代转化数组 * @params parentId 起始节点 * @params idName 主键ID名 * @params parentIdName 父级ID名称 * @params childrenName 子级名称 * @author CSDN博主「伤包子」 */ function getTrees(list, parentId, idName, parentIdName, childrenName) { let items= {}; // 获取每个节点的直属子节点，*记住是直属，不是所有子节点 for (let i = 0; i < list.length; i++) { let key = list[i][parentIdName]; if (items[key]) { items[key].push(list[i]); } else { items[key] = []; items[key].push(list[i]); } } return formatTree(items, parentId, idName, childrenName); } /** * 利用递归格式化每个节点 */ function formatTree(items, parentId, idName, childrenName) { let result = []; if (!items[parentId]) { return result; } for (let t in items[parentId]) { items[parentId][t][childrenName] = formatTree(items, items[parentId][t][idName], idName, childrenName) result.push(items[parentId][t]); } return result; }参考文献 侧边栏菜单的JS初始化 - 光年模板(V5)
-
Echarts绘制中国地图并将南海诸岛化为简图 下载中国地图数据 下载地址：DataV.GeoAtlas地理小工具 绘制演示 绘制演示图片 绘制地图 显示南海诸岛简图 地图绘制时设置`china`有南海诸岛简图，设置`China`则没有简图 echarts.registerMap('china', usaJson);隐藏海南诸岛边界线 搜索100000_JD，删除图中的数据片段 隐藏南海诸岛边界线代码位置图片 隐藏南海诸岛 搜索海南,修改海南省的数据，将图中的数据修改为以下数据 南海诸岛数据修改位置图片 "coordinates": [ [ [ [ 110.106396, 20.026812 ], [ 110.042339, 19.991384 ], [ 109.997375, 19.980136 ], [ 109.965346, 19.993634 ], [ 109.898825, 19.994196 ], [ 109.855093, 19.984073 ], [ 109.814441, 19.993072 ], [ 109.76147, 19.981261 ], [ 109.712195, 20.017253 ], [ 109.657993, 20.01163 ], [ 109.585312, 19.98801 ], [ 109.526797, 19.943573 ], [ 109.498464, 19.873236 ], [ 109.411001, 19.895184 ], [ 109.349407, 19.898561 ], [ 109.300748, 19.917693 ], [ 109.25948, 19.898561 ], [ 109.255784, 19.867045 ], [ 109.231147, 19.863105 ], [ 109.159082, 19.79048 ], [ 109.169553, 19.736411 ], [ 109.147379, 19.704863 ], [ 109.093792, 19.68965 ], [ 109.048829, 19.619764 ], [ 108.993394, 19.587065 ], [ 108.92872, 19.524468 ], [ 108.855424, 19.469182 ], [ 108.806148, 19.450561 ], [ 108.765496, 19.400894 ], [ 108.694047, 19.387346 ], [ 108.644772, 19.349518 ], [ 108.609048, 19.276661 ], [ 108.591186, 19.141592 ], [ 108.598577, 19.055633 ], [ 108.630606, 19.003017 ], [ 108.637997, 18.924346 ], [ 108.595497, 18.872256 ], [ 108.593033, 18.809386 ], [ 108.65278, 18.740258 ], [ 108.663866, 18.67337 ], [ 108.641077, 18.565614 ], [ 108.644772, 18.486738 ], [ 108.68912, 18.447571 ], [ 108.776583, 18.441894 ], [ 108.881293, 18.416344 ], [ 108.905315, 18.389087 ], [ 108.944735, 18.314107 ], [ 109.006329, 18.323198 ], [ 109.108575, 18.323766 ], [ 109.138756, 18.268081 ], [ 109.17448, 18.260125 ], [ 109.287813, 18.264671 ], [ 109.355566, 18.215221 ], [ 109.441182, 18.199303 ], [ 109.467051, 18.173718 ], [ 109.527413, 18.169169 ], [ 109.584696, 18.143579 ], [ 109.661688, 18.175424 ], [ 109.726362, 18.177698 ], [ 109.749767, 18.193618 ], [ 109.785492, 18.339672 ], [ 109.919767, 18.375457 ], [ 110.022629, 18.360121 ], [ 110.070672, 18.376025 ], [ 110.090382, 18.399309 ], [ 110.116867, 18.506602 ], [ 110.214186, 18.578662 ], [ 110.246215, 18.609859 ], [ 110.329366, 18.642185 ], [ 110.367555, 18.631977 ], [ 110.499366, 18.651824 ], [ 110.499366, 18.751592 ], [ 110.578206, 18.784458 ], [ 110.590525, 18.838841 ], [ 110.585597, 18.88075 ], [ 110.619474, 19.152334 ], [ 110.676756, 19.286264 ], [ 110.706321, 19.320153 ], [ 110.729727, 19.378878 ], [ 110.787009, 19.399765 ], [ 110.844292, 19.449996 ], [ 110.888023, 19.518827 ], [ 110.920668, 19.552668 ], [ 111.008747, 19.60398 ], [ 111.061718, 19.612436 ], [ 111.071573, 19.628784 ], [ 111.043856, 19.763448 ], [ 111.013675, 19.850159 ], [ 110.966248, 20.018377 ], [ 110.940994, 20.028499 ], [ 110.871393, 20.01163 ], [ 110.808567, 20.035808 ], [ 110.778386, 20.068415 ], [ 110.744509, 20.074036 ], [ 110.717408, 20.148778 ], [ 110.687843, 20.163947 ], [ 110.655814, 20.134169 ], [ 110.562191, 20.110006 ], [ 110.526467, 20.07516 ], [ 110.495054, 20.077408 ], [ 110.387265, 20.113378 ], [ 110.318279, 20.108882 ], [ 110.28933, 20.056047 ], [ 110.243135, 20.077408 ], [ 110.144585, 20.074598 ], [ 110.106396, 20.026812 ] ] ]下载修改后的完整文件 下载完整文件 下载地址：https://www.khkj6.com/usr/uploads/2025/06/3432059456.json 提取码： 参考文档 vue echarts 中国地图处理南海诸岛为简图-CSDN
