bootstrap jQuery Ztree异步加载数据,check选择&am

页面导航:首页 > 网络编程 > JavaScript > bootstrap jQuery Ztree异步加载数据,check选择&am

bootstrap jQuery Ztree异步加载数据,check选择&am

来源: 作者: 时间:2016-02-20 09:49 【

效果图:一、下载zTree插件 地址:http: www ztree me二、html代码 var setting = { async: {

效果图:

\


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



二、html代码


    <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 = "";
            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>

权限菜单管理


    三、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 则会展开次节点。



    Tags:

    文章评论

    最 近 更 新
    热 点 排 行
    Js与CSS工具
    代码转换工具
    
    <