easyui datagrid 是一个弹性蛮大的元件&＃xff0c;但是官方文件有点不足&＃xff0c;是比较可惜的一点。下面&＃xff0c;一条小龙会介绍一下&＃xff0c;如何动态新增 toolbar button。这个技巧读者可以举一反三应用在任何想动态新增的部分上。这边尽量简化好来介绍其中的关键点。
一般写 Javascript 应用的程式&＃xff0c;实务上一条小龙 自己开发时都会希望能尽量把商业逻辑放在server 端来控制&＃xff0c;client 端就是变成单纯的控件应用。这样的好处是后面比较好维护&＃xff0c;因为后面在维护时&＃xff0c;只要专注于 server 端的逻辑的变化就好&＃xff0c;而不用 Client Server 两边比较来得知要如何改。
另一个好处是&＃xff0c;让后续开发人员只需专注Server 端的开发技巧即可&＃xff0c;而不必为了增加一个 button 这种常用到的功能&＃xff0c;也要后端开发人员去了解 EasyUI 后才有办法去开发&＃xff0c;如此一来就可以减少很多开发成本。
一般程式开发中&＃xff0c;大家都知道要降低程式间的耦合性&＃xff0c;也就是要降低程式间的关联性&＃xff0c;尽量让各程式独立来发展&＃xff0c;这个道理应用在这&＃xff0c;就可以了解Client Server 端切割清楚&＃xff0c;也会有助于&＃xff0c;后续程式的稳定性。
下面&＃xff0c;来介绍一下 EasyUI 的基本概念&＃xff0c;也就是 EasyUI 的元件一定要先初始化&＃xff0c;才能应用&＃xff0c;而一但初始化&＃xff0c;想再去改变它&＃xff0c;就只能透过 EasyUI 元件所提供的 Function 来操作&＃xff0c;一但没有对应 Function 可以操作&＃xff0c;就只能想办法在一开始初始化中 就要定义好&＃xff0c;以上是我们在操作 EasyUI 的重要观念。
要动态化操作前&＃xff0c;首先要先知道如何用 静态网页来操作&＃xff0c;没问题后&＃xff0c;再来想办法用 后端程式 来产生相对应的 JS&＃xff0c;以下就是静态网页的操作方式。
1 $(function () {
2 AddButton("btnAlert", "alert test", "icon-edit");
3 var config &＃61; {};
4 config.toolbar &＃61; toolbar;
5 $(&＃39;#dg&＃39;).datagrid(config);
6 loaddata();
7 });
8 var toolbar &＃61; [];
9 function AddButton(btnID, caption, icon) {
10 if (toolbar.length > 0) {
11 toolbar[toolbar.length] &＃61; "-";
12 }
13 toolbar[toolbar.length] &＃61; {
14 text: caption,
15 iconCls: icon
16 };
17 }
18
19 function loaddata() {
20 var rawData &＃61; { "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 $(&＃39;#dg&＃39;).datagrid(&＃39;loadData&＃39;, rawData);
34 }
35
36
| "itemid" width&＃61;"80">Item ID | "productid" width&＃61;"100">Product | "listprice" width&＃61;"80" align&＃61;"right" editor&＃61;"{type:&＃39;numberbox&＃39;,options:{precision:1}}">List Price | "unitcost" width&＃61;"80" align&＃61;"right" editor&＃61;"numberbox">Unit Cost | "attr1" width&＃61;"250" editor&＃61;"text">Attribute | "status" width&＃61;"60" align&＃61;"center" editor&＃61;"{type:&＃39;checkbox&＃39;,options:{on:&＃39;P&＃39;,off:&＃39;&＃39;}}">Status |
|---|
上述静态网页&＃xff0c;这就是一条小龙为了做动态产生 button&＃xff0c;做的一个概念网页&＃xff0c;先把你可以想像的操作用静态网页来实验&＃xff0c;实验成功在用后端来产生。该静态网页&＃xff0c;重要的点就在于 AddButton 这个 Function &＃xff0c;如此实验即可得知&＃xff0c;后面用后端程式只要产生呼叫 AddButton 这个 function 就能动态产生 button 了。
所以读者了解上述程式&＃xff0c;就可以 接着来看下面与 ASP.NET 结合后的一个概念程式
1 <%&＃64; Page Language&＃61;"C#" AutoEventWireup&＃61;"True" %>
2
3
14
15
16 "content-type" content&＃61;"text/html; charset&＃61;utf-8" />
17
18 "stylesheet" type&＃61;"text/css" href&＃61;"./JS/EasyUI/themes/default/easyui.css">
19 "stylesheet" type&＃61;"text/css" href&＃61;"./JS/EasyUI/themes/icon.css">
20
21
22
23
24
25
26
27
28 "text/css" href&＃61;"./css/fg.menu.css" media&＃61;"screen" rel&＃61;"stylesheet" />
29 "text/css" href&＃61;"./css/theme/ui.all.css" media&＃61;"screen" rel&＃61;"stylesheet" />
30
31
69
70 "Form1" runat&＃61;"server">
71
72
| "itemid" width&＃61;"80">Item ID | "productid" width&＃61;"100">Product | "listprice" width&＃61;"80" align&＃61;"right" editor&＃61;"{type:&＃39;numberbox&＃39;,options:{precision:1}}">List Price | "unitcost" width&＃61;"80" align&＃61;"right" editor&＃61;"numberbox">Unit Cost | "attr1" width&＃61;"250" editor&＃61;"text">Attribute | "status" width&＃61;"60" align&＃61;"center" editor&＃61;"{type:&＃39;checkbox&＃39;,options:{on:&＃39;P&＃39;,off:&＃39;&＃39;}}">Status |
|---|
85
86
87
这个程式主要应用了上一篇 如何用 Javascript 动态呼叫函数 的技巧&＃xff0c;在 DataGrid init 前去呼叫 onBeforeInit 这个 function&＃xff0c;这个就是一条小龙在前端框架中&＃xff0c;为后端程式预留弹性的空间&＃xff0c;当然后续读者在应用时&＃xff0c;可以将这些init 分得更细&＃xff0c;让后端程式有更明确的方式来呼叫。一条小龙在这边只是介绍其中的概念&＃xff0c;所以会比较粗略一点。
京公网安备 11010802041100号