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 相关文章推荐
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
修改jQuery Validation里默认的验证方法
Feb 14 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
Jquery 点击按钮自动高亮实现原理及代码
Apr 25 Javascript
js+jquery常用知识点汇总
Mar 03 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
jQuery滚动加载图片实现原理
Dec 14 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
Jun 24 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
Oct 30 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 Javascript
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
COM in PHP (winows only)
2006/10/09 PHP
php环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
AngularJS基础 ng-include 指令示例讲解
2016/08/01 Javascript
半个小时学json(json传递示例)
2016/12/25 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
Python中的Numpy入门教程
2014/04/26 Python
python解析基于xml格式的日志文件
2017/02/25 Python
python3个性签名设计实现代码
2018/06/19 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
我们是伦敦女孩:WalG
2018/01/08 全球购物
三星英国官网:Samsung英国
2018/09/25 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
亚洲在线旅行门户网站:Expedia.com.hk(智游网)
2020/04/14 全球购物
大三在校生电子商务求职信
2013/10/29 职场文书
最新教师自我评价分享
2013/11/12 职场文书
小学教师事迹材料
2014/01/13 职场文书
2015年元旦文艺汇演主持词
2014/03/26 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
会计求职自荐信
2014/06/20 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
公司承诺函范文
2015/01/21 职场文书
2015年上半年党建工作总结
2015/03/30 职场文书
创业计划书之美容店
2019/09/16 职场文书