当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Easyui使用Dialog行内按钮布局的实例

Easyui使用Dialog行内按钮布局的实例

2017年12月12日  | 移动技术网IT编程  | 我要评论

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行内按钮布局的实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网