现在位置首页 / 项目实战 /正文

Jquery DataTable行/单元格支持右键菜单--jquery-smartMenu的使用

作者: IT小兵 | 2014年3月31日| 热度:℃ | 评论: |参与:

使用jquery-smartMenu给Jquery  DataTable添加右键菜单。

jquery-smartMenu参考地址:

jQuery smartMenu右键自定义上下文菜单插件

效果
首先,肯定的,自定义的上下文菜单是右键右键某元素(或直接空白处)出现的,其UI风格我沿用了web QQ的相关样式(企鹅的视觉设计还是很赞的),支持分组以及多级菜单,如下效果截图:

为了使实现原理简单,代码精简,其二级菜单的一些交互细节与我们平时使用的软件的多级菜单是有差异的:例如dreamweaver软件,鼠标从二级菜单上移出的时候,只要不经过一级菜单,整个二级菜单还是显示的;但是,这里的右键菜单,如果鼠标移出二级菜单,无论你是从哪个方向哪个位置移出,这个二级菜单都会隐藏。该差异您可以在下面展示的demo中细细体会。

大小
这个插件的功能看上去很带感,但是实际上其大小很小,非压缩版本4~5K的样子,YUI compressor压缩后2K出头,所以,该插件只能算是个实用的小插件而已。

使用


此插件使用不需要任何图片资源,但是需要调用一段CSS样式,你可以在头部放入如下的一段CSS文件引入代码:

<link rel="stylesheet" href="http://www.zhangxinxu.com/study/css/smartMenu.css" type="text/css" />

脚本部分,显然,jQuery库以及插件脚本是少不了的,类似下面的调用:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.zhangxinxu.com/study/js/jquery-smartMenu.js"></script>

注意:smartMenu插件需要jQuery1.4+以上版本支持,暂不向下兼容。

 参数使用为:包装器.smartMenu(data, options)。其中参数data是必须的,这个参数包含了右键显示的文字内容,以及相关的方法,具体数据格式下面会详细介绍;参数options可选,相关API下面会具体展示。
先举个超简单的使用实例吧:

$("#test").smartMenu(data); 


jquery datatable数据加载完成绑定后,调用设置右键按钮的事件:

function SetTableStyle() {
     
    $("#TablebillList tbody tr").unbind("mouserover")
    $("#TablebillList tbody tr").bind("mousedown", (function (e) {
        if (e.which == 3) {
            var opertionn = {
                name: "",
                offsetX: 2,
                offsetY: 2,
                textLimit: 30,
                beforeShow: $.noop,
                afterShow: $.noop
            };
             
            var menudata = GetRightMenu(e.target.cellIndex, e.target.innerHTML);
            oTable.$('td.td_selected').removeClass('td_selected');
            if ($(e.target).hasClass('td_selected')) {
                $(e.target).removeClass('td_selected');
            } else {
                $(e.target).addClass('td_selected');
            }
            $.smartMenu.remove();
            $(this).smartMenu(menudata, opertionn);
        }
        
    }));
    $("#TablebillList tbody tr").mouseover(function (e) { 
        oTable.$('td.td_selected').removeClass('td_selected');
        if ($(e.target).hasClass('td_selected')) {
            $(e.target).removeClass('td_selected');
        } else {
            $(e.target).addClass('td_selected');
        }
        if ($(this).hasClass('row_selected')) {
            $(this).removeClass('row_selected');
        }
        else {
            oTable.$('tr.row_selected').removeClass('row_selected');
            $(this).addClass('row_selected');
        }
    });
}
function GetRightMenu(index,value) { 
 
    var imageMenuData = new Array();
    var imageMenuData2 = new Array(); 
    if (index == 5 || index == 6 || index == 7) {
    imageMenuData.push({
        "text": "添加到", "func": function () {
            var href = "?" + dd + "&Mobile=" + value;
            OpenPageByTab('添加', href);
        }
    });
    }
 
    imageMenuData.push({
        "text": "复制", "func": function () {
             window.clipboardData.setData('text', value); 
            alert("成功到剪贴板");
        }
    }); 
       imageMenuData2.push(imageMenuData);
      
      
       return imageMenuData2;
}

转发注明:IT分享 http://www.suchso.com 

点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询