preface

ZTree is a multi-functional “tree plug-in” that relies on jQuery. Excellent performance, flexible configuration and combination of multiple functions are the biggest advantages of zTree. Specially suitable for project development, especially tree menu, tree data.

The advantages are as follows:

  • ZTree V3.0 will be the core code according to the function of the partition, the code does not need to load
  • Using the delay loading technology, tens of thousands of nodes easily load, even in IE6 can also do the basic second kill
  • Compatible with Internet Explorer, FireFox, Chrome, Opera, Safari and other browsers
  • Support for JSON data
  • Supports static and Ajax asynchronous loading of node data
  • Support any skin change/custom icon (CSS dependent)
  • Supports extremely flexible checkbox or radio selection
  • Provides multiple event response callbacks
  • Flexible editing (add/delete/change/search) function, you can drag nodes at will, but also can drag multiple nodes yo
  • Multiple Tree instances can be generated simultaneously on a page
  • Simple parameter configuration enables flexible functions

Portal: Official ztree documentation

The effect

  • The radio

  • multi-select

steps

  1. Install Jquery dependencies. Install JQ dependencies (NPM install jquery –save-dev) Then write the following code in configureWebpack in the configuration file vue.config.js.

        configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery".jQuery: "jquery"."windows.jQuery": "jquery"}})],Copy the code

  2. Download the zTree plugin (including Css and Js).

    Download ztree

  3. Introduce the zTree plugin

    Taking a look at my directory structure, everyone’s style can vary (plugins can be called anything, but I prefer to call plugins for general plug-in classes).

    Import CSS and JS in the entry file main.js.

    import "@ / plugins/ztree/js/jquery - 3.2.1. Min." ";
import "@/plugins/ztree/js/jquery.ztree.core.js";
import "@/plugins/ztree/js/jquery.ztree.excheck";
import "@/plugins/ztree/css/zTreeStyle/zTreeStyle.css";
Copy the code

  4. Too much code, here show some important code, if necessary, please download the following compressed file (need to have a certain understanding of Vue).

    • HTML declares the ID astargetDomThe target box, the one I havetargetDomnamedtreeCreate)

    • ZTree main configuration

    • Render the resource tree in the target box

    • Some of the main methods

  5. Source code (potentially complex)

    Download the Vue file

    Note: there are two important files, the parent component index.vue and the child component newStrategy.vue. File resources are loaded through the interface and then mounted on the resource tree. The main methods are zTreeOnCheck() and zTreeOnClick().

advice

Take a look at the official Demo and Api documentation to get a better understanding of how zTree works.

Portal: Demo Demo

Portal: Api documentation

Have a problem

If you encounter any problems in the reading process, please leave a message on the message board, I will help you solve the problem in the first time.