Easyui的Dialog的toolbar的自定义添加
chriszh123
9年前
最近一直在写快速定制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 ，如果你有更好的建议请告诉我，谢谢！
</div>