dojo应用之dataGrid
这次项目中，应用例子的总结，该篇文章主要总结datagrid的使用方法。
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><HTML><HEAD><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><META HTTP-EQUIV="pragma" CONTENT="no-cache"><style type="text/css">@import "../../../dojoroot/dojo/resources/dojo.css";@import "../../../dojoroot/dojox/grid/resources/Grid.css";@import "../../../dojoroot/dijit/themes/tundra/tundra.css";body {font-size: 0.9em;font-family: Geneva, Arial, Helvetica, sans-serif;}.heading {font-weight: bold;padding-bottom: 0.25em;}#grid, #grid2 {width: 80%;height: 30em;//??padding: 1px; } th {text-align:center;}</style><script type="text/javascript" style="max-width: 100%;height: auto;width: auto\9;" src="http://www.reader8.com/../dojoroot/dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script> <script type="text/javascript" src="js/common.js" ></script> <script type="text/javascript">dojo.require("dijit.dijit");dojo.require("dojox.grid.DataGrid");dojo.require("dojo.data.ItemFileWriteStore");dojo.require("dojo.data.ItemFileReadStore");dojo.require("dojo.parser");var emptyData = { identifier: 'id', label: 'id', items: []}; var jsonStore = new dojo.data.ItemFileWriteStore({data: emptyData}); </script> <script type="text/javascript">var equal = Url.encode("="); /** 处理datagrid中的连接跳转问题，具体使用见下方 */function SensorLayer4Format(value, rowIndex){var grid = dijit.byId("grid"); //得到grid的handlevar prototype = grid.store.getValue(grid.getItem(rowIndex), "porttype"); //得到grid的store之中的具体的某个数值，‘prototype’是数值中item:[{..}]之中的一个值。var proto = grid.store.getValue(grid.getItem(rowIndex), "port_proto");//同上var url_port = Url.encode(grid.store.getValue(grid.getItem(rowIndex), "url_port"));//对得到的数据进行encode，代码在common.js中。/** 之下这些是返回相应的处理，value即使传进来的值，rowindex是当前处理的是第几项纪录，可以根据自己的需要进行修改*/var stcp = "<a href=\"/html/ips/log/ips_stat_sensor.html?url=ips_stat_sensor.php?tcp_port[0][0]=+&tcp_port[0][1]=layer4_sport&tcp_port[0][2]="+equal+"&tcp_port[0][3]="+url_port+"&tcp_port[0][4]=+&tcp_port[0][5]=+&tcp_port_cnt=1&layer4=TCP&sort_order=&num_result_rows=-1¤t_view=-1\">" +value+"</a>";var sudp = "<a href=\"/html/ips/log/ips_stat_sensor.html?url=ips_stat_sensor.php?udp_port[0][0]=+&udp_port[0][1]=layer4_sport&udp_port[0][2]="+equal+"&udp_port[0][3]="+url_port+"&udp_port[0][4]=+&udp_port[0][5]=+&udp_port_cnt=1&layer4=UDP&sort_order=&num_result_rows=-1¤t_view=-1\">" +value+ "</a>";var dtcp = "<a href=\"/html/ips/log/ips_stat_sensor.html?url=ips_stat_sensor.php?tcp_port[0][0]=+&tcp_port[0][1]=layer4_dport&tcp_port[0][2]="+equal+"&tcp_port[0][3]="+url_port+"&tcp_port[0][4]=+&tcp_port[0][5]=+&tcp_port_cnt=1&layer4=TCP&sort_order=&num_result_rows=-1¤t_view=-1\">" +value+"</a>";var dudp = "<a href=\"/html/ips/log/ips_stat_sensor.html?url=ips_stat_sensor.php?udp_port[0][0]=+&udp_port[0][1]=layer4_dport&udp_port[0][2]="+equal+"&udp_port[0][3]="+url_port+"&udp_port[0][4]=+&udp_port[0][5]=+&udp_port_cnt=1&layer4=UDP&sort_order=&num_result_rows=-1¤t_view=-1\">" +value+ "</a>";if(prototype ==1){if(proto == 17){ return sudp;}else{ return stcp;}}else{ if(proto == 17){ return dudp;}else{ return dtcp;}}}//该函数同上，不再赘述function OccurrencesLayer4Format(value, rowIndex){var grid = dijit.byId("grid");var prototype = grid.store.getValue(grid.getItem(rowIndex), "porttype");var proto = grid.store.getValue(grid.getItem(rowIndex), "port_proto");var url_port = Url.encode(grid.store.getValue(grid.getItem(rowIndex), "url_port"));var stcp = "<a href=\"/html/ips/log/ips_qry_main.html?url=ips_qry_main.php?tcp_port[0][0]=+&tcp_port[0][1]=layer4_sport&tcp_port[0][2]="+equal+"&tcp_port[0][3]="+url_port+"&tcp_port[0][4]=+&tcp_port[0][5]=+&tcp_port_cnt=1&layer4=TCP&sort_order=&num_result_rows=-1¤t_view=-1&new=1&submit=Query+DB&sort_order=sig_a\">" +value+"</a>";var sudp = "<a href=\"/html/ips/log/ips_qry_main.html?url=ips_qry_main.php?udp_port[0][0]=+&udp_port[0][1]=layer4_sport&udp_port[0][2]="+equal+"&udp_port[0][3]="+url_port+"&udp_port[0][4]=+&udp_port[0][5]=+&udp_port_cnt=1&layer4=UDP&sort_order=&num_result_rows=-1¤t_view=-1&new=1&submit=Query+DB&sort_order=sig_a\">" +value+ "</a>";var dtcp = "<a href=\"/html/ips/log/ips_qry_main.html?url=ips_qry_main.php?tcp_port[0][0]=+&tcp_port[0][1]=layer4_dport&tcp_port[0][2]="+equal+"&tcp_port[0][3]="+url_port+"&tcp_port[0][4]=+&tcp_port[0][5]=+&tcp_port_cnt=1&layer4=TCP&sort_order=&num_result_rows=-1¤t_view=-1&new=1&submit=Query+DB&sort_order=sig_a\">" +value+"</a>";var dudp = "<a href=\"/html/ips/log/ips_qry_main.html?url=ips_qry_main.php?udp_port[0][0]=+&udp_port[0][1]=layer4_dport&udp_port[0][2]="+equal+"&udp_port[0][3]="+url_port+"&udp_port[0][4]=+&udp_port[0][5]=+&udp_port_cnt=1&layer4=UDP&sort_order=&num_result_rows=-1¤t_view=-1&new=1&submit=Query+DB&sort_order=sig_a\">" +value+ "</a>";if(prototype ==1){if(proto == 17){ return sudp;}else{ return stcp;}}else{ if(proto == 17){ return dudp;}else{ return dtcp;}}}function UniqueEventsLayer4Format(value, rowIndex){var grid = dijit.byId("grid");var prototype = grid.store.getValue(grid.getItem(rowIndex), "porttype");var proto = grid.store.getValue(grid.getItem(rowIndex), "port_proto");var url_port = Url.encode(grid.store.getValue(grid.getItem(rowIndex), "url_port"));var stcp = "<a href=\"/html/ips/log/ips_stat_alerts.html?url=ips_stat_alerts.php?tcp_port[0][0]=+&tcp_port[0][1]=layer4_sport&tcp_port[0][2]="+equal+"&tcp_port[0][3]="+url_port+"&tcp_port[0][4]=+&tcp_port[0][5]=+&tcp_port_cnt=1&layer4=TCP&sort_order=&num_result_rows=-1¤t_view=-1&sort_order=sig_a\">" +value+"</a>";var sudp = "<a href=\"/html/ips/log/ips_stat_alerts.html?url=ips_stat_alerts.php?udp_port[0][0]=+&udp_port[0][1]=layer4_sport&udp_port[0][2]="+equal+"&udp_port[0][3]="+url_port+"&udp_port[0][4]=+&udp_port[0][5]=+&udp_port_cnt=1&layer4=UDP&sort_order=&num_result_rows=-1¤t_view=-1&sort_order=sig_a\">" +value+ "</a>";var dtcp = "<a href=\"/html/ips/log/ips_stat_alerts.html?url=ips_stat_alerts.php?tcp_port[0][0]=+&tcp_port[0][1]=layer4_dport&tcp_port[0][2]="+equal+"&tcp_port[0][3]="+url_port+"&tcp_port[0][4]=+&tcp_port[0][5]=+&tcp_port_cnt=1&layer4=TCP&sort_order=&num_result_rows=-1¤t_view=-1&sort_order=sig_a\">" +value+"</a>";var dudp = "<a href=\"/html/ips/log/ips_stat_alerts.html?url=ips_stat_alerts.php?udp_port[0][0]=+&udp_port[0][1]=layer4_dport&udp_port[0][2]="+equal+"&udp_port[0][3]="+url_port+"&udp_port[0][4]=+&udp_port[0][5]=+&udp_port_cnt=1&layer4=UDP&sort_order=&num_result_rows=-1¤t_view=-1&sort_order=sig_a\">" +value+ "</a>";if(prototype ==1){if(proto == 17){ return sudp;}else{ return stcp;}}else{ if(proto == 17){ return dudp;}else{ return dtcp;}}}function SrcIpLayer4Format(value, rowIndex){var grid = dijit.byId("grid");var prototype = grid.store.getValue(grid.getItem(rowIndex), "porttype");var proto = grid.store.getValue(grid.getItem(rowIndex), "port_proto");var url_port = Url.encode(grid.store.getValue(grid.getItem(rowIndex), "url_port"));var stcp = "<a href=\"/html/ips/log/ips_stat_uaddr.html?url=ips_stat_uaddr.php?tcp_port[0][0]=+&tcp_port[0][1]=layer4_sport&tcp_port[0][2]="+equal+"&tcp_port[0][3]="+url_port+"&tcp_port[0][4]=+&tcp_port[0][5]=+&tcp_port_cnt=1&layer4=TCP&sort_order=&num_result_rows=-1¤t_view=-1&addr_type=1&sort_order=addr_a\">" +value+"</a>";var sudp = "<a href=\"/html/ips/log/ips_stat_uaddr.html?url=ips_stat_uaddr.php?udp_port[0][0]=+&udp_port[0][1]=layer4_sport&udp_port[0][2]="+equal+"&udp_port[0][3]="+url_port+"&udp_port[0][4]=+&udp_port[0][5]=+&udp_port_cnt=1&layer4=UDP&sort_order=&num_result_rows=-1¤t_view=-1&addr_type=1&sort_order=addr_a\">" +value+ "</a>";var dtcp = "<a href=\"/html/ips/log/ips_stat_uaddr.html?url=ips_stat_uaddr.php?tcp_port[0][0]=+&tcp_port[0][1]=layer4_dport&tcp_port[0][2]="+equal+"&tcp_port[0][3]="+url_port+"&tcp_port[0][4]=+&tcp_port[0][5]=+&tcp_port_cnt=1&layer4=TCP&sort_order=&num_result_rows=-1¤t_view=-1&addr_type=1&sort_order=addr_a\">" +value+"</a>";var dudp = "<a href=\"/html/ips/log/ips_stat_uaddr.html?url=ips_stat_uaddr.php?udp_port[0][0]=+&udp_port[0][1]=layer4_dport&udp_port[0][2]="+equal+"&udp_port[0][3]="+url_port+"&udp_port[0][4]=+&udp_port[0][5]=+&udp_port_cnt=1&layer4=UDP&sort_order=&num_result_rows=-1¤t_view=-1&addr_type=1&sort_order=addr_a\">" +value+ "</a>";if(prototype ==1){if(proto == 17){ return sudp;}else{ return stcp;}}else{ if(proto == 17){ return dudp;}else{ return dtcp;}}}function DstIpLayer4Format(value, rowIndex){var grid = dijit.byId("grid");var prototype = grid.store.getValue(grid.getItem(rowIndex), "porttype");var proto = grid.store.getValue(grid.getItem(rowIndex), "port_proto");var url_port = Url.encode(grid.store.getValue(grid.getItem(rowIndex), "url_port"));var stcp = "<a href=\"/html/ips/log/ips_stat_uaddr.html?url=ips_stat_uaddr.php?tcp_port[0][0]=+&tcp_port[0][1]=layer4_sport&tcp_port[0][2]="+equal+"&tcp_port[0][3]="+url_port+"&tcp_port[0][4]=+&tcp_port[0][5]=+&tcp_port_cnt=1&layer4=TCP&sort_order=&num_result_rows=-1¤t_view=-1&addr_type=2&sort_order=addr_a\">" +value+"</a>";var sudp = "<a href=\"/html/ips/log/ips_stat_uaddr.html?url=ips_stat_uaddr.php?udp_port[0][0]=+&udp_port[0][1]=layer4_sport&udp_port[0][2]="+equal+"&udp_port[0][3]="+url_port+"&udp_port[0][4]=+&udp_port[0][5]=+&udp_port_cnt=1&layer4=UDP&sort_order=&num_result_rows=-1¤t_view=-1&addr_type=2&sort_order=addr_a\">" +value+ "</a>";var dtcp = "<a href=\"/html/ips/log/ips_stat_uaddr.html?url=ips_stat_uaddr.php?tcp_port[0][0]=+&tcp_port[0][1]=layer4_dport&tcp_port[0][2]="+equal+"&tcp_port[0][3]="+url_port+"&tcp_port[0][4]=+&tcp_port[0][5]=+&tcp_port_cnt=1&layer4=TCP&sort_order=&num_result_rows=-1¤t_view=-1&addr_type=2&sort_order=addr_a\">" +value+"</a>";var dudp = "<a href=\"/html/ips/log/ips_stat_uaddr.html?url=ips_stat_uaddr.php?udp_port[0][0]=+&udp_port[0][1]=layer4_dport&udp_port[0][2]="+equal+"&udp_port[0][3]="+url_port+"&udp_port[0][4]=+&udp_port[0][5]=+&udp_port_cnt=1&layer4=UDP&sort_order=&num_result_rows=-1¤t_view=-1&addr_type=2&sort_order=addr_a\">" +value+ "</a>";if(prototype ==1){if(proto == 17){ return sudp;}else{ return stcp;}}else{ if(proto == 17){ return dudp;}else{ return dtcp;}}}</script><script type="text/javascript">//定义布局，或者可以直接在html代码中编写，写法这里不再提供var layoutFlickrData ={cells:{[[{ name: "Port", field: "port", width: '11%' },{ name: "Sensor", field: "sensornum", width: '15%' ,formatter:SensorLayer4Format}, { name: "Occurrences", field: "totalnum", width: '11%',formatter:OccurrencesLayer4Format}, { name: "Unique Events", field: "uniquenum", width: '11%' ,formatter:UniqueEventsLayer4Format}, { name: "Src.Addr.", field: "srcip", width: '11%' ,formatter:SrcIpLayer4Format}, { name: "Dest.Addr.", field: "dstip", width: '11%' ,formatter:DstIpLayer4Format}, { name: "First", field: "first", width: '15%' }, { name: "Last", field: "last", width: '15%' }]]}}; dojo.addOnLoad(function(){dojo.connect(window, "resize", grid, "resize");}); var url = getURL();if(!url){ alert("Bad url!");}else{updateData(webpath+url);//update函数在common.js中提供 }/**数据类型：{'identifier':'id','idAttribute':'id','pagesize':48,'current_view':0,'allrows':261,'label':'id','items':[{'id':0,'porttype':1,'port_proto':'6','url_port':'80 ','port':'80 [sans] [tantalo] [sstats] ','sensornum':1,'totalnum':6,'uniquenum':1,'srcip':1,'dstip':1,'first':'2011-01-20 17:26:53.073+008','last':'2011-01-20 17:26:53.073+008'},{'id':1,'porttype':1,'port_proto':'6','url_port':'443 ','port':'443 / tcp [sans] [tantalo] [sstats] ','sensornum':1,'totalnum':25,'uniquenum':1,'srcip':1,'dstip':1,'first':'2011-01-20 17:43:17.706+008','last':'2011-01-20 17:43:18.978+008'}]}pagesize:每页展示多少数据allrows：该项查询共有多少数据current_view：当前是第几页，第一页为0*/</script></HEAD><BODY BGCOLOR="#000000"> <TR> <TD><TABLE CELLSPACING=0 CELLPADDING=0 BORDER=0 WIDTH="100%" BGCOLOR="#FFFFFF"> <!-- 开始定义datagrid --> <TR> <TD> <!-- 说明 escapeHTMLInData属性为false，则不会展示源代码，例如，返回的数据包含html代码，如果不设置或者这是为true，则会将源代码展示出来，如果设置成false，则和html页面在浏览器中展现的效果相同 --> <div dojoType="dojox.grid.DataGrid" id="grid" escapeHTMLInData="false" style="width:100%"store="jsonStore" query="{ id: '*' }" rowsPerPage="20" rowSelector="5px" structure="layoutFlickrData"> </div> <!-- 这部分是提供分页使用的原始数据，返回根据返回的数据类型进行填值 --> <input type="hidden" name="num_result_rows" id="num_result_rows" value="" ></input> <input type="hidden" name="current_view" id="current_view" value="" ></input> <input type="hidden" name="pagesize" id="pagesize" value="" ></input> </TD> </TR> <tr><td><!-- 分页按钮以及分页下拉列表框 --><div style="padding: 0px; position: static; text-indent: 0px; padding: 0px;" dojoAttachPoint="buttonBar"> <div style="width: 100%; text-indent: 0px; padding: 0px;" onClick="prevPage();" style="float: left;">prev</button> <button dojoType="dijit.form.Button" onClick="nextPage();" style="float: right">next</button> <span id="pagenum" style="text-align:center"> </span> </div> </div></td></tr> </TABLE></TD> </TR> </TABLE><P> </P></BODY></HTML>?
详情查看附件，附件包含源代码、效果图以及辅助代码，令有dojo datagrid分页源代码
?
?