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,