iview 的树插件实现目录树

最新推荐文章于 2022-07-11 22:34:59 发布

kenhins

最新推荐文章于 2022-07-11 22:34:59 发布

阅读量1.9k

点赞数

分类专栏： Java Java web VUE

本文链接：https://blog.csdn.net/kenhins/article/details/83624383

版权

Java 同时被 3 个专栏收录

90 篇文章 0 订阅

订阅专栏

Java web

83 篇文章 0 订阅

订阅专栏

VUE

6 篇文章 0 订阅

订阅专栏

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>

效果图：