最近一直在写快速定制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('第'+