精华内容
下载资源
问答
  • vue-ztree-2.0 开源一个无限树组件, 仿造 ztree
  • vue-ztree 用 vue 写的树层级组件
  • index.vue <template> <div class="learn_item" v-for="(task, taIndex) of taskDetailList" :key="taIndex"> <div class="l_item" @click="currentClick(taIndex)">...div class="item_point" :...

     index.vue

    <template>
      <div class="learn_item" v-for="(task, taIndex) of taskDetailList" :key="taIndex">
        <div class="l_item" @click="currentClick(taIndex)">
          <div class="item_point" :class="taIndex!==0?'':'hidden'">
            <div class="po_img" :class="{po_right:taIndex==currentIndex,po_left:taIndex==currentIndex}"></div>
          </div>
          <div class="item_cont">
            <img class="item_img" :src="taIndex==currentIndex?item_point:item_points" alt="">
            <WaterRipple ref="myWater" :size="{top:'-190px',left:'106px'}" :proNum="task.finishNum" :isTodo="task.isTodo" :id="'wa'+taIndex"></WaterRipple>
            <div class="item_cont_des">
              {{task.isTodo?task.status:'第 '+(taIndex+1)+' 关'}}
            </div>
            <div class="txt_name" :class="{active_c:taIndex==currentIndex}">{{task.name}}</div>
          </div>
        </div>
        <template v-if="checkIndex===1">
          <div class="txt_btn" v-if="task.status!=='已完成'||!task.isTodo" @click="graspBtn(task,taIndex)">已掌握,跳过</div>
        </template>
      </div>
    </template>
    <script>
    import WaterRipple from '@/components/WaterRipple/index'
    export default {
      components: { WaterRipple },
      data () {
        return {
          checkIndex: 1,
          item_point: require('@/assets/home/item_point.png'),
          item_points: require('@/assets/home/item_points.png'),
          taskDetailList: [
            {id: 1, typeid: 1, finishNum: 10, name: '1三角函数原理', status: '未完成', isTodo: true},
            {id: 2, typeid: 1, finishNum: 50, name: '1三角函数原理', status: '未完成', isTodo: false},
            {id: 3, typeid: 1, finishNum: 100, name: '1三角函数原理', status: '已完成', isTodo: true},
            {id: 4, typeid: 1, finishNum: 80, name: '1三角函数原理', status: '未完成', isTodo: false},
            {id: 5, typeid: 1, finishNum: 60, name: '1三角函数原理', status: '未完成', isTodo: true}
          ]
          currentIndex: 0,
        }
      },
      methods: {
        // 知识点切换
        currentClick (index) {
          this.currentIndex = index
          this.$nextTick(() => {
            this.$refs.myWater[index].changeBtn(index)
          })
        }
      }
    }
    </script>
    <style lang="scss" scoped>
    .po_right{
      background: url('../../assets/home/task_right_active.gif') !important;
      background-size: 100% 100% !important;
    }
    .po_left{
      background: url('../../assets/home/task_left_active.gif') !important;
      background-size: 100% 100% !important;
    }
    .active_c{
      color: #28F7FF !important;
    }
    </style>
    

           希望我的愚见能够帮助你哦~,若有不足之处,还望指出,你们有更好的解决方法,欢迎大家在评论区下方留言支持,大家一起相互学习参考呀~

    展开全文
  • zTree实现可搜索功能(升级版)

    千次阅读 2016-11-04 23:37:53
    1、问题背景(1)生成zTree(2)点击节点选中并给输入框赋值(3)输入某个字符,树节点含有该字符被选中,颜色发生变化2、实现源码 zTree具有搜索功能 var setting = { ... fontCss: se

    1、问题背景

    (1)生成zTree

    (2)点击节点选中并给输入框赋值

    (3)输入某个字符,树节点含有该字符被选中,颜色发生变化


    2、实现源码

    <!DOCTYPE html>
    <html>
    <head>
    	<title>zTree具有搜索功能</title>
    	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    	<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
    	<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
    	<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
    	<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
    	<script type="text/javascript">
    		var setting = {
    			view: {
    				showIcon:false,
    				showTitle: false,
    				showLine: true,
    				fontCss: setFontCss
    			},
    			callback: {
    				onClick: zTreeOnClick
    			}
    		};
    
    		var zNodes =[
    			{id:"0",name:"树", open:true,
    				children: [
    					{id:"01",name:"灌木",open:true,
    						children: [
    							{id:"010",name:"银杏"},
    							{id:"011",name:"桑树"},
    							{id:"012",name:"红树"},
    							{id:"013",name:"榕树"}
    						]},
    					{id:"02",name:"乔木",open:true,
    						children: [
    							{id:"020",name:"杨树"},
    							{id:"021",name:"槐树"},
    							{id:"022",name:"杉木"},
    							{id:"023",name:"松树"}
    						]}
    				]}
    		];
    
    		$(document).ready(function(){
    			$.fn.zTree.init($("#tree"), setting, zNodes);
    			
    			$("#dataBtn").keyup(function(){
    				var dt = $(this).val();
    				setColor('tree','name',dt);
    			});
    		});
    		
    		function setColor(id,key,value){  
    		    treeId = id;  
    		    if(value != "")
    		    {
    		        var treeObj = $.fn.zTree.getZTreeObj(treeId);  
    		        nodeList = treeObj.getNodesByParamFuzzy(key, value);  
    		        if(nodeList && nodeList.length>0)
    		        {
    		            updateNodes(true,nodeList,treeId);  
    		        }  
    		    }  
    		}  
    		
    		function updateNodes(highlight,nodeList,treeId) {  
    		    var treeObj = $.fn.zTree.getZTreeObj(treeId);  
    		    for( var i=0; i<nodeList.length;i++) 
    		    {
    		        nodeList[i].highlight = highlight;  
    		        treeObj.updateNode(nodeList[i]);  
    		    }  
    		}  
    		
    		function setFontCss(treeId, treeNode) 
    		{
    			 return (!!treeNode.highlight) ? {color:"#0000FF", "font-weight":"bold","font-size":"14px"} : {color:"#333", "font-weight":"normal"};  
    		};
    		
    		function zTreeOnClick(event, treeId, treeNode) {
    			var zTree = $.fn.zTree.getZTreeObj("tree")
    			var views = zTree.setting.view;
    			$("#dataBtn").val(treeNode.name);
    			views["fontCss"] = reSetFontCss;
    		};
    		
    		function reSetFontCss(treeId, treeNode)
    		{
    			return (!treeNode.click)?{color:"#000000", "font-weight":"normal"}:{}; 
    		}
    	</script>
    </head>
    
    <body style="padding: 20px;">
    	<div>
    		<input type="text" id="dataBtn" style="width: 227px;"/>
    	</div>
    	<div class="content_wrap">
    		<div class="zTreeDemoBackground left">
    			<ul id="tree" class="ztree"></ul>
    		</div>
    	</div>
    </body>
    </html>

    3、实现结果

    (1)初始化时


    (2)点击节点


    (3)输入某个字符



    4、问题分析

    (1)缺陷

        输入框输入某个字符,节点颜色发生变化,但是无法重置(恢复原来的颜色)


    5、修复bug

    <!DOCTYPE html>  
    <html>  
    <head>  
        <title>zTree具有搜索功能</title>  
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
        <link rel="stylesheet" href="../../../css/demo.css" type="text/css">  
        <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">  
        <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>  
        <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>  
        <script type="text/javascript">  
            var setting = {  
                view: {  
                    showIcon:false,  
                    showTitle: false,  
                    showLine: true,  
                    fontCss: setFontCss  
                },  
                callback: {  
                    onClick: zTreeOnClick  
                }  
            };  
      
            var zNodes =[  
                {id:"0",name:"树", open:true,  
                    children: [  
                        {id:"01",name:"灌木",open:true,  
                            children: [  
                                {id:"010",name:"银杏"},  
                                {id:"011",name:"桑树"},  
                                {id:"012",name:"红树"},  
                                {id:"013",name:"榕树"}  
                            ]},  
                        {id:"02",name:"乔木",open:true,  
                            children: [  
                                {id:"020",name:"杨树"},  
                                {id:"021",name:"槐树"},  
                                {id:"022",name:"杉木"},  
                                {id:"023",name:"松树"}  
                            ]}  
                    ]}  
            ];  
      
            $(document).ready(function(){  
                $.fn.zTree.init($("#tree"), setting, zNodes);  
                  
                $("#dataBtn").keyup(function(){  
                	var zTree = $.fn.zTree.getZTreeObj("tree");
               		var views = zTree.setting.view; 
               		views["fontCss"] = setFontCss;
                    var dt = $(this).val();  
                    setColor('tree','name',dt);  
                });  
            });  
              
            function setColor(id,key,value){    
                treeId = id;    
                if(value != "")  
                {  
                    var treeObj = $.fn.zTree.getZTreeObj(treeId);    
                    nodeList = treeObj.getNodesByParamFuzzy(key, value);    
                    if(nodeList && nodeList.length>0)  
                    {  
                        updateNodes(true,nodeList,treeId);    
                    }    
                } 
                else
                {
                	var treeObj = $.fn.zTree.getZTreeObj(treeId);  
                	var views = treeObj.setting.view; 
               		views["fontCss"] = reSetFontCss;
               		treeObj.refresh();
                }
            }    
              
            function updateNodes(highlight,nodeList,treeId) {    
                var treeObj = $.fn.zTree.getZTreeObj(treeId);    
                for( var i=0; i<nodeList.length;i++)   
                {  
                    nodeList[i].highlight = highlight;    
                    treeObj.updateNode(nodeList[i]);    
                }    
            }    
              
            function setFontCss(treeId, treeNode)   
            {  
                 return (!!treeNode.highlight) ? {color:"#0000FF", "font-weight":"bold","font-size":"14px"} : {color:"#000", "font-weight":"normal"};    
            };  
              
            function zTreeOnClick(event, treeId, treeNode) {  
                var zTree = $.fn.zTree.getZTreeObj("tree");
                var views = zTree.setting.view;  
                $("#dataBtn").val(treeNode.name);  
                views["fontCss"] = reSetFontCss;  
                zTree.refresh();
            };  
              
            function reSetFontCss(treeId, treeNode)  
            {  
                return (!treeNode.highlight)?{color:"#000000", "font-weight":"normal"}:{};   
            }  
        </script>  
    </head>  
      
    <body style="padding: 20px;">  
        <div>  
            <input type="text" id="dataBtn" style="width: 227px;"/>  
        </div>  
        <div class="content_wrap">  
            <div class="zTreeDemoBackground left">  
                <ul id="tree" class="ztree"></ul>  
            </div>  
        </div>  
    </body>  
    </html>  


    展开全文
  • vue-ztree-2.0实现树状结构

    千次阅读 2019-09-02 09:36:10
    参考 :官方文档 安装vue-ztree: npm install vue-ztree-2.0 main.js引入vue-ztree: import vueztree from 'vue-ztree-2.0/dist/vue-ztree-2.0.umd.min.js' ...import 'vue-ztree-2.0/dist/...Vue.use(vueztree...

    参考 :官方文档

    安装vue-ztree:

    npm install  vue-ztree-2.0
    

    main.js引入vue-ztree:

    import vueztree from 'vue-ztree-2.0/dist/vue-ztree-2.0.umd.min.js'
    import 'vue-ztree-2.0/dist/vue-ztree-2.0.css'
    
    Vue.use(vueztree)
    

    app.js实现vue-ztree:

    <template>
      <div id="app">
        <h1>{{ msg }}</h1>
        <div style='width:280px;'>
          <vue-ztree :list.sync='ztreeDataSource' :func='nodeClick' :expand='expandClick' :contextmenu='contextmenuClick' :is-open='false'></vue-ztree>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          msg: 'Hello Vue-Ztree-2.0!',
          ztreeDataSource: []
        }
      },
      created:function(){
        this.getData();
      },
      methods:{
        // 点击节点
        nodeClick:function(m){
           console.log(JSON.parse(JSON.stringify(m)));
        },
        // 右击事件
        contextmenuClick:function(m){
           console.log(m)
           console.log("触发了自定义的contextmenuClick事件");
        },
        // 点击展开收起
        expandClick:function(m){
           console.log(JSON.parse(JSON.stringify(m)));
           // 点击异步加载
           if(m.isExpand) {
              // 动态加载子节点, 模拟ajax请求数据
             // 请注意 id 不能重复哦。
             if(m.hasOwnProperty("children")){
                
                m.loadNode = 1; // 正在加载节点
    
                setTimeout(()=>{
                  
                  m.loadNode = 2; // 节点加载完毕
    
                  m.isFolder = !m.isFolder; 
                },1000)
                
             }
           }
        },
    
        getData(){
          var api = 'http://localhost:8080/area/list';
          this.$http.get(api).then(function(response){
            console.log(response);
            this.ztreeDataSource = response.body;
          },function(error){
            console.log("获取树状数据失败!!!");
          })
        }
      }
    }
    </script>
    
    <style>
    body {font-family: Helvetica, sans-serif;}
    </style>
    

    vue-ztree/初始化参数

    参数类型默认值描述
    listArray-树的结构数据源
    funcFunction-点击节点事件
    contextmenuFunction-右击节点事件
    expandFunction-点击展开/收起的方法(一般在异步加载的时候使用, 非异步加载传null)
    is-openBealoontrue是否展开树

    Build Setup

    # install dependencies
    npm install
    
    # serve with hot reload at localhost:8080
    npm run dev
    
    # build for production with minification
    npm run build
    

    如果启动端口号冲突,可在"config–>index.js"中修改端口号:
    在这里插入图片描述

    Demo代码(包含前后端)

    展开全文
  • zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。上篇文章给大家介绍了,大家可以点击查看。之前博客介绍过怎么在vue里展示以及获取...搜索条件var s...

    zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

    上篇文章给大家介绍了,大家可以点击查看。

    之前博客介绍过怎么在vue里展示以及获取点击元素的内容,此文章之介绍搜索功能

    html

    main.js需要单独引入

    如果不单独引入这个会获取不到很多元素,在input回车事件或者点击事件的时候直接执行此事件即可

    代码部分

    .搜索条件

    var searchCondition = $('#' + searchConditionId).val();

    //<2>.得到模糊匹配搜索条件的节点数组集合

    var highlightNodes = new Array();

    if (searchCondition != "") {

    var treeObj = $.fn.zTree.getZTreeObj(treeId);

    highlightNodes = treeObj.getNodesByParamFuzzy("name",searchCondition,null);

    }

    //<3>.高亮显示并展示【指定节点s】

    this.highlightAndExpand_ztree(treeId,highlightNodes,flag);

    },highlightAndExpand_ztree(treeId,tx,flag) {

    var treeObj = $.fn.zTree.getZTreeObj(treeId);

    //<1>. 先把全部节点更新为普通样式

    var treeNodes = treeObj.transformToArray(treeObj.getNodes());

    for (var i = 0; i < treeNodes.length; i++) {

    treeNodes[i].highlight = false;

    treeObj.updateNode(treeNodes[i]);

    }

    //<2>.收起树,只展开根节点下的一级节点

    this.close_ztree(treeId);

    //<3>.把指定节点的样式更新为高亮显示,并展开

    if (highlightNodes != null) {

    for (var i = 0; i < highlightNodes.length; i++) {

    if (flag != null && flag != "") {

    if (highlightNodes[i].flag == flag) {

    //高亮显示节点,并展开

    highlightNodes[i].highlight = true;

    treeObj.updateNode(highlightNodes[i]);

    //高亮显示节点的父节点的父节点....直到根节点,并展示

    var parentNode = highlightNodes[i].getParentNode();

    var parentNodes = this.getParentNodes_ztree(treeId,parentNode);

    treeObj.expandNode(parentNodes,true);

    treeObj.expandNode(parentNode,true);

    }

    } else {

    treeObj.updateNode(highlightNodes[i]);

    var parentNode = highlightNodes[i].getParentNode();

    var parentNodes = this.getParentNodes_ztree(treeId,parentNode);

    treeObj.expandNode(parentNodes,true);

    treeObj.expandNode(parentNode,true);

    }

    }

    }

    },getParentNodes_ztree(treeId,node) {

    if (node != null) {

    var treeObj = $.fn.zTree.getZTreeObj(treeId);

    var parentNode = node.getParentNode();

    return this.getParentNodes_ztree(treeId,parentNode);

    } else {

    return node;

    }

    }

    展示

    这个有个小小的bug,就是做键盘按下或者抬起的时候会有问题,,这个文章就解决了这个问题

    总结

    以上所述是小编给大家介绍的ztree在vue项目中使用并且带有搜索功能。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。

    展开全文
  • <div class="form_input"> <span>性别</span> <label class="sex sex1" v-bind:class="{ active: isChoose1 }">...input name="sex" type="radio" value="m" v-model=...
  • vue引入zTree入门

    万次阅读 热门讨论 2018-07-04 15:14:08
    在vue中引入zTree,和引入其他组件类似,首先在main.js里将以下3个js引入:import "./js/jquery-3.3.1.min.js"; import "../plugins/zTree/js/jquery.ztree.core.min.js"; ...
  • 之前博客介绍过怎么在vue里展示以及获取点击元素的内容,此文章之介绍搜索功能html&lt;el-form-item label="机构" class="ztree-par"&gt; &lt;i class="... pl
  • 要实现的功能截图: 要求:1、点击收件人输入框可以根据拼音自动筛选数据,并且标记已经选择的数据,没有结果的时候提示,相应的更新左边树节点状态2、勾选树右侧树的节点左侧输入框出现一一对应的节点名称 ...
  • vue封装ztree

    千次阅读 2019-01-14 11:59:54
    封装成vueZtree,代码如下: &lt;!—- ztree封装的vue树,依赖ztree3.5版本的css和js,setting配置项等配置可查看ztree官网的api文档。要正常使用,则项目需要引入jQuery--&gt; &lt;style&gt; @...
  • vue---museui入门开发移动端学习系统

    千次阅读 2019-06-30 17:09:01
    import vueztree from 'vue-ztree-2.0/dist/vue-ztree-2.0.umd.min.js' import 'vue-ztree-2.0/dist/vue-ztree-2.0.css' import './assets/iconfont/iconfont.css' Vue.prototype.$axios = axios; Vue.use(MuseUI);...
  • Vue 树控件使用

    万次阅读 2018-01-06 14:16:35
    import vueZtree from '../components/vue-ztree.vue' export default { data() { return { areaListData:[] } }, methods: { routerBack(){ this .$router.go(- 1 ); }, getList(){ this .$...
  • 在vue中使用vue-ztree-2.0

    2020-01-03 09:00:21
    搭建vue项目 安装vue-ztree-2.0 npm i vue-ztree-2.0 ...这里还遇到了一个小坑,关于编译的问题,写成下面的代码就可以正常运行了 import Vue from 'vue' import App from './App'...import vueztree from 'vue-ztree...
  • vue 插件学习篇(一)

    2018-08-09 16:04:25
    一.vue-ztree 树形结构 ... 2.import vueZtree from "vue-ztree/src/components/vue-ztree",在.vue中引入  3.插件引入成功  4.具体语法看:https://www.npmjs.com/package/vue-ztree ...
  • vue2.0 组件 vue-ztree 技巧

    千次阅读 2018-07-11 14:14:09
    npm install vueZtree --save-dev 引入 import vueZtree from &amp;amp;quot;vue-ztree/src/components/vue-ztree&amp;amp;quot;; 用法参考 https://github.com/lisiyizu/vue-ztree-2.0 注意事项 ...
  • Vue中使用ztree实现树形结构发布时间:2018-08-30 14:25,浏览次数:1272, 标签:Vueztree* 官网链接 点击这里 ,*效果图*后端返回数据结构为Object*html部分: 'onchangeDept' size="small" @focus="showDept" suffix...

空空如也

空空如也

1
收藏数 18
精华内容 7
热门标签
关键字:

VueZtree