最近一直在写快速定制Web表格，基于Easyui，整个过程使用了大量的Easyui的dialog，每个dialog的代码大部分都雷同，感觉代码出现了很大程度的重复，然后想写一个通用的dialog设置函数，避免重复，很显然在写这个之前，我们应该明确两点:

  • 什么是Easyui
  • 了解dialog的大致构造

什么是Easyui

  • easyui 是一个基于 jQuery 的框架，集成了各种用户界面插件。
  • easyui 提供建立现代化的具有交互性的 javascript 应用的必要的功能。
  • 使用 easyui，您不需要写太多 javascript 代码，一般情况下您只需要- 使用一些 html 标记来定义用户界面。
  • HTML 网页的完整框架。
  • easyui 节省了开发产品的时间和规模。
  • easyui 非常简单，但是功能非常强大。

了解dialog的大致构造

这里我们的dialog都是通过javascript创建的，结构大致如下

  1. $('#dialogid').dialog({
  2.        title:'title',
  3.        width:400,
  4.        height:200,
  5.        closable:false,
  6.        toolbar:[{
  7.            text:'text',
  8.            iconCls:'icon-xxx',
  9.            handler:function(){
  10.              ...
  11.           }
  12.        },{
  13.            ...
  14.        }],
  15.        onOpen:function()
  16.        {
  17.           ...
  18.        }
  19.    });

其中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代码

似乎的两个问题都解决了，然后我 开始编写编码

第一次尝试如下:

  1. /*
  2.     SetDialog(dialogid,title,width,height,closable,toolbarOrNot,toolbarnames,toolbaricons,toolbarfuncnames,onopen,onclose)
  3.     设置对话框,没有传值则使用默认值,动态生成toolbar
  4.     @param:
  5.         dialogid:对话框id
  6.         title:标题
  7.         width:宽度
  8.         height:高度
  9.         closable:是否显示关闭按钮
  10.         toolbarOrNot:是否显示工具栏
  11.         toolbarnames:工具栏函数名称,预期为数组
  12.         toolbaricons:工具栏功能图标，预期为数组，长度应当与toolbarnames长度一致
  13.         toolbarfuncnames:工具栏功能名称，预期为数组，长度应当与toolbarnames长度一致
  14.         onopen:对话框打开的时候调用的函数名称
  15.         onclose:对话框关闭的时候调用的函数名称
  16.     @return:
  17.         设置成功返回true
  18.         否则返回false
  19. */
  20. function SetDialog(dialogid,title,width,height,closable,toolbarOrNot,toolbarnames,toolbaricons,toolbarfuncnames,onopen,onclose)
  21. {
  22.     var dialogele = '#'+dialogid;
  23.     /*
  24.         toolbar格式:[{text:'text',iconCls:'iconCls',handler:func()},{...},...]
  25.     */
  26.     var toolbars_arr = new Array();
  27.     console.log("toolbarnames:"+toolbarnames);
  28.     console.log("toolbaricons:"+toolbaricons);
  29.     console.log("toolbarfuncnames:"+toolbarfuncnames);
  30.     if(toolbarOrNot)
  31.     {
  32.             var arr_len = toolbarfuncnames.length;
  33.             console.log('数组长度:'+arr_len);
  34.             try{
  35.                     for(var i = 0; i < arr_len; i++)
  36.                     {
  37.                         console.log('第'+i+'次:text:'+toolbarnames[i]+"iconCls:"+toolbaricons[i]+"handler:"+toolbarfuncnames[i]);
  38.                         toolbars_arr.push({text:toolbarnames[i],iconCls:toolbaricons[i],handler:eval(toolbarfuncnames[i])});
  39.                     }
  40.             }catch(err){
  41.                 alert("设置对话框出错")
  42.                 console.log("SetDialog出错:"+err);
  43.                 /*
  44.                   这里后期可使用默认值
  45.                 */
  46.                 return false;
  47.             }
  48.             console.log('toolbars_arr:'+toolbars_arr);
  49.             toolbars_arr = eval(toolbars_arr)
  50.                     $(dialogele).dialog({
  51.                                 title:title,
  52.                                 width:width,
  53.                                 height:height,
  54.                                 closable:closable,
  55.                                 toolbar:toolbars_arr,
  56.                                 onOpen:eval(onopen)
  57.                             });
  58.           testDialog();
  59.           return true;
  60.     }
  62. }

理想是丰满的，现实是残酷的，代码报错，错误的代码行: 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的具体代码如下:

  1. <table cellspacing="0" cellpadding="0">
  2.     <tbody>
  3.         <tr>
  4.             <td>
  5.                 <a href="javascript:void(0)" class="l-btn l-btn-small l-btn-plain" group="" id="">
  6.                     <span class="l-btn-left l-btn-icon-left">
  7.                         <span class="l-btn-text">保存</span>
  8.                         <span class="l-btn-icon icon-save">&nbsp;</span>
  9.                    </span>
  10.                </a>
  11.            </td>
  12.           <td>
  13.             <a href="javascript:void(0)" class="l-btn l-btn-small l-btn-plain" group="" id="">
  14.                 <span class="l-btn-left l-btn-icon-left">
  15.                     <span class="l-btn-text">取消</span>
  16.                     <span class="l-btn-icon icon-cancel">&nbsp;</span>
  17.                 </span>
  18.             </a>
  19.          </td>
  20.          <td>
  21.             <a href="javascript:void(0)" class="l-btn l-btn-small l-btn-plain" group="" id="">
  22.                 <span class="l-btn-left l-btn-icon-left">
  23.                     <span class="l-btn-text">表头</span>
  24.                     <span class="l-btn-icon icon-edit">&nbsp;</span>
  25.                 </span>
  26.            </a>
  27.         </td>
  28.       </tr>
  29.     </tbody>
  30. </table>

有没有觉得很熟悉，这里就是我们之前设置的toolbar那些按钮，注意一下，它的超链接中的href点击事件为javascript:void(0),我们之前每个 function 都添加了具体内容，这里点击事件为什么会为空？我猜想easyui可能对于这些超链接的点击事件有其他的处理，我是无法获知了，但是我能不能尝试将它的innerHTML拼接成我们想要的结果呢，将 href="javascript:void(0)" 中的 javacript:void(0) 替换为 func()我们定义的函数 ,将

  1. <span class="l-btn-text">表名</span><span class="l-btn-icon icon-edit">&nbsp;</span>

替换其中的“表名”，‘’ icon-edit “ 为我们需要的函数名和对应的图标，然后我又重写了一个函数

  1. /*
  2.     AddFuncToToolbar(dialogid,toolbarfuncnames)
  3.     向toolbar添加自定义函数
  4.     @param:
  5.         dialogid:需要自定toolbar的dialog的id
  6.         toolbaricons:按钮图标
  7.         toolbarnames:按钮名称
  8.         toolbarfuncnames:函数名称,预期为数组
  9.     @return:
  10.         成功返回true
  11.         否则返回false
  12. */
  13. function AddFuncToToolbar(dialogid,toolbaricons,toolbarnames,toolbarfuncnames)
  14. {
  15.     dialogEle = document.getElementById(dialogid);
  16.     var table_body = "";
  17.     var td_body = "";
  19.     /*
  20.         下列拼接字符串的方式
  21.         是通过浏览器调试获得的
  22.         dialog经过渲染之后,toolbar一栏变为table
  23.         整个样式如下:
  24.         <table cellspacing="0" cellpadding="0">
  25.             <tbody>
  26.                 <tr>
  27.                     <td>
  28.                         <a href="javascript:void(0)" class="l-btn l-btn-small l-btn-plain" group="" id="">
  29.                             <span class="l-btn-left l-btn-icon-left">
  30.                                 <span class="l-btn-text">保存</span>
  31.                                 <span class="l-btn-icon icon-save">&nbsp;</span>
  32.                            </span>
  33.                        </a>
  34.                    </td>
  35.                    ...
  36.               </tr>
  37.             </tbody>
  38.      </table>
  39.     */
  40.     var table_header = `<table cellspacing="0" cellpadding="0">
  41.     <tbody>
  42.         <tr>
  43. `
  44.     var table_footer = `
  45.             </tr>
  46.   </table>
  47. `
  48.     var func_nameheader = `
  49.     <td>
  50.                 <a href="javascript:
  51. `
  52.     var func_name;
  54.     var func_namefooter_tagheader = `
  55.     " class="l-btn l-btn-small l-btn-plain" group="" id="">
  56.                     <span class="l-btn-left l-btn-icon-left">
  57.                         <span class="l-btn-text">
  58. `
  59.     var func_tag;
  61.     var func_tagfooter_iconheader = `
  62.                             </span>
  63.                         <span class="l-btn-icon
  64. `
  65.     var func_icon;
  67.     var func_iconfooter = `
  68.                         ">&nbsp;</span>
  69.                    </span>
  70.                </a>
  71.            </td>
  72. `
  73.     //字符串拼接顺序如下:func_nameheader+func_name + func_namefooter_tagheader +
  74.     //func_tag + func_tagfooter_iconheader + func_icon +func_iconfooter
  75.     if(isArray(toolbarfuncnames))
  76.     {
  77.         var arr_len = toolbarfuncnames.length;
  78.         for(var i = 0; i < arr_len; i++)
  79.         {
  80.             func_name = toolbarfuncnames[i];
  81.             func_tag = toolbarnames[i];
  82.             func_icon = toolbaricons[i];
  83.             td_body += func_nameheader+func_name + func_namefooter_tagheader + func_tag + func_tagfooter_iconheader + func_icon +func_iconfooter;
  85.         }
  86.         table_body = table_header + td_body + table_footer;
  87.         try{
  88.             dialogEle.parentNode.childNodes[1].innerHTML = table_body;
  89.         }catch(err)
  90.         {
  91.             console.log("AddFuncToToolbar failed!");
  92.             return false;
  93.         }
  94.     }else{
  95.         console.log('toolbarfuncnames is not an array!');
  96.         return false;
  97.     }
  98. }

然后保存运行，没有保存，测试成功了！

完整代码如下:

  1. /*
  2.     SetDialog(dialogid,title,width,height,closable,toolbarOrNot,toolbarnames,toolbaricons,toolbarfuncnames,onopen,onclose)
  3.     设置对话框,没有传值则使用默认值,动态生成toolbar
  4.     @param:
  5.         dialogid:对话框id
  6.         title:标题
  7.         width:宽度
  8.         height:高度
  9.         closable:是否显示关闭按钮
  10.         toolbarOrNot:是否显示工具栏
  11.         toolbarnames:工具栏函数名称,预期为数组
  12.         toolbaricons:工具栏功能图标，预期为数组，长度应当与toolbarnames长度一致
  13.         toolbarfuncnames:工具栏功能名称，预期为数组，长度应当与toolbarnames长度一致
  14.         onopen:对话框打开的时候调用的函数名称
  15.         onclose:对话框关闭的时候调用的函数名称
  16.     @return:
  17.         设置成功返回true
  18.         否则返回false
  19. */
  20. function SetDialog(dialogid,title,width,height,closable,toolbarOrNot,toolbarnames,toolbaricons,toolbarfuncnames,onopen,onclose)
  21. {
  22.     var dialogele = '#'+dialogid;
  23.     var toolbars_arr = new Array();
  24.     if(toolbarOrNot)
  25.     {
  26.             toolbars_arr = eval(toolbars_arr)
  27.                     $(dialogele).dialog({
  28.                                 title:title,
  29.                                 width:width,
  30.                                 height:height,
  31.                                 closable:closable,
  32.                                 toolbar:[],
  33.                                 onOpen:eval(onopen)
  34.                             });
  35.           if(AddFuncToToolbar(dialogid,toolbaricons,toolbarnames,toolbarfuncnames))
  36.           {
  37.               return true;
  38.           }else{
  39.               return false;
  40.           }
  41.     }
  43. }
  45. /*
  46.     AddFuncToToolbar(dialogid,toolbarfuncnames)
  47.     向toolbar添加自定义函数
  48.     @param:
  49.         dialogid:需要自定toolbar的dialog的id
  50.         toolbaricons:按钮图标
  51.         toolbarnames:按钮名称
  52.         toolbarfuncnames:函数名称,预期为数组
  53.     @return:
  54.         成功返回true
  55.         否则返回false
  56. */
  57. function AddFuncToToolbar(dialogid,toolbaricons,toolbarnames,toolbarfuncnames)
  58. {
  59.     dialogEle = document.getElementById(dialogid);
  60.     var table_body = "";
  61.     var td_body = "";
  63.     /*
  64.         下列拼接字符串的方式
  65.         是通过浏览器调试获得的
  66.         dialog经过渲染之后,toolbar一栏变为table
  67.         整个样式如下:
  68.         <table cellspacing="0" cellpadding="0">
  69.             <tbody>
  70.                 <tr>
  71.                     <td>
  72.                         <a href="javascript:void(0)" class="l-btn l-btn-small l-btn-plain" group="" id="">
  73.                             <span class="l-btn-left l-btn-icon-left">
  74.                                 <span class="l-btn-text">保存</span>
  75.                                 <span class="l-btn-icon icon-save">&nbsp;</span>
  76.                            </span>
  77.                        </a>
  78.                    </td>
  79.                    ...
  80.               </tr>
  81.             </tbody>
  82.      </table>
  83.     */
  84.     var table_header = `<table cellspacing="0" cellpadding="0">
  85.     <tbody>
  86.         <tr>
  87. `
  88.     var table_footer = `
  89.             </tr>
  90.   </table>
  91. `
  92.     var func_nameheader = `
  93.     <td>
  94.                 <a href="javascript:
  95. `
  96.     var func_name;
  98.     var func_namefooter_tagheader = `
  99.     " class="l-btn l-btn-small l-btn-plain" group="" id="">
  100.                     <span class="l-btn-left l-btn-icon-left">
  101.                         <span class="l-btn-text">
  102. `
  103.     var func_tag;
  105.     var func_tagfooter_iconheader = `
  106.                             </span>
  107.                         <span class="l-btn-icon
  108. `
  109.     var func_icon;
  111.     var func_iconfooter = `
  112.                         ">&nbsp;</span>
  113.                    </span>
  114.                </a>
  115.            </td>
  116. `
  117.     //字符串拼接顺序如下:func_nameheader+func_name + func_namefooter_tagheader +
  118.     //func_tag + func_tagfooter_iconheader + func_icon +func_iconfooter
  119.     if(isArray(toolbarfuncnames))
  120.     {
  121.         var arr_len = toolbarfuncnames.length;
  122.         for(var i = 0; i < arr_len; i++)
  123.         {
  124.             func_name = toolbarfuncnames[i];
  125.             func_tag = toolbarnames[i];
  126.             func_icon = toolbaricons[i];
  128.             td_body += func_nameheader+func_name + func_namefooter_tagheader + func_tag + func_tagfooter_iconheader + func_icon +func_iconfooter;
  130.         }
  131.         table_body = table_header + td_body + table_footer;
  132.         try{
  133.             dialogEle.parentNode.childNodes[1].innerHTML = table_body;
  134.         }catch(err)
  135.         {
  136.             console.log("AddFuncToToolbar failed!");
  137.             return false;
  138.         }
  139.     }else{
  140.         console.log('toolbarfuncnames is not an array!');
  141.         return false;
  142.     }
  143. }

我使用的Easyui版本为 jquery-easyui-1.4.2，如果你有更好的建议请告诉我，谢谢！

Easyui的Dialog的toolbar的自定义添加的更多相关文章

  1. 分别用ToolBar和自定义导航栏实现沉浸式状态栏

    一.ToolBar 1.在build.gradle中添加依赖,例如: compile 'com.android.support:appcompat-v7:23.4.0' 2.去掉应用的ActionBa ...

  2. 第二百零四节，jQuery EasyUI，Dialog(对话框)组件

    jQuery EasyUI,Dialog(对话框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解EasyUI中Dialog(窗口)组件的使用方法,这个组件依赖 ...

  3. Winform中自定义添加ZedGraph右键实现设置所有Y轴刻度的上下限

    场景 Winforn中实现ZedGraph自定义添加右键菜单项(附源码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...

  4. jQuery基础之（五）jQuery自定义添加"$"与解决"$"的冲突

    1.自定义添加$ 从上面四篇文章我们看到jQuery的强大,但无论如何,jQuery都不可能满足所有用户的需求,而且有一些需求十分小众,也不适合放到整个jQuery框架中,正是因为这一点,jQuery ...

  5. phpCMS V9 自定义添加 全局变量{SKIN_PATH}方法

    前言:目前v9版本新增{js_path},{css_path},{img_path}三个全局变量,代替2008版本中{skin_path},样式图片脚本分开路径,确实达到了一定在后台管理方便的目的,但 ...

  6. EasyUI实现更换主题能过样式添加id实现

    EasyUI实现更换主题能过样式添加id实现,将原来的样式值添加到cookie中保存,这样下次浏览器访问时,就是我们原来选择的样式! 首先将easyui的样式文件加入一个ID,这里命名为easyuiT ...

  7. ASP.NET页面使用JQuery EasyUI生成Dialog后台取值为空

    原因: JQuery EasyUI生成Dialog后原来的文档结构发生了变化,原本在form里的内容被移动form外面,提交到后台后就没有办法取值了. 解决办法: 在生成Dialog后将它append ...

  8. zabbix的自动发现、自定义添加监控项目、配置邮件告警

    1.zabbix的自动发现这里的自动发现,所显示出来的是规则的上自动了现 然后 可以对其内容进行相关的配制,如时间或周期 注意:对于单个主机的规则,可以自行添加或删除, 但对于已经添加好了的规则,若需 ...

  9. 超强PHP集成环境，支持800多个不同PHP版本同时运行，无限自定义添加mysql与php版本

    转载自今日头条 小编最近发现PHPWAMP竟然又更新了,激动之余向大家介绍一下新版的强大功能. PHPWAMP是纯绿色集成环境,高版本php无需安装VC运行库,默认已经集成VC运行库!Nginx支持服 ...

随机推荐

  1. bzoj1441 MIN

    Description 给出n个数(A1…An)现求一组整数序列(X1…Xn)使得S=A1*X1+…An*Xn>0,且S的值最小 Input 第一行给出数字N,代表有N个数 下面一行给出N个数 ...

  2. [Operate System & Algorithm] 页面置换算法

    页面置换算法是什么?我们看一下百度百科对页面置换算法给出的定义:在地址映射过程中,若在页面中发现所要访问的页面不在内存中,则产生缺页中断.当发生缺页中断时,如果操作系统内存中没有空闲页面,则操作系统必 ...

  3. (备忘)Rect和RectF的区别

    1.Rect的变量使用int类型,而RectF使用float类型. 2.一些方法区别 <1>.Rect类 equals(Object obj) (for some reason it as ...

  4. angularjs 笔记(1) -- 引导

    首先: 1,引入angularJS文件,<script type="text/javascript" src="angularjs.min.js"> ...

  5. 利用Mongoose来结构化模式与验证

    Mongoose是一个文档对象模型(ODM)库,为MongoDB Node.js原生驱动程序提供更多的功能. 把结构化的模式应用到一个MongoDB集合,提供了验证和类型转换的好处 Mongoose通 ...

  6. core dump 是什么意思？

    core dump,翻译过来讲,就是核心转储.大致上就是指,如果由于应用错误,如浮点异常.指令异常等,操作系统将会转入内核的异常处理,向对应的进程发送特定的信号(SIGNAL),如果进程中没有对这些信 ...

  7. CentOS7下安装和使用Xdebug

    wget http://xdebug.org/files/xdebug-2.4.0rc4.tgztar xvzf xdebug-2.4.0rc4.tgzcd xdebug-2.4.0RC4phpize ...

  8. 配置ngnix

    server { listen ; server_name www.aaa.com; root /home/www/...; index index.php index.html index.htm; ...

  9. 《sqoop安装和配置》

    参考帖子http://blog.csdn.net/jiedushi/article/details/6663177 http://blog.csdn.net/ww1982_0_0_0/article/ ...

  10. Python之路,Day3 - Python基础3

    一.文件操作 对文件操作流程 打开文件,得到文件句柄并赋值给一个变量 通过句柄对文件进行操作 关闭文件 现有文件如下 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 ...