企业级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});
// 这里调用一下折叠所有的方法
}
//下面这段是打印出检索出来的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);
});

测试效果：

插件源码分析：

//第一行，注意这里有个分号 ;  ，是为了和之前的插件做分割，比较友好的写法
;(function ($, window, document, undefined){

//使用严格模式，也就是说不允许一些不严谨的语法
'use strict';

//插件名
var pluginName = 'treeview';

//默认对象，用于设置一些属性样式等
var _default = {};
_default.settings = {
//这里就是它的默认设置的一些熟悉
......
｝

var Tree = function (element, options) {
......
//初始化
this.init(options);
return {
//这里是它暴露出来的方法接口
}

｝