javascript 單選、復選樹 ---

Riddler 發布于2019-08-26 13:39 / 2594人閱讀

摘要：項目開發中遇到一顆樹單選多選項目中遇到這個功能，與其一個不如自己造個輪子。預覽地址設計主要思路展現層樹的顯示用遞歸函數羅列出頁面顯示效果。插件里面維護一個獲取當前選中狀態的函數返回為單元的數組。為后面操縱數據狀態例如是不是選中狀態提供方便。

項目開發中遇到一顆樹（單選、多選）；

github L6zt

項目中遇到這個功能，與其copy一個不如自己造個輪子。預覽地址
設計主要思路:
1.展現層樹的顯示用遞歸函數羅列出頁面顯示效果。
2.不同的功能對應不用模式model來區分、對應這不同的展示效果（ui交互效果、初始化數據選擇形式）
所以采用對應不同的模式分別寫出（不同初始渲染狀態函數和ui效果交互函數）。感覺這是這樣處理比較合適。
3.插件里面維護一個獲取當前選中狀態的函數返回{id, name} 為單元的數組。
4.id 查詢路徑函數（findIdDir），所有初始化頁面狀態邏輯都基于它

主要函數代碼：

// 搜尋回現id中具體的位置，為了定位數據點。為后面操縱數據狀態(例如是不是選中狀態)提供方便。
假如findIdDir返回數據 1-2 即該節點在 [{},{childs: [{},{id: "xxx", name: "我就是1-2節點"}]},{}]

  const findIdDir = (data, id, dir) => {
    dir = dir ? dir : "";
    /*--||--||--||--*/
    for (let idx = 0, lg = data.length; idx < lg; idx++) {
      if (data[idx].id == id) {
        return dir === "" ? `${idx}` : `${dir}-${idx}`
      }
      if (data[idx].childs) {
        let curDir = `${dir ?  `${dir}-` : ""}${idx}`;
        let result = findIdDir(data[idx].childs, id, curDir);
        if (result) {
          return result
        }
      }
    }
    return undefined
  };

// js 代碼

/*
 *  model ---- 0 1 2模式 
 * 0 是單選模式  
 * 1 是回連模式（選擇父節點子節聯動選中取消，子節點選中聯調父節點是否選中） 多選模式 
 * 2 特殊 不回聯模式
 *  onchange ----> 選中觸發回調
 *  idList: [] -----> 選中節點結合
 */
console.log("init ---- statrt");
(function() {
  const pluginName = "jctree";
  const noop = function() {};
  // 路徑函數
  const findIdDir = (data, id, dir) => {
    dir = dir ? dir : "";
    /*--||--||--||--*/
    for (let idx = 0, lg = data.length; idx < lg; idx++) {
      if (data[idx].id == id) {
        return dir === "" ? `${idx}` : `${dir}-${idx}`
      }
      if (data[idx].childs) {
        let curDir = `${dir ?  `${dir}-` : ""}${idx}`;
        let result = findIdDir(data[idx].childs, id, curDir);
        if (result) {
          return result
        }
      }
    }
    return undefined
  };
  const defaultOption = {
    model: 0,
    data: [],
    onchange: noop,
    idList: []
  }
  
  function JcTree(options) {
    this._options = defaultOption;
    if (!options.data || !Array.isArray(options.data)) {
      console.warn("樹需要初始化數據data且data應為數組")
    };
    options.data = $.extend(true, [], options.data);
    $.extend(this._options, options || {});
    this.init();
  };
  // 渲染樹
  JcTree.prototype.renderTree = function(data, open, index, dir) {
    index = undefined === index ? 0 : index;
    dir = undefined === dir ? "" : dir;
    const nextIndex = index + 1;
    const className = open ? "" : "hide";
    let htmlStr = ``;
    // data icon-check text-icon del-btn check.svg
    data && data.forEach((d, idx) => {
      let {
        id,
        name,
        childs,
        open,
        leafFlag,
        checked,
        hasChildSelect
      } = d;
      let curDir = dir === "" ? `${idx}` : `${dir}-${idx}`;
      let showToggleBtnFlag = leafFlag;
      htmlStr += `` +
        (showToggleBtnFlag && childs && childs.length ? `${open ? "-" : "+"}` : "") +
        `` +
        `${name}` +
        `">(下級有選中節點)` +
        ``;
      if (childs && childs.length > 0) {
        htmlStr += this.renderTree(childs, open, nextIndex, curDir);
      }
    });
    return htmlStr += ``
  };
  // 初始化數據
  JcTree.prototype.initSingleData = function() {
    const {
      _options: {
        data,
        idList
      }
    } = this;
    if (idList.length === 0) {
      return
    };
    const dirList = idList.map(id => findIdDir(data, id));
    dirList.forEach(dir => {
      if (dir === undefined) return;
      const indexList = dir.split("-").filter(i => i !== "");
      let lg = indexList.length;
      let item = data;
      for (let i = 0; i < lg; i++) {
        let curIndex = indexList[i];
        if (i === lg - 1) {
          item[curIndex].checked = true
        } else {
          if (lg !== 1) {
            item[curIndex].open = true
          }
        }
        item = item[curIndex].childs
      }
    });
  };
  JcTree.prototype.initMulitData = function() {
    const {
      _options: {
        data,
        idList
      }
    } = this;
    const syncChildState = function(data) {
      if (data.childs) {
        data.childs.forEach(syncChildState);
      }
      data.open = true;
      data.checked = true;
    };
    if (idList.length === 0) {
      return
    };
    // 對id 路徑進行排序·規則 --- 例如當 存在 ‘1-2-1’ 和 ‘1-2’ 兩個對應的路徑，
    // 此時表示 ‘1-2’ 以下的點都為選中的狀態，此時 再出現 ‘1-2-2’，就不用關注這個點的狀態，
    // 因為這個是在 ‘1-2’ 以下的所以是選中狀態。
    let originDirList = idList.map(id => findIdDir(data, id)).filter(d => d !== undefined).sort();
    let dirList = [];
    // 打牌比較 如果 如果前面相同的話 拿出來
    while (originDirList.length) {
      let cur = originDirList.shift();
      dirList.push(cur)
      for (var i = 0; i < originDirList.length;) {
        if (originDirList[i].indexOf(cur) === 0) {
          originDirList.splice(i, 1)
        } else {
          i++
        }
      }
    };
    // 初始化父子節點 /0/
    let curItems = [];
    // 排序優化
    dirList.forEach(dir => {
      if (dir === undefined) return;
      const indexList = dir.split("-").filter(i => i !== "");
      let lg = indexList.length;
      let item = data;
      for (let i = 0; i < lg; i++) {
        let curIndex = indexList[i];
        if (i === lg - 1) {
          item[curIndex].checked = true;
          curItems.push(item[curIndex]);
        } else {
          if (lg !== 1) {
            item[curIndex].open = true
            item[curIndex].hasChildSelect = true
          }
        }
        item = item[curIndex].childs
      }
    });
    curItems.forEach(syncChildState);
  };
  JcTree.prototype.initMulitSpData = function() {
    const {
      _options: {
        data,
        idList
      }
    } = this;
    if (idList.length === 0) {
      return
    };
    // 打牌比較 如果 如果前面相同的話 拿出來
    let dirList = idList.map(id => findIdDir(data, id)).filter(d => d !== undefined).sort();
    // 初始化父子節點 /0/
    let curItems = [];
    // 排序優化
    dirList.forEach(dir => {
      if (dir === undefined) return;
      const indexList = dir.split("-").filter(i => i !== "");
      let lg = indexList.length;
      let item = data;
      for (let i = 0; i < lg; i++) {
        let curIndex = indexList[i];
        if (i === lg - 1) {
          item[curIndex].checked = true;
          curItems.push(item[curIndex]);
        } else {
          if (lg !== 1) {
            item[curIndex].open = true;
            item[curIndex].hasChildSelect = true
          }
        }
        item = item[curIndex].childs
      }
    });
  };
  JcTree.prototype.bindEventModelSingle = function() {
    const $root = this._options.$el;
    const _this = this;
    $root.on(`click.${pluginName}`, ".tree-handle-toggle", function() {
      let toggleText;
      const $curEl = $(this);
      const $parentNext = $curEl.parent(".tree-fh-item").next();
      $parentNext.toggleClass("hide");
      toggleText = $parentNext.hasClass("hide") ? "+" : "-";
      $curEl.text(toggleText);
    }).on(`click.${pluginName}`, "span.checkbox", function() {
      const $el = $(this);
      $el.toggleClass("active");
      const id = $el.data("id");
      let selectFlag = $el.hasClass("active");
      if (selectFlag) {
        $root.find("span.checkbox").removeClass("active")
        $el.addClass("active")
        _this._options.onchange(id);
      } else {
        $el.removeClass("active")
      }
    })
  };
  JcTree.prototype.bindEventModelMulit = function() {
    const $root = this._options.$el;
    const data = this._options.data;
    const _this = this;
    $root.on(`click.${pluginName}`, ".tree-handle-toggle", function() {
      let toggleText;
      const $curEl = $(this);
      const $parentNext = $curEl.parent(".tree-fh-item").next();
      $parentNext.toggleClass("hide");
      toggleText = $parentNext.hasClass("hide") ? "+" : "-";
      $curEl.text(toggleText);
    }).on(`click.${pluginName}`, "span.checkbox", function() {
      const $el = $(this);
      $el.toggleClass("active");
      const dir = $(this).data("dir").toString();
      const dirIndex = dir.split("-");
      let parentsDirs = [];
      let parentDir = "";
      const checkFlag = $el.hasClass("active");
      const $parent = $el.closest(".tree-fh-item");
      // 父級 對 下級效果
      const $childsParents = $parent.next(".tree-fh-node");
      checkFlag ? $childsParents.find("span.checkbox").addClass("active") : $childsParents.find("span.checkbox").removeClass("active")
      // 尋根節點
      dirIndex.forEach(d => {
        parentDir = parentDir === "" ? d : `${parentDir}-$rbpvr5v`
        parentsDirs.push(parentDir)
      });
      // 找相應的父節點
      parentsDirs = parentsDirs.map(dir => `.tree-fh-item[data-dir="${dir}"]`).reverse();
      parentsDirs.shift();
      parentsDirs.forEach(function(selector) {
        const $el = $(selector, $root);
        const $next = $el.next();
        const findAllCheckboxs = $("span.checkbox", $next);
        let flag = true;
        findAllCheckboxs.each(function() {
          if (!$(this).hasClass("active")) {
            flag = false
            return false
          }
        });
        flag ? $el.find("span.checkbox").addClass("active") : $el.find("span.checkbox").removeClass("active");
      })
      _this._options.onchange(_this.getIdList());
    })
  };
  JcTree.prototype.bindEventModelMulitSp = function() {
    const $root = this._options.$el;
    const data = this._options.data;
    const _this = this;
    $root.on(`click.${pluginName}`, ".tree-handle-toggle", function() {
      let toggleText;
      const $curEl = $(this);
      const $parentNext = $curEl.parent(".tree-fh-item").next();
      $parentNext.toggleClass("hide");
      toggleText = $parentNext.hasClass("hide") ? "+" : "-";
      $curEl.text(toggleText);
    }).on(`click.${pluginName}`, "span.checkbox", function() {
      const $el = $(this);
      $el.toggleClass("active");
      const dir = $(this).data("dir").toString();
      const dirIndex = dir.split("-");
      let parentsDirs = [];
      let parentDir = "";
      const checkFlag = $el.hasClass("active");
      const $parent = $el.closest(".tree-fh-item");
      // 父級 對 下級效果
      // 尋根節點
      dirIndex.forEach(d => {
        parentDir = parentDir === "" ? d : `${parentDir}-$7jpxv7x`
        parentsDirs.push(parentDir)
      });
      // 找相應的父節點
      parentsDirs = parentsDirs.map(dir => `.tree-fh-item[data-dir="${dir}"]`);
      parentsDirs.pop();
      parentsDirs.forEach(function(selector) {
        const $el = $(selector, $root);
        const $hasChildSelect = $el.find(".has-child-select");
        const $next = $el.next();
        const findAllCheckboxs = $("span.checkbox", $next);
        let flag = false;
        findAllCheckboxs.each(function() {
          if ($(this).hasClass("active")) {
            flag = true
            return false
          }
        });
        !flag ? $hasChildSelect.addClass("hide") : $hasChildSelect.removeClass("hide")
      })
      _this._options.onchange(_this.getIdList());
    })
  }
  //
  JcTree.prototype.getIdList = function() {
    const $root = this._options.$el;
    return $("span.active", $root).filter(".active").map((index, el) => {
      const $el = $(el);
      return {
        id: $el.data("id"),
        name: $el.data("name")
      }
    }).get();
  };
  // 初始化樹
  JcTree.prototype.init = function() {
    switch (this._options.model) {
      case 0:
      {
        this.initSingleData();
        break;
      }
      case 1:
      {
        this.initMulitData();
        break;
      }
      case 2:
      {
        this.initMulitSpData();
        break;
      }
    }
    let result = this.renderTree(this._options.data, true);
    result = `${result} `
    this._options.$el.html(result);
    switch (this._options.model) {
      case 0:
      {
        this.bindEventModelSingle();
        break;
      }
      case 1:
      {
        this.bindEventModelMulit();
        break;
      }
      case 2:
      {
        this.bindEventModelMulitSp();
        break;
      }
    }
  };
  
  $.fn.JcTree = function(options) {
    const $el = this;
    options = Object.assign({}, options, {
      $el
    });
    const jctree = new JcTree(options);
    const data = $el.data("jctree");
    if (data) this.off(`click.${pluginName}`);
    $el.data("jctree", jctree);
    return this
  }
})();
/**************************模擬樹數據********************************/
// 后端數據
const ajaxData =  {
  "flag":1,
  "data":{"root":{"id":1,"level":0,"data":{"id":1,"level":0,"parentId":0,"name":"全部","categoryId":1,"leafFlag":1},"parentId":0,"childs":[{"id":2,"level":1,"data":{"id":2,"level":1,"parentId":1,"name":"導入默認分類","categoryId":2,"leafFlag":1},"parentId":1,"childs":[]},{"id":3,"level":1,"data":{"id":3,"level":1,"parentId":1,"name":"測試1級","categoryId":3,"leafFlag":0},"parentId":1,"childs":[{"id":5,"level":2,"data":{"id":5,"level":2,"parentId":3,"name":"測試2級","categoryId":5,"leafFlag":0},"parentId":3,"childs":[{"id":7,"level":3,"data":{"id":7,"level":3,"parentId":5,"name":"測試3級","categoryId":7,"leafFlag":1},"parentId":5,"childs":[]},{"id":8,"level":3,"data":{"id":8,"level":3,"parentId":5,"name":"測試3級b","categoryId":8,"leafFlag":1},"parentId":5,"childs":[]}]},{"id":6,"level":2,"data":{"id":6,"level":2,"parentId":3,"name":"測試2級b","categoryId":6,"leafFlag":0},"parentId":3,"childs":[]}]},{"id":4,"level":1,"data":{"id":4,"level":1,"parentId":1,"name":"測試1級b","categoryId":4,"leafFlag":0},"parentId":1,"childs":[]}]},"rootFlag":-1,"count":8}
};
let data = [ajaxData.data.root];
const transData = function (data, resultOut) {
  resultOut = resultOut ? resultOut : [];
  data.forEach((d, index) => {
    let leafMsg = {};
    leafMsg.id = d.id;
    leafMsg.childs = d.childs;
    leafMsg.name = d.data.name;
    leafMsg.leafFlag = d.data.leafFlag;
    leafMsg.level = d.level;
    if (d.childs) {
      const childs = leafMsg.childs = [];
      transData(d.childs, childs);
    }
    resultOut.push(leafMsg);
  });
  return resultOut
};
data = transData(data);
data = [{
  "id": 1,
  "childs": [{
    "id": 2,
    "childs": [{
      id: 9,
      name: "測試",
      level: 0
    }],
    "name": "導入默認分類",
    "leafFlag": 1,
    "level": 1
  }, {
    "id": 3,
    "childs": [{
      "id": 5,
      "childs": [{
        "id": 7,
        "childs": [],
        "name": "測試3級",
        "leafFlag": 0,
        "level": 3
      }, {
        "id": 8,
        "childs": [],
        "name": "測試3級b",
        "leafFlag": 0,
        "level": 3
      }],
      "name": "測試2級",
      "leafFlag": 1,
      "level": 2
    }, {
      "id": 6,
      "childs": [],
      "name": "測試2級b",
      "leafFlag": 1,
      "level": 2
    }],
    "name": "測試1級",
    "leafFlag": 1,
    "level": 1
  }, {
    "id": 4,
    "childs": [{
      id: 13,
      name: "走吧",
      leafFlag: 1,
      childs: [{
        id: 113,
        name: "走吧",
        leafFlag: 1
      }, {
        id: 114,
        name: "哈哈",
        leafFlag: 1
      }, {
        id: 213,
        name: "jc",
        leafFlag: 1,
        childs : [
          {
            id: 313,
            name: "走吧",
            leafFlag: 1
          }, {
            id: 314,
            name: "哈哈",
            leafFlag: 1
          }, {
            id: 413,
            name: "jc",
            leafFlag: 1
          }, {
            id: 919,
            name: "xx",
            leafFlag: 1,
            childs: [
              {
                id: 818,
                name: "結束",
                leafFlag: 0,
              }
            ]
          }
        ]
      }]
    }, {
      id: 414,
      name: "哈哈",
      leafFlag: 1
    }, {
      id: 23,
      name: "jc",
      leafFlag: 1,
      childs : [
        {
          id: 33,
          name: "走吧",
          leafFlag: 1
        }, {
          id: 34,
          name: "哈哈",
          leafFlag: 1
        }, {
          id: 43,
          name: "jc",
          leafFlag: 1
        }, {
          id: 99,
          name: "xx",
          leafFlag: 1,
          childs: [
            {
              id: 88,
              name: "結束",
              leafFlag: 0,
            }
          ]
        }
      ]
    }],
    "name": "測試1級b",
    "leafFlag": 1,
    "level": 1
  }],
  "name": "全部",
  "leafFlag": 1,
  "level": 0
}];
data.forEach(d => {
  d.open = true;
});
$("#model-0").JcTree({
  data: data,
  model: 0,
  idList: [1]
})
$("#model-1").JcTree({
  data: data,
  model: 1,
  idList: [1]
})
$("#model-2").JcTree({
  data: data,
  model: 2,
  idList: [1]
})
console.log("init ---- end");

GPU云服務器云服務器單選框單選 html單選 radio單選

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109250.html

javascript 單選、復選樹 ---

摘要：項目開發中遇到一顆樹單選多選項目中遇到這個功能，與其一個不如自己造個輪子。預覽地址設計主要思路展現層樹的顯示用遞歸函數羅列出頁面顯示效果。插件里面維護一個獲取當前選中狀態的函數返回為單元的數組。為后面操縱數據狀態例如是不是選中狀態提供方便。項目開發中遇到一顆樹（單選、多選）； github L6zt 項目中遇到這個功能，與其copy一個不如自己造個輪子。預覽地址設計主要思路:1.展現...

JessYanCoding 2019-08-02 16:09 評論0 收藏0
單選框、復選框獲取選中值及由ajax獲取的data判斷選中的項目

摘要：單選框獲取選中值將單選框選中的項，組成數組或者字符串答題者答案對比答案，算出分數答對的題目數量函數可計算某個字符串，并執行其中的的代碼。 //單選框獲取選中值 function getRadioRes(Name){ var rdsObj = document.getElementsByName(Name); var checkVal = null; ...

CrazyCodes 2019-08-22 11:21 評論0 收藏0
html初體驗#2

摘要：但在后端代碼中容易識別成注釋，慎用忘記加分號啦執行為協議，這里意思為不執行任何命令忘記加分號啦執行為協議，這里意思為不執行任何命令標簽也用于跳轉頁面，但必須有按鈕或者點擊才能跳轉完整樣式網址同標簽提交必須寫屬性才能被提交。碎碎念關于布局 css布局：橫向、縱向 2019年新進展：css grid git bash 上安裝 http server 目的在于不使用 file:/...

Cobub 2019-08-30 14:10 評論0 收藏0
html初體驗#2

摘要：但在后端代碼中容易識別成注釋，慎用忘記加分號啦執行為協議，這里意思為不執行任何命令忘記加分號啦執行為協議，這里意思為不執行任何命令標簽也用于跳轉頁面，但必須有按鈕或者點擊才能跳轉完整樣式網址同標簽提交必須寫屬性才能被提交。碎碎念關于布局 css布局：橫向、縱向 2019年新進展：css grid git bash 上安裝 http server 目的在于不使用 file:/...

xiangzhihong 2019-08-01 18:42 評論0 收藏0
vue2.0學習筆記（表單輸入綁定）

摘要：復選框當選中時當沒有選中時這里的和特性并不會影響輸入控件的特性，因為瀏覽器在提交表單時并不會包含未被選中的復選框。 1、基礎用法 v-model指令可以實現表單元素和Model中數據的雙向數據綁定。只能運用在表單元素中（input、radio、text、address、email、select、checkbox、textarea）可以用 v-model 指令在表單、及元素上...

Seay 2019-08-23 18:35 評論0 收藏0