Easyui的Dialog的toolbar的自定义添加
最近一直在写快速定制Web表格，基于Easyui，整个过程使用了大量的Easyui的dialog，每个dialog的代码大部分都雷同，感觉代码出现了很大程度的重复，然后想写一个通用的dialog设置函数，避免重复，很显然在写这个之前，我们应该明确两点:
- 什么是Easyui
- 了解dialog的大致构造
什么是Easyui
- easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。
- easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。
- 使用 easyui，您不需要写太多 javascript 代码，一般情况下您只需要- 使用一些 html 标记来定义用户界面。
- HTML 网页的完整框架。
- easyui 节省了开发产品的时间和规模。
- easyui 非常简单，但是功能非常强大。
了解dialog的大致构造
这里我们的dialog都是通过javascript创建的，结构大致如下
$('#dialogid').dialog({
title:'title',
width:400,
height:200,
closable:false,
toolbar:[{
text:'text',
iconCls:'icon-xxx',
handler:function(){
...
}
},{
...
}],
onOpen:function()
{
...
}
});
其中dialog的title,width,height,closable设置都很简单，难点在于如何动
态生成toolbar，然后我想能不能通过将text,iconCls,handler存入数组
中，生成[{text:'xx',iconCls:'yy',handler:'zz'}]格式。
问题来了，假设可以的话，似乎函数都变成字符串了，如果函数过长怎么办？
1. 关于函数过长：后来我测试一下发现，handler:function ( ) { } 的function(){}，可以写成自定义函数，也就是可以写成 handler : xx ( ) ,这样也是可以的，所以我们只要将相应函数写好，完全不需要讲整个函数放入数组中，所以函数过长这个问题迎刃而解。
2. 关于函数名变成字符串的问题，js存在一个 eval ( ) 函数，可以将计算某个字符串，并执行其中的JS代码
似乎的两个问题都解决了，然后我 开始编写编码
第一次尝试如下:
/*
SetDialog(dialogid,title,width,height,closable,toolbarOrNot,toolbarnames,toolbaricons,toolbarfuncnames,onopen,onclose)
设置对话框,没有传值则使用默认值,动态生成toolbar
@param:
dialogid:对话框id
title:标题
width:宽度
height:高度
closable:是否显示关闭按钮
toolbarOrNot:是否显示工具栏
toolbarnames:工具栏函数名称,预期为数组
toolbaricons:工具栏功能图标，预期为数组，长度应当与toolbarnames长度一致
toolbarfuncnames:工具栏功能名称，预期为数组，长度应当与toolbarnames长度一致
onopen:对话框打开的时候调用的函数名称
onclose:对话框关闭的时候调用的函数名称
@return:
设置成功返回true
否则返回false
*/
function SetDialog(dialogid,title,width,height,closable,toolbarOrNot,toolbarnames,toolbaricons,toolbarfuncnames,onopen,onclose)
{
var dialogele = '#'+dialogid;
/*
toolbar格式:[{text:'text',iconCls:'iconCls',handler:func()},{...},...]
*/
var toolbars_arr = new Array();
console.log("toolbarnames:"+toolbarnames);
console.log("toolbaricons:"+toolbaricons);
console.log("toolbarfuncnames:"+toolbarfuncnames);
if(toolbarOrNot)
{
var arr_len = toolbarfuncnames.length;
console.log('数组长度:'+arr_len);
try{
for(var i = 0; i < arr_len; i++)
{
console.log('第'+i+'次:text:'+toolbarnames[i]+"iconCls:"+toolbaricons[i]+"handler:"+toolbarfuncnames[i]);
toolbars_arr.push({text:toolbarnames[i],iconCls:toolbaricons[i],handler:eval(toolbarfuncnames[i])});
}
}catch(err){
alert("设置对话框出错")
console.log("SetDialog出错:"+err);
/*
这里后期可使用默认值
*/
return false;
}
console.log('toolbars_arr:'+toolbars_arr);
toolbars_arr = eval(toolbars_arr)
$(dialogele).dialog({
title:title,
width:width,
height:height,
closable:closable,
toolbar:toolbars_arr,
onOpen:eval(onopen)
});
testDialog();
return true;
}
}
理想是丰满的，现实是残酷的，代码报错，错误的代码行: toolbars_arr.push({text:toolbarnames[i],iconCls:toolbaricons[i],handler:eval(toolbarfuncnames[i])});
然后我把 eval ( ) 这个函数移去，代码没有报错了，但是发现了一个奇怪的现象，浏览器将我toolbar的所有函数都执行了一遍，怎么修改都不行。用google搜索也没有查到相关解决办法。
后来我决定看下dialog的在浏览器的页面结构，打开浏览器的调试模式，进行了下面简单的测试：
其中settings是dialog的id，
页面中dialog的位置是这样的
似乎发现了什么，多了几个元素，应该是Easyui渲染之后的结果，将原本的dialog变为三部分，panel-header，dialog-toolbar，以及panelbody
然后我接着尝试，想看下dialog-toolbar的结构
其中最后一行innerHTML的具体代码如下:
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<a href="javascript:void(0)" class="l-btn l-btn-small l-btn-plain" group="" id="">
<span class="l-btn-left l-btn-icon-left">
<span class="l-btn-text">保存</span>
<span class="l-btn-icon icon-save"> </span>
</span>
</a>
</td>
<td>
<a href="javascript:void(0)" class="l-btn l-btn-small l-btn-plain" group="" id="">
<span class="l-btn-left l-btn-icon-left">
<span class="l-btn-text">取消</span>
<span class="l-btn-icon icon-cancel"> </span>
</span>
</a>
</td>
<td>
<a href="javascript:void(0)" class="l-btn l-btn-small l-btn-plain" group="" id="">
<span class="l-btn-left l-btn-icon-left">
<span class="l-btn-text">表头</span>
<span class="l-btn-icon icon-edit"> </span>
</span>
</a>
</td>
</tr>
</tbody>
</table>
有没有觉得很熟悉，这里就是我们之前设置的toolbar那些按钮，注意一下，它的超链接中的href点击事件为javascript:void(0),我们之前每个 function 都添加了具体内容，这里点击事件为什么会为空？我猜想easyui可能对于这些超链接的点击事件有其他的处理，我是无法获知了，但是我能不能尝试将它的innerHTML拼接成我们想要的结果呢，将 href="javascript:void(0)" 中的 javacript:void(0) 替换为 func()我们定义的函数 ,将
<span class="l-btn-text">表名</span><span class="l-btn-icon icon-edit"> </span>
替换其中的“表名”，‘’ icon-edit “ 为我们需要的函数名和对应的图标，然后我又重写了一个函数
/*
AddFuncToToolbar(dialogid,toolbarfuncnames)
向toolbar添加自定义函数
@param:
dialogid:需要自定toolbar的dialog的id
toolbaricons:按钮图标
toolbarnames:按钮名称
toolbarfuncnames:函数名称,预期为数组
@return:
成功返回true
否则返回false
*/
function AddFuncToToolbar(dialogid,toolbaricons,toolbarnames,toolbarfuncnames)
{
dialogEle = document.getElementById(dialogid);
var table_body = "";
var td_body = "";
/*
下列拼接字符串的方式
是通过浏览器调试获得的
dialog经过渲染之后,toolbar一栏变为table
整个样式如下:
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<a href="javascript:void(0)" class="l-btn l-btn-small l-btn-plain" group="" id="">
<span class="l-btn-left l-btn-icon-left">
<span class="l-btn-text">保存</span>
<span class="l-btn-icon icon-save"> </span>
</span>
</a>
</td>
...
</tr>
</tbody>
</table>
*/
var table_header = `<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
`
var table_footer = `
</tr>
</table>
`
var func_nameheader = `
<td>
<a href="javascript:
`
var func_name;
var func_namefooter_tagheader = `
" class="l-btn l-btn-small l-btn-plain" group="" id="">
<span class="l-btn-left l-btn-icon-left">
<span class="l-btn-text">
`
var func_tag;
var func_tagfooter_iconheader = `
</span>
<span class="l-btn-icon
`
var func_icon;
var func_iconfooter = `
"> </span>
</span>
</a>
</td>
`
//字符串拼接顺序如下:func_nameheader+func_name + func_namefooter_tagheader +
//func_tag + func_tagfooter_iconheader + func_icon +func_iconfooter
if(isArray(toolbarfuncnames))
{
var arr_len = toolbarfuncnames.length;
for(var i = 0; i < arr_len; i++)
{
func_name = toolbarfuncnames[i];
func_tag = toolbarnames[i];
func_icon = toolbaricons[i];
td_body += func_nameheader+func_name + func_namefooter_tagheader + func_tag + func_tagfooter_iconheader + func_icon +func_iconfooter;
}
table_body = table_header + td_body + table_footer;
try{
dialogEle.parentNode.childNodes[1].innerHTML = table_body;
}catch(err)
{
console.log("AddFuncToToolbar failed!");
return false;
}
}else{
console.log('toolbarfuncnames is not an array!');
return false;
}
}
然后保存运行，没有保存，测试成功了！
完整代码如下:
/*
SetDialog(dialogid,title,width,height,closable,toolbarOrNot,toolbarnames,toolbaricons,toolbarfuncnames,onopen,onclose)
设置对话框,没有传值则使用默认值,动态生成toolbar
@param:
dialogid:对话框id
title:标题
width:宽度
height:高度
closable:是否显示关闭按钮
toolbarOrNot:是否显示工具栏
toolbarnames:工具栏函数名称,预期为数组
toolbaricons:工具栏功能图标，预期为数组，长度应当与toolbarnames长度一致
toolbarfuncnames:工具栏功能名称，预期为数组，长度应当与toolbarnames长度一致
onopen:对话框打开的时候调用的函数名称
onclose:对话框关闭的时候调用的函数名称
@return:
设置成功返回true
否则返回false
*/
function SetDialog(dialogid,title,width,height,closable,toolbarOrNot,toolbarnames,toolbaricons,toolbarfuncnames,onopen,onclose)
{
var dialogele = '#'+dialogid;
var toolbars_arr = new Array();
if(toolbarOrNot)
{
toolbars_arr = eval(toolbars_arr)
$(dialogele).dialog({
title:title,
width:width,
height:height,
closable:closable,
toolbar:[],
onOpen:eval(onopen)
});
if(AddFuncToToolbar(dialogid,toolbaricons,toolbarnames,toolbarfuncnames))
{
return true;
}else{
return false;
}
}
}
/*
AddFuncToToolbar(dialogid,toolbarfuncnames)
向toolbar添加自定义函数
@param:
dialogid:需要自定toolbar的dialog的id
toolbaricons:按钮图标
toolbarnames:按钮名称
toolbarfuncnames:函数名称,预期为数组
@return:
成功返回true
否则返回false
*/
function AddFuncToToolbar(dialogid,toolbaricons,toolbarnames,toolbarfuncnames)
{
dialogEle = document.getElementById(dialogid);
var table_body = "";
var td_body = "";
/*
下列拼接字符串的方式
是通过浏览器调试获得的
dialog经过渲染之后,toolbar一栏变为table
整个样式如下:
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<a href="javascript:void(0)" class="l-btn l-btn-small l-btn-plain" group="" id="">
<span class="l-btn-left l-btn-icon-left">
<span class="l-btn-text">保存</span>
<span class="l-btn-icon icon-save"> </span>
</span>
</a>
</td>
...
</tr>
</tbody>
</table>
*/
var table_header = `<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
`
var table_footer = `
</tr>
</table>
`
var func_nameheader = `
<td>
<a href="javascript:
`
var func_name;
var func_namefooter_tagheader = `
" class="l-btn l-btn-small l-btn-plain" group="" id="">
<span class="l-btn-left l-btn-icon-left">
<span class="l-btn-text">
`
var func_tag;
var func_tagfooter_iconheader = `
</span>
<span class="l-btn-icon
`
var func_icon;
var func_iconfooter = `
"> </span>
</span>
</a>
</td>
`
//字符串拼接顺序如下:func_nameheader+func_name + func_namefooter_tagheader +
//func_tag + func_tagfooter_iconheader + func_icon +func_iconfooter
if(isArray(toolbarfuncnames))
{
var arr_len = toolbarfuncnames.length;
for(var i = 0; i < arr_len; i++)
{
func_name = toolbarfuncnames[i];
func_tag = toolbarnames[i];
func_icon = toolbaricons[i];
td_body += func_nameheader+func_name + func_namefooter_tagheader + func_tag + func_tagfooter_iconheader + func_icon +func_iconfooter;
}
table_body = table_header + td_body + table_footer;
try{
dialogEle.parentNode.childNodes[1].innerHTML = table_body;
}catch(err)
{
console.log("AddFuncToToolbar failed!");
return false;
}
}else{
console.log('toolbarfuncnames is not an array!');
return false;
}
}
我使用的Easyui版本为 jquery-easyui-1.4.2，如果你有更好的建议请告诉我，谢谢！
Easyui的Dialog的toolbar的自定义添加的更多相关文章
- 分别用ToolBar和自定义导航栏实现沉浸式状态栏
一.ToolBar 1.在build.gradle中添加依赖,例如: compile 'com.android.support:appcompat-v7:23.4.0' 2.去掉应用的ActionBa ...
- 第二百零四节，jQuery EasyUI，Dialog(对话框)组件
jQuery EasyUI,Dialog(对话框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解EasyUI中Dialog(窗口)组件的使用方法,这个组件依赖 ...
- Winform中自定义添加ZedGraph右键实现设置所有Y轴刻度的上下限
场景 Winforn中实现ZedGraph自定义添加右键菜单项(附源码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...
- jQuery基础之（五）jQuery自定义添加"$"与解决"$"的冲突
1.自定义添加$ 从上面四篇文章我们看到jQuery的强大,但无论如何,jQuery都不可能满足所有用户的需求,而且有一些需求十分小众,也不适合放到整个jQuery框架中,正是因为这一点,jQuery ...
- phpCMS V9 自定义添加 全局变量{SKIN_PATH}方法
前言:目前v9版本新增{js_path},{css_path},{img_path}三个全局变量,代替2008版本中{skin_path},样式图片脚本分开路径,确实达到了一定在后台管理方便的目的,但 ...
- EasyUI实现更换主题能过样式添加id实现
EasyUI实现更换主题能过样式添加id实现,将原来的样式值添加到cookie中保存,这样下次浏览器访问时,就是我们原来选择的样式! 首先将easyui的样式文件加入一个ID,这里命名为easyuiT ...
- ASP.NET页面使用JQuery EasyUI生成Dialog后台取值为空
原因: JQuery EasyUI生成Dialog后原来的文档结构发生了变化,原本在form里的内容被移动form外面,提交到后台后就没有办法取值了. 解决办法: 在生成Dialog后将它append ...
- zabbix的自动发现、自定义添加监控项目、配置邮件告警
1.zabbix的自动发现这里的自动发现,所显示出来的是规则的上自动了现 然后 可以对其内容进行相关的配制,如时间或周期 注意:对于单个主机的规则,可以自行添加或删除, 但对于已经添加好了的规则,若需 ...
- 超强PHP集成环境，支持800多个不同PHP版本同时运行，无限自定义添加mysql与php版本
转载自今日头条 小编最近发现PHPWAMP竟然又更新了,激动之余向大家介绍一下新版的强大功能. PHPWAMP是纯绿色集成环境,高版本php无需安装VC运行库,默认已经集成VC运行库!Nginx支持服 ...
随机推荐
- FireBug提示：本页面不包含 JavaScript，明明是包含js的。
本页面不包含 JavaScript 如果 <script> 标签有 "type" 属性, 其值应为 "text/javascript" 或者 &qu ...
- AndroidStudio使用笔记
声明: 正式放弃Eclipse,投奔AndoidStudio大军,有些东西要从头摸索,特发此帖记录Android Studio的使用方法.本帖永久更新,不定时记录本人使用过程中的经验积累,给自己留一份 ...
- 一段freemarker高级分页效果的代码
<a onclick="page(1)">首页</a> [#if currpage != 1] [#assign last=currpage - 1] &l ...
- PHP正则表达式详解（二）
前言: 在本文中讲述了正则表达式中的组与向后引用,先前向后查看,条件测试,单词边界,选择符等表达式及例子,并分析了正则引擎在执行匹配时的内部机理. 本文是Jan Goyvaerts为RegexBudd ...
- PHP常量详解：define和const的区别
常量是一个简单值的标识符(名字).如同其名称所暗示的,在脚本执行期间该值不能改变(除了所谓的魔术常量,它们其实不是常量).常量默认为大小写敏感.通常常量标识符总是大写的. 可以用 define() 函 ...
- jvm指令调试
监控GC的工具分为2种:命令行工具和图形工具: 常用的命令行工具有: 注:下面的命令都在JAVA_HOME/bin中,是java自带的命令.如果您发现无法使用,请直接进入Java安装目录调用或者先设置 ...
- css中为了清除浮动经常用到的after样式
.cf:after { display: block; visibility: hidden; width:; height:; line-height:; font-size:; clear: bo ...
- 初学者在ubuntu下安装使用git（上）
一 git的安装测试 在Ubuntu系统下的bash中输入git,如果提示没有安装的话,用命令 sudo apt-get install git 安装git,安装完成之后通过 git –versi ...
- 【转】python编码的问题
摘要: 为了在源代码中支持非ASCII字符,必须在源文件的第一行或者第二行显示地指定编码格式: # coding=utf-8 或者是: #!/usr/bin/python # -*- coding: ...
- Spring Data JPA @EnableJpaRepositories配置详解
@EnableJpaRepositories注解用于Srping JPA的代码配置,用于取代xml形式的配置文件,@EnableJpaRepositories支持的配置形式丰富多用,本篇文章详细讲解. ...