【项目经验】--EasyUI DataGrid之右键菜单

时间:2021-04-13 17:01:18


       前两天验收项目,老总提了一个不是需求的需求,为什么这么说呢?因为我们的管理不到位!话说当天,我们UI系统下发了一个总文件,上面写着“各个系统找一个没有添加UI的模块去添加最新版本UI进行测试”,然后过了一个多小时吧,我又从组长那接收到另一个通知“已经实现的系统模块就不要加新UI了”,然后,我就又吧没有完成的替换还原了。

       

       熟知,等到老总验收的当天,各个负责人的口径竟然变得不一致了,有的说强制要加,有的说部分要加,有的说因为出现问题就不要加,有的说等待通知,有的说……


       我就想说了,不就是一个右键吗?至于这样吗!可能因为我不是领导层,还体会不到那份辛酸……


后来组长下命令,要求“报表模块加上右键啊,多长时间能完成?”

我说“年前”

组长:“好!”


事实上,我只用了五分钟!

故事讲完了,下面个大家分享一下:


首先,如果我们没有使用已经封装的新版UI,那我们还是用我们的easyui的话,我们就要在html中设置按钮

<div id="menu" class="easyui-menu" style="width: 30px; display: none;">
<!--放置一个隐藏的菜单Div-->
<div id="btn_More" data-options="iconCls:'icon-remove'" onclick="MoreInfo()">更多</div>
</div>



然后呢?当然是写触发右键的js方法:

 <script type="text/javascript">
$("#dt").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
});
e.preventDefault(); //阻止浏览器自带的右键菜单弹出
}
});

//$('#btn_More').click(function () {
// MoreInfo();
//})
</script>

效果展示:

【项目经验】--EasyUI DataGrid之右键菜单


最后呢,把我们已经写好的方法连起来打通,就哦了!


       就这么点事,但是引出了我们管理上的重大问题,像米老师看起,要学会从高处看问题,那样才能边关全局。最后以我们的一句格言结束:“ 不谋万世者不足谋一时 不谋全局者不足谋一域