jqGrid与Struts2的结合应用(三)转

最近刚刚从ExtJS转到JQuery,对于我这个大多数时间都写后台的人始终不是件太简单的事。不过看了几本JQuery的书,上网Google了一大堆插件,真是觉得当初悔不该选ExtJS这个死板的东东下手学习。

 

客户要一个类似ExtJS Grid的列表,自己写吧闲麻烦,找了个jqGrid的插件看了下,发现这东西确实不错,ExtJS Grid有的功能它基本上都有了,有些甚至还超出了我的预想。就是不知道实际应用起来如何,稳不稳定,暂且再当一次小白鼠吧。

 

http://www.trirand.com/blog/?page_id=6 ,先去官网上下下来,解压后把js和css目录下的文件拷到工程目录,另外该插件还需要JQuery UI,将JQuery,JQuery UI一并拷到目录下:

 

jqGrid与Struts2的结合应用(三)转_第1张图片

 

以下是各文件内容

 

index.html

Html代码   收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >   
  2. < html >   
  3.     < head >   
  4.         < meta   http-equiv = "Content-Type"   content = "text/html; charset=UTF-8" >   
  5.         < title > Insert title here </ title >   
  6.         < link   rel = "stylesheet"   type = "text/css"   media = "screen"   href = "css/ui-smoothness/jquery-ui-1.7.2.custom.css"   />   
  7.         < link   rel = "stylesheet"   type = "text/css"   media = "screen"   href = "css/ui.jqgrid.css"   />   
  8.         < scrip   src = "js/jquery-1.3.2.min.js"   type = "text/javascrip" > </ scrip >   
  9.         < scrip   src = "js/jquery-ui-1.7.2.min.js"   type = "text/javascrip" > </ scrip >   
  10.         < scrip   src = "js/plugin/jqGrid/i18n/grid.locale-en.js"   type = "text/javascrip" > </ scrip >   
  11.         < scrip   src = "js/plugin/jqGrid/jquery.jqGrid.min.js"   type = "text/javascrip" > </ scrip >   
  12.         < scrip   src = "js/index.js"   type = "text/javascrip" > </ scrip >   
  13.         < style >   
  14.             body {font-size: 12px;}  
  15.         </ style >   
  16.     </ head >   
  17.     < body >   
  18.         < div   id = "content" >   
  19.             < table   id = "colch" > </ table >   
  20.             < div   id = "pcolch" > </ div >   
  21.             < div   id = "filter"   style = "margin-left:30%;display:none" > Search Invoices </ div >   
  22.         </ div >   
  23.     </ body >   
  24. </ html >   
 

index.js

Js代码   收藏代码
  1. $(document).ready( function () {  
  2.     var  $mygrid = $( "#colch" ).jqGrid( {  
  3.         url : 'table.xml' ,  
  4.         datatype : "xml" ,  
  5.         autowidth : true ,  
  6.         viewrecords : true ,  
  7.         sortable : true ,  
  8.         rowNum : 10,  
  9.         height : '100%' ,  
  10.         pager : '#pcolch' ,  
  11.         sortname : 'invdate' ,  
  12.         sortorder : "desc" ,  
  13.         ExpandColumn : 'note' ,  
  14.         caption : "Column Chooser Example" ,  
  15.         rowList : [ 10, 20, 30 ],  
  16.         colNames : [ 'Inv No' 'Date' 'Client' 'Amount' 'Tax' 'Total' 'Notes'  ],  
  17.         colModel : [ {  
  18.             name : 'id' ,  
  19.             index : 'id' ,  
  20.             editable : true ,  
  21.             editoptions : {  
  22.                 readonly : true ,  
  23.                 size : 10  
  24.             },  
  25.             width : 55  
  26.         }, {  
  27.             name : 'invdate' ,  
  28.             index : 'invdate' ,  
  29.             editable : true ,  
  30.             searchoptions : {  
  31.                 dataInit : function (el) {  
  32.                     $(el).datepicker( {  
  33.                         dateFormat : 'yy-mm-dd'   
  34.                     });  
  35.                 }  
  36.             },  
  37.             width : 90  
  38.         }, {  
  39.             name : 'name' ,  
  40.             index : 'name asc, invdate' ,  
  41.             editable : true ,  
  42.             width : 100  
  43.         }, {  
  44.             name : 'amount' ,  
  45.             index : 'amount' ,  
  46.             editable : true ,  
  47.             width : 80  
  48.         }, {  
  49.             name : 'tax' ,  
  50.             index : 'tax' ,  
  51.             editable : true ,  
  52.             width : 80  
  53.         }, {  
  54.             name : 'total' ,  
  55.             index : 'total' ,  
  56.             editable : true ,  
  57.             width : 80  
  58.         }, {  
  59.             name : 'note' ,  
  60.             index : 'note' ,  
  61.             editable : true ,  
  62.             sortable : false   
  63.         } ]  
  64.     });  
  65.   
  66.     $mygrid.jqGrid('navGrid' '#pcolch' , {  
  67.         view : true ,  
  68.         search : false   
  69.     }, {  
  70.         // edit options   
  71.         height : 290,  
  72.         reloadAfterSubmit : false ,  
  73.         jqModal : false ,  
  74.         closeOnEscape : true ,  
  75.         bottominfo : "Fields marked with (*) are required"   
  76.     }, {  
  77.         // add options   
  78.         height : 290,  
  79.         reloadAfterSubmit : false ,  
  80.         jqModal : false ,  
  81.         closeOnEscape : true ,  
  82.         bottominfo : "Fields marked with (*) are required" ,  
  83.         closeAfterAdd : true   
  84.     });  
  85.   
  86.     // toggle search row button   
  87.     $("#colch" ).jqGrid( 'navButtonAdd' "#pcolch" , {  
  88.         caption : "Toggle" ,  
  89.         title : "Toggle Search Toolbar" ,  
  90.         buttonicon : 'ui-icon-pin-s' ,  
  91.         onClickButton : function () {  
  92.             $mygrid[0].toggleToolbar();  
  93.         }  
  94.     });  
  95.   
  96.     // clean search value button   
  97.     $("#colch" ).jqGrid( 'navButtonAdd' "#pcolch" , {  
  98.         caption : "Clear" ,  
  99.         title : "Clear Search" ,  
  100.         buttonicon : 'ui-icon-refresh' ,  
  101.         onClickButton : function () {  
  102.             $mygrid[0].clearToolbar();  
  103.         }  
  104.     });  
  105.   
  106.     // select display column button   
  107.     $("#colch" ).jqGrid( 'navButtonAdd' '#pcolch' , {  
  108.         caption : "Columns" ,  
  109.         title : "Reorder Columns" ,  
  110.         onClickButton : function () {  
  111.             jQuery("#colch" ).jqGrid( 'columnChooser' , {  
  112.                 done : function (perm) {  
  113.                     if  (perm) {  
  114.                         this .jqGrid( "remapColumns" , perm,  true );  
  115.                         var  gwdth =  this .jqGrid( "getGridParam" "width" );  
  116.                         this .jqGrid( "setGridWidth" , gwdth);  
  117.                     }  
  118.                 }  
  119.   
  120.             });  
  121.         }  
  122.     });  
  123.   
  124.     $("#colch" ).jqGrid( 'filterToolbar' );  
  125. });  
 

table.xml

Xml代码   收藏代码
  1. <? xml   version = "1.0"   encoding = "UTF-8" ?>   
  2. < rows >   
  3.     < page > 1 </ page >   
  4.     < total > 3 </ total >   
  5.     < records > 56 </ records >   
  6.     < row   id = '1' >   
  7.         < cell > 1 </ cell >   
  8.         < cell > 2010-01-23 </ cell >   
  9.         < cell > test </ cell >   
  10.         < cell > note </ cell >   
  11.         < cell > 200.00 </ cell >   
  12.         < cell > 10.00 </ cell >   
  13.         < cell > 210.00 </ cell >   
  14.     </ row >   
  15.     < row   id = '2' >   
  16.         < cell > 2 </ cell >   
  17.         < cell > 2010-01-23 </ cell >   
  18.         < cell > test </ cell >   
  19.         < cell > note </ cell >   
  20.         < cell > 200.00 </ cell >   
  21.         < cell > 10.00 </ cell >   
  22.         < cell > 210.00 </ cell >   
  23.     </ row >   
  24.     < row   id = '3' >   
  25.         < cell > 3 </ cell >   
  26.         < cell > 2010-01-23 </ cell >   
  27.         < cell > test </ cell >   
  28.         < cell > note </ cell >   
  29.         < cell > 200.00 </ cell >   
  30.         < cell > 10.00 </ cell >   
  31.         < cell > 210.00 </ cell >   
  32.     </ row >   
  33.     < row   id = '4' >   
  34.         < cell > 4 </ cell >   
  35.         < cell > 2010-01-23 </ cell >   
  36.         < cell > test </ cell >   
  37.         < cell > note </ cell >   
  38.         < cell > 200.00 </ cell >   
  39.         < cell > 10.00 </ cell >   
  40.         < cell > 210.00 </ cell >   
  41.     </ row >   
  42.     < row   id = '5' >   
  43.         < cell > 5 </ cell >   
  44.         < cell > 2010-01-23 </ cell >   
  45.         < cell > test </ cell >   
  46.         < cell > note </ cell >   
  47.         < cell > 200.00 </ cell >   
  48.         < cell > 10.00 </ cell >   
  49.         < cell > 210.00 </ cell >   
  50.     </ row >   
  51.     < row   id = '6' >   
  52.         < cell > 6 </ cell >   
  53.         < cell > 2010-01-23 </ cell >   
  54.         < cell > test </ cell >   
  55.         < cell > note </ cell >   
  56.         < cell > 200.00 </ cell >   
  57.         < cell > 10.00 </ cell >   
  58.         < cell > 210.00 </ cell >   
  59.     </ row >   
  60.     < row   id = '7' >   
  61.         < cell > 7 </ cell >   
  62.         < cell > 2010-01-23 </ cell >   
  63.         < cell > test </ cell >   
  64.         < cell > note </ cell >   
  65.         < cell > 200.00 </ cell >   
  66.         < cell > 10.00 </ cell >   
  67.         < cell > 210.00 </ cell >   
  68.     </ row >   
  69.     < row   id = '8' >   
  70.         < cell > 8 </ cell >   
  71.         < cell > 2010-01-23 </ cell >   
  72.         < cell > test </ cell >   
  73.         < cell > note </ cell >   
  74.         < cell > 200.00 </ cell >   
  75.         < cell > 10.00 </ cell >   
  76.         < cell > 210.00 </ cell >   
  77.     </ row >   
  78.     < row   id = '9' >   
  79.         < cell > 9 </ cell >   
  80.         < cell > 2010-01-23 </ cell >   
  81.         < cell > test </ cell >   
  82.         < cell > note </ cell >   
  83.         < cell > 200.00 </ cell >   
  84.         < cell > 10.00 </ cell >   
  85.         < cell > 210.00 </ cell >   
  86.     </ row >   
  87.     < row   id = '10' >   
  88.         < cell > 10 </ cell >   
  89.         < cell > 2010-01-23 </ cell >   
  90.         < cell > test </ cell >   
  91.         < cell > note </ cell >   
  92.         < cell > 200.00 </ cell >   
  93.         < cell > 10.00 </ cell >   
  94.         < cell > 210.00 </ cell >   
  95.     </ row >   
  96. </ rows >   
 

以下是最终效果截图

jqGrid与Struts2的结合应用(三)转_第2张图片

 

查看

jqGrid与Struts2的结合应用(三)转_第3张图片

 

添加

jqGrid与Struts2的结合应用(三)转_第4张图片

 

编辑

jqGrid与Struts2的结合应用(三)转_第5张图片

 

搜索

jqGrid与Struts2的结合应用(三)转_第6张图片

 

自定义显示列

jqGrid与Struts2的结合应用(三)转_第7张图片

你可能感兴趣的:(struts2)