最近的一个项目前台使用的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'" οnclick="append()">Add</div> @* <div data-options="name:'edit',iconCls:'icon-save'" οnclick="onClickCell(index, field)">Edit</div>*@ <div data-options="name:'save',iconCls:'icon-save'" οnclick="accept()">Save</div> <div data-options="name:'remove',iconCls:'icon-print'" οnclick="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事件添加这些事件名称就可以了。
很多功能一开始不知道如何下手，但是只要开始做了，总会离自己要的效果越来越接近，去做，才最重要！
