javascript实现动态加载树形菜单(tree),

2023-02-18 23:04:02JavaScript014

javascript实现动态加载树形菜单(tree),,第1张

页面既然得到从服务器传过来的json数据之后，还要转换为Object

比如，服务器组装好的json数据：

{

id:'001',

nodeMsg:'节点1'

}

这个是ajax成功之后的回调

function(xhr){

var o = eval('(' + xhr.responseText + ')')

alert(o.id + ':' + o.nodeMsg)

}

Vue.js 递归组件实现树形菜单

main.js 作为入口：

import Vue from 'vue'import main from './components/main.vue' new Vue({ el: '#app', render: h =>h(main)})

它引入了一个组件 main.vue：

<template> <div> <my-tree :data="theData" :name="menuName" :loading="loading" @getSubMenu="getSubMenu"></my-tree> </div></template><script>const myData = [ {id: '1',menuName: '基础管理',menuCode: '10' }, {id: '2',menuName: '商品管理',menuCode: '' }, {id: '3',menuName: '订单管理',menuCode: '30',children: [ {menuName: '订单列表',menuCode: '31' }, {menuName: '退货列表',menuCode: '32',children: [] }] }, {id: '4',menuName: '商家管理',menuCode: '',children: [] }]const subMenuData1 = { parentId: '1', children: [{ menuName: '用户管理', menuCode: '11'},{ id: '12', menuName: '角色管理', menuCode: '12', children: [{ menuName: '管理员', menuCode: '121'},{ menuName: 'CEO', menuCode: '122'},{ menuName: 'CFO', menuCode: '123'},{ menuName: 'COO', menuCode: '124'},{ menuName: '普通人', menuCode: '124'} ]},{ menuName: '权限管理', menuCode: '13'} ]}const subMenuData2 = { parentId: '2', children: [{ menuName: '商品一', menuCode: '21'},{ id: '22', menuName: '商品二', menuCode: '22', children: [{ menuName: '子类商品1', menuCode: '221'},{ menuName: '子类商品2', menuCode: '222'} ]} ]}import myTree from './common/treeMenu.vue'export default { components: {myTree }, data () {return { theData: myData, menuName: 'menuName', // 显示菜单名称的属性 loading: false} }, methods: {getSubMenu (menuItem, callback) { this.loading = true if (menuItem.id === subMenuData1.parentId) {this.loading = false menuItem.children = subMenuData1.children callback(menuItem.children) } setTimeout(() =>{if (menuItem.id === subMenuData2.parentId) { this.loading = false menuItem.children = subMenuData2.children callback(menuItem.children) } }, 2000) } }}</script>

subMenuData1, subMenuData2 存放子菜单数据，可以从服务器获取，以实现动态加载。

该文件引入了树形组件 treeMenu.vue：

<template> <ul class="tree-menu"> <li v-for="(item, index) in data"> <span @click="toggle(item, index)"> <i :class="['icon', item.children &&item.children.length ? folderIconList[index] : 'file-text', loading ? loadingIconList[index] : '']"></i> {{ item[name] || item.menuName }} </span> <tree-menu v-if="scope[index]" :data="item.children"></tree-menu> </li> </ul></template><script>export default { name: 'treeMenu', props: {data: Array,name: String,loading: Boolean }, data () {return { folderIconList: [], loadingIconList: [], scope: {}} }, created () {this.data.forEach((item, index) =>{ if (item.children &&item.children.length) {this.folderIconList[index] = 'folder' }}) }, methods: {doTask (index) { this.$set(this.scope, index, !this.scope[index]) this.folderIconList[index] = this.scope[index] ? 'folder-open' : 'folder' },toggle (item, index) { this.loadingIconList = [] if (item.children &&item.children.length) {this.doTask(index) } else {this.loadingIconList[index] = 'loading'this.$emit('getSubMenu', item, (subMenuList) =>{ if (subMenuList &&subMenuList.length) {this.doTask(index) }}) }} }}</script><style scoped>.tree-menu { list-style: none}.tree-menu li { line-height: 2}.tree-menu li span { cursor: default}.icon { display: inline-block width: 15px height: 15px background-repeat: no-repeat vertical-align: -2px}.icon.folder { background-image: url(/src/assets/folder.png)}.icon.folder-open { background-image: url(/src/assets/folder-open.png)}.icon.file-text { background-image: url(/src/assets/file-text.png)}.icon.loading { background-image: url(/src/assets/loading.gif) background-size: 15px}</style>

用z-tree插件

①带有父子关系的标准

zTreeNodes

举例:

Js代码

1.var zTreeNodes = [

2.{"id":1, "name":"test1", "nodes":[

3.{"id":11, "name":"test11", "nodes":[

4.{"id":111, "name":"test111"}

5."id":12, "name":"test12"}

②带有父子关系的简单

Array