treettabl异步加载
@{
ViewBag.Title = "Index";
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery treetable</title>
@*<link rel="stylesheet" href="css/screen.css" media="screen" />
<link rel="stylesheet" href="css/jquery.treetable.css" />
<link rel="stylesheet" href="css/jquery.treetable.theme.default.css" />*@
<link href="~/Scripts/treetable/screen.css" rel="stylesheet" />
<link href="~/Scripts/treetable/jquery.treetable.css" rel="stylesheet" />
<link href="~/Scripts/treetable/jquery.treetable.theme.default.css" rel="stylesheet" />
<style type="text/css">
table {
font-size: 16px;
}
table.treetable thead tr th, table.treetable tbody tr td {
padding: 10px 1em;
}
table.treetable tbody tr td {
border-top: 1px solid #ccc;
}
table tr:hover {
background: #F7F6A5 !important;
}
table td a.del {
color: #f00;
}
table td a.add {
color: green;
}
</style>
</head>
<body>
<div id="main">
<table id="example-basic">
<thead>
<tr>
<th>Tree column</th>
<th>Additional data</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr data-node-id="1">
<td><span class='folder'></span>Node 1: Click on the icon in front of me to expand this branch.</td>
<td>I live in the second column.</td>
<td><a href="#" class="del">删除</a> <a href="#" class="add">添加子节点</a></td>
</tr>
<tr data-node-id="12" data-parent-id="1">
<td><span class='folder'></span>Node 1.1: Look, I am a table row <em>and</em> I am part of a tree!</td>
<td>Interesting.</td>
<td><a href="#" class="del">删除</a> <a href="#" class="add">添加子节点</a></td>
</tr>
<tr data-node-id="13" data-parent-id="12">
<td><span class='file'></span>Node 1.1.1: I am part of the tree too!</td>
<td>That's it!</td>
<td><a href="#" class="del">删除</a> <a href="#" class="add">添加子节点</a></td>
</tr>
<tr data-node-id="14" data-parent-id="1">
<td><span class='file'></span>Node 1.2: Look, I am a table row <em>and</em> I am part of a tree!</td>
<td>Interesting.</td>
<td><a href="#" class="del">删除</a> <a href="#" class="add">添加子节点</a></td>
</tr>
<tr data-node-id="2">
<td><span class='file'></span>Node 2: I am another root node, but without children</td>
<td>Hurray!</td>
<td><a href="#" class="del">删除</a> <a href="#" class="add">添加子节点</a></td>
</tr>
</tbody>
</table>
</div>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/treetable/jquery.treetable.js"></script>
<script type="text/javascript">
var counter = 100;
function getJSON(id) {
return [{ "name": "节点" + counter, id: counter++, leaf: true },
{ "name": "节点" + counter, id: counter++, leaf: false },
{ "name": "节点" + counter, id: counter++, leaf: true }]
}
function loadHtml(id) {
var data = getJSON(id);
var str = '';
$.each(data, function (i, item) {
str += '<tr data-node-id="' + item.id + '" data-parent-id="' + id + '" data-tt-branch="' + (item.leaf ? "false" : "true") + '">' +
'<td>' +
(item.leaf ? '<span class="file"></span>' : '<span class="folder"></span>') +
item.name + '</td>' +
'<td>(' + item.name + '</td>)' +
'<td><a href="#" class="del">删除</a> <a href="#" class="add">添加子节点</a></td>' +
'</tr>';
});
return str;
}
$(function () {
$("#example-basic").treetable({
nodeIdAttr: "nodeId",
parentIdAttr: "parentId",
stringCollapse: "收起",
stringExpand: "展开",
expandable: true,
//展开
onNodeExpand: function () {
var node = this;
//是否已经加载
debugger
if (node.children && !node.children.length) {
var html = loadHtml(node.id);
$("#example-basic").treetable("loadBranch", node, html);
}
}
}).on("click", ".del", function (e) {
e.preventDefault();
var id = $(this).closest("tr").data("node-id");
$("#example-basic").treetable("removeNode", id);
}).on("click", ".add", function (e) {
e.preventDefault();
var id = $(this).closest("tr").data("node-id");
var html = loadHtml(id);
var node = $("#example-basic").treetable("node", id);
$("#example-basic").treetable("loadBranch", node, html);
//修改节点图标
$(this).closest("tr").find("td .file").removeClass("file").addClass("folder");
});
})
</script>
</body>
</html>
浙公网安备 33010602011771号