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支持服 ...
随机推荐
- JQuery常用代码汇总
获取<input />的value $("#id").val( ); 标签间的html $("#id").html('<tr><t ...
- 最新的jQuery插件和JavaScript库
每一个前端开发人员很清楚的重要性和功能的JavaScript库提供.它提供了一个简单的接口,用于构建快速动态的接口,而无需大量的代码. 谢谢你的超级从事jQuery开发者社区,人始终是创造新的和令人惊 ...
- [译]JavaScript源码转换:非破坏式与再生式
原文:http://ariya.ofilabs.com/2013/06/javascript-source-transformation-non-destructive-vs-regenerative ...
- vtkMapper
本文只是整理了该网页的内容:http://www.cnblogs.com/lizhengjin/archive/2009/08/16/1547340.html vtkMapper是一个抽象类,指定了几 ...
- Alpha版本十天冲刺——Day 1
站立式会议 会议总结 队员 今天完成 遇到的问题 明天要做 感想 鲍亮 α版本接口文档初步编写,任务统筹 绘制燃尽图出错 学习http资源访问,服务器请求接口demo测试 作为PM,之前对团队具体要做 ...
- PYTHON 写函数，计算传入字符串中【数字、字母、空格、以及其他的个数】
def func1(s): al_num = 0 spance_num = 0 digit_num = 0 others_num = 0 for i in s: if i.isdigit(): # i ...
- iOS UIStackView的理解
iOS9 提供的UIStackview简化了布局操作,它有些像Android中的liner layout.以前不用UIStackview也是可以做出类似的效果的,不过要添加许多的约束,看得头都大了,使 ...
- 出现个Expression(str != NULL)
CPrimerPlus的11章复习题10:编写个函数,其参数为一个字符串指针,返回一个指针,返回的指针指向字符串中第一个空格的位置(如果没有空格就返回空指针) #include <stdio.h ...
- node03-events
目录:node01-创建服务器 node02-util node03-events node04-buffer node05-fs node06-path node07-http node08-exp ...
- MapKit/CoreLocation框架 总结
MapKit/CoreLocation框架 /*英译 core:核心 track:踪迹 current:当前 statellite:卫星 hybird:混合 region:范围 annotation ...