jQuery MiniUI

标题: Tree右键菜单问题 [打印本页]
作者: 焰尾迭    时间: 2014-12-23 09:20:53     标题: Tree右键菜单问题

     tree右键菜单的一个疑问，针对节点右键时会弹出contextMenu，可是现在可以移到节点内容之外的地方右键同样弹出菜单，
可不可以实现只在节点内容上右键才弹出菜单？

[attach]5701[/attach]
作者: felt    时间: 2014-12-23 09:35:22

这是根据选中节点弹出的，不是根据点击位置弹出的
作者: 焰尾迭    时间: 2014-12-23 13:53:23

felt 发表于 2014-12-23 09:35
这是根据选中节点弹出的，不是根据点击位置弹出的

可以实现我说的这种效果吗，谢谢
作者: felt    时间: 2014-12-23 14:11:07

焰尾迭 发表于 2014-12-23 13:53
可以实现我说的这种效果吗，谢谢

不能
作者: 焰尾迭    时间: 2014-12-23 16:12:00

felt 发表于 2014-12-23 14:11
不能

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Split.aspx.cs" Inherits="MiniUITest.Split" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>树形联动</title>
    <style type="text/css">
        html, body
        {
            margin: 0;
            padding: 0;
            border: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
    </style>
    <script src="/JS/boot.js" type="text/javascript"></script>
</head>
<body>
    <div class="mini-splitter" style="width: 100%; height: 100%;">
        <div size="240" showcollapsebutton="true">
            <div class="mini-toolbar" style="padding: 2px; border-top: 0; border-left: 0; border-right: 0;">
                <span style="padding-left: 5px;">名称：</span>
                <input class="mini-textbox" />
                <a class="mini-button" iconcls="icon-search" plain="true">查找</a>
            </div>
            <div class="mini-fit">
                <ul id="tree1" class="mini-tree" url="/Tree.txt" style="width: 100%;" showtreeicon="true"
                    textfield="text" idfield="id" parentfield="pid" resultastree="false" expandonload="true">
                </ul>
                <ul id="treeMenu" class="mini-contextmenu">
                    <li iconcls="icon-move">移动节点</li>
                    <li name="edit" iconcls="icon-edit">编辑节点</li>
                    <li name="remove" iconcls="icon-remove">删除节点</li>
                </ul>
            </div>
        </div>
        <div showcollapsebutton="true">
            <div class="mini-toolbar" style="padding: 2px; border-top: 0; border-left: 0; border-right: 0;">
                <a class="mini-button" iconcls="icon-add" plain="true">新增</a>
                <a class="mini-button" iconcls="icon-remove" plain="true">删除</a>
                <span class="separator"></span><a class="mini-button" iconcls="icon-save" plain="true"
                   >保存</a>
            </div>
            <div class="mini-fit">
                <div id="grid1" class="mini-datagrid" style="width: 100%; height: 100%;" borderstyle="border:0;"
                    url="" showfilterrow="true" allowcellselect="true" allowcelledit="true">
                    <div property="columns">
                        <div field="loginname" width="120" headeralign="center" allowsort="true">
                            员工帐号
                            <input property="editor" class="mini-textbox" style="width: 100%;" />
                        </div>
                        <div field="name" width="120" headeralign="center" allowsort="true">
                            员工姓名
                            <input property="editor" class="mini-textbox" style="width: 100%;" />
                            <input id="nameFilter" property="filter" class="mini-textbox" style="width: 100%;" />
                        </div>
                        <div field="gender" width="100" allowsort="true" align="center" headeralign="center">
                            性别
                            <input property="editor" class="mini-combobox" style="width: 100%;" data="Genders" />
                        </div>
                        <div field="age" width="100" allowsort="true">
                            年龄
                            <input property="editor" class="mini-spinner" minvalue="0" maxvalue="200" value="25"
                                style="width: 100%;" />
                        </div>
                        <div field="birthday" width="100" allowsort="true" dateformat="yyyy-MM-dd">
                            出生日期
                            <input property="editor" class="mini-datepicker" style="width: 100%;" />
                        </div>
                        <div field="createtime" width="100" headeralign="center" dateformat="yyyy-MM-dd"
                            allowsort="true">
                            创建日期</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        mini.parse();
        var tree = mini.get("tree1");
        var grid = mini.get("grid1");
        var menu = mini.get("treeMenu");
        $("#tree1").on("contextmenu", ".mini-tree-nodeshow", function(e) {
            var node = tree.getSelectedNode();
            if (!node) {
                e.cancel = true;
                return;
            }
            menu.showAtPos(e.pageX, e.pageY);
            return false;
        });
    </script>
</body>
</html>

作者: 焰尾迭    时间: 2014-12-23 16:12:49

焰尾迭 发表于 2014-12-23 16:12
树形联动
   
        html, body

试了一下终于实现了
作者: felt    时间: 2014-12-23 17:02:51

焰尾迭 发表于 2014-12-23 16:12
试了一下终于实现了

给力



欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2