bootstrap-treeview.js利用及后台数据处理

后台数据从数据库中检索后对数据进行了排列操作，如下：

$condition[] = "(status=1 or status=2)";
$list = M('promote','tab_')->field('id,account,nickname,mobile_phone,email,real_name,parent_id,grand_id')->where($condition)->select();
$promote_arr1 = array();
$promote_p_arr2 = array();
$promote_p_arr3 = array();
foreach ($list as $k => $v) {
    if($v['parent_id']==0){//一级
        $list[$k]['level'] = 1;// level = 1 代表一级节点
        array_push($promote_arr1, [$list[$k]['id']=>$list[$k]]);
    }elseif($v['parent_id']>0 && $v['grand_id']==0){//二级
        $list[$k]['level'] = 2;
        array_push($promote_p_arr2, [$list[$k]['parent_id']=>$list[$k]]);
    }elseif($v['parent_id']>0 && $v['grand_id']>0){//三级
        $list[$k]['level'] = 3;
        array_push($promote_p_arr3, [$list[$k]['parent_id']=>$list[$k]]);
    }
}
$arr = array();//总结果实现排序展示，一级下面有二级则优先展示，二级下面有三级则优先展示
foreach ($promote_arr1 as $key => $value) {
    array_push($arr, array_values($value)['0']);
    foreach ($promote_p_arr2 as $key2 => $value2) {
        if(array_values($value2)['0']['parent_id'] == array_values($value)['0']['id']){  
            array_push($arr, array_values($value2)['0']);
            foreach ($promote_p_arr3 as $key3 => $value3) {
                if(array_values($value3)['0']['parent_id'] == array_values($value2)['0']['id']){
                    array_push($arr, array_values($value3)['0']);
                }
            }
        }
    }
}
//$arr数组中也是个list但实现了排序，一级下面有二级则优先展示，二级下面有三级则优先展示
$this->assign('promoteList',json_encode($arr));
$this->display();

html 页面引入 bootstrap.min.css，bootstrap-treeview.css，jquery.min.js，bootstrap-treeview.js

定义 div

<div id="tip" class="container">
	<div id="tree" style="width: 30%"></div>
</div>

测试数据如下：

var tree = [
  {
    text:"Parent 1",
    nodes: [
      {
        text:"Child 1",
        nodes: [
          {
            text:"Grandchild 1"
          },
          {
            text:"Grandchild 2"
          }
        ]
      },
      {
        text:"Child 2"
      }
    ]
  },
  {
    text:"Parent 2"
  },
  {
    text:"Parent 3"
  },
  {
    text:"Parent 4"
  },
  {
    text:"Parent 5"
  }
];

测试数据展示结果：

 

前端js获取list后组件树的节点，逻辑如下：

var clone = function (obj) {
    var newObj = {};
    if (obj instanceof Array) {
        newObj = [];
    }
    for (var key in obj) {
        var val = obj[key];
        //newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; //arguments.callee 在哪一个函数中运行，它就代表哪个函数, 一般用在匿名函数中。
        newObj[key] = typeof val === 'object' ? clone(val): val;
    }
    return newObj;
};

var promoteList = '{$promoteList}';
var promotes = eval('(' + promoteList + ')');//promoteList.parseJSON();	
var rootNode = [];
var level1 = [];
var level2 = [];
var level3 = [];
var tempNode = {'text':'','nodes':[], 'nodeId':'','level':'','nodeText':''};
// promotes = promotes.slice(0,20);//截取数据前20条数据进行展示
for (var i = promotes.length - 1; i >= 0; i--) {
	var proObj = promotes[i];
	var node = {'text':proObj.account,'nodeId':proObj.id, 'nodeText':proObj.nickname,'level':proObj.level};
	if ((proObj.level ==3||proObj.level ==2) && tempNode.level==1) {
		tempNode['nodes'] = level1;
		rootNode.push(tempNode);
	}
	if (proObj.level == 3) {
		level3.push(node);
	}
	if (proObj.level == 2) {
		if(level3.length > 0 && level1.length==0){
			node['nodes'] = level3;
			level3 = [];
		}
		node['text'] = proObj.account;
		node['nodeText'] = proObj.nickname;
		node['nodeId'] = proObj.id;
		node['level'] = proObj.level;
		level2.push(node);
	}
	if (proObj.level == 1) {
		if(level2.length > 0){
			node['nodes'] = level2;
			level2 = [];
		}
		node['text'] = proObj.account;
		node['nodeText'] = proObj.nickname;
		node['nodeId'] = proObj.id;
		node['level'] = proObj.level;
		level1.push(node);
	}
	tempNode = clone(node);
}

$('#tree').treeview({
	text:"Node 1",
	icon:"glyphicon glyphicon-stop",
	selectedIcon:"glyphicon glyphicon-stop",
	color:"#000000",
	backColor:"#FFFFFF",
	href:"#node-1",
	selectable:true,
	onNodeCollapsed:true,
	state: {
		checked:false,
		disabled:true,
		expanded:false,
		selected:false
	 },
	 levels: 3,
	 tags: ['available'],
});
$('#tree').treeview({data: rootNode}); 
//数据量大的时候建议合并展示
//$('#tree').treeview('collapseAll', { silent: true });

展示结果如下：