Jquery 动态tree (bootstrap tree)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery动态tree (bootstrap tree)</title>

<script src="../Scripts/bootstrap-treeview.js"></script>

 

<script>

function selectDefaultNode() {
$('#tree').treeview('selectNode', 0); //页面加载进来时 默认选中根节点
}

var id = 0; // 是否选中左边的菜单（0:否 非0:是）
$(function () {
$('#uploadFile').bind("change", selectFile);
$('#btnUpload').bind("click", uploadFile);
$('#tree').treeview({
data: getProject(),
onNodeSelected: function (event, data) {
id = data.id; //加载右边的表单页面
loadList(id);
}
});
selectDefaultNode();
getProject();

loadList(id);

//上传对话框关闭时处理
$('#myModal').on('hide.bs.modal', function () {
files = [];
$("#uploadTable tbody").empty();
var nodeId = $('#tree').treeview('getSelected'); //获取左边被选中的菜单的id
var id = nodeId[0].id;
if (typeof (id) == "undefined" || typeof (id) == "0") {
id = 0;
}
loadList(id);
});

});

 

function getTree1(results) {
// Some logic to retrieve, or generate tree structure
var tree = [
{
text: "项目分组",
nodes: []      //  [项目名称1，项目名称2，项目名称3，项目名称4]
}
];
for (var i = 0; i < results.length; i++) {
var result = results[i];
var data1 = {};
data1.id = result.ID;
data1.text = result.Name;
tree[0].nodes.push(data1);
}
//tree.text.value();
//tree.text.state.checked = true;
return tree;
}

 

function getProject() {
var tree = [];
$.ajax({
cache: true,
type: "post",
async: false,
url: "..url",  //控制器的url
error: function (request) {
alert("Connection error");
},
success: function (data) {
if (data != "") {
var data1 = eval(data);
tree = getTree1(data1);
}
}
});
return tree;
}

function loadList(id) {

 $("#dtid").dataTable({

//datatable 数据绑定

}

 var nodeId = $('#tree').treeview('getSelected'); //获取左边被选中的菜单的id

</script>
</head>

<body>

<div id="pad-wrapper">
<div style="width:250px;float:left; position: absolute;">
<div class="col-xs-12" style="height:40px"></div>
<div class="col-xs-12">
<div style="width:250px; max-height:400px; overflow:auto">
<div id="tree"></div>
</div>
</div>
</div>

</body>
</html>
posted on 2018-01-18 14:30 _xkoko 阅读(219) 评论(0) 收藏举报