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

最新推荐文章于 2023-04-26 08:39:32 发布

原创最新推荐文章于 2023-04-26 08:39:32 发布 · 2.9k 阅读

CC 4.0 BY-SA版权

本文介绍了如何在EasyUI的DataGrid中动态新增Toolbar按钮，强调了JavaScript应用中商业逻辑应放在服务器端，以降低耦合性和提高可维护性。通过静态网页的实践和ASP.NET结合的例子，展示了动态生成button的方法，帮助开发者理解和实现EasyUI的动态操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

View Code

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

文章结束给大家分享下程序员的一些笑话语录：程序语言综述
CLIPPER 程序员不去真的猎捕大象，他们只是购买大象部分的库然后花几年的时间试图综合它们。
DBASE 程序员只在夜间猎捕大象，因为那时没人会注意到他们还在使用石弓。
FOXPRO 程序员开始使用更新更好的步枪，这使他们花掉比实际狩猎更多的时间学习新的射击技术。
C 程序员拒绝直接购买步枪，宁可带着钢管和一个移动式机器车间到非洲，意欲从零开始造一枝完美的步枪。
PARADOX 程序员去非洲时带着好莱坞关于猎捕大象的电影剧本，他们认为照剧本行事就会逮到一头大象。
ACCESS 程序员在没有任何猎象经验的经验下就出发了，他们穿着华丽的猎装、带着全部装备，用漂亮的望远镜找到了大象，然后发觉忘了带扳机。
RBASE 程序员比大象还要稀少，事实上，如果一头大象看到了一个RBASE程序员，对他是个幸运日。
VISUAL ACCESS 程序员装上子弹、举起步枪、瞄准大象，这使大象感到可笑，究竟谁逃跑。他们无法抓住大象，因为由于他们对多重控制的偏爱，他们的吉普车有太多的方向盘因而无法驾驶。
ADA、APL和FORTRAN 程序员与圣诞老人和仙女一样是虚构的。
COBOL 程序员对和自己一样濒临灭绝的大象寄予了深切的同情。