layui的扩展组件dtree用法

先引入commom.js 

// 以下代码是配置layui扩展模块的目录，每个页面都需要引入
layui
  .config({
    version: true,
    base: getProjectUrl() + "js/modules/"
  })
  .extend({
    cascader: "cascader/cascader",
    citypicker: "city-picker/city-picker",
    CKEDITOR: "ckeditor/ckeditor",
    ClipboardJS: "ClipboardJS/ClipboardJS",
    Cropper: "Cropper/Cropper",
    dropdown: "dropdown/dropdown",
    dtree: "dtree/dtree",
    fileChoose: "fileChoose/fileChoose",
    formSelects: "formSelects/formSelects-v4",
    introJs: "introJs/introJs",
    mousewheel: "mousewheel/mousewheel",
    notice: "notice/notice",
    Player: "Player/Player",
    QRCode: "QRCode/QRCode",
    Split: "Split/Split",
    step: "step-lay/step",
    tableSelect: "tableSelect/tableSelect",
    tagsInput: "tagsInput/tagsInput",
    treetable: "treetable-lay/treetable"
  })
  .use(["layer", "admin"], function() {
    var $ = layui.jquery;
    var layer = layui.layer;
    var admin = layui.admin;

    // 移除loading动画
    setTimeout(
      function() {
        admin.removeLoading();
      },
      window == top ? 600 : 100
    );
  });

// 获取当前项目的根路径，通过获取layui.js全路径截取js之前的地址
function getProjectUrl() {
  var layuiDir = layui.cache.dir;

  if (!layuiDir) {
    var js = document.scripts,
      last = js.length - 1,
      src;

    for (var i = last; i > 0; i--) {
      if (js[i].readyState === "interactive") {
        src = js[i].src;
        break;
      }
    }

    var jsPath = src || js[last].src;

    layuiDir = jsPath.substring(0, jsPath.lastIndexOf("/") + 1);
  }
  return layuiDir.substring(0, layuiDir.indexOf("js"));
}

引入css文件，注意dtree.css依赖layui.css

  <link rel="stylesheet" href="../../../js/vendor/layui/css/layui.css">
  <link rel="stylesheet" href="../../../js/modules/dtree/dtree.css">
  <link rel="stylesheet" href="../../../js/modules/dtree/font/dtreefont.css">

引入js文件，注意common.js依赖layui.js 

  <script src="../../../js/vendor/layui/layui.js"></script>
  <script src="../../../js/modules/common.js"></script>

使用dtree 

layui.use(['tree', 'util', 'element', 'dtree'], function () {
      var dtree = layui.dtree,
        layer = layui.layer,
        util = layui.util,
        element = layui.element,
        $ = layui.jquery;
      var checkbarNodes = null;

      initEvent();
      createMap([121.6, 29.85]);
      //模拟数据
      var treeData = [
        {
          "id": "001",
          "title": "供应商A",
          "parentId": "0",
          // "checkArr": [{ "type": "0", "checked": "1" }],
          "children": [
            {
              "id": "001001",
              "title": "供应商A-1",
              "parentId": "001",
              "checkArr": [{ "type": "0", "checked": "0" }],
              "children": [
                { "id": "001001001", "title": "供应商B-1", "last": true, "parentId": "001001", "checkArr": [{ "type": "0", "checked": "0" }] },
                { "id": "001001002", "title": "供应商B-2", "last": true, "parentId": "001001", "checkArr": [{ "type": "0", "checked": "0" }] },
                { "id": "001001003", "title": "供应商B-3", "last": true, "parentId": "001001", "checkArr": [{ "type": "0", "checked": "0" }] }]
            },
            { "id": "001002", "title": "供应商A-2", "last": true, "parentId": "001", "checkArr": [{ "type": "0", "checked": "0" }] },
            { "id": "001003", "title": "供应商A-3", "last": true, "parentId": "001", "checkArr": [{ "type": "0", "checked": "0" }] }]
        }, {
          "id": "002",
          "title": "供应商B",
          "parentId": "0",
          // "checkArr": [{ "type": "0", "checked": "0" }],
          "children": [
            { "id": "002001", "title": "供应商B-1", "last": true, "parentId": "002", "checkArr": [{ "type": "0", "checked": "0" }] },
            { "id": "002002", "title": "供应商B-2", "last": true, "parentId": "002", "checkArr": [{ "type": "0", "checked": "0" }] },
            { "id": "002003", "title": "供应商B-3", "last": true, "parentId": "002", "checkArr": [{ "type": "0", "checked": "0" }] }]
        }, {
          "id": "003",
          "title": "供应商C",
          "parentId": "0",
          // "checkArr": [{ "type": "0", "checked": "0" }],
          "children": []
        }]
      // 树形组件
      var DTreeNode = dtree.render({
        elem: '#tree',
        checkbar: true,
        checkbarType: "only",
        data: treeData,
        initLevel: "1",
        skin: "layui",
        ficon: "1",
        // skin: "zdy",
        // icon: '-1',
        iconfont: ["dtreefont", "layui-icon", "iconfont"],
        iconfontStyle: [
          {
            fnode: {
              // node: {
              //   // open: "dtree-icon-jia"
              // },
            }
          }, {
            checkbox: {
              noall: "layui-icon-circle",
              on: "layui-icon-radio",
              out: "layui-icon-circle"
            }
          },
          {
            fnode: {
              // node: {
              //   // close: "dtree-icon-jia"
              // },
            }
          }],
        checkbarFun: {
          chooseBefore: function ($i, node) {
            var nodeId = node.nodeId;
            var $checkbar = DTreeNode.getNodeDom(nodeId).checkbox(); //获取当前点击节点的checkbar的dom
            DTreeNode.temp = [$checkbar]; //通过内置交换对象，将复选框放入交换队列中
            DTreeNode.changeCheck(); //调取内置选中函数，选中/不选/半选复选框
            checkbarNodes = dtree.getCheckbarNodesParam("tree");
            // console.log(checkbarNodes);
          }
        }
      });
      // 监听树形组件
      dtree.on("node('tree')", function (obj) {
        // 点击节点文字复选框跟随
        var nodeId = obj.param.nodeId;
        var $checkbar = DTreeNode.getNodeDom(nodeId).checkbox(); //获取当前点击节点的checkbar的dom
        DTreeNode.temp = [$checkbar]; //通过内置交换对象，将复选框放入交换队列中
        DTreeNode.changeCheck(); //调取内置选中函数，选中/不选/半选复选框
        checkbarNodes = dtree.getCheckbarNodesParam("tree");
        console.log(checkbarNodes);

        // 点击节点文字也会展开子节点
        // if (!obj.param.leaf) {
        //   var $div = obj.dom;
        //   DTreeNode.clickSpread($div);  //调用内置函数展开节点
        // }

      });