这次项目中，应用例子的总结，该篇文章主要总结datagrid的使用方法。@H_301_1@
代码如下：@H_301_1@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <HTML> <HEAD> <<a href="/tag/Meta/" target="_blank" class="keywords">Meta</a> http-equiv="Content-Type" content="text/html; charset=UTF-8"> <<a href="/tag/Meta/" target="_blank" class="keywords">Meta</a> HTTP-EQUIV="pragma" CONTENT="no-cache"> <mce: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;} --></mce:style><style type="text/css" mce_bogus="1"> @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,#grid2 { width: 80%; height: 30em;//?? padding: 1px; } th {text-align:center;} </style> <mce:script type="text/javascript" src="../../../dojoroot/dojo/dojo.js" mce_src="dojoroot/dojo/dojo.js" djConfig="isDebug:false,par<a href="/tag/SEO/" title="SEO">SEO</a>nLoad: true"></mce:script> <mce:script type="text/javascript" src="js/common.js" mce_src="js/common.js" ></mce:script> <mce: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}); // --></mce:script> <mce:script type="text/javascript"><!-- var equal = Url.encode("="); /** 处理datagrid中的连接<a href="/tag/tiaozhuan/" target="_blank" class="keywords">跳转</a>问题，具体使用见下方 */ function SensorLayer4Format(value,rowIndex){ var grid = dijit.byId("grid"); //得到grid的handle var 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，<a href="/tag/daima/" target="_blank" class="keywords">代码</a>在common.js中。 /** 之下这些是返回相应的处理，value即使传进来的值，rowindex是当前处理的是第几项纪录，可以根据自己的需要进行<a href="/tag/xiugai/" target="_blank" class="keywords">修改</a> */ var stcp = "<a href="/" mce_href="/""/html/ips/log/ips_stat_sensor.html?url=ips_stat_sensor.<a href="/tag/PHP/" target="_blank" class="keywords">PHP</a>?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="/" mce_href="/""/html/ips/log/ips_stat_sensor.html?url=ips_stat_sensor.<a href="/tag/PHP/" target="_blank" class="keywords">PHP</a>?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="/" mce_href="/""/html/ips/log/ips_stat_sensor.html?url=ips_stat_sensor.<a href="/tag/PHP/" target="_blank" class="keywords">PHP</a>?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="/" mce_href="/""/html/ips/log/ips_stat_sensor.html?url=ips_stat_sensor.<a href="/tag/PHP/" target="_blank" class="keywords">PHP</a>?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; } } } //该<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>同上，不再赘述 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="/" mce_href="/""/html/ips/log/ips_qry_main.html?url=ips_qry_main.<a href="/tag/PHP/" target="_blank" class="keywords">PHP</a>?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="/" mce_href="/""/html/ips/log/ips_qry_main.html?url=ips_qry_main.<a href="/tag/PHP/" target="_blank" class="keywords">PHP</a>?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="/" mce_href="/""/html/ips/log/ips_qry_main.html?url=ips_qry_main.<a href="/tag/PHP/" target="_blank" class="keywords">PHP</a>?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="/" mce_href="/""/html/ips/log/ips_qry_main.html?url=ips_qry_main.<a href="/tag/PHP/" target="_blank" class="keywords">PHP</a>?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,"url_port")); var stcp = "<a href="/" mce_href="/""/html/ips/log/ips_stat_alerts.html?url=ips_stat_alerts.<a href="/tag/PHP/" target="_blank" class="keywords">PHP</a>?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="/" mce_href="/""/html/ips/log/ips_stat_alerts.html?url=ips_stat_alerts.<a href="/tag/PHP/" target="_blank" class="keywords">PHP</a>?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="/" mce_href="/""/html/ips/log/ips_stat_alerts.html?url=ips_stat_alerts.<a href="/tag/PHP/" target="_blank" class="keywords">PHP</a>?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="/" mce_href="/""/html/ips/log/ips_stat_alerts.html?url=ips_stat_alerts.<a href="/tag/PHP/" target="_blank" class="keywords">PHP</a>?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,"url_port")); var stcp = "<a href="/" mce_href="/""/html/ips/log/ips_stat_uaddr.html?url=ips_stat_uaddr.<a href="/tag/PHP/" target="_blank" class="keywords">PHP</a>?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="/" mce_href="/""/html/ips/log/ips_stat_uaddr.html?url=ips_stat_uaddr.<a href="/tag/PHP/" target="_blank" class="keywords">PHP</a>?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="/" mce_href="/""/html/ips/log/ips_stat_uaddr.html?url=ips_stat_uaddr.<a href="/tag/PHP/" target="_blank" class="keywords">PHP</a>?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="/" mce_href="/""/html/ips/log/ips_stat_uaddr.html?url=ips_stat_uaddr.<a href="/tag/PHP/" target="_blank" class="keywords">PHP</a>?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,"url_port")); var stcp = "<a href="/" mce_href="/""/html/ips/log/ips_stat_uaddr.html?url=ips_stat_uaddr.<a href="/tag/PHP/" target="_blank" class="keywords">PHP</a>?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="/" mce_href="/""/html/ips/log/ips_stat_uaddr.html?url=ips_stat_uaddr.<a href="/tag/PHP/" target="_blank" class="keywords">PHP</a>?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="/" mce_href="/""/html/ips/log/ips_stat_uaddr.html?url=ips_stat_uaddr.<a href="/tag/PHP/" target="_blank" class="keywords">PHP</a>?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="/" mce_href="/""/html/ips/log/ips_stat_uaddr.html?url=ips_stat_uaddr.<a href="/tag/PHP/" target="_blank" class="keywords">PHP</a>?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; } } } // --></mce:script> <mce:script type="text/javascript"><!-- //定义布局，或者可以直接在<a href="/tag/HTMLdaima/" target="_blank" class="keywords">HTML代码</a>中编写，写法这里不再提供 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",formatter:UniqueEventsLayer4Format},{ name: "Src.Addr.",field: "srcip",formatter:SrcIpLayer4Format},{ name: "Dest.Addr.",field: "dstip",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<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>在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,'url_port':'443 ','port':'443 / tcp [sans] [tantalo] [sstats] ','totalnum':25,'first':'2011-01-20 17:43:17.706+008','last':'2011-01-20 17:43:18.978+008'}]} pagesize:每页展示多少数据 allrows：该项<a href="/tag/chaxun/" target="_blank" class="keywords">查询</a>共有多少数据 current_view：当前是第几页，第一页为0 */ // --></mce:script> </HEAD> <BODY class="tundra"> <div style="text-align:center;margin:auto" mce_style="text-align:center;margin:auto"><span id="pagelabel"></span></div> <BR> <TABLE CELLSPACING=0 CELLPADDING=2 BORDER=0 WIDTH="100%" BGCOLOR="#000000"> <TR> <TD><TABLE CELLSPACING=0 CELLPADDING=0 BORDER=0 WIDTH="100%" BGCOLOR="#FFFFFF"> <!-- 开始定义datagrid --> <TR> <TD> <!-- 说明 escapeHTMLInData<a href="/tag/shuxing/" target="_blank" class="keywords">属性</a>为false，则不会展示源<a href="/tag/daima/" target="_blank" class="keywords">代码</a>，例如，返回的数据包含<a href="/tag/HTMLdaima/" target="_blank" class="keywords">HTML代码</a>，如果不设置或者这是为true，则会将源<a href="/tag/daima/" target="_blank" class="keywords">代码</a>展示出来，如果设置成false，则和html<a href="/tag/yemian/" target="_blank" class="keywords">页面</a>在浏览器中展现的<a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a>相同 --> <div dojoType="dojox.grid.DataGrid" class="tundra" jsid="grid" id="grid" escapeHTMLInData="false" style="width:100%" store="jsonStore" query="{ id: '*' }" rowsPerPage="20" rowSelector="5px" structure="layoutFlickrData"> </div> <!-- 这部分是提供<a href="/tag/fenye/" target="_blank" class="keywords">分页</a>使用的原始数据，返回根据返回的数据类型进行填值 --> <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> <!-- <a href="/tag/fenye/" target="_blank" class="keywords">分页</a>按钮以及<a href="/tag/fenye/" target="_blank" class="keywords">分页</a>下拉列表框 --> <div style="padding: 0px; position: static; text-indent: 0px; padding: 0px;" mce_style="padding: 0px; position: static; text-indent: 0px; padding: 0px;" class="dojoxGridHeader" dojoAttachPoint="buttonBar"> <div style="width: 100%; text-indent: 0px; padding: 0px;" class="dojoxGridCell"> <button dojoType="dijit.form.Button" onClick="prevPage();" style="float: left;" mce_style="float: left;">prev</button> <button dojoType="dijit.form.Button" onClick="nextPage();" style="float: right" mce_style="float: right">next</button> <span id="pagenum" style="text-align:center" mce_style="text-align:center"> </span> </div> </div> </td> </tr> </TABLE></TD> </TR> </TABLE> <P> </P> </BODY> </HTML> @H_301_1@
详情查看附件，附件包含源代码以及辅助代码@H_301_1@
http://download.csdn.net/source/3005466@H_301_1@
dojo datagrid分页例子：@H_301_1@
http://download.csdn.net/source/3005473@H_301_1@
