标签：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>easyTree</title>
<link href="../../bootstrap-3.3.5-dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="../../easyTree/skin-lion/ui.easytree.css" rel="stylesheet" />
<script src="../../bootstrap-3.3.5-dist/js/jquery-1.10.2.min.js"></script>
<script src="../../bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script src="../../easyTree/jquery.easytree.min.js"></script>
</head>
<body>
<h5>easyTree</h5>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
添加
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-md-2 control-label">名称</label>
<div class="col-md-10">
<input type="text" class="form-control" id="name" placeholder="name" />
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>
<div class="box" style="float:left; width:335px; margin-left:30px">
<div class="box_title">Programmable Interface</div>
<div class="box_content">
<input type="text" value="New Node" style="width:200px" id="nodeText" /> Node Text
<br /><br />
<input type="checkbox" id="nodeIsFolder" /> Is Folder
<br /><br />
<select id="lstNodes"></select>
<br /><br />
<button onclick="addNode(); return false;">Add</button>
<button onclick="removeNodeX(); return false;">Remove</button>
<button onclick="activateNode(); return false;">Activate</button><br />
<button onclick="toggleNode(); return false;">Toggle</button>
<button onclick="openNode(); return false;">Open</button>
<button onclick="closeNode(); return false;">Close</button>
</div>
</div>
<div id="demo1_menu" style="margin-top:30px"></div>
<script>
var jsonData = [{
"href": "",
"hrefTarget": "_blank",
"text": "Home"
}, {
"children": [{
"href": "",//http:\/\/www.google.com
"hrefTarget": "_blank",
"text": "Go to Google.com",
"id": "1"
}, {
"href": "",
"hrefTarget": "_blank",
"text": "Go to Yahoo.com"
}],
"isActive": false,
"isExpanded": true,
"isFolder": true,
"text": "Folder 1",
"tooltip": "Bookmarks"
}, {
"children": [{
"text": "Sub Node 1"
}, {
"text": "Sub Node 2"
}, {
"text": "Sub Node 3"
}],
"isActive": false,
"text": "Node 1"
}, {
"text": "Node 2"
}]
function addNode() {
var sourceNode = {};
sourceNode.text = $(‘#nodeText‘).val();
sourceNode.isFolder = $(‘#nodeIsFolder‘).is(":checked");
var targetId = $(‘#lstNodes :selected‘).val();
easytree.addNode(sourceNode, targetId);
easytree.rebuildTree();
loadSelectBox();
}
function removeNodeX() {
var currentlySelected = $(‘#lstNodes :selected‘).val();
var node = easytree.getNode(currentlySelected);
if (!node) { return; }
easytree.removeNode(node.id);
easytree.rebuildTree();
loadSelectBox();
}
function activateNode() {
var currentlySelected = $(‘#lstNodes :selected‘).val();
var node = easytree.getNode(currentlySelected);
if (!node) {
easytree.activateNode(‘‘); // unactivate all nodes
return;
}
easytree.activateNode(node.id);
}
function toggleNode() {
var currentlySelected = $(‘#lstNodes :selected‘).val();
easytree.toggleNode(currentlySelected);
loadSelectBox();
}
function openNode() {
var currentlySelected = $(‘#lstNodes :selected‘).val();
var node = easytree.getNode(currentlySelected);
if (!node) { return; }
node.isExpanded = true;
easytree.rebuildTree();
loadSelectBox();
}
function closeNode() {
var currentlySelected = $(‘#lstNodes :selected‘).val();
var node = easytree.getNode(currentlySelected);
if (!node) { return; }
node.isExpanded = false;
easytree.rebuildTree();
loadSelectBox();
}
// we have to reload selected box at the end of each function to ensure it is always up to date
function loadSelectBox() {
var select = $(‘#lstNodes‘)[0];
var currentlySelected = $(‘#lstNodes :selected‘).val();
select.length = 0; // clear select box
var root = new Option();
root.text = ‘Root‘;
root.value = ‘‘;
select.add(root);
var allNodes = easytree.getAllNodes();
addOptions(allNodes, select, ‘-‘, currentlySelected);
}
function addOptions(nodes, select, prefix, currentlySelected) {
var i = 0;
for (i = 0; i < nodes.length; i++) {
var option = new Option();
option.text = prefix + ‘ ‘ + nodes[i].text;
option.value = nodes[i].id;
option.selected = currentlySelected == nodes[i].id;
select.add(option);
if (nodes[i].children && nodes[i].children.length > 0) {
addOptions(nodes[i].children, select, prefix + ‘-‘, currentlySelected);
}
}
}
function stateChanged(nodes, nodesJson) {
var t = nodes[3].text;
//alert(t);
}
var easytree = $(‘#demo1_menu‘).easytree({
stateChanged: stateChanged,
data: jsonData
});
$(function () {
loadSelectBox();
});
</script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/mfc-itblog/p/5194515.html
