全心全意为人民服务-JS实现右击弹出框

 

从上图可以看到，我想对选中的行操作。还需要点击工具栏的相应选项。能不能利用就近原则直接操作呢。于是有了这样一种实现，在实习的地方右击出现一个弹出框，里面有对应的工具栏选项。这样就方便多了，也体现了无处不入口，无处不按钮的编程思想。

具体实现，用js来触发弹出框。

弹出框的jsp页面代码

<div id="menu" class="easyui-menu" style="width: 50px; display: none;">
	<input id="index" type="text" value="" style="display: none;"/>
	<div id="mody" οnclick="editType()" iconCls="icon-edit">编辑</div>
	<div id="delete" οnclick="delType()" iconCls="icon-remove">删除</div>
</div>

右击的js代码

<script type="text/javascript">
$("#dgType").datagrid({
    onRowContextMenu: function (e, rowIndex, rowData) { //右键时触发事件  
        //三个参数：e应该是对当前菜单的实例化，以便调用；rowIndex就是当前点击时所在行的索引；rowData当前行的数据  
        e.preventDefault(); //阻止浏览器捕获右键事件  
        $(this).datagrid("clearSelections"); //取消所有选中项  
        $(this).datagrid("selectRow", rowIndex); //根据索引选中该行   
        $('#menu').menu('show', {
            //显示右键菜单  
            left: e.pageX,//在鼠标点击处显示菜单 
            top: e.pageY
        });
     }
 });
</script>

到这里，一个右击功能就实现了。如果项目需要，不用客气，拿去用。