Easyui使用Dialog行内按钮布局
2017-07-26 12:20
393 查看
JSP页面布局
JS部分代码
效果图
<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'); //固定所有高度,避免行号和行数据错位 } });
效果图
相关文章推荐
- Easyui使用Dialog行内按钮布局的实例
- easyui--之总和使用方法--对话框dialog--工具栏toolbar-按钮button--tabs忒博页--树tree--表格table
- easyui dialog 关闭按钮触发事件
- easyui datagrid列使用按钮
- 使用表格布局实现界面计算器按钮
- JQuery EasyUI 学习——使用EasyUI 页面布局
- jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
- 在ASP.NET下使用jQuery UI下的Dialog,服务器端按钮无响应的问题
- easyui布局隐藏伸缩按钮
- jqueryeasyui dialog plugin的使用
- easyui dialog隐藏 buttons 按钮
- 各种Popwindow和Dialog的汇总以及仿ios的,可以自定义布局,也可以傻瓜式的代码生成,使用非常方便
- IOS——第二个View中使用TabbarController例子,tabbar中页面间通过非tabbar按钮跳转(xib布局)
- GUI__【GUI概述】【布局】【Frame】【事件监听机制】【窗体事件】【按钮】【鼠标事件】【键盘事件】【Dialog对话框】【菜单】
- 解决JSP页面无法使用EasyUI里面class="easyui-dialog"的问题
- jquery easyui dialog的几个使用问题
- 使用Ext Viewport进行页面布局时Panel中的sumit按钮无法提交表单数据
- easyui的学习笔记--------dialog的使用
- 自定义dialog布局展示(关闭按钮突出一块)
- EasyUI学习笔记(二)——学习使用EasyUI之Dialog