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>