jqGrid与Struts2的结合应用（三）转

peak

浏览: 599843 次

最近访客更多访客>>

playbox_r

andnnl

junshu

zjy_369

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery

最近刚刚从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一并拷到目录下：

以下是各文件内容

index.html

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" >
< title > Insert title here </ title >
< link rel = "stylesheet" type = "text/css" media = "screen" href = "css/ui-smoothness/jquery-ui-1.7.2.custom.css" />
< link rel = "stylesheet" type = "text/css" media = "screen" href = "css/ui.jqgrid.css" />
< scrip src = "js/jquery-1.3.2.min.js" type = "text/javascrip" > </ scrip >
< scrip src = "js/jquery-ui-1.7.2.min.js" type = "text/javascrip" > </ scrip >
< scrip src = "js/plugin/jqGrid/i18n/grid.locale-en.js" type = "text/javascrip" > </ scrip >
< scrip src = "js/plugin/jqGrid/jquery.jqGrid.min.js" type = "text/javascrip" > </ scrip >
< scrip src = "js/index.js" type = "text/javascrip" > </ scrip >
< style >
body {font-size: 12px;}
</ style >
</ head >
< body >
< div id = "content" >
< table id = "colch" > </ table >
< div id = "pcolch" > </ div >
< div id = "filter" style = "margin-left:30%;display:none" > Search Invoices </ div >
</ div >
</ body >
</ html >

index.js

Js代码

$(document).ready( function () {
var $mygrid = $( "#colch" ).jqGrid( {
url : 'table.xml' ,
datatype : "xml" ,
autowidth : true ,
viewrecords : true ,
sortable : true ,
rowNum : 10,
height : '100%' ,
pager : '#pcolch' ,
sortname : 'invdate' ,
sortorder : "desc" ,
ExpandColumn : 'note' ,
caption : "Column Chooser Example" ,
rowList : [ 10, 20, 30 ],
colNames : [ 'Inv No' , 'Date' , 'Client' , 'Amount' , 'Tax' , 'Total' , 'Notes' ],
colModel : [ {
name : 'id' ,
index : 'id' ,
editable : true ,
editoptions : {
readonly : true ,
size : 10
},
width : 55
}, {
name : 'invdate' ,
index : 'invdate' ,
editable : true ,
searchoptions : {
dataInit : function (el) {
$(el).datepicker( {
dateFormat : 'yy-mm-dd'
});
}
},
width : 90
}, {
name : 'name' ,
index : 'name asc, invdate' ,
editable : true ,
width : 100
}, {
name : 'amount' ,
index : 'amount' ,
editable : true ,
width : 80
}, {
name : 'tax' ,
index : 'tax' ,
editable : true ,
width : 80
}, {
name : 'total' ,
index : 'total' ,
editable : true ,
width : 80
}, {
name : 'note' ,
index : 'note' ,
editable : true ,
sortable : false
} ]
});
$mygrid.jqGrid('navGrid' , '#pcolch' , {
view : true ,
search : false
}, {
// edit options
height : 290,
reloadAfterSubmit : false ,
jqModal : false ,
closeOnEscape : true ,
bottominfo : "Fields marked with (*) are required"
}, {
// add options
height : 290,
reloadAfterSubmit : false ,
jqModal : false ,
closeOnEscape : true ,
bottominfo : "Fields marked with (*) are required" ,
closeAfterAdd : true
});
// toggle search row button
$("#colch" ).jqGrid( 'navButtonAdd' , "#pcolch" , {
caption : "Toggle" ,
title : "Toggle Search Toolbar" ,
buttonicon : 'ui-icon-pin-s' ,
onClickButton : function () {
$mygrid[0].toggleToolbar();
}
});
// clean search value button
$("#colch" ).jqGrid( 'navButtonAdd' , "#pcolch" , {
caption : "Clear" ,
title : "Clear Search" ,
buttonicon : 'ui-icon-refresh' ,
onClickButton : function () {
$mygrid[0].clearToolbar();
}
});
// select display column button
$("#colch" ).jqGrid( 'navButtonAdd' , '#pcolch' , {
caption : "Columns" ,
title : "Reorder Columns" ,
onClickButton : function () {
jQuery("#colch" ).jqGrid( 'columnChooser' , {
done : function (perm) {
if (perm) {
this .jqGrid( "remapColumns" , perm, true );
var gwdth = this .jqGrid( "getGridParam" , "width" );
this .jqGrid( "setGridWidth" , gwdth);
}
}
});
}
});
$("#colch" ).jqGrid( 'filterToolbar' );
});