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('第'+
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值