本文主要为大家带来一篇easyui使用dialog行内按钮布局的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
jsp页面
<p class="easyui-layout" data-options="fit:true">
<p data-options="region:'north',split:false"
>
<p 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>
<p id="rolefunpanel">
<ul id="rolefuntree" class="easyui-tree" data-options="animate: true,checkbox:true">
<li>线路列表1</li>
<li>线路列表2</li>
<li>线路列表3</li>
</ul>
</p>
</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>
</p>
</p>
</p>
<p id="editroledialogframe"></p>
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'); //固定所有高度，避免行号和行数据错位
}
});
效果图
相关推荐：
详解jquery插件artdialog.js使用与关闭
详解bootstrap3-dialog-master模态框用法
html <dialog>标签的使用与定义
以上就是easyui使用dialog行内按钮布局的详细内容。