Easyui使用Dialog行内按钮布局

  • JSP页面布局
<div class="easyui-layout" data-options="fit:true">
		<div data-options="region:'north',split:false"
			style="padding: 0px; width: 100%; height: 100%; display: table; text-align: center;">
			<div title="角色分配" style="padding: 2px; display: table-cell;">				
				<table cellpadding="12" cellspacing="0" style="width: 100%; height: 10%;">
						<tr>
							<td style="text-align: right;">角色名称:</td>
							<td><input id="roleName"  class="easyui-textbox"
								style="width: 180px"></td>
							<td style="text-align: right;">角色功能:</td>
							<td>
								<select id="roleFun" class="easyui-combobox" data-options="editable:false,multiple:true,panelHeight:'400px'" style="width:180px"></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 style="text-align:center;">
					           <a href="javascript:void(0)" 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,   
        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)">编辑</a>'; 
                    var btn2 = '<a class="delecls" onclick="removeRole(\''+rec.roleName+'\')" href="javascript:void(0)">删除</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');   //固定所有高度,避免行号和行数据错位
        }  
    });  
  • 效果图

 

Thinkingcao CSDN认证博客专家 Java Spring Boot 微服务
CSDN2019年度博客之星、博客专家,专注架构、Java、Spring、SpringBoot、SpringCloud、微服务、数据库、分布式、中间件、源码分析、JVM性能调优、K8S等领域
微信搜索公众号:「Thinking曹」,一个执着于架构的JAVA基层码农,每天带你学习新知识。
相关推荐
©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师:白松林 返回首页
实付 19.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值