bootstrap treeview基本用法+横向显示

预览界面:
bootstrap treeview基本用法+横向显示_第1张图片
1.引入:
下载地址:https://github.com/jonmiles/bootstrap-treeview?utm_source=cdnjs&utm_medium=cdnjs_link&utm_campaign=cdnjs_library

引入js和css:



2.在js中初始化:

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

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"
  }];

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

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

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');
}

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

.transval {
    display: inline-block;
    border-left:0;
    border-right:0;
}

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(' '))
		);
			}

这样就把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);
	  }
	});

你可能感兴趣的:(前端,bootstrap,javascript,前端)