npm - ztree

npm - ztree

npm
zTree -- jQuery 树插件
手把手教你学 zTree

cdn文件

zTree 的官网（http://www.treejs.cn/v3/main.php） 有全套的 API 文档以及 Demo。
zTree 在 GitHub 的下载地址：https://github.com/zTree/zTree_v3
zTree 在 开源中国的 Git 下载地址：https://git.oschina.net/zTree/zTree_v3
jQuery 下载地址： http://docs.jquery.com/Downloading_jQuery

<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.ztree.core.js"></script>

自定义图标

setting 配置

var setting = {
        treeId: '', // 节点id
        treeObj: null,
        async: { // ajax
          autoParam: [],
          contentType: 'application...',
          dataFilter: null,
          dataType: 'text',
          enable: false,
          otherParam: [],
          type: 'post',
          headers: {},
          xhrFields: {},
          url: ''
        },
        callback: { // 事件
          beforeAsync: null,
          beforeCheck: null,
          beforeClick: null,
          beforeCollapse: null,
          beforeDblClick: null,
          beforeDrag: null,
          beforeDragOpen: null,
          beforeDrop: null,
          beforeEditName: null,
          beforeExpand: null,
          beforeMouseDown: null,
          beforeMouseUp: null,
          beforeRemove: null,
          beforeRename: null,
          beforeRightClick: null,
          onAsyncError: null,
          onAsyncSuccess: null,
          onCheck: null,
          onClick: null,
          onCollapse: null,
          onDblClick: null,
          onDrag: null,
          onDragMove: null,
          onDrop: null,
          onExpand: null,
          onMouseDown: null,
          onMouseUp: null,
          onNodeCreated: null,
          onRemove: null,
          onRename: null,
          onRightClick: null
        },
        check: {
          autoCheckTrigger: false,
          chkboxType: { Y: 'ps', N: 'ps' },
          chkStyle: 'checkbox',
          enable: false,
          nocheckInherit: false,
          chkDisabledInherit: false,
          radioType: 'level'
        },
        data: {
          keep: {
            leaf: false,
            parent: false
          },
          key: {
            checked: 'checked',
            children: 'children',
            isParent: 'isParent',
            isHidden: 'isHidden',
            name: 'name',
            title: '',
            url: 'url'
          },
          simpleData: { 
            enable: false,
            idKey: 'id', // 字段名
            pIdKey: 'pId', // 字段名
            rootPId: null
          },
          render: {
            name: null,
            title: null
          }
        },
        edit: {
          drag: {
            autoExpandTrigger: true,
            isCopy: true,
            isMove: true,
            prev: true,
            next: true,
            inner: true,
            borderMax: 10,
            borderMin: -5,
            minMoveSize: 5,
            maxShowNodeNum: 5,
            autoOpenTime: 500
          },
          editNameSelectAll: false,
          enable: false,
          removeTitle: 'remove',
          renameTitle: 'rename',
          showRemoveBtn: true,
          showRenameBtn: true
        },
        view: {
          addDiyDom: null,
          addHoverDom: null,
          autoCancelSelected: true,
          dblClickExpand: true,
          expandSpeed: 'fast',
          fontCss: {},
          nodeClasses: {},
          nameIsHTML: false,
          removeHoverDom: null,
          selectedMulti: true,
          showIcon: true,
          showLine: true,
          showTitle: true,
          txtSelectedEnable: false
        }
      }

vue - ztree

package install

yarn add jquery @ztree/ztree_v3

// main.js
import $ from 'jquery'
window.jQuery = $

use

<template>
  <ul id="treeDemo" ref="zTree" class="ztree"></ul>
</template>
<script>
import $ from 'jquery'
import '@ztree/ztree_v3/js/jquery.ztree.core.min.js'
import '@ztree/ztree_v3/js/jquery.ztree.excheck.min.js'
import '@ztree/ztree_v3/css/metroStyle/metroStyle.css'
export default {
  props: {
    setting: {
      type: Object,
      default: () => {
        return {}
      }
    },
    nodes: {
      type: Array,
      default: () => {
        return []
      }
    },
    expandAll: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    nodes: function() {
      console.log('watch')
      this.initTree()
    }
  },
  mounted() {
    console.log('mounted')
    this.initTree()
  },
  methods: {
    initTree() {
      console.log(this.setting, this.nodes)
      $.fn.zTree.init(
        // this.$refs.zTree.$el,
        $('#treeDemo'),
        this.setting,
        this.nodes
      )
    },
  }
}
</script>
 

postcss-plugin-px2rem 导致样式问题

exclude: /(node_module)/ 可解决

// webpack.config.js
{
        test: /\.css$/,
        loader: 'postcss-loader',
        options: {
          postcssOptions: {
            plugins: {
              'postcss-plugin-px2rem': {
                rootValue: 16, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
                // !!! 解决样式问题
                exclude: /(node_module)/ //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
              }
            }
          }
        }
      }