EasyUI DataGrid 动态新增 Toolbar
easyui datagrid 是一个弹性蛮大的元件,但是官方文件有点不足,是比较可惜的一点。下面,一条小龙会介绍一下,如何动态新增 toolbar button。这个技巧读者可以举一反三应用在任何想动态新增的部分上。这边尽量简化好来介绍其中的关键点。
一般写 JavaScript 应用的程式,实务上一条小龙 自己开发时都会希望能尽量把商业逻辑放在server 端来控制,client 端就是变成单纯的控件应用。这样的好处是后面比较好维护,因为后面在维护时,只要专注于 server 端的逻辑的变化就好,而不用 Client Server 两边比较来得知要如何改。
另一个好处是,让后续开发人员只需专注Server 端的开发技巧即可,而不必为了增加一个 button 这种常用到的功能,也要后端开发人员去了解 EasyUI 后才有办法去开发,如此一来就可以减少很多开发成本。
一般程式开发中,大家都知道要降低程式间的耦合性,也就是要降低程式间的关联性,尽量让各程式独立来发展,这个道理应用在这,就可以了解Client Server 端切割清楚,也会有助于,后续程式的稳定性。
下面,来介绍一下 EasyUI 的基本概念,也就是 EasyUI 的元件一定要先初始化,才能应用,而一但初始化,想再去改变它,就只能透过 EasyUI 元件所提供的 Function 来操作,一但没有对应 Function 可以操作,就只能想办法在一开始初始化中 就要定义好,以上是我们在操作 EasyUI 的重要观念。
要动态化操作前,首先要先知道如何用 静态网页来操作,没问题后,再来想办法用 后端程式 来产生相对应的 JS,以下就是静态网页的操作方式。
1 $(function () { 2 AddButton("btnAlert", "alert test", "icon-edit"); 3 var config = {}; 4 config.toolbar = toolbar; 5 $('#dg').datagrid(config); 6 loaddata(); 7 }); 8 var toolbar = []; 9 function AddButton(btnID, caption, icon) { 10 if (toolbar.length > 0) { 11 toolbar[toolbar.length] = "-"; 12 } 13 toolbar[toolbar.length] = { 14 text: caption, 15 iconCls: icon 16 }; 17 } 18 19 function loaddata() { 20 var rawData = { "total": 28, "rows": [ 21 { "productid": "FI-SW-01", "unitcost": 10.00, "status": "P", "listprice": 36.50, "attr1": "Large", "itemid": "EST-1" }, 22 { "productid": "K9-DL-01", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Spotted Adult Female", "itemid": "EST-10" }, 23 { "productid": "RP-SN-01", "unitcost": 12.00, "status": "P", "listprice": 28.50, "attr1": "Venomless", "itemid": "EST-11" }, 24 { "productid": "RP-SN-01", "unitcost": 12.00, "status": "P", "listprice": 26.50, "attr1": "Rattleless", "itemid": "EST-12" }, 25 { "productid": "RP-LI-02", "unitcost": 12.00, "status": "P", "listprice": 35.50, "attr1": "Green Adult", "itemid": "EST-13" }, 26 { "productid": "FL-DSH-01", "unitcost": 12.00, "status": "P", "listprice": 158.50, "attr1": "Tailless", "itemid": "EST-14" }, 27 { "productid": "FL-DSH-01", "unitcost": 12.00, "status": "P", "listprice": 83.50, "attr1": "With tail", "itemid": "EST-15" }, 28 { "productid": "FL-DLH-02", "unitcost": 12.00, "status": "P", "listprice": 63.50, "attr1": "Adult Female", "itemid": "EST-16" }, 29 { "productid": "FL-DLH-02", "unitcost": 12.00, "status": "P", "listprice": 89.50, "attr1": "Adult Male", "itemid": "EST-17" }, 30 { "productid": "AV-CB-01", "unitcost": 92.00, "status": "P", "listprice": 63.50, "attr1": "Adult Male", "itemid": "EST-18" } 31 ] 32 }; 33 $('#dg').datagrid('loadData', rawData); 34 } 35 36 <table id="dg" style="width:700px;height:auto" 37 title="DataGrid" iconCls="icon-edit" singleSelect="true"> 38 <thead> 39 <tr> 40 <th field="itemid" width="80">Item ID</th> 41 <th field="productid" width="100">Product</th> 42 <th field="listprice" width="80" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th> 43 <th field="unitcost" width="80" align="right" editor="numberbox">Unit Cost</th> 44 <th field="attr1" width="250" editor="text">Attribute</th> 45 <th field="status" width="60" align="center" editor="{type:'checkbox',options:{on:'P',off:''}}">Status</th> 46 </tr> 47 </thead> 48 </table>
上述静态网页,这就是一条小龙为了做动态产生 button,做的一个概念网页,先把你可以想像的操作用静态网页来实验,实验成功在用后端来产生。该静态网页,重要的点就在于 AddButton 这个 Function ,如此实验即可得知,后面用后端程式只要产生呼叫 AddButton 这个 function 就能动态产生 button 了。
所以读者了解上述程式,就可以 接着来看下面与 ASP.NET 结合后的一个概念程式
1 <%@ Page Language="C#" AutoEventWireup="True" %> 2 3 <script language="C#" runat=server> 4 public void Page_Init(object sender, System.EventArgs e) 5 { 6 string CusButton = "AddButton('btnAlert', 'alert test', 'icon-edit');"; 7 char vbCrLf = '\n'; 8 string s = @"/"; 9 Response.Write("<script type='text/javascript'>"); 10 Response.Write("function onBeforeInit() {" + CusButton + "}"); 11 Response.Write("<" + s + "script>" + vbCrLf); 12 } 13 </script> 14 <html> 15 <head> 16 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 17 </head> 18 <link rel="stylesheet" type="text/css" href="./JS/EasyUI/themes/default/easyui.css"> 19 <link rel="stylesheet" type="text/css" href="./JS/EasyUI/themes/icon.css"> 20 21 <script type="text/javascript" src="./JS/jquery18min.js"></script> 22 <script type="text/javascript" src="./JS/EasyUI/jquery.easyui.min.js"></script> 23 <script type="text/javascript" src="./JS/EasyUI/easyui-lang-zh_TW.js"></script> 24 25 <script type="text/javascript" src="./JS/dhtmlx/dhtmlxcommon.js"></script> 26 <script type="text/javascript" src="./JS/fg.menu.js"></script> 27 28 <link type="text/css" href="./css/fg.menu.css" media="screen" rel="stylesheet" /> 29 <link type="text/css" href="./css/theme/ui.all.css" media="screen" rel="stylesheet" /> 30 31 <script type="text/javascript"> 32 $(function () { 33 if (typeof (onBeforeInit) == 'function') { 34 onBeforeInit(); 35 } 36 var config = {}; 37 config.toolbar = toolbar; 38 $('#dg').datagrid(config); 39 loaddata(); 40 }); 41 var toolbar = []; 42 function AddButton(btnID, caption, icon) { 43 if (toolbar.length > 0) { 44 toolbar[toolbar.length] = "-"; 45 } 46 toolbar[toolbar.length] = { 47 text: caption, 48 iconCls: icon 49 }; 50 } 51 52 function loaddata() { 53 var rawData = { "total": 28, "rows": [ 54 { "productid": "FI-SW-01", "unitcost": 10.00, "status": "P", "listprice": 36.50, "attr1": "Large", "itemid": "EST-1" }, 55 { "productid": "K9-DL-01", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Spotted Adult Female", "itemid": "EST-10" }, 56 { "productid": "RP-SN-01", "unitcost": 12.00, "status": "P", "listprice": 28.50, "attr1": "Venomless", "itemid": "EST-11" }, 57 { "productid": "RP-SN-01", "unitcost": 12.00, "status": "P", "listprice": 26.50, "attr1": "Rattleless", "itemid": "EST-12" }, 58 { "productid": "RP-LI-02", "unitcost": 12.00, "status": "P", "listprice": 35.50, "attr1": "Green Adult", "itemid": "EST-13" }, 59 { "productid": "FL-DSH-01", "unitcost": 12.00, "status": "P", "listprice": 158.50, "attr1": "Tailless", "itemid": "EST-14" }, 60 { "productid": "FL-DSH-01", "unitcost": 12.00, "status": "P", "listprice": 83.50, "attr1": "With tail", "itemid": "EST-15" }, 61 { "productid": "FL-DLH-02", "unitcost": 12.00, "status": "P", "listprice": 63.50, "attr1": "Adult Female", "itemid": "EST-16" }, 62 { "productid": "FL-DLH-02", "unitcost": 12.00, "status": "P", "listprice": 89.50, "attr1": "Adult Male", "itemid": "EST-17" }, 63 { "productid": "AV-CB-01", "unitcost": 92.00, "status": "P", "listprice": 63.50, "attr1": "Adult Male", "itemid": "EST-18" } 64 ] 65 }; 66 $('#dg').datagrid('loadData', rawData); 67 } 68 </script> 69 <body> 70 <form id="Form1" runat="server"> 71 72 <table id="dg" style="width:700px;height:auto" 73 title="DataGrid" iconCls="icon-edit" singleSelect="true"> 74 <thead> 75 <tr> 76 <th field="itemid" width="80">Item ID</th> 77 <th field="productid" width="100">Product</th> 78 <th field="listprice" width="80" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th> 79 <th field="unitcost" width="80" align="right" editor="numberbox">Unit Cost</th> 80 <th field="attr1" width="250" editor="text">Attribute</th> 81 <th field="status" width="60" align="center" editor="{type:'checkbox',options:{on:'P',off:''}}">Status</th> 82 </tr> 83 </thead> 84 </table> 85 </form> 86 </body> 87 </html>
这个程式主要应用了上一篇 如何用 javascript 动态呼叫函数 的技巧,在 DataGrid init 前去呼叫 onBeforeInit 这个 function,这个就是一条小龙在前端框架中,为后端程式预留弹性的空间,当然后续读者在应用时,可以将这些init 分得更细,让后端程式有更明确的方式来呼叫。一条小龙在这边只是介绍其中的概念,所以会比较粗略一点。