企业级ERP树结构 bootstrap-treeview实践应用-白红宇

1.产生环境：因为ERP中需要用到一种呈现功能，可以把类别折叠，又可以快速展开定位到某一行的数据。

如果没见过，那可以想象一下，就是把树和表格两个结构结合起来，树的一行就是表格，可以呈现出该一行的数据。按照中华汉字的博大精深，第一感觉就觉得这东西应该叫表格树，或者树表格。

2.对比现有的第三方插件

####第一款 GridTree 即是树的结构又可以树表格，看起来一切都很符合，无奈看到这种demo，是在是丑哭了，又查看了一下相关的文档，提供接口也多，文档也全，停止更新了。可是还是觉得丑，如果拿着这样子做出来，产品还不把我给抽死。只能留着备用，如果没有，只能自己一个个改样式，可恶的是入侵式代码太多了。

######不选原因：太丑，与ERP风格并不符合，插件入侵式代码太多

#####第二款 Treed 这款算是完完全全的树了，光看就是树，节点可以随便编辑，增加，使用也算是符合，有点像思维导图的分支，只是觉得在用户的角度使用，就是过于随便，回车键就建立一个分支，太方便了，要知道使用ERP的人一向都会谨慎，如果是有一点问题可能都会导致很大的错误，毕竟这是企业级使用的，不像其他。

######不选原因：操作过于简便，会增加使用者错误，增加操作说明成本，以及后期处理使用人员因操作产生的过度错误数据

#####第三款 bootstrap-treeview 这款中规中矩，风格也是比较符合，还是bootstrap的风格，对于整体风格也是很符合，也是比较好看的一个树结构，直接看demo也是比较吸引人的。提供的方法也算是比较全。

######选择原因：看起来漂亮，至少比其他的漂亮。

#####第四种自己写一个自己尝试写了一个，在快完成的时候，测试阶段把差点把自己给玩死，越写越觉得好像有哪里不对最后由于时间和多种因素考虑，放弃自己写的轮子，用别人的轮子。

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});    // 这里调用一下折叠所有的方法  }//下面这段是打印出检索出来的itemvar pattern = $('#input-select-node').val();var options ={ ignoreCase: false, exactMatch: false ,levels: 1};var results = $selectableTree.treeview('search', [ pattern, options ]);  var output = '' + results.length + ' 个被找到
';  $.each(results, function (index, result) {    // 这里拼接锚点    output += '- ' + ''+ result.text +'' +'
';    console.log('result href is '+result.href);  });  //这是是输出的div容器  $('#selectable-output').html(output);});复制代码

测试效果：

####插件源码分析：

//第一行，注意这里有个分号 ;  ，是为了和之前的插件做分割，比较友好的写法;(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),}｝复制代码