zoukankan      html  css  js  c++  java
  • EasyUI 表格点击右键添加或刷新 绑定右键菜单

    例1

    在HTML页面中设置一个隐藏的菜单(前提是已经使用封装的Easyui)

    代码:

      <div id="contextMenu_jygl" class="easyui-menu" style=" 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="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="100px;">   
                  <div iconCls="icon-commbook" onclick="saveToGroup()">存通讯录</div>   
                  <div iconCls="icon-qunzu" onclick="deptImport()">导入</div>   
              </div>   
          </div>   
        </div>

    1. 右击表格数据行显示效果图如下:  


    例三

    <table id="StorageManagerId" class="easyui-datagrid" style="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="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("最多只能拥有5个仓库!",3);
    }
    };

  • 相关阅读:
    Atitit js nodejs下的进程管理wmic process进程管理
    Atitit 提取sfit特征点,并绘制到原图上
    Atitit 局部图查找大图 方法 与 说明
    Atitit java读取tif文件为空null的解决 图像处理
    Aititi 特征点检测算法与匹配的前世今生与历史传承attilax总结v4
    Atitit it行业图像处理行业软件行业感到到迷茫的三大原因和解决方案
    Atitit js nodejs 图像处理压缩缩放算法 attilax总结
    Atitit 2017年第68界机器视觉图像处理学术大会会议记要attilax总结自建学院自颁学位理论
    Atitit nodejs js 获取图像分辨率 尺寸 大小 宽度 高度
    Atitit 图像处理之编程之类库调用的接口api cli gui ws rest  attilax大总结.docx
  • 原文地址:https://www.cnblogs.com/sjd1118/p/7019916.html
Copyright © 2011-2022 走看看