企業級ERP樹結構 bootstrap-treeview實踐應用

lkycan發表於2017-12-14
bootView

1.產生環境：因為ERP中需要用到一種呈現功能，可以把類別摺疊，又可以快速展開定位到某一行的資料。

如果沒見過，那可以想象一下，就是把樹和表格兩個結構結合起來，樹的一行就是表格，可以呈現出該一行的資料。按照中華漢字的博大精深，第一感覺就覺得這東西應該叫表格樹，或者樹表格。

2.對比現有的第三方外掛

####第一款 GridTree 即是樹的結構又可以樹表格，看起來一切都很符合，無奈看到這種demo，是在是醜哭了，又檢視了一下相關的文件，提供介面也多，文件也全，停止更新了。可是還是覺得醜，如果拿著這樣子做出來，產品還不把我給抽死。只能留著備用，如果沒有，只能自己一個個改樣式，可惡的是入侵式程式碼太多了。

######不選原因：太醜，與ERP風格並不符合，外掛入侵式程式碼太多

Paste_Image.png

#####第二款 Treed 這款算是完完全全的樹了，光看就是樹，節點可以隨便編輯，增加，使用也算是符合，有點像思維導圖的分支，只是覺得在使用者的角度使用，就是過於隨便，Enter鍵就建立一個分支，太方便了，要知道使用ERP的人一向都會謹慎，如果是有一點問題可能都會導致很大的錯誤，畢竟這是企業級使用的，不像其他。

######不選原因：操作過於簡便，會增加使用者錯誤，增加操作說明成本，以及後期處理使用人員因操作產生的過度錯誤資料

Paste_Image.png

#####第三款 bootstrap-treeview 這款中規中矩，風格也是比較符合，還是bootstrap的風格，對於整體風格也是很符合，也是比較好看的一個樹結構，直接看demo也是比較吸引人的。提供的方法也算是比較全。

######選擇原因：看起來漂亮，至少比其他的漂亮。

Paste_Image.png

#####第四種 自己寫一個 自己嘗試寫了一個，在快完成的時候，測試階段把差點把自己給玩死，越寫越覺得好像有哪裡不對 最後由於時間和多種因素考慮，放棄自己寫的輪子，用別人的輪子。

企業級ERP樹結構 bootstrap-treeview實踐應用

3.確定外掛，開始模擬資料測試

####3.1先把樹結構給撐開 看demo，是把預設的資料放進去就可以了

      var defaultData = [
          {
            text: 'Parent 1',
            href: '#parent1',
            tags: ['4'],
            nodes: [
              {
                text: 'Child 1',
                href: '#child1',
                tags: ['2'],
                nodes: [
                  {
                    text: 'Grandchild 1',
                    href: '#grandchild1',
                    tags: ['0']
                  },
                  {
                    text: 'Grandchild 2',
                    href: '#grandchild2',
                    tags: ['0']
                  }
                ]
              },
              {
                text: 'Child 2',
                href: '#child2',
                tags: ['0']
              }
            ]
          },
          {
            text: 'Parent 2',
            href: '#parent2',
            tags: ['0']
          }
]

//繫結的div id
$('#treeview').treeview({data:defaultData})
複製程式碼

這樣就可以顯示一個樹結構了 #####傳遞預設引數解析

var option = {
        // color: "#428bca",
        // expandIcon: 'glyphicon glyphicon-chevron-right',
        // collapseIcon: 'glyphicon glyphicon-chevron-down',
        nodeIcon: 'glyphicon glyphicon-bookmark',
        // bootstrap2: false, 
        showTags: true,//是否顯示Tages屬性，在data物件裡面可以繫結相關的屬性
        levels: 1,//預設展開幾層，1是全部摺疊，2是展開二級，......
        data:newdata//傳入的引數設定

    }
//這樣也是可以的
$('#treeview').treeview(option);

複製程式碼

######全部摺疊方法

//全部摺疊起來 collapseAll
$('#treeview').treeview('collapseAll', {data:defaultData});

//全部展開 expandAll
$('#treeview').treeview('expandAll', {data:defaultData});
複製程式碼

######搜尋關鍵詞快速定位

// 當填寫完後會呼叫find 方法找到
// Select/unselect/toggle nodes  
// 當輸入框輸入改變時候觸發，可更具需要改成點選某個按鈕觸發
$('#input-select-node').on('keyup', function (e) {

  // find 方法找到   
  selectableNodes = findSelectableNodes();
  // 判斷是否展開
  $('.select-node').prop('disabled', !(selectableNodes.length >= 1));
  // console.log('66666666'+selectableNodes);

    // console.log('你輸入了 '+$('#input-select-node').val());
  if ($('#input-select-node').val() =='') {
    // console.log('你輸入了 空格'+$('#input-select-node').val());
    console.log('這裡需要呼叫一下摺疊所有節點的方法');
    // 這裡也可以傳遞一個option 引數配置
    $selectableTree.treeview('collapseAll', {data:defaultData});
    // 這裡呼叫一下摺疊所有的方法
  }
//下面這段是列印出檢索出來的item
var pattern = $('#input-select-node').val();
var options ={ ignoreCase: false, exactMatch: false ,levels: 1};
var results = $selectableTree.treeview('search', [ pattern, options ]);

  var output = '<p>' + results.length + ' 個被找到</p>';
  $.each(results, function (index, result) {
    // 這裡拼接錨點
    output += '<p>- ' + '<a  onClick="pop('+result.href+')">'+ result.text +'</a>' +'</p>';
    console.log('result href is '+result.href);
  });
  //這是是輸出的div容器
  $('#selectable-output').html(output);
});
複製程式碼

測試效果：

GIF.gif

####外掛原始碼分析：

//第一行，注意這裡有個分號 ;  ，是為了和之前的外掛做分割，比較友好的寫法
;(function ($, window, document, undefined){

//使用嚴格模式，也就是說不允許一些不嚴謹的語法
'use strict';

//外掛名
var pluginName = 'treeview';

//預設物件，用於設定一些屬性樣式等
var _default = {};
_default.settings = {
  //這裡就是它的預設設定的一些熟悉  
......
｝

var Tree = function (element, options) {
      ......
//初始化
this.init(options);
return {
//這裡是它暴露出來的方法介面
//例如，摺疊所有的節點，呼叫
//$selectableTree.treeview('collapseAll', option);
collapseAll: $.proxy(this.collapseAll, this),
}

｝
複製程式碼

相關文章