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="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>

View Code

上述静态网页，这就是一条小龙为了做动态产生 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="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>

View Code

这个程式主要应用了上一篇如何用 javascript 动态呼叫函数的技巧，在 DataGrid init 前去呼叫 onBeforeInit 这个 function，这个就是一条小龙在前端框架中，为后端程式预留弹性的空间，当然后续读者在应用时，可以将这些init 分得更细，让后端程式有更明确的方式来呼叫。一条小龙在这边只是介绍其中的概念，所以会比较粗略一点。

~~~ 一条小龙 (babydragoner) ~~~