bootstrap treeview基本用法+横向显示

预览界面：

1.引入：
下载地址：https://github.com/jonmiles/bootstrap-treeview?utm_source=cdnjs&utm_medium=cdnjs_link&utm_campaign=cdnjs_library

引入js和css：

1
2

2.在js中初始化：

$('#personNameList').treeview({
        data: tree,
        showCheckbox: true
})
1
2
3
4

personNameList是页面上的一个空div，tree是js中的一个对象，结构如下：

 tree = [
     {
      Id:'111',
         text: "部门 1",
         state: {
             checked: true,
             expanded: true,
             selected: true
         },
    nodes: [
      {
        text: "小组 1",
        nodes: [
          {
                text: "小明 1",
                align:'transverse'
          },
          {
              text: "小红 2",
              align:'transverse'
          }
        ]
      },
      {
        text: "小绿 2"
      }
    ]
  },
  {
    text: "Parent 2"
  },
  {
    text: "Parent 3"
  }];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

到了这步之后，就可以显示出来基本的树，但是样式是bootstrap自己的，如果需要个性化调整，可以修改参数，比如修改打开/折叠两个图标:

expandIcon: 'glyphicon glyphicon-triangle-bottom',	//你想替换成的图标
collapseIcon: 'glyphicon glyphicon-triangle-right'	//你想替换成的图标
1
2

3.横向显示子节点：
bootstrap的treeview控件是不支持水平显示的，因为都是li，都是纵向显示
于是我修改了treeview.js的源码，并给data的数据结构加了一个属性，用来判断是不是横向显示：
（下面的代码都在treeview.js里）
首先要找到 Tree.prototype.buildTree 这个方法，在每个节点渲染的时候，给它加一个class：

var treeItem = $(_this.template.item)
				.addClass('node-' + _this.elementId)
				.addClass(node.state.checked ? 'node-checked' : '')
				.addClass(node.state.disabled ? 'node-disabled': '')
				.addClass(node.state.selected ? 'node-selected' : '')
				.addClass(node.searchResult ? 'search-result' : '') 
				.attr('data-nodeid', node.nodeId)
				.attr('id',node.Id)
				.attr('style', _this.buildStyleOverride(node));
if (node.align == 'transverse') {
	treeItem.addClass('transval');
}
1
2
3
4
5
6
7
8
9
10
11
12

node的align属性是我给它自己加的，transverse也是自己随便定义的，只要能区分开需要横向显示和纵向现实的节点就可以了
然后给这个class加css样式：

.transval {
    display: inline-block;
    border-left:0;
    border-right:0;
}
1
2
3
4
5

4.修改li中的结构：
因为bootstrap自带的那个check图案太丑了，和我系统的风格不符，所以我要把自带的那个图标去掉，写一个正常的checkbox进去：
还是在build方法里：

if (_this.options.showCheckbox) {

	var classList = ['check-icon'];
	if (node.state.checked) {
		treeItem.append('')
		//classList.push(_this.options.checkedIcon);
	}
	else {
		treeItem.append('')
		//classList.push(_this.options.uncheckedIcon);
	}

	treeItem
		.append($(_this.template.icon)
			.addClass(classList.join(' '))
		);
			}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这样就把checkedIcon去掉了，换上一个input，其他的都不变，但是这里有一个问题，就是这个checkbox它点不动，不能选中；这个问题，可以在li的点击事件里重新写，给这个checkbox赋一个id，然后每次点击的时候用jq再选中它，就可以了
自定义click事件：

	$('#personNameList').on('nodeSelected', function (event, data) {
	  if (mainContentIndex == 'all') {
	      batchUpdateMainContent(data.text, data.Id);
	  } else if (isRadio) {
	      updateOneMainContent(data.text, data.Id, mainContentIndex);
	  } else {
	      updateMainContent(data.text, data.Id, mainContentIndex);
	  }
	});
	$('#personNameList').on('nodeUnselected', function (event, data) {
	  if (mainContentIndex == 'all') {
	      batchUpdateMainContent(data.text, data.Id);
	  } else if (isRadio) {
	      updateOneMainContent(data.text, data.Id, mainContentIndex);
	  } else {
	      updateMainContent(data.text, data.Id, mainContentIndex);
	  }
	});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18