动态静态网页EasyUI DataGrid 动态新增 Toolbar

PS:今天上午，非常郁闷，有很多简单基础的问题搞得我有些迷茫，哎，代码几天不写就忘。目前又不当COO，还是得用心记代码哦！

    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,