1.產(chǎn)生環(huán)境：因為ERP中需要用到一種呈現(xiàn)功能奠货，可以把類別折疊介褥，又可以快速展開定位到某一行的數(shù)據(jù)。
如果沒見過递惋，那可以想象一下柔滔，就是把樹和表格兩個結(jié)構(gòu)結(jié)合起來，樹的一行就是表格萍虽，可以呈現(xiàn)出該一行的數(shù)據(jù)睛廊。按照中華漢字的博大精深，第一感覺就覺得這東西應(yīng)該叫表格樹杉编，或者樹表格超全。
2.對比現(xiàn)有的第三方插件
第一款 GridTree
即是樹的結(jié)構(gòu)又可以樹表格，看起來一切都很符合邓馒，無奈看到這種demo嘶朱，是在是丑哭了，又查看了一下相關(guān)的文檔光酣，提供接口也多疏遏，文檔也全，停止更新了挂疆「睦溃可是還是覺得丑，如果拿著這樣子做出來缤言，產(chǎn)品還不把我給抽死宝当。只能留著備用，如果沒有胆萧，只能自己一個個改樣式庆揩，可惡的是入侵式代碼太多了。
不選原因：太丑跌穗，與ERP風(fēng)格并不符合订晌，插件入侵式代碼太多
第二款 Treed
這款算是完完全全的樹了，光看就是樹蚌吸，節(jié)點可以隨便編輯锈拨，增加，使用也算是符合羹唠，有點像思維導(dǎo)圖的分支奕枢，只是覺得在用戶的角度使用娄昆，就是過于隨便，回車鍵就建立一個分支缝彬，太方便了萌焰，要知道使用ERP的人一向都會謹慎，如果是有一點問題可能都會導(dǎo)致很大的錯誤谷浅，畢竟這是企業(yè)級使用的扒俯，不像其他。
不選原因：操作過于簡便一疯，會增加使用者錯誤撼玄，增加操作說明成本，以及后期處理使用人員因操作產(chǎn)生的過度錯誤數(shù)據(jù)
第三款 bootstrap-treeview
這款中規(guī)中矩墩邀，風(fēng)格也是比較符合互纯，還是bootstrap的風(fēng)格，對于整體風(fēng)格也是很符合磕蒲，也是比較好看的一個樹結(jié)構(gòu)，直接看demo也是比較吸引人的只盹。提供的方法也算是比較全辣往。
選擇原因：看起來漂亮，至少比其他的漂亮殖卑。
第四種 自己寫一個
自己嘗試寫了一個站削，在快完成的時候，測試階段把差點把自己給玩死孵稽，越寫越覺得好像有哪里不對
最后由于時間和多種因素考慮许起，放棄自己寫的輪子，用別人的輪子菩鲜。
3.確定插件园细，開始模擬數(shù)據(jù)測試
3.1先把樹結(jié)構(gòu)給撐開
看demo，是把默認的數(shù)據(jù)放進去就可以了
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})
這樣就可以顯示一個樹結(jié)構(gòu)了
傳遞默認參數(shù)解析
var option = {
// color: "#428bca",
// expandIcon: 'glyphicon glyphicon-chevron-right',
// collapseIcon: 'glyphicon glyphicon-chevron-down',
nodeIcon: 'glyphicon glyphicon-bookmark',
// bootstrap2: false,
showTags: true,//是否顯示Tages屬性接校，在data對象里面可以綁定相關(guān)的屬性
levels: 1,//默認展開幾層猛频，1是全部折疊，2是展開二級蛛勉，......
data:newdata//傳入的參數(shù)設(shè)置
}
//這樣也是可以的
$('#treeview').treeview(option);
全部折疊方法
//全部折疊起來 collapseAll
$('#treeview').treeview('collapseAll', {data:defaultData});
//全部展開 expandAll
$('#treeview').treeview('expandAll', {data:defaultData});
搜索關(guān)鍵詞快速定位
// 當(dāng)填寫完后會調(diào)用find 方法找到
// Select/unselect/toggle nodes
// 當(dāng)輸入框輸入改變時候觸發(fā)鹿寻，可更具需要改成點擊某個按鈕觸發(fā)
$('#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('這里需要調(diào)用一下折疊所有節(jié)點的方法');
// 這里也可以傳遞一個option 參數(shù)配置
$selectableTree.treeview('collapseAll', {data:defaultData});
// 這里調(diào)用一下折疊所有的方法
}
//下面這段是打印出檢索出來的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){
//使用嚴格模式，也就是說不允許一些不嚴謹?shù)恼Z法
'use strict';
//插件名
var pluginName = 'treeview';
//默認對象侣诵，用于設(shè)置一些屬性樣式等
var _default = {};
_default.settings = {
//這里就是它的默認設(shè)置的一些熟悉
......
｝
var Tree = function (element, options) {
......
//初始化
this.init(options);
return {
//這里是它暴露出來的方法接口
//例如痢法，折疊所有的節(jié)點狱窘，調(diào)用
//$selectableTree.treeview('collapseAll', option);
collapseAll: $.proxy(this.collapseAll, this),
}
｝
