datagrid使用心得(右键生成菜单,无用icon置灰,生成新的icon图标)(一)

datagrid右键生成菜单


(1)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();  //阻止浏览器自带的右键菜单弹出  
          
            if(rowIndex==0){//向上移动置灰
            document.getElementById("upBtn").setAttribute("disabled", true);
            $("#upBtn").attr("href","javascript:return false;");
$("#upBtn").attr("style","opacity: 0.2") 
            }else{
            document.getElementById("upBtn").setAttribute("disabled", false);
$("#upBtn").attr("style","opacity: 1") 
            }
            
            var rows = $(this).datagrid("getRows");
            if(rowIndex==rows.length-1){//向下移动置灰
            document.getElementById("downBtn").setAttribute("disabled", true);
            $("#downBtn").attr("href","javascript:return false;");
$("#downBtn").attr("style","opacity: 0.2")
            }else{
            document.getElementById("downBtn").setAttribute("disabled", false);
$("#downBtn").attr("style","opacity: 1") 

            }

  }

(2)加入icon图标

<style type="text/css">
.icon-spread{
    background:url('menuimg/application_add.png') no-repeat center center;
}
.icon-shrink{
    background:url('menuimg/application_delete.png') no-repeat center center;
}

</style>

(3)<div id="menu" class="easyui-menu" style="width: 120px; display: none;">  
      <!--放置一个隐藏的菜单Div-->  
      <div id="btn_More" data-options="iconCls:'icon-add'" >编辑:新增</div>  
      <div id="btn_More" data-options="iconCls:'icon-mini_add'" >编辑:插入</div>  
      <div id="btn_More" data-options="iconCls:'icon-edit'" >编辑:修改</div>  
      <div id="btn_More" data-options="iconCls:'icon-remove'">编辑:删除</div>  
      <div id="btn_More" data-options="iconCls:'icon-clear'" >编辑:清空</div> 
      <span style="height: 2px; "><hr></span>
      <div id="btn_More" data-options="iconCls:'icon-move'" >移动:向上</div>  
      <div id="btn_More" data-options="iconCls:'icon-remove'" >移动:向下</div> 
      <div id="btn_More" data-options="iconCls:'icon-remove'" >移动:指定</div>  
      <span style="height: 2px; "><hr></span>    
      <div id="upBtn" data-options="iconCls:'icon-up'"  onclick="upData()">转移:向上</div>          
      <div id="downBtn" data-options="iconCls:'icon-down'" >转移:向下</div>        
      <div id="btn_More" data-options="iconCls:'icon-remove'" >转移:上下指定</div>        
      <div id="btn_More" data-options="iconCls:'icon-spread'">转移:向左</div>        
      <div id="btn_More" data-options="iconCls:'icon-spread'" >转移:向右</div>  
      <span style="height: 2px; "><hr></span>     
      <div id="spreadBtn" data-options="iconCls:'icon-spread'"  >显示:展开</div>        
      <div id="shrinkBtn" data-options="iconCls:'icon-shrink'" >显示:收缩</div>               
    </div>

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页