bootstrap jQuery Ztree异步加载数据，check选择&可添加、修改、删除节点

效果图：



一、下载zTree插件 地址：http://www.ztree.me

二、html代码

<link href="../Scripts/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="../Scripts/zTree/js/jquery-1.4.4.min.js"></script>
<script src="../Scripts/zTree/js/jquery.ztree.core-3.5.js"></script>
<script src="../Scripts/zTree/js/jquery.ztree.excheck-3.5.js"></script>
<script src="../Scripts/zTree/js/jquery.ztree.exedit-3.5.js"></script>
<script type="text/javascript">
var setting = {
async: {
enable: true,
url: "../AjaxPage/GetAjax.aspx?z=sdfww234edfsd",
autoParam: ["ID"],
contentType: "application/json",
type: "get",
dataFilter: filter
},
view: {
expandSpeed: "",
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false
},
check: {
enable: true
},
edit: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeRemove: beforeRemove,
beforeRename: beforeRename,
}
};
function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
for (var i = 0, l = childNodes.length; i < l; i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
}
return childNodes;
}
function beforeRemove(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
alert(treeNode.Action);//哈哈 出来了
return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
}
function beforeRename(treeId, treeNode, newName) {
if (newName.length == 0) {
alert("节点名称不能为空!");
return false;
}
return true;
}

var newCount = 1;
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
+ "' title='add node' onfocus='this.blur();' ></span>";
sObj.after(addStr);
var btn = $("#addBtn_" + treeNode.tId);
if (btn) btn.bind("click", function () {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.addNodes(treeNode, { id: (treeNode.id + newCount), parentid: treeNode.id, name: "new node" + (newCount++) });
return false;
});
};
function removeHoverDom(treeId, treeNode) {
$("#addBtn_" + treeNode.tId).unbind().remove();
};
$(document).ready(function () {
$.fn.zTree.init($("#treeDemo"), setting);
});
</script>
<div class="row">
<div class="col-lg-12 col-sm-12 col-xs-12 col-xxs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h2>权限菜单管理</h2>
<div class="panel-actions">
<a href="MenuManagement.aspx#" class="btn-minimize"><i class="fa fa-chevron-up"></i></a>
<a href="MenuManagement.aspx#" class="btn-close"><i class="fa fa-times"></i></a>
</div>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</div>
</div>
</div>
</div>

三、zTreeStyle.css修改添加节点按钮的图片样式

.ztree li span.button.add {
margin-left: 2px;
margin-right: -1px;
background-position: -144px 0;
vertical-align: top;
}

四、后台代码：

protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["z"] == "sdfww234edfsd")
{
StringBuilder sb = new StringBuilder();
sb.Append("[");
sb.Append("{\"id\":\"1\",\"name\":\"销售单管理\",\"pId\":\"0\",\"Action\":\"list\"},");
sb.Append("{\"id\":\"2\",\"name\":\"销售单列表\",\"pId\":\"1\",\"Action\":\"list\"},");
sb.Append("]");
Response.Write(sb.ToString());  }
}

说明：据我测试看来，id、name、pId为三个必需的字段,pId可看做parentID，open=true 则会展开次节点。

******************************************别墅图纸推荐*************************************************

我想有一栋别墅，面朝大海，春暖花开

龙兴科技别墅图纸设计，这里有最新最全的别墅图纸，

这里有最给力的别墅图纸折扣活动，图纸包括建筑图、结构图、给排水图、电气图

我们致力于为广大客户提供别墅设计图纸,图纸均由专业、经验丰富的设计团队设计，可免费提供施工技术指导

地址：http://bstzsj.taobao.com/