最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:动视网 责编:小采 时间:2020-11-27 22:34:06
文档

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

Easyui使用Dialog行内按钮布局的实例:JSP页面 <div class=easyui-layout data-options=fit:true> <div data-options=region:'north',split:false > <div title=角色分配 > <table cellpadding=12 cellsp
推荐度:
导读Easyui使用Dialog行内按钮布局的实例:JSP页面 <div class=easyui-layout data-options=fit:true> <div data-options=region:'north',split:false > <div title=角色分配 > <table cellpadding=12 cellsp


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

文档

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

Easyui使用Dialog行内按钮布局的实例:JSP页面 <div class=easyui-layout data-options=fit:true> <div data-options=region:'north',split:false > <div title=角色分配 > <table cellpadding=12 cellsp
推荐度:
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top