Datagrid添加右键菜单 ...

本文详细介绍了如何使用EasyUI实现DataGrid控件的基本功能,包括单击选中、双击编辑以及右键菜单的添加、删除、修改等功能。通过实例代码演示了实现过程,并分享了遇到问题及解决策略。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

         最近的一个项目前台使用的EasyUI,每个界面都有DataGrid控件,按照我们的想法,应该做出来的效果是单击选中,双击可编辑,当然右键也应该出现这些菜单按钮,想的挺好,那么该如何实现呢?一开始不知道如何下手,查了一些资料,也走了很多弯路,主要是查到代码以后不知道写在哪里。。导致弄了一天也没有做出来,后来换了一个思路,终于完成了。

        首先建一个DataGrid的表格,我是在EasyUI官网上的Demo里面找的行编辑的代码来用,效果如下,单击可以进行行编辑,不过这不是咱们需要的主要功能,咱们需要的知识这个DataGrid控件及其数据:

 

      有了数据,咱们就可以添加右键的代码了,代码很简单,放到<body></body>里面就可以,如下:


附上代码:

<span style="font-family:KaiTi_GB2312;font-size:24px;"><div style="margin: 20px 0;" id="mm" class="easyui-menu" data-options="onClick:menuHandler">

        <div data-options="name:'add'" onclick="append()">Add</div>
@*        <div data-options="name:'edit',iconCls:'icon-save'" onclick="onClickCell(index, field)">Edit</div>*@
        <div data-options="name:'save',iconCls:'icon-save'" onclick="accept()">Save</div>
        <div data-options="name:'remove',iconCls:'icon-print'" onclick="removeit()">Remove</div>
        <div class="menu-sep"></div>
        <div data-options="name:'exit'">Exit</div>

        <script>
            function menuHandler(item) {
                $('#log').prepend('<p>Click Item: ' + item.name + '</p>');
            }
            $(function () {
                $(document).bind('contextmenu', function (e) {
                    e.preventDefault();
                    $('#mm').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    });
                });
            });
        </script>
    </div></span>
      加入这段代码以后,就可以做到如下效果:

     右键的功能实现以后,如何使右键的添加/删除/修改等功能真正可以使用呢?因为本来就写了这些方法,所以,只要在右键菜单的onclick事件添加这些事件名称就可以了。

     很多功能一开始不知道如何下手,但是只要开始做了,总会离自己要的效果越来越接近,去做,才最重要!


转载于:https://www.cnblogs.com/zhemeban/p/7183144.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值