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;
}
}</pre>
理想是豐滿的，現實是殘酷的，代碼報錯，錯誤的代碼行: toolbars_arr.push({text:toolbarnames[i],iconCls:toolbaricons[i],handler:eval(toolbarfuncnames[i])});
然后我把 eval ( ) 這個函數移去，代碼沒有報錯了，但是發現了一個奇怪的現象，瀏覽器將我toolbar的所有函數都執行了一遍，怎么修改都不行。用google搜索也沒有查到相關解決辦法。
后來我決定看下dialog的在瀏覽器的頁面結構，打開瀏覽器的調試模式，進行了下面簡單的測試：
其中settings是dialog的id，
</div>
頁面中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;
}
}</pre>
然后保存運行，沒有保存，測試成功了！完整代碼如下:
/
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;
}
}</pre>
我使用的Easyui版本為 jquery-easyui-1.4.2 ，如果你有更好的建議請告訴我，謝謝！
</div>
本文由用戶 chriszh123 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！