精华内容
下载资源
问答
  • 一、展示 实验室横向课题中的一个需求,做的是一个文件上传和下载的树形控件文件。要求按照阶段和任务段展示...el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree> ...

      一、效果展示

           实验室横向课题中的一个需求,做的是一个文件上传和下载的树形控件文件。要求按照阶段和任务段展示,即第一层是阶段数,第二层是任务段数,第三层是具体的文件。在文件后面有文件上传和下载的按钮。直接上图说明。

     二、树形控件<el-tree>

    基础的树形结构:

     实现代码:

    el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    
    <script>
      export default {
        data() {
          return {
            data: [{
              label: '一级 1',
              children: [{
                label: '二级 1-1',
                children: [{
                  label: '三级 1-1-1'
                }]
              }]
            }, {
              label: '一级 2',
              children: [{
                label: '二级 2-1',
                children: [{
                  label: '三级 2-1-1'
                }]
              }, {
                label: '二级 2-2',
                children: [{
                  label: '三级 2-2-1'
                }]
              }]
            }, {
              label: '一级 3',
              children: [{
                label: '二级 3-1',
                children: [{
                  label: '三级 3-1-1'
                }]
              }, {
                label: '二级 3-2',
                children: [{
                  label: '三级 3-2-1'
                }]
              }]
            }],
            defaultProps: {
              children: 'children',
              label: 'label'
            }
          };
        },
        methods: {
          handleNodeClick(data) {
            console.log(data);
          }
        }
      };
    </script>

    我们不难发现组件比较简单,重要的对数据的处理。按照官网给出的数据格式,数据应该也是分层给出。若后端返回的数据不是处理好的树形数据,那么前端需要按照设计自己处理数据。这次我的后端也没有给我处理好分层数据,我也是自己熬夜处理好的数据,具体处理过程都在下面的代码中,必要的已经加了注释!

    先看后端返回的数据吧!

    后端只返回了一个一维列表,列表中每个元素包含一个文件号apqpNo、一个文件名fileName和一个状态值state.....需要把这个一维列表处理好分成三层数据,那么开始处理数据!

    处理过程:

    (1)新建 projectFileDate = [], 存后端返回的项目的数据信息,数据信息包含据后端返回的文件编号、文件名、状态等。

       新建realMap = [] , 新建realMap存取处理的数据。realMap中有6个子map,初始化为空,分别为0-5阶段的文件数据。

       取到projectFileDate 中 每个元素中的文件号apqpNo,对文件号进行处理。例子:apqp值为1.2.5时,则可以取出文件号中的三个数(1 2 5),第一个数是文件树的第一层,根据第二个数和第三个数可以确定阶段数dest(根据已经建好fileMap映射)。

            const firstDigst = projectFileDate[i].apqpNo
            const fileId = firstDigst.split('.') // id: 9.2.1
            // 分割字符串 fileId = ["9", "2", "1"]
            var matrix_i = fileId[0]
            const matrix_j = fileId[1]
            const matrix_k = fileId[2]
            // 因第0阶段数据库中的主id为9,故改为0
            if (matrix_i == = '9') {
                matrix_i = '0'
            }
            // 每一个叶子文件属于一个 串联节点(映射关系定义在 .\mapMatrix.js)
            const dest = matrix[matrix_i][matrix_j][matrix_k]
            if (realMap[matrix_i][dest] == = undefined) {
                // eslint-disable-next-line no-array-constructor
                realMap[matrix_i][dest] = new Array()
            }

     遍历projectFileDate,把projectFileDate中的每个元素push进realMap[matrix_i][dest]中,得到的real即为处理好的文件数据。

    (2)对realMap处理成分层的树的数据。

       遍历realmap,在一层循环中加上两个属性值:label和chiledren[].其中label为确定的文件数据第几阶段数。

       curLabel保存realMap[i]值,对curLabel进行添加两个元素,同样是label和chiledren[].其中label为确定的文件数据第几任务段数。

      finalChild保存realMap[i][j]值,对finalChild进行添加三个元素,label、status和id.其中label为确定的文件名称。

     各层保存完依次push进父层,最中得到已建立好的树的数据finalFileTree。

    下面是具体的实现代码

    <template>
      <div>
        <h2 style="margin:15px 10px 10px 16%">{{ titleContext }}</h2>
        <hr>
        <div class="treea">
          <div ref="treeDiv" class="tree-container tree-src">
            <el-tree
              id="tree"
              ref="tree"
              class="tree tree-dis"
              :indent="0"
              :data="data"
              :props="defaultProps"
              :render-content="renderContent"
              @node-click="treeNodeClick"
            >
              />
              <!--
    data绑的值用来展示数据,
    props用来配置选项(树的子节点,树节点文本展示,叶子节点),
    @node-click节点被点击时的事件
    render-content:指定渲染函数,文件上传下载在此函数操作
               -->
            </el-tree></div>
        </div>
      </div>
    </template>
    <script>
    export default {
      props: ['currentProNo'],
      data() {
        return {
          // 当前打开的文件气泡
          preOpenCus: 'none',
          // 项目号
          projectNo: '',
          // 项目名称
          projectName: '',
          // 文件树标题
          titleContext: '',
          // 文件树数据
          direction: 'btt',
          treeFileData: [],
          changeVisible: false,
          fillFileVisible: false,
          apqpNoForTriple: '',
          infoBoardTitle: '相关信息',
          visible_popover: false,
          dialogUploadFile: false,
          peoMap: {},
          apqpNo: '',
          apqpMarkArr: '',
          data: [],
          defaultProps: {  
            // 树形控件的树形绑定对象
            children: 'children', // 设置通过chiledren树形展示节点信息
            label: 'label', // 通过label设置树形节点文本展示
            disabled: function(data, node) {
              if (data.type === 9) {
                return true
              }
            }
          },
          // 记录每层的打开节点
          preOpenNode: {
            // 打开节点的最大层数
            max: 0
          }
        }
      },
      watch: {
        
      },
      created() {
        this.getProjectDate()
      },
      methods: {
        async getProjectDate() {
          // 获取项目的项目号  后面根据项目号查询项目的数据构建项目树
          var project_no1 = this.$route.query.projectNo
          if (typeof project_no1 !== 'undefined' && project_no1 !== null && project_no1.length !== 0) {
            this.projectNo = this.$route.query.projectNo // this.$route.query.projectNo是项目列表点击继续上传按钮传的项目编号
          }
          var project_no2 = this.$store.getters.curProjectNo
          if (typeof project_no2 !== 'undefined' && project_no2 !== null && project_no2.length !== 0) {
            this.projectNo = this.$store.getters.curProjectNo // this.$store.getters.curProjectNo是从步骤二获取的项目编号
          }
          // 调用接口获取该项目需要上传的文件的数据
          // 数据包括以下部分
          /**
           *  项目名称
           *  项目文件列表[文件号fileNumber、文件名称filename、状态state]
           */
          // 项目名称为构建的文件树的标题
          // 文件号1.1.1  此文件为1阶段,判断是属于那个文件段
          // 文件树是三层结构:
          /**
           *  第1阶段          -------  1层
           *     0.1-0.2       -------  2层
           *       市场调研意见书  -------3层
           */
          if (typeof this.projectNo === 'undefined' && this.projectNo === null && this.projectNo.length === 0) {
            this.$message('没有项目编号!')
            return
          }
          await this.$http.get('/dare/document/selectFileTree?projectNo=' + this.projectNo).then(res => {
            const projectFileDate = [] // projectFileDate存项目的数据信息,数据信息包含据信息后端返回的文件编号、文件名等
            // 渲染文件树标题
            this.titleContext = '项目名:' + res.data.result.projectName + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0' + '项目编号:' + this.projectNo
    
            // 项目文件的数据映射到构建的树中
            const realMap = [] // 新建数组projectFileNoList接收文件编号数据
            for (let i = 0; i < 6; i++) {
              realMap[i] = {} // realMap中有6个子map,分别为0-5阶段的文件数据
            }
            realMap[matrix_i] = {}
            // spacial case
            if (res.data.result.fileTreeDTOList.length === 0) {
              this.$message('没有需要上传的文件')
              return
            }
            for (let i = 0; i < res.data.result.fileTreeDTOList.length; i++) {
            // 为每个文件号后面添加一个文件名
              projectFileDate.push(res.data.result.fileTreeDTOList[i])
              // 按照阶段分为0-5个阶段,按照文件号的第一个字符分组
              const firstDigst = projectFileDate[i].apqpNo
              const fileId = firstDigst.split('.') // id: 9.2.1
              // 分割字符串 fileId = ["9", "2", "1"]
              var matrix_i = fileId[0]
              const matrix_j = fileId[1]
              const matrix_k = fileId[2]
              // 因第0阶段数据库中的主id为9,故改为0
              if (matrix_i === '9') {
                matrix_i = '0'
              }
              // 每一个叶子文件属于一个 串联节点(映射关系定义在 .\mapMatrix.js)
              const dest = matrix[matrix_i][matrix_j][matrix_k]
              if (realMap[matrix_i][dest] === undefined) {
              // eslint-disable-next-line no-array-constructor
                realMap[matrix_i][dest] = new Array()
              }
              realMap[matrix_i][dest].push(projectFileDate[i])
            }
            // console.log(realMap) // 已经处理好的文件数据
            // 处理第0阶段
            const finalFileTree = []
            const mapStr = ['第0阶段', '第1阶段', '第2阶段', '第3阶段', '第4阶段', '第5阶段']
            for (const i in realMap) { // 遍历循环realMap 空数据直接跳过
              const curMap = realMap[i] // cur保存每个阶段的数据
              var curLabel = mapStr[i]
              const curPar = { // 阶段层的数据
                label: curLabel,
                type: '0',
                children: []
              }
              for (const j in curMap) {
                const curObj = { // 阶段下的任务段的数据
                  label: stepMap[j],
                  type: '0',
                  children: []
                }
                for (const k in realMap[i][j]) {
                  const cur = realMap[i][j][k] // cur保存阶段下的任务段的子文件数据
                  const finalChild = { // cur保存阶段下的任务段的子文件数据
                    label: cur.fileName,
                    status: cur.state,
                    id: cur.apqpNo
                  }
                  curObj.children.push(finalChild)
                }
                curPar.children.push(curObj)
              }
              // 一个阶段构造完成, 例如, 第一阶段, 第二阶段
              if (curPar.children.length !== 0) {
                finalFileTree.push(curPar)
              }
            }
            this.data = finalFileTree // 已建立好的树的数据
          })
        },
    
        // 文件树的相关操作   对文件上传和下载的操作在此函数中操作
        renderContent(h, { node, data, store }) {
            // 。。。。。。
        },
    
        // 树节点点击函数,一层只展开一个节点,关闭同层节点时,使其展开的子节点也关闭,若无此需求可以在标签内添加accordion手风琴属性
        async treeNodeClick(data, node, el) {
        // console.log(node.level,'层打开的是',node)
          let preExpended = true; let maxLevel = node.level
          // 只有非叶节点出发展开收起控制
          for (let lel = node.level; lel <= this.preOpenNode.max && !node.isLeaf; lel++) {
            this.preOpenNode[lel].expanded = false
            // 若有文件气泡开启,关闭此气泡,若未开启不会开启
            this.popVisiableController(this.preOpenCus)
            if (this.preOpenNode[lel].id === node.id) {
              preExpended = false
              maxLevel = node.level - 1
            }
          }
          // level层打开的是这个node,只记录非叶节点
          if (!node.isLeaf) {
            this.preOpenNode[node.level] = node
            this.preOpenNode.max = maxLevel
            node.expanded = preExpended
          }
        },
    
        cusVisiable() {
        },
    
        popVisiableController(id) {
          if (id === this.preOpenCus) {
          // console.log("这是再次点击关闭,或者来自节点点击")
            this.preOpenCus = 'none'
            this.lastOpenCus = 'none'
            return
          }
          this.lastOpenCus = this.preOpenCus
          this.preOpenCus = id
        }
      }
    }
    </script>
    <style scoped>
    
        .butUpload + div {
            display: inline-block;
        }
    
        .clearfix:before,
        .clearfix:after{
            content: "";
            display: table;
            clear: both;
        }
    
        .grid-content {
            font-size: 23px;
            border-radius: 4px;
            min-height: 36px;
            font-weight: bold;
            padding-left: 20px;
            line-height: 36px;
        }
    
        .bg-purple {
            background: #d3dce6;
        }
    
       .tree /deep/ .el-tree-node {
            position: relative;
            padding-left: 16px;
        }
    
        .tree /deep/ .el-tree-node__children {
            padding-left: 16px;
        }
    
        .tree > .el-tree-node:not(:first-child) .el-tree-node__content {
            height: 90px;
        }
    
        .tree-src /deep/ .tree .el-tree-node .el-tree-node__content {
            height: 90px;
        }
    
        .tree-src /deep/ .tree-dis >.el-tree-node .el-tree-node__content {
            height: 30px;
        }
    
        .tree-src /deep/ .tree-dis >.el-tree-node .el-tree-node__children .el-tree-node__content {
            height: 30px;
            margin-bottom: 0px;
        }
    
        .tree-src /deep/ .tree-dis >.el-tree-node .el-tree-node__children .el-tree-node:not(:first-child)
        .el-tree-node__content {
            height: 55px;
        }
    
        .tree-src /deep/ .tree-dis >.el-tree-node .el-tree-node__children .el-tree-node__children
        .el-tree-node .el-tree-node__content {
            height: 30px;
            margin-bottom: 0px;
        }
    
        .tree-container {
            font-size: 16px;
        }
    
        .el-tree /deep/ .el-tree-node__expand-icon.expanded {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
    
        /*有子节点,但是未展开*/
        .el-tree /deep/ .el-icon-caret-right:before {
            background: url("./folder.png") no-repeat 0 3px;
            content: '';
            display: block;
            width: 16px;
            height: 16px;
            font-size: 16px;
            background-size: 16px;
        }
    
        /*有子节点,并且已经展开*/
        .el-tree /deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
            background: url("./folder_open.png") no-repeat 0 3px;
            content: '';
            display: block;
            width: 16px;
            height: 16px;
            font-size: 16px;
            background-size: 16px;
        }
    
        /*没有子节点,就是一个文件*/
        .el-tree /deep/.el-tree-node__expand-icon.is-leaf::before {
            background: url("./file.png") no-repeat 0 3px;
            content: '';
            display: block;
            width: 16px;
            height: 21px;
            font-size: 16px;
            background-size: 16px;
        }
    
        .fillForm {
            margin-left: 99px;
            font-weight: bold;
            font-size: 14px;
        }
    
        .fillFormHidden {
            margin-left: 99px;
            font-weight: bold;
            font-size: 14px;
            visibility: hidden;
        }
    
        .menu-title {
            margin-top: 14px;
            margin-left: 5px;
            margin-bottom: 20px;
        }
    
        /* 右侧信息栏 */
        .right-wrapper {
            border-radius: 8px;
            box-shadow: 0 0 8px rgba(0,0,0,0.2);
            padding: 1px 10px 9px;
            margin-top: 15px;
        }
    
    </style>
    
    

    展开全文
  • ubuntu下tree命令的使用

    千次阅读 2019-05-13 17:07:17
    安装tree sudo apt-get install tree tree的使用方法: 在使用目录下键入命令: tree -x 或者 tree -d tree --help 介绍:

    安装tree

    sudo apt-get install tree
    

    tree的使用方法:
    在使用目录下键入命令:

    tree -x
    
    或者
    
    tree -d
    

    在这里插入图片描述

    tree --help
    

    介绍:
    在这里插入图片描述

    展开全文
  • Trie Tree和Radix Tree

    千次阅读 2019-06-13 22:38:28
    前言 在实际应用场景中,很多时候我们会用到字典集的查找。通过一个键值key,去拿到它对应的值...本节笔者将要谈论的是对于基数统计来说,使用上更为适用的1种数据结构Trie Tree以及它的衍生优化版Radix Tree。 ...

    前言


    在实际应用场景中,很多时候我们会用到字典集的查找。通过一个键值key,去拿到它对应的值对象。这种方法确实很高效,很快,但是这里有个问题,当字典集储存的键值很多的情况时,毫无疑问,这里会消耗掉大量的内存空间。这个在我们做基数计数的统计应用时,这个空间会膨胀地特别厉害。本节笔者将要谈论的是对于基数统计来说,使用上更为适用的1种数据结构Trie Tree以及它的衍生优化版Radix Tree。

    Trie Tree


    我们先来看第一种树结构Trie Tree,名叫字典树。Trie Tree的原理是将每个key拆分成每个单位长度字符,然后对应到每个分支上,分支所在的节点对应为从根节点到当前节点的拼接出的key的值。它的结构图如下所示。

    在这里插入图片描述

    上图中每个节点存储的值为一个数值,当然这不是绝对的,我们可以假想这可以是key值所对应的任何值对象。只是计数统计在平时使用中更为常见一些。那么问题来了,相比较于字典集的存储方式,Trie Tree将key以树型结构构造,有什么用意呢?一个最大的帮助是公共的前缀被共享了,这样可以避免被重复地存储了。而在普通的字典集结构中,这种重复key前缀都是独立被包含在每个key内的。假设当字典集中所存储的key都带有大量重复的前缀时,Trie Tree将会消耗比普通字典结构更少的空间。

    如上述所描述的,通过共享公共前缀的方式空间省了不少,但是它的查询效率如何呢?按照树的查询方式,一个查询key长度m,首先我们会将key拆分成m个字符,然后对应每个长度,从根节点依次向下,总共会进行到m次查找。因此我们可以得出,它的查询时间复杂度为O(m),随着查询key长度的增加,它所消耗的时间将会线性增长。

    往深层面来看查询时间的问题,其实本质上这是树的深度引起的问题,对于长key而言,它的key对应的节点构造的深度过深。那么如果说我们将这“棵”树构造得更紧凑一些,会如何呢?于是我们有了另外一个衍生版本树:Radix Tree(基数树)。

    Radix Tree


    Radix Tree名为基数树,它的计数统计原理和Trie Tree极为相似,一个最大的区别点在于它不是按照每个字符长度做节点拆分,而是可以以1个或多个字符叠加作为一个分支。这就避免了长字符key会分出深度很深的节点。Radix Tree的结构构造如下图所示:

    在这里插入图片描述
    从上图我们可以看到,上面每个分支可以是局部部分字符串。以简单的字符查找为例,Radix Tree的搜索查找过程如下:

    在这里插入图片描述

    针对Radix Tree的构造规则,它的节点插入和删除行为相比较于Trie Tree来说,略有不同。

    • 对于节点插入而言,当有新的key进来,需要拆分原有公共前缀分支。
    • 对于节点删除而言,当删除一个现有key后,发现其父节点只有另外一个子节点key,则此子节点可以和父节点合并为一个新的节点,以此减少树的比较深度。

    Radix Tree的insert过程如下图所示:
    在这里插入图片描述

    Trie Tree、Radix Tree的局限性


    的确Trie Tree、Radix Tree在某些应用场景可以帮助我们节省内存使用空间,但是它们也有其使用的局限性。比如这类树结构无法适用于所有的数据类型,目前来看主要适用于能够用string字符等可作为表达式查询key的场景。

    引用


    [1].https://en.wikipedia.org/wiki/Radix_tree
    [2].https://en.wikipedia.org/wiki/Trie

    展开全文
  • JsTree3.3动态加载树节点

    万次阅读 2017-02-08 10:05:39
    利用jstree实现,动态初始化树,动态加载选择节点的子节点。

    【JsTree3.3学习笔记】动态加载树节点

    Jstree介绍

    jsTree是jQuery的插件,具有交互性的树。它是免费的、开源的、容易扩展、主题化和可配置的,它支持HTML、JSON数据源和数据加载。

    资源准备

    1、  下载jstree的相关文件,包括themes、jstree.js。

    下载地址1:https://www.jstree.com/ 官方地址打开速度比较慢

    下载地址2:https://github.com/vakata/jstreegithub速度快

    2、  下载jquery,要求版本为1.9以上。

    下载地址:http://jquery.com/

    开发步骤:

    1、  使用任意的开发工具创建一个web工程(本人使用的eclipse)。创建完成后拷贝相关文件到程序目录。见下图:


    2、  在创建1.jsp,代码如下:

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSTree</title>
    <link rel="stylesheet" href="js/themes/default/style.min.css" />
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/jstree.min.js"></script>
    </head>
    <body>
    	<div id="jstree_div"></div>
    	<script type="text/javascript">
    		$(function() {
    			$('#jstree_div').jstree({
    				'core' : {
    					'check_callback': true,
    					"data" : function (obj, callback){
    							$.ajax({
    								url : "/Webs/Services",
    								dataType : "json",
    								type : "POST",
    								success : function(data) {
    									console.info(data);
    									if(data) {
    										callback.call(this, data);
    									}else{
    										$("#jstree_div").html("暂无数据!");
    									}
    								}
    							});
    					}
    				},
    				"plugins" : [ "sort" ]
    			}).bind("select_node.jstree", function(event, data) {
    				var inst = data.instance;
    				var selectedNode = inst.get_node(data.selected);
    				//console.info(selectedNode.aria-level);
    				var level = $("#"+selectedNode.id).attr("aria-level");
    				if(parseInt(level) <= 3){
    					loadConfig(inst, selectedNode);
    				}
    			});
    		});
    		function loadConfig(inst, selectedNode){
    			
    			var temp = selectedNode.text;
    			//inst.open_node(selectedNode);
    			//alert(temp);
    			$.ajax({
    				url : "/Webs/LoadConfig",
    				dataType : "json",
    				type : "POST",
    				success : function(data) {
    					if(data) {
    					   selectedNode.children = [];
    					   $.each(data, function (i, item) {
    						   		var obj = {text:item};
    						   		//$('#jstree_div').jstree('create_node', selectedNode, obj, 'last');
    								inst.create_node(selectedNode,item,"last");
    				       });
    					   inst.open_node(selectedNode);
    					}else{
    						$("#jstree_div").html("暂无数据!");
    					}
    				}
    			});
    		}
    	</script>
    </body>
    </html>
    

    3、  创建后台的树初始化的servlet,命名为Services,具体代码如下:

    package com.wisdom.test;
    
    import java.io.IOException;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    /**
     * Servlet implementation class Services
     */
    public class Services extends HttpServlet {
    	private static final long serialVersionUID = 1L;
           
        /**
         * @see HttpServlet#HttpServlet()
         */
        public Services() {
            super();
        }
    
    	/**
    	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
    	 */
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		response.setCharacterEncoding("UTF-8");
    		response.setContentType("application/json; charset=utf-8");
    		response.getWriter().write("[\"Simple root node\",{\"text\":\"Root node 2\",\"children\":[\"Child 1\",\"Child 2\"]},{\"text\":\"Root node 1\",\"children\":[\"Child 1\",\"Child 2\"]}]");
    		//response.getWriter().append("Served at: ").append(request.getContextPath());
    	}
    
    	/**
    	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
    	 */
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		doGet(request, response);
    	}
    
    }
    

    4、  创建后台的点击某个节点动态加载子节点数据的的servlet,命名为LoadConfig,具体代码如下:

    package com.wisdom.test;
    
    import java.io.IOException;
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    /**
     * Servlet implementation class LoadConfig
     */
    public class LoadConfig extends HttpServlet {
    	private static final long serialVersionUID = 1L;
           
        /**
         * @see HttpServlet#HttpServlet()
         */
        public LoadConfig() {
            super();
        }
    
    	/**
    	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
    	 */
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		
    		//response.getWriter().append("Served at: ").append(request.getContextPath());
    		
    		response.setCharacterEncoding("UTF-8");
    		response.setContentType("application/json; charset=utf-8");
    		response.getWriter().write("[\"Child01\",\"Child02\",\"Child03\"]");
    	}
    
    	/**
    	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
    	 */
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		doGet(request, response);
    	}
    
    }
    

    5、  运行结果如下,一个动态加载的树结构就出来了。


    总结一下

    本示例主要使用的是Jstree的如下功能:

    Ø  data属性使用异步的ajax调用后台获取到json数据格式,再赋值给data属性的方式来实现异步加载树节点。

    Ø  bind属性用来绑定对树节点的各种操作,本示例主要使用的是select_node操作,在绑定事件中获取当前被选中的节点以及当前树的实例,用于后续的在选中节点中添加子节点的操作。

    Ø  check_callback属性这个是boolean类型的变量,用来确定当用户试图修改树的结构时的操作是否被允许。当变量值为“true”时,所有操作,如创建,重命名,删除,移动或复制等都是允许的,否则都是被禁止的,所以本示例中要实现选择某个节点后动态加载其子节点的操作必须把该属性设置成true。

    Ø  create_node方法这个方法是用来动态创建树节点的。方法简介

    原型  create_node : function (par, node, pos, callback,is_loaded)

    参数说明

    l  par  父节点,也就是要在那个节点下创建其子节点,如果需要创建的是父节点,传递"#"或“null”

    l  node 子节点的数据,可以是json格式,或者是一个节点的字符串

    l  pos   子节点插入的位置,可以取值为"before" 、"after" 、“first”、”last”,默认为last

    l  callback 节点创建完成后的回调函数

    l  is_loaded 是否检查父节点成功地加载,取值true、false

    Ø  aria-level属性标识当前选择的节点的级别,也就是树的层级,这个可以控制树的层级,本示例中控制了只能动态加载3层。用法如下:

    var level = $("#"+selectedNode.id).attr("aria-level");
    if(parseInt(level) <= 3){
        loadConfig(inst, selectedNode);
    }
    






    展开全文
  • Chinese Treebank 8.0

    2018-05-03 09:01:28
    Chinese Treebank 8.0 LDC中文句树库(LDC2013T21),已标注句子的各个词语词性、句中成分、语义信息,可用于自然语言处理的句法分析或词性标注等任务。
  • tree命令安装包

    2014-08-23 12:40:40
    tree命令安装包,最小化安装系统,安装此软件包即可使用tree命令查看文件树。
  • jsTree中文文档

    热门讨论 2015-03-14 19:50:43
    jsTree中文文档
  • AngularJS的tree控件

    2016-02-26 14:25:53
    Angularjs,自己整理个tree的控件,非常好用
  • 当git push时,发生missing tree 或者 missing blob问题时,可以尝试通过 git gc --aggressive --prune=now 解决,在命令运行中会找出一堆垃圾,对所有的回答选项都选n即可...
  • D3.js--Tree(树)

    万次阅读 2015-12-30 16:39:32
    .attr("dy", 3)//定义文本显示y轴偏移量 .style("text-anchor", function(d) { return d.children ? "end" : "start"; })//文字对齐显示 .text(function(d) { return d.name; }); }); JSON文件(data...
  • unity中使用speedtree产生高质量树木

    万次阅读 2016-04-25 22:29:38
    上周测试了speedtree,生成的树可以直接放入unity中,unity直接支持spm格式,并且支持风力 另外树叶能随机偏色 需要改树的导入设置
  • B-Tree和B+Tree

    千次阅读 2019-08-12 10:49:48
    目前大部分数据库系统及文件系统都采用B-Tree或其变种B+Tree作为索引结构,在本文的下一节会结合存储器原理及计算机存取原理讨论为什么B-Tree和B+Tree在被如此广泛用于索引,这一节先单纯从数据结构角度描述它们。...
  • FP-Tree的Python实现

    千次阅读 2018-09-27 20:53:16
    一、问题的背景  给定一组商品购买信息,找到商品购买中频繁出现的商品集。比如说,我们有如下的商品交易信息: 市场购物信息 ... 3 Milk, Diaper, Beer, Coke 4 Bread, Milk, Diaper, Beer ...
  • Python3 xml解析模块xml.etree.ElementTree简介
  • 来源于 Tomas Mikolov 网站上的 PTB 数据集http://www.fit.vutbr.cz/~imikolov/rnnlm/simple-examples.tgz。 该数据集已经预先处理过并且包含了全部的 10000 个不同的词语,其中包括语句结束标记符,以及标记稀有...
  • SpeedTree学习笔记

    千次阅读 2011-04-18 13:43:00
    最近拿到SpeedTree资料,开始学习,并用到项目里去.1. 该插件的特点:api无关。它本身只是数据结构和逻辑架构,没有任何渲染语句子,因此为了把它应用到自己的引擎里,需要为之添加渲染相关的语句。而根据sdk的讲解,...
  • xml.etree.ElementTree支持的XPath语法
  • tree(c++ tree容器)

    热门讨论 2008-12-04 15:27:40
    该源码可用于建立树结构的数据结构,与c++标准库中中vector, list, map等用法完全相同,只需要在程序中包含该头文件即可使用,可以作为标准库的补充
  • 用set方法 if (treeData[i].children) { treeData[i].children = _this.treeChangeExpand(treeData[i].children, flag); } } return treeData; }, 展开后样式如下: show-checkbox 为开启多选框 @on-check-change='...
  • easyui tree 检索树节点(3

    千次阅读 2017-03-24 14:39:07
    easyui tree 检索
  • JS中List转TreeTree转List

    千次阅读 2019-12-16 09:16:47
    let tree = [ { id: 1, pid: 'root', name: '1' }, { id: 2, pid: 1, name: '2' }, { id: 3, pid: 1, name: '3' }, { id: 4, pid: 'root', name: '4' }, { id: 5, pid: 4, name: '4' }, ...
  • Excel 决策插件Treeplan

    2012-11-04 11:54:43
    Excel建模用插件 做决策用 免费 直接在excel中添加加载项是选择打开就可以使用
  • iview下拉菜单树的iview-select-tree的使用以及iview-select-tree的实现的源代码公众号前言单选效果多选效果validate验证效果iview-select-tree的集成的npm的地址集成iview-select-tree 公众号 大家可以直接微信...
  • TreeDataGridView

    热门讨论 2011-09-08 18:16:43
    这几天做项目需要个树型的表格控件,在网上搜索不到自己称心,自己写了,贴上来分享一下。用法在演示程序 <img>http://hi.csdn.net/attachment/201109/6/244398_1315305858VCbl.jpg</img>
  • 完整的jquery easyui tree 树形列表节点异步加载demo,比官方demo详细得多。是前后台交互的web应用。
  • jstree文档简介

    千次阅读 2018-04-26 14:32:12
    jstree中文github文档2017年04月11日 15:22:51阅读数:29839jstreeBala...bala...这段就不翻译了. jstree就是个基于JQUERY的树形控件.jsTree is jquery plugin, that provides interactive trees. It is absolutely...
  • BTree和B+Tree详解

    万次阅读 多人点赞 2019-09-01 10:28:43
    BTree和B+Tree详解二叉查找树二叉树的性质平衡二叉树(AVL Tree)B-Tree(平衡多路查找树)B+TreeB+Tree和B-Tree的区别 最近想重新复习数据结构的知识,想了解B树和B+树的区别,看了挺多篇博文的,但看了还是懵懵的...
  • Treeplan 正式版

    热门讨论 2010-07-11 12:23:24
    excel decision tree插件treeplan正式版 office2010测试通过
  • Angular Tree Component简介

    千次阅读 2019-06-24 11:15:28
    安装 1. 从npm安装 npm install --save angular-tree-component 2. 导入CSS styles.scss ...@import '~angular-tree-component/dist/angular-tree-...3. 导入模块 app.module.ts: import { TreeModule } f...
  • jsTree例子2-theme-plugin

    热门讨论 2012-04-14 17:13:55
    使用jsTree的插件小例子,这个例子描述了theme插件

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,043,200
精华内容 417,280
关键字:

tree(3)