Easyui 에서 Dialog 줄 내 단추 레이아웃 을 사용 하 는 실례

3946 단어 EasyuiDialog버튼
JSP 페이지

<div class="easyui-layout" data-options="fit:true"> 
  <div data-options="region:'north',split:false" 
   > 
   <div title="    " >    
    <table cellpadding="12" cellspacing="0" > 
      <tr> 
       <td >    :</td> 
       <td><input id="roleName" class="easyui-textbox" 
        ></td> 
       <td >    :</td> 
       <td> 
        <select id="roleFun" class="easyui-combobox" data-options="editable:false,multiple:true,panelHeight:'400px'" ></select> 
        <div id="roleFunPanel"> 
         <ul id="roleFunTree" class="easyui-tree" data-options="animate: true,checkbox:true"> 
          <li>    1</li> 
          <li>    2</li> 
          <li>    3</li> 
         </ul>        
        </div>        
       </td> 
       <td > 
        <a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="newAppendRole()">  </a> 
       </td>   
      </tr>   
    </table> 
    <table id="tblRoleDetail" ></table> 
   </div> 
  </div> 
 </div> 
  <div id="editRoleDialogFrame"></div>
JS 부분 코드

var grid = $("#tblRoleDetail").datagrid({ 
 border : false, 
 striped : true, 
 rownumbers : true, 
  fitColumns : true, 
  singleSelect : true, 
  height: '90%', 
  width: '100%', 
  idField :'roleName', 
  plain : true, 
  fit : false, <span > </span> 
  selectOnCheck:false, 
  nowrap: true, 
  onClickRow : tblRoleDetailOnClickRow , 
  columns:[[ 
   {field:'roleName',title:'   ',width: '19%',align:'center'}, 
   {field:'funId',title:'    ',width: '70%',align:'left', 
   formatter: function(value,row,index){ 
    return '<span title='+value+'>'+value+'</span>' 
   } 
   }, 
   {field:'opt',title:'  ',width:'10%',align:'center', 
    formatter:function(value,rec) 
    { 
     var btn1 = '<a class="editcls" onclick="newRoleEdit(\''+rec.roleName+'\')" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >  </a>'; 
     var btn2 = '<a class="delecls" onclick="removeRole(\''+rec.roleName+'\')" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >  </a>'; 
     return btn1+btn2;  
    } 
   } 
  ]], 
  onLoadSuccess:function(data){ 
   $('.editcls').linkbutton({text:'  ',plain:true,iconCls:'icon-edit'}); 
   $('.delecls').linkbutton({text:'  ',plain:true,iconCls:'icon-remove'}); 
   $('#tblRoleDetail').datagrid('fixRowHeight'); //      ,           
  } 
 });
효과 도

이 Easyui 가 Dialog 줄 내 버튼 을 사용 하여 레이아웃 한 인 스 턴 스 는 바로 작은 편집 이 여러분 에 게 공유 한 모든 내용 입 니 다.참고 가 되 고 저 희 를 많이 사랑 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기