jQuery之右键菜单

https://files.cnblogs.com/jianjialin/jquery.contextmenu.js

https://files.cnblogs.com/jianjialin/contextmenu.rar

 

资源文件以及js文件

 

使用说明

使用flexiGrid表格http://www.cnblogs.com/jianjialin/archive/2009/11/23/1608758.html作为实验

 

$(document).ready(function() {
            var grid = $("#flex1").flexigrid
            (
            {
                url: 'handler.ashx',
                dataType: 'json',
                colModel: [
                { display: 'ProductID', name: 'ProductID', width: 40, sortable: true, align: 'center' },
                { display: 'ProductName', name: 'ProductName', width: 180, sortable: true, align: 'left' },
                { display: 'QuantityPerUnit', name: 'QuantityPerUnit', width: 120, sortable: true, align: 'left' },
                { display: 'UnitPrice', name: 'UnitPrice', width: 130, sortable: true, align: 'right' },
                { display: 'UnitPrice', name: 'UnitPrice', width: 30, sortable: true, align: 'right' },
                { display: '操作', name: 'null', width: 100, sortable: true, align: 'center' }
                ],
                buttons: [
                { name: 'Add', bclass: 'add', onpress: test },
                { name: 'Delete', bclass: 'delete', onpress: test }
                ],
                searchitems: [
                { display: 'ProductName', name: 'ProductName' },
                { display: 'ProductID', name: 'ProductID' }
                ],
                sortname: "ProductID",
                sortorder: "asc",
                usepager: true,
                title: '我的表格',
                useRp: true,
                rp: 50,
                showTableToggleBtn: true,
                width: 700,
                height:600,
                isShowCheckbox: true,
                primaryKey:"ProductID",
                alreadyCheckedPKs: ["1", "2", '5'],
                rowhandler:right
                
            }
            );

            }
        );

 

rowhandler为点击右键调用的函数，返回当前行的html

 

function right(e) {
                var menu = { width: 150, items: [
                     { text: "查看", icon: "../menu/images/view.png", alias: "contextmenu-edit", action: contextMenuItem_click },
                     { text: "编辑", icon: "../menu/images/edit.png", alias: "contextmenu-view", action: contextMenuItem_click },
                     { text: "删除", icon: "../menu/images/rowdelete.png", alias: "contextmenu-delete", action: contextMenuItem_click },
                     { text: "刷新", icon: "../menu/images/table_refresh.png", alias: "contextmenu-reflash", action: contextMenuItem_click }
                ]
                };
//图片相对于本页的地址
                function contextMenuItem_click(target) {
//action返回的是传过去的document对象，即为flexigrid的行对象

                    var id = $(target).attr("id").substr(3);
                    var cmd = this.data.alias;
                    var ch = $.browser.msie ? target.ch : target.getAttribute("ch");
                    var cell = ch.split("_FG$SP_");
                    if (cmd == "contextmenu-edit") {
                        alert("编辑，产品编号=" + id);
                    }
                    else if (cmd == "contextmenu-view") {
                        alert("编辑，产品编号=" + id);
                    }
                    else if (cmd == "contextmenu-delete") {
                        var name = cell[1];
                        if (confirm("你确认要删除商品 [" + name + "] 吗？")) {
                            alert("删除，产品编号=" + id);
                        }
                    }
                    else {
                        $("#productlist").flexReload();
                    }
                }

                $(e).contextmenu(menu);
            }