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


Posted in Javascript onJuly 27, 2017

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

Javascript 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
读jQuery之四(优雅的迭代)
Jun 20 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
javascript实现一个简单的弹出窗
Feb 22 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 Javascript
ES6 Object.assign()的用法及其使用
Jan 18 Javascript
ESLint 是如何检查 .vue 文件的
Nov 30 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 #Javascript
js实现日期显示的一些操作(实例讲解)
Jul 27 #Javascript
Angular通过angular-cli来搭建web前端项目的方法
Jul 27 #Javascript
使用JavaScript开发跨平台的桌面应用详解
Jul 27 #Javascript
详解VueJS 数据驱动和依赖追踪分析
Jul 26 #Javascript
前端主流框架vue学习笔记第二篇
Jul 26 #Javascript
浅谈vue.js中v-for循环渲染
Jul 26 #Javascript
You might like
PHP排序算法的复习和总结
2012/02/15 PHP
PHP中静态变量的使用方法实例分析
2016/12/01 PHP
jquery一句话全选/取消全选
2011/03/01 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
2011/04/10 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
javascript框架设计读书笔记之模块加载系统
2014/12/02 Javascript
js实现文本框选中的方法
2015/05/26 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
bootstrap datepicker插件默认英文修改为中文
2017/07/28 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
对Vue table 动态表格td可编辑的方法详解
2018/08/28 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
H5实现手机拍照和选择上传功能
2019/12/18 Javascript
Python将xml和xsl转换为html的方法
2015/03/10 Python
Python入门之三角函数sin()函数实例详解
2017/11/08 Python
python 切换root 执行命令的方法
2019/01/19 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
印度低票价航空公司:GoAir
2017/10/11 全球购物
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
党员年终民主评议的自我评价
2013/11/05 职场文书
教师求职信范文分享
2013/12/27 职场文书
竞聘书格式及范文
2014/03/31 职场文书
护理见习报告范文
2014/11/03 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
前台岗位职责范本
2015/04/16 职场文书
奖学金申请个人主要事迹材料
2015/11/04 职场文书
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers