Easyui使用Dialog行内按钮布局的实例
2017-07-27 08:32
543 查看
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--工具栏toolbar-按钮button--tabs忒博页--树tree--表格table
- easyUI:ComboTree and comselector使用实例解析
- Easyui实例--tree组件的使用2
- jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
- Android使用TableLayout动态布局实例
- Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
- Android中使用DialogFragment编写对话框的实例教程
- dialog的使用,按钮的两种实现方式
- 使用jQuery实现两个div中按钮互换位置的实例代码
- 如何使用Bootstrap 按钮实例详解
- easyui dialog隐藏 buttons 按钮
- Android实现可使用自定义透明Dialog样式的Activity完整实例
- Easyui - dialog,window影响父页面布局的BUG解决方法
- 关于easyui使用<iframe />与Dialog弹框问题
- easyui datagrid列使用按钮的一些心得 .
- jquery easyui show dialog 的使用
- EasyUI中包选择按钮的下拉列表的代码实例
- 在ASP.NET的server form 中使用easyui的layout布局控件
- bootstrap3-dialog使用实例