EasyUI 表格点击右键添加或刷新 绑定右键菜单

例1

在HTML页面中安装八个掩蔽的菜单(前提是曾经应用封装的Easyui)

代码:

  <div id=”contextMenu_jygl” class=”easyui-menu” style=”width: 80px;
display: none;”>              
                <div id=”btn_More” data-options=”iconCls:’icon-ok'”
onclick=”MoreInfo()”>查看个人消息</div>
                <div id=”Pass” data-options=”iconCls:’icon-remove'”
onclick=”MoreInfo()”>通过</div>
                <div id=”NoPass” data-options=”iconCls:’icon-remove'”
onclick=”MoreInfo()”>不通过</div>
</div>

第二步:

编写js代码

  $(“#dt”).datagrid({

 onRowContextMenu: function (e, rowIndex, rowData) { //右键时接触事件  
                   
                        e.preventDefault(); //阻止浏览器捕获右键事件
                        $(this).datagrid(“clearSelections”);
//撤消全部入选项
                        $(this).datagrid(“selectRow”, rowIndex);
//依照索引选中该行
                        $(‘#contextMenu_jygl’).menu(‘show’, {        
               
                            left: e.pageX,//在鼠标点击处显示菜单
                            top: e.pageY
                        });
                        e.preventDefault();
 //阻止浏览器自带的右键菜单弹出
                    },

})

 例2

  1. <table id=”dg” class=”easyui-datagrid”  data-options=”onRowContextMenu: function (e, rowIndex, rowData) {       
  2.  $(‘#mm’).menu(‘show’, { left: e.pageX, top: e.pageY }); e.preventDefault();  
  3. }  
  4. <tr>…..</tr>  
  5.  <tr>…..</tr>  
  6.  <tr>…..</tr>  
  7.  <tr>…..</tr>  
  8. </table>   

<div
id=”mm” class=”easyui-menu” style=”width:100px;display: none”>   
      <div iconCls=”icon-shield”
onclick=”revoke()”>授权</div>   
      <div iconCls=”icon-delete”
onclick=”onDelete()”>删除</div>   
      <div iconCls=”icon-xiaoxi”
onclick=”onAdds()”>发送个人新闻</div>
      <div>   
          <span>别的添加格局</span>   
          <div style=”width:100px;”>   
              <div iconCls=”icon-commbook”
onclick=”saveToGroup()”>存通信录</div>   
              <div iconCls=”icon-qunzu”
onclick=”deptImport()”>导入</div>   
          </div>   
      </div>   
    </div>

  1. 右击表格数据行展现效果图如下:  

图片 1

 

 

例三

<table id=”StorageManagerId” class=”easyui-datagrid”
style=”width:auto;height:500px;” data-options=”onRowContextMenu:
function (e, rowIndex, rowData) {
$(‘#mmStorageManager’).menu(‘show’, { left: e.pageX, top: e.pageY });
e.preventDefault();
} “></table>

 

<div id=”mmStorageManager” class=”easyui-menu”
style=”width:100px;display: none”>
<div id=”gridViewAdd” iconcls=”icon-shield”>添加</div>

<div id=”gridViewRefresh” iconcls=”icon-shield”>涮新</div>
</div>

刷新

$(‘#mmCustomerCHis #gridViewRefresh’).on(“click”, function () {
$(‘#’ + tableId).datagrid(‘reload’);
});

添加

$(‘#mmStorageManager #gridViewAdd’).on(“click”, function () {
datagridAdd();
});

 

function datagridAdd() {
var data = $(‘#’ + tableId).datagrid(‘getData’);
if (data.rows.length < 6) {
dataOption.ListOperation(StorageManager, null, 2, “”,
“/StorageManager/BaseStorageManagerOption”, tableId, refreshNode);
}
else {
showTime(“最七只可以拥有陆个仓库!”,3);
}
};