iview 的樹外掛實現目錄樹
阿新 • • 發佈：2018-12-18
1、首先是mybatis查詢xml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.modules.guide.mapper.BookDirectoryDao"> <resultMap id="directoryVoMap" type="com.modules.guide.vo.BookDirectoryVo"> <id column="id" jdbcType="VARCHAR" property="id" /> <result column="book_id" jdbcType="VARCHAR" property="bookId" /> <result column="directory_name" jdbcType="VARCHAR" property="directoryName" /> <result column="page_num" jdbcType="INTEGER" property="pageNum" /> <result column="grade" jdbcType="INTEGER" property="grade" /> <result column="parent_id" jdbcType="VARCHAR" property="parentId" /> <result column="del_flag" jdbcType="INTEGER" property="delFlag" /> <result column="create_by" jdbcType="VARCHAR" property="createBy" /> <result column="create_date" jdbcType="TIMESTAMP" property="createDate" /> <collection property="children" column="{id=id,grade=grade}" ofType="map" javaType="java.util.List" select="getChildrenList" > </collection> </resultMap> <resultMap id="nextDirectoryVoMap" type="com.modules.guide.vo.BookDirectoryVo"> <id column="id" jdbcType="VARCHAR" property="id" /> <result column="book_id" jdbcType="VARCHAR" property="bookId" /> <result column="directory_name" jdbcType="VARCHAR" property="directoryName" /> <result column="page_num" jdbcType="INTEGER" property="pageNum" /> <result column="grade" jdbcType="INTEGER" property="grade" /> <result column="parent_id" jdbcType="VARCHAR" property="parentId" /> <result column="del_flag" jdbcType="INTEGER" property="delFlag" /> <result column="create_by" jdbcType="VARCHAR" property="createBy" /> <result column="create_date" jdbcType="TIMESTAMP" property="createDate" /> <collection property="children" column="{id=id,grade=grade}" ofType="map" javaType="java.util.List" select="getChildrenList" > </collection> </resultMap> <select id="query" parameterType="java.util.Map" resultType="BookDirectory"> select * from t_guide_book_directory where 1=1 <if test="id!=null and id!=''"> and id=#{id} </if> <if test="queryparam!=null and queryparam!=''"> ${queryparam} </if> order by page_num asc </select> <!-- 電子書目錄列表查詢 --> <select id="getBookDirectoryVo" parameterType="com.modules.guide.entity.BookDirectory" resultMap="nextDirectoryVoMap"> select * from t_guide_book_directory where book_id = #{bookId,jdbcType=VARCHAR} and parent_id LIKE CONCAT('%',#{parentId,jdbcType=VARCHAR} ,'%') and grade = #{grade,jdbcType=INTEGER} order by page_num asc </select> <!-- 電子書子目錄 --> <select id="getChildrenList" parameterType="java.util.Map" resultMap="directoryVoMap"> select * from t_guide_book_directory where parent_id LIKE CONCAT('%',CONCAT(#{id,jdbcType=VARCHAR},"_",#{grade,jdbcType=VARCHAR}) ,'%') and grade = (#{grade,jdbcType=INTEGER} + 1) order by page_num asc </select> </mapper>
2、中間的查詢業務程式碼省去了，自己腦補去（太簡單了）
。。。。。。
3、iview後臺管理頁面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ include file="/WEB-INF/views/include/taglib.jsp"%> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>${fns:getConfig('productName')}</title> <meta name="decorator" content="default" /> <script src="${ctxStatic}/plugins/vue/dist/vue.js"></script> <script src="${ctxStatic}/plugins/vue/dist/polyfill.min.js"></script> <link rel="stylesheet" href="${ctxStatic}/plugins/iview/dist/styles/iview.css"> <script src="${ctxStatic}/plugins/iview/dist/iview.min.js"></script> </head> <body> <div class="main-content"> <div class="breadcrumbs" id="breadcrumbs"> <script type="text/javascript"> try{ace.settings.check('breadcrumbs', 'fixed')}catch(e){} </script> <ul class="breadcrumb"> <li> <i class="icon-home home-icon"></i> <a href="#">首頁</a> </li> <li class="active"> <a href="#">訴訟引導平臺</a> </li> <li class="active">目錄管理</li> </ul><!-- .breadcrumb --> <div class="nav-search" id="nav-search"> <form class="form-search"> <span class="input-icon"> <input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" /> <i class="icon-search nav-search-icon"></i> </span> </form> </div><!-- #nav-search --> </div> <div class="page-content"> <div class="page-header"> <h1> 《<span>${book.name}</span>》目錄管理 <small> <i class="icon-double-angle-right"></i> </small> </h1> </div><!--page-header--> <div id="app" class="row"> <div class="col-xs-12"> <div id="toolbar"> <%-- <a class="waves-effect btn btn-info btn-sm" href="${ctx}/guide/bookDirectory/edit" > 新增</a> --%> <!-- <a class="waves-effect btn btn-danger btn-sm " href="javascript:deleteItem();" > 刪除書本目錄</a> --> <i-button class="pull-left" style="margin-right:10px;" type="warning" @click="goBack()">返回</i-button> <upload action="${ctx}/guide/bookDirectory/importData/${book.bookId}" :on-success="handleSuccess"> <i-button type="success" icon="ios-cloud-upload-outline">匯入目錄</i-button> </upload> </div> <div class="col-xs-9"> <tree :data="data5" :render="renderContent" :load-data="loadData"></tree> </div> <!-- 新增OR編輯 --> <div> <modal v-model="modal1" title="新增/編輯目錄" @on-cancel="cancel"> <form id="dataForm"> <input type="hidden" id="moId" name="moId" value=""/> <input type="hidden" id="id" name="id" value=""/> <input type="hidden" id="bookId" name="bookId" value="${book.bookId}"/> <input type="hidden" id="grade" name="grade" value="1"/> <input type="hidden" id="parentId" name="parentId" value="pid#"/> <div class="form-group"> <label for="directoryName">目錄名稱</label> <input type="text" id="directoryName" name="directoryName" class="form-control"> </div> <div class="form-group"> <label for="pageNum">頁碼</label> <input type="text" id="pageNum" name="pageNum" class="form-control"> </div> </form> <div slot="footer"> <i-button type="text" size="large" @click="cancel">取消</i-button> <i-button type="primary" size="large" @click="saveModal">確定</i-button> </div> </modal> </div> <!-- PAGE CONTENT ENDS --> </div><!-- /.col --> </div><!-- /.row --> </div><!-- /.page-content --> </div><!-- /.main-content --> </div><!-- /.main-container-inner --> <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse"> <i class="icon-double-angle-up icon-only bigger-110"></i> </a> </div><!-- /.main-container --> <!-- inline scripts related to this page --> <script type="text/javascript"> var page =1; pageSize = 100; var Main = { data: function data() { var _this = this; return { dataMo:'', modal1: false, modal1Loading: true, data5: [ { directoryName: '目錄', expand: true, render: function render(h, _ref) { var root = _ref.root, node = _ref.node, data = _ref.data; return h('span', { style: { display: 'inline-block', width: '100%' } }, [ h('span', [ h('Icon', { props: { type: 'ios-folder-outline' }, style: { marginRight: '.8rem' } }), h('span', data.directoryName) ]), h('span', { style: { display: 'inline-block', float: 'right', marginRight: '3rem' } }, [ h('Button', { props: Object.assign({}, this.buttonProps, { icon: 'ios-add', type: 'primary' }), style: { width: '8rem', marginRight:'1rem' }, on: { click: function() { vm.append(data) } } },[h('span', "新增目錄")]), h('Button', { props: Object.assign({}, this.buttonProps, { icon: 'ios-remove', type: 'error' }), style: { width: '8rem' }, on: { click: function() { vm.removeAll() } } },[h('span', "刪除目錄")]) ]) ]); }, children: [] } ], buttonProps: { type: 'default', size: 'small', } } }, methods: { goBack:function(){ history.go(-1); }, handleSuccess:function(res, file) { //console.log("====1"); window.location.reload(); }, renderContent: function(h, _ref2) { var _this2 = this; var root = _ref2.root, node = _ref2.node, data = _ref2.data; return h('span', { style: { display: 'inline-block', width: '100%', paddingLeft: '.7rem' } }, [ h('span',[ h('Icon', { props: { type: 'ios-paper-outline' }, style: { marginRight: '.8rem' } }), h('span',{ style: { marginRight: '1rem' } }, data.directoryName), h('span',"--------------------------------"), h('span',{ style: { marginLeft: '.7rem' } },data.pageNum) ]), h('span', { style: { display: 'inline-block', float: 'right', marginRight: '3rem' } }, [ h('Button', { props: Object.assign({}, this.buttonProps, { icon: 'ios-add' }), style: { marginRight: '.8rem' }, on: { click: function() { vm.append(data) } } },[h('span', '新增')]), h('Button', { props: Object.assign({}, this.buttonProps, { icon: 'ios-add' }), style: { marginRight: '.8rem' }, on: { click: function() { vm.editNode(data) } } },[h('span', '編輯')]), h('Button', { props: Object.assign({}, this.buttonProps, { icon: 'ios-edit' }), on: { click: function() { vm.remove(root, node, data) } } },[h('span', '刪除')]) ]) ]); }, loadData:function(item, callback) {//非同步載入 var grade = parseInt(item.grade)+1; var pid = item.id + "_" + item.grade $.ajax({ url: '${ctx}/guide/bookDirectory/loadData', type: 'GET', data: {page:page,rows:pageSize,bookId:item.bookId,parentId:pid,grade:grade}, async: false, success: function (jsonData) { //console.log(jsonData); if(jsonData.rows){ var childrenlist = []; var array = jsonData.rows; for(var i=0;i<array.length;i++){ var mo = array[i]; if(mo.children){ childrenData = { id:mo.id, directoryName: mo.directoryName, pageNum: mo.pageNum, bookId:mo.bookId, grade:mo.grade, parentId:mo.parentId, children:[], loading: false }; }else{ childrenData = { id:mo.id, directoryName: mo.directoryName, pageNum: mo.pageNum, bookId:mo.bookId, grade:mo.grade, parentId:mo.parentId, //expand: false, }; } childrenlist.push(childrenData); } callback(childrenlist); }else{ alert("操作失敗!"); } }, error: function (jsonData) { alert("操作失敗!"); } }); }, saveModal:function() { data = vm.dataMo; saveData(data,"add"); }, cancel:function() { vm.modal1 = false; }, append:function(data) {//新增目錄 $("#directoryName").val(""); $("#pageNum").val(""); $("#moId").val(""); vm.modal1=true; vm.dataMo = data; id = generateUUID(32,36); $("#id").val(id); var nodeKey = data.nodeKey; if(nodeKey>0){ var pid = data.parentId+ "," +data.id + "_"+data.grade; $("#parentId").val(pid); $("#grade").val(parseInt(data.grade)+1); }else{ $("#parentId").val("pid#"); $("#grade").val(1); } }, editNode:function(data) {//編輯目錄 $("#directoryName").val(data.directoryName); $("#pageNum").val(data.pageNum); $("#moId").val(data.id); vm.modal1=true; vm.dataMo = data; }, removeAll: function(){//移除書本目錄 var bookId = $("#bookId").val(); $.confirm({ type: 'red', animationSpeed: 300, title: false, content: '確認刪除嗎？', buttons: { confirm: { text: '確認', btnClass: 'waves-effect waves-button', action: function () { $.ajax({ url: '${ctx}/guide/bookDirectory/remove/'+bookId, type: 'POST', data: {}, async: false, success: function (jsonData) { if('SUCCESS' == jsonData.flag){ window.location.reload(); }else{ alert("操作失敗!"); } }, error: function (jsonData) { alert("操作失敗!"); } }); } }, cancel: { text: '取消', btnClass: 'waves-effect waves-button' } } }); }, remove: function(root, node, data) { $.confirm({ type: 'red', animationSpeed: 300, title: false, content: '確認刪除嗎？', buttons: { confirm: { text: '確認', btnClass: 'waves-effect waves-button', action: function () { var parentKey = root.find(function (el) { return el === node; }).parent; var parent = root.find(function (el) { return el.nodeKey === parentKey; }).node; var index = parent.children.indexOf(data); parent.children.splice(index, 1); removeData(data); } }, cancel: { text: '取消', btnClass: 'waves-effect waves-button' } } }); } } } var Component = Vue.extend(Main) var vm = new Component().$mount('#app') $(function(){ var bookId = $("#bookId").val(); //預設只加載一級目錄 var parentId = $("#parentId").val(); var grade = 1; $.ajax({ url: '${ctx}/guide/bookDirectory/loadData', type: 'GET', data: {page:page,rows:pageSize,bookId:bookId,parentId:parentId,grade:grade}, async: false, success: function (jsonData) { //console.log(jsonData); if(jsonData.rows){ var array = jsonData.rows; for(var i=0;i<array.length;i++){ var mo = array[i]; var childrenData; if(mo.children){ childrenData = { id:mo.id, directoryName: mo.directoryName, pageNum: mo.pageNum, bookId:mo.bookId, grade:mo.grade, parentId:mo.parentId, children:[], loading: false }; }else{ childrenData = { id:mo.id, directoryName: mo.directoryName, pageNum: mo.pageNum, bookId:mo.bookId, grade:mo.grade, parentId:mo.parentId, //expand: false, }; } vm.data5[0].children.push(childrenData); } }else{ alert("操作失敗!"); } }, error: function (jsonData) { alert("操作失敗!"); } }); // 表單效驗 $('form').bootstrapValidator({ //container : "tooltip", container : "popover", message : 'This value is not valid', fields : { 'directoryName' : { validators : { notEmpty : { message : '目錄名稱不為空' }, stringLength : { min : 1, max : 60 }, } }, 'pageNum' : { validators : { notEmpty : { message : '頁碼不能為空' }, numeric: {message: '只能輸入數字'}, } } } }); }); //新增or編輯 function saveData(data){ //進行表單驗證 var bv = $('#dataForm').data('bootstrapValidator'); bv.validate(); if (bv.isValid()) { var jsonObj = $('#dataForm').serializeJson(); //var formData = $('#dataForm').serializeArray(); $.ajax({ url: '${ctx}/guide/bookDirectory/save' , type: 'POST', data: jsonObj, async: false, success: function (jsonData) { //console.log(jsonData); if('SUCCESS' == jsonData.flag){ if(jsonObj.moId){//編輯 vm.$set(data, "directoryName",jsonObj.directoryName); vm.$set(data, "pageNum",jsonObj.pageNum); }else{//新增 const children = data.children || []; children.push({ id:jsonObj.id, directoryName: jsonObj.directoryName, pageNum: jsonObj.pageNum, bookId:jsonObj.bookId, grade:jsonObj.grade, parentId:jsonObj.parentId, expand: true, children:[], //loading: false }); vm.$set(data, 'children', children); } vm.modal1 = false; }else{ alert("操作失敗!"); } }, error: function (jsonData) { alert("操作失敗!"); } }); } } //刪除 function removeData(data){ $.ajax({ url: '${ctx}/guide/bookDirectory/save' , type: 'POST', data: {"moId":data.id,"oper":"del"}, async: false, success: function (jsonData) { if('SUCCESS' == jsonData.flag){ //window.location.reload(); }else{ alert("操作失敗!"); } }, error: function (jsonData) { alert("操作失敗!"); } }); } //Excel匯入目錄 function importData(){ $.ajax({ url: '${ctx}/guide/bookDirectory/save' , type: 'POST', data: {"moId":data.id,"oper":"del"}, async: false, success: function (jsonData) { if('SUCCESS' == jsonData.flag){ //window.location.reload(); }else{ alert("操作失敗!"); } }, error: function (jsonData) { alert("操作失敗!"); } }); } $.fn.serializeJson=function(){ var serializeObj={}; var array=this.serializeArray(); var str=this.serialize(); $(array).each(function(){ if(serializeObj[this.name]){ if($.isArray(serializeObj[this.name])){ serializeObj[this.name].push(this.value); }else{ serializeObj[this.name]=[serializeObj[this.name],this.value]; } }else{ serializeObj[this.name]=this.value; } }); return serializeObj; }; function generateUUID(len, radix) { var chars = '0123456789abcdefghijklmnopqrstuvwxyz'.split(''); var uuid = [], i; radix = radix || chars.length; if (len) { for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix]; } else { var r; uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'; uuid[14] = '4'; for (i = 0; i < 36; i++) { if (!uuid[i]) { r = 0 | Math.random()*16; uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r]; } } } return uuid.join(''); } </script> </body> </html>
4、iview前端頁面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <c:set var="front" value="${frontPath}${pageContext.request.contextPath}/f"/> <c:set var="ctxStatic" value="${pageContext.request.contextPath}/static"/> <c:set var="ajaxUrl" value="${frontPath}${pageContext.request.contextPath}"/> <!DOCTYPE html> <html class="login-bg"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>目錄</title> <link href="${ctxStatic}/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"> <script src="${ctxStatic}/plugins/jquery-3.2.1.min.js"></script> <script src="${ctxStatic}/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> <script src="${ctxStatic}/modules/front/guide/vertical/common/js/common.js"></script> <script src="${ctxStatic}/modules/front/guide/vertical/common/js/flexible.js"></script> <script src="${ctxStatic}/plugins/vue/dist/vue.js"></script> <link rel="stylesheet" href="${ctxStatic}/plugins/iview/dist/styles/iview.css"> <script src="${ctxStatic}/plugins/iview/dist/iview.min.js"></script> <script src="${ctxStatic}/plugins/vue/dist/polyfill.min.js"></script> <link href="${ctxStatic}/modules/front/guide/vertical/css/animate.css" rel="stylesheet"> <link href="${ctxStatic}/modules/front/guide/vertical/css/app-base.css" rel="stylesheet"> <style> .banner10 { background-image: url(${ctxStatic}/modules/front/guide/vertical/image/banner10.jpg); background-repeat: no-repeat; background-size: cover; -webkit-background-size: cover; -o-background-size: cover; background-position: center 0; } header h1{ color: #67093b;} .ivu-tree em{ display: inline-block; float: right; padding: 0 20px; background: #fff; font-style: inherit; } .ivu-tree>ul{ padding: .25rem; } .ivu-tree li ul{ padding: 0 0 0 .55rem; } .ivu-tree ul li{ position: relative; margin: 0; font-size: 0; z-index: 1; } .ivu-tree ul li:before{ position: absolute; top: .4rem; left: 0; right: 0; content: ""; width: 100%; border-top: 2px dashed #000; z-index: -1; } .ivu-tree ul li span{ font-size: .4rem; height: .8rem; line-height: .8rem; overflow: hidden; } .ivu-tree-arrow{ position: absolute; width: .7rem; text-align: center; background: #fff; height: .8rem; line-height: .8rem; } .ivu-tree-arrow i{ font-size: .4rem; } .ivu-tree-title{ background: #F90; height: .8rem; line-height: .8rem; font-size: .5rem; } .judicial-wrapper, .ivu-tree-arrow, .ivu-tree em{ background: #fdfcfa; } </style> </head> <body> <div id="app" class="flex-container"> <div class="loading-wrap"> <div class="loading-box"> <div> <div class="cssload-loader"> <div class="cssload-inner cssload-one"></div> <div class="cssload-inner cssload-two"></div> <div class="cssload-inner cssload-three"></div> </div> <span>載入中...</span> </div> </div> </div> <header class="banner10"> <h1>目錄</h1> </header> <div class="page-content judicial-wrapper"> <tree :data="data5" :render="renderContent" :load-data="loadData"></tree> <!-- <div class="catalog-content"> <ul class="first-list"> <li class="active"> <a href="javascript:;" class="first-menu">一級目錄1</a> <ul class="second-list"> <li>二級目錄1</li> <li>二級目錄1</li> <li>二級目錄1</li> <li>二級目錄1</li> </ul> </li> <li> <a href="javascript:;" class="first-menu">一級目錄2</a> <ul class="second-list"> <li>二級目錄2</li> <li>二級目錄2</li> </ul> </li> <li> <a href="javascript:;" class="first-menu">一級目錄3</a> <ul class="second-list"> <li>二級目錄3</li> <li>二級目錄3</li> <li>二級目錄3</li> </ul> </li> <li> <a href="javascript:;" class="first-menu">一級目錄4</a> <ul class="second-list"> <li>二級目錄4</li> <li>二級目錄4</li> <li>二級目錄4</li> <li>二級目錄4</li> </ul> </li> </ul> </div> --> </div> <!-- 懸浮選單 --> <nav class="menu-right"> <div class="paging-box"> <ul> <li> <a href="javascript:;" id="goBack" class="i-orange"> <i class="icon-undo2"></i></a> </li> </ul> </div> </nav> </div> </body> </html> <script> var page =1; pageSize = 100; function getQueryString(name) { var result = window.location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i")); if (result == null || result.length < 1) { return ""; } return result[1]; } var Main = { data: function data() { return { pageCount:1, data5: [{ directoryName: '目錄', bookId:'', pageNum:1, expand: true, render: function render(h, _ref) { var root = _ref.root, node = _ref.node, data = _ref.data; return h('span', { style: { display: 'inline-block', width: '100%', paddingLeft: '.7rem' }, on: { click: function() { vm.goBookPage(data) } } }, [h('div', { style: { display: 'inline-block', background: '#fdfcfa' } }, [h('Icon', { props: { type: 'ios-folder-outline' }, style: { marginRight: '8px' } }), h('span', data.directoryName)]), h('em',{ style: { width: '1.5rem' } },1)]); }, children: [] }], buttonProps: { type: 'default', size: 'small' } }; }, methods: { renderContent: function(h, _ref2) { var root = _ref2.root, node = _ref2.node, data = _ref2.data; return h('span', { style: { display: 'inline-block', width: '100%', paddingLeft: '.7rem' }, on: { click: function() { vm.goBookPage(data) } } }, [h('div', { style: { display: 'inline-block', background: '#fdfcfa' } }, [h('Icon', { props: { type: 'ios-paper-outline' }, style: { marginRight: '8px' } }), h('span', data.directoryName)]), h('em', { style: { width: '1.5rem' } },data.pageNum) ]); }, loadData: function(item, callback) { var grade = parseInt(item.grade) + 1; var pid = item.id + "_" + item.grade $.ajax({ url: '${ajaxUrl}/web/guide/book/directory/' + item.bookId, type: 'GET', data: { page: page, rows: pageSize, bookId: item.bookId, parentId: pid, grade: grade }, async: false, success: function(jsonData) { if ("SUCCESS" == jsonData.result) { if (jsonData.data) { var childrenlist = []; var array = jsonData.data; for (var i = 0; i < array.length; i++) { var mo = array[i]; if (mo.children) { childrenData = { id: mo.id, directoryName: mo.directoryName, pageNum: mo.pageNum, bookId: mo.bookId, grade: mo.grade, parentId: mo.parentId, children: [], loading: false }; } else { childrenData = { id: mo.id, directoryName: mo.directoryName, pageNum: mo.pageNum, bookId: mo.bookId, grade: mo.grade, parentId: mo.parentId //expand: false, }; } childrenlist.push(childrenData); } callback(childrenlist); } } }, error: function error(jsonData) { alert("操作失敗!"); } }); }, goBookPage:function(data){ var urlStr = "${front}/guide/vertical/read"; if(data.pageNum > vm.pageCount){ vm.$Notice.warning({ title: '提示', desc: '目錄超過書本總頁數！ ' }); return ; } var urlBook = urlStr + "?bookId=" + data.bookId + "&pageCount=" + vm.pageCount+"&pageNum=" + data.pageNum; window.location.href = urlBook; } } }; var Component = Vue.extend(Main); var vm = new Component().$mount('#app'); $(function(){ var bookId = getQueryString("bookId"); vm.pageCount = getQueryString("pageCount"); vm.data5[0].bookId = bookId; //預設只加載一級目錄 var parentId = "pid#"; var grade = 1; $.ajax({ url: '${ajaxUrl}/web/guide/book/directory/'+bookId, type: 'get', data: {page:page,pageSize:pageSize,bookId:bookId,parentId:parentId,grade:grade}, async: false, success: function (jsonData) { //console.log(jsonData); if("SUCCESS" == jsonData.result){ if(jsonData.data){ var array = jsonData.data; for(var i=0;i<array.length;i++){ var mo = array[i]; var childrenData; if(mo.children){ console.log("有子節點"); //TODO 子節點是否有子節點判斷邏輯 childrenData = { id:mo.id, directoryName: mo.directoryName, pageNum: mo.pageNum, bookId:mo.bookId, grade:mo.grade, parentId:mo.parentId, children:mo.children, expand: true, loading: false }; }else{ childrenData = { id:mo.id, directoryName: mo.directoryName, pageNum: mo.pageNum, bookId:mo.bookId, grade:mo.grade, parentId:mo.parentId, //children:[], //expand: false, //loading: false }; } vm.data5[0].children.push(childrenData); } } } }, error: function (jsonData) { alert("操作失敗!"); } }); }); </script>
效果圖：
