标签：npm zTree false v3 ztree null true

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,
          onm ouseDown: null,
          onm ouseUp: 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，请把此属性设为默认值
              }
            }
          }
        }
      }

标签：npm,zTree,false,v3,ztree,null,true
来源： https://www.cnblogs.com/zc-lee/p/16427578.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。