Jquery Easy-UI 树形菜单的运用

一、树形菜单的显示

      首先在引入easyui包的基础上,这个要加进去<div id=”menuTree” class=”easyui-menu” style=”width: 120px;”></div>,div中间不用写入东西,主要就是在后面的function中进行初始化树。

一、树形菜单的右键标签

     期中增加同级机构、增加下属机构、修改、删除分别是调用了addNode(),del()等方法。

<div id="menuTree" class="easyui-menu" style="width: 120px;">
        <SecurityTag:Authorize ID="Authorize12" runat="server" FunctionID="fun_AddSiblingOrg">
            <div id="miAddSibling" onclick="addNode(1)" data-options="iconCls:\'icon-add\'">
                新增同级机构</div>
        </SecurityTag:Authorize>
        <SecurityTag:Authorize ID="Authorize1" runat="server" FunctionID="fun_AddChildrenOrg">
            <div id="miAddChildren" onclick="addNode(0)" data-options="iconCls:\'icon-add\'">
                新增下属机构</div>
        </SecurityTag:Authorize>
        <SecurityTag:Authorize ID="Authorize2" runat="server" FunctionID="fun_ModeifyOrg">
            <div id="miEdit" onclick="edit()" data-options="iconCls:\'icon-edit\'">
                修改</div>
        </SecurityTag:Authorize>
        <SecurityTag:Authorize ID="Authorize3" runat="server" FunctionID="fun_DelOrg">
            <div class="menu-sep">
            </div>
            <div id="miDel" onclick="del()" data-options="iconCls:\'icon-no\'">
                删除</div>
        </SecurityTag:Authorize>
    </div>

View Code

    至于为什么右键点击才显示,那就是easyui的内容了,不过有一点注意,加入权限管理标签方便后面对这些按钮权限的控制,这里也可以当作不用加入这些标签,<div class=”menu-sep”></div>是增加分割线,

下面就是要在js中处理了。

<script type="text/javascript">
        $(function ()
        {
            var height = document.body.scrollHeight - document.body.scrollTop - 25 - 26;
            //alert(height);
            var objLayout = $("#layoutRegion");
            objLayout.height(height);
            objLayout.layout(\'resize\');
            initTree();
        })


        var currentTreeNode = null;
        var parentTreeNode = null;

        var objTree = $(\'#ulTree\');
        var objLayout = $("#layoutRegion");

        function openCenterPage(url, params)
        {
            $("#ifrContent").attr("src", url + \'?1=1\' + params);
        }
        function addNode(isAddSibling)
        {
            var params = "";
            if (isAddSibling == "1")
            {
                params += "&pid=" + parentTreeNode.id;
            } else
            {
                params += "&pid=" + currentTreeNode.id;
            }
            params += "&isAddSibling=" + isAddSibling;
            openCenterPage(\'OrgEdit.aspx\', params);
        }
        function viewNode(id)
        {
            var params = "";
            params += "&id=" + id;
            openCenterPage(\'OrgList.aspx\', params);
        }
        function del()
        {
            if (currentTreeNode.children.length > 0)
            {
                $.messager.alert("系统提示", "请先删除下属机构!", "info");
                return;
            }
            if (!window.confirm("确定删除该机构吗?"))
            {
                return;
            }

            util.ajaxForWebMethod(\'orgmgr.aspx/Delete\', { id: currentTreeNode.id }, function (data)
            {
                //请求成功的处理
                var result = data.d;
                if (result.Code == "0")
                {
                    viewNode(parentTreeNode.id);
                    updateTree();
                    $.messager.alert("系统提示", "删除成功!", "info");
                } else
                {
                    $.messager.alert("系统提示", result.Message, "info");
                }
            },
             function (data)
             {
                 //请求失败的处理
                 $.messager.alert("系统提示", "删除失败,请与管理员联系。", "info");
             });
        }
        function edit()
        {
            var params = "";
            params += "&id=" + currentTreeNode.id;
            openCenterPage(\'OrgEdit.aspx\', params);
        }
        //树菜单状态
        function menuStatus()
        {
            if (!currentTreeNode)
            {
                return;
            }
            var menuTree = $(\'#menuTree\');
            //var data = objTree.tree(\'getData\', currentTreeNode.target);
            parentTreeNode = objTree.tree(\'getParent\', currentTreeNode.target);
            if (parentTreeNode == null)
            {
                parentTreeNode = currentTreeNode; //为根节点时,父点与当前点为相同
                menuTree.menu(\'disableItem\', $(\'#miAddSibling\')); //根节点时,不能增加同级
                menuTree.menu(\'disableItem\', $(\'#miEdit\')); //根节点时,不能修改
            } else
            {
                menuTree.menu(\'enableItem\', $(\'#miAddSibling\'));
                menuTree.menu(\'enableItem\', $(\'#miEdit\'));
            }
        }

        function initTree()
        {
            treeHelper.bind(objTree, \'Orgmgr.aspx/Query\', { requestUser: false });
            // 右键点击节点然后显示上下文菜单
            objTree.tree({
                onClick: function (node)
                {
                    //alert(node.text);  // alert node text property when clicked
                    viewNode(node.id);
                },

                onContextMenu: function (e, node)
                {
                    e.preventDefault();
                    // 选择节点
                    objTree.tree(\'select\', node.target);
                    // 显示上下文菜单
                    $(\'#menuTree\').menu(\'show\', {
                        left: e.pageX,
                        top: e.pageY
                    });
                    if (node == currentTreeNode)
                    {
                        return;
                    }
                    //当前结点
                    currentTreeNode = node;
                    viewNode(node.id);
                    menuStatus();
                }
            });
        }

        function updateTree()
        {
            //alert(\'update\');
            //objTree.tree(\'reload\', objTree.tree(\'getRoot\'));
            treeHelper.bind(objTree, \'orgmgr.aspx/Query\', { requestUser: false });
        }

        
    </script>

View Code

 

版权声明:本文为d685600原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/d685600/p/3696682.html