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