首页 > 编程 > JavaScript > 正文

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

2019-11-19 15:58:42
字体:
来源:转载
供稿:网友

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表