0.0.20 • Published 7 years ago

ztreev v0.0.20

Weekly downloads
2
License
MIT
Repository
github
Last release
7 years ago

ztreev(vue2.x组件)

环境是抄的这个哥们的项目的,npm安装他的包不能用,因为他是1.0版本,自己搞支持vue2.x版本。 目前是一个纯粹的包裹一下,没有任何改动。

NPM

例子

  1. 我使用的是vue-cli初始化的项目 vue init webpack PROJECT_NAME

  2. webpack.base.conf.js添加配置,否则找不到jQuery、$、_ 等变量。

    plugins: [
      new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
        _: 'lodash'
      })
    ]
  3. vue代码

    //加载静态数据
    <template>
      <ztree
        :setting="{
          async:{
            url: './data.json'
          },
          data: {
            key: {
                name: 'label'
            }
          }
        }"
        :data="[
        {
          label: '父节点1 - 展开',
          open: true,
          children: [
            {
              label: '父节点11 - 折叠',
              children: [
                {
                  label: '叶子节点111'
                },
                {
                  label: '叶子节点112'
                },
                {
                  label: '叶子节点113'
                },
                {
                  label: '叶子节点114'
                }
              ]
            },
            {
              label: '父节点12 - 折叠',
              children: [
                {
                  label: '叶子节点121'
                },
                {
                  label: '叶子节点122'
                },
                {
                  label: '叶子节点123'
                },
                {
                  label: '叶子节点124'
                }
              ]
            },
            {
              label: '父节点13 - 没有子节点',
              isParent: true
            }
          ]
        }
      ]"
      >
      </ztree>
    </template>
    <style>
      @import "~ztree/css/metroStyle/metroStyle.css";
    </style>
    //异步加载数据
    <template>
      <ztree :setting="{
        data:{
          key:{
            name:'label'
          }
        },
        once:{
          url: './static/data/tree.json',
          type : 'GET',
          data :{param:123},
          dataFilter:function(data){
            return data
          }
        }
      }"></ztree>
    </template>
    
    <style>
      @import "~ztree/css/metroStyle/metroStyle.css";
    </style>

Attributes

参数说明类型默认值备注
settingztree origin settingObject{async:{type:'get'}}参考 http://www.treejs.cn/v3/api.php加了一个onceObject属性,一次加载所有树形数据,配置同$.ajax()的option但是其中的dataFilter方法是在ajax回调里执行的。
datalocaldataArray静态数据Array

可以给组件绑定事件,目前只支持vm.$on这种方法给树添加事件钩子,与ztree一致。 回调的最后一个参数用于存储返回值,比如

beforeDrop(treeId, treeNodes, targetNode, moveType, isCopy, store){
  store.cancel = true //防止拖放完成
}

API

方法参数说明
actionactionName(方法名),args...(方法参数)调用treeObj的方法,如comp.action('getNodeByTId','123')comp.action('getNodesByFilter',filter, isSingle, parentNode, invokeParam)
refreshmergeSetting(需要覆盖的配置)与原setting混合,完成修改setting的效果,并重新初始化ztree.使用场景:开始时tree没有checkbox,调用comp.refresh({check:{enable:true}})给tree增加checkbox
0.0.20

7 years ago

0.0.19

7 years ago

0.0.18

7 years ago

0.0.17

7 years ago

0.0.16

7 years ago

0.0.15

7 years ago

0.0.14

7 years ago

0.0.13

7 years ago

0.0.12

7 years ago

0.0.11

7 years ago

0.0.10

7 years ago

0.0.9

7 years ago

0.0.8

7 years ago

0.0.7

7 years ago

0.0.6

7 years ago

0.0.5

7 years ago

0.0.4

7 years ago

0.0.3

7 years ago

0.0.2

7 years ago

0.0.1

7 years ago