效果图:
一、下载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()); }
- }