JQuery插件 之 jqgrid（一）

jqgrid入门

最近用到JQuery的grid插件，在网上查过很多资料，最后在jqgrid和flexigrid中选择。经过认真思考，最后决定选择jqgrid，原因很简单，本人菜鸟，jqgrid中的功能较多，没有大量的时间修改flexigrid的代码。

一. 现在需要的文件

      1. jqgrid文件包

      2. jqgrid依托jqueryUI，所以需要先去官网下载jqueryUI。

      3. 下载jquery

二. 引入需要的文件（注意顺序）

       1. 引入样式

           <link href="<%=path %>/css/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css">
           <link rel="stylesheet" type="text/css" media="screen" href="<%=path %>/jsp/ledgermanager/ledgerquery/css/ui.jqgrid.css" />  

       2. 引入js（注意顺序）

           <script type="text/javascript" src="<%=path %>/js/jquery/jquery-1.8.2.min.js"></script>     <!-- jquery文件，需要最先引入 -->

           <script type="text/javascript" src="<%=path %>/js/jquery/jquery-ui-1.10.3.custom.min.js"></script>    <!-- jqueryUI文件 -->

          <script src="<%=path %>/jsp/ledgermanager/ledgerquery/src/i18n/grid.locale-cn.js" type="text/javascript"></script>   <!-- jqgrid 国际化文件，中文提示信息，需要在jqGrid.js之前引入 -->

          <script src="<%=path %>/jsp/ledgermanager/ledgerquery/js/jquery.jqGrid.min.js" type="text/javascript"></script>  <!-- jqgrid 核心文件 -->

三. 创建列表，和分页栏

       1. jsp中添加两个标签

           <table id="list4"></table>  <!-- 用于显示列表 -->
           <div id="pager2"></div>     <!-- 用于显示分页栏 -->

       2. js中添加列表数据

        

$(function(){
	 var PostData={year:"2013",projectcode:"value"};  
	    jQuery("#list4").jqGrid({  
	    url:"ledgerquery!getJson.action", //java返回json数据  
	    datatype:"json",  
	    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], //列明  
	    postData: PostData,  
	    colModel:[  
	        {name:'id',index:'id', width:20},   
	        {name:'invdate',index:'invdate', width:90},  
	        {name:'name',index:'name', width:100},  
	        {name:'amount',index:'amount', width:80, align:"right"},  
	        {name:'tax',index:'tax', width:80, align:"right"},        
	        {name:'total',index:'total', width:80,align:"right"},         
	        {name:'note',index:'note', width:150, sortable:false}         
	    ],  
	    height:500,  
	    width:1000,  
	    multiselect: true,  
	    //caption: "Manipulating Array Data",  
	    rowNum:10,  
//	      autowidth:true,  
	  //    onSelectRow:function a(id,status){}, //点击行事件  
	   //   ondblClickRow:function b(rowid,iRow,iCol,e){alert(rowid)},//双击事件  
	   //   onSortCol:function c(){alert()},  
	   // onSortCol: function (index, iCol, sortorder) {  
	    //  alert(sortorder);  
	        //var oData = GetParams();  
	        //oData.OrderName = index;  
	        //oData.OrderType = sortorder;  
	        //RefreshGrid(oData);//重新加载表格  
	   // },  
	    rowList:[10,20,30],  
	    pager: '#pager2',  
	    sortname: 'id',  
	    viewrecords: true,  
	    sortorder: "desc",  
	    jsonReader : {     
	        root:"invdata",     
	        page: "currpage",     
	        total: "totalpages",     
	        records: "totalrecords",  
	        repeatitems: false,  
	        id: "0"  
	     }  
	}); 
})

四. java中接收和返回数据（数据没有从数据库查询，只是接收数据）

       

String page = request.getParameter("page"); // 取得当前页数,注意这是jqgrid自身的参数
        String rows = request.getParameter("rows"); // 取得每页显示行数，,注意这是jqgrid自身的参数
        String sortorder  = request.getParameter("sord"); // 排序asc、desc
        String sortorder1  = request.getParameter("sidx"); // 点击的列
        String year  = request.getParameter("year"); 
response.getWriter().write("{\"totalpages\":12,\"currpage\":1,\"totalrecords\":50,\"invdata\":[" +
				"{\"id\":\"1\",\"invdate\":\"2007-10-01\",\"name\":\"test\",\"note\":\"note\",\"amount\":\"200.00\",\"tax\":\"10.00\",\"total\":\"210.00\"},"+
				"{\"id\":\"2\",\"invdate\":\"2007-10-02\",\"name\":\"test2\",\"note\":\"note2\",\"amount\":\"300.00\",\"tax\":\"20.00\",\"total\":\"320.00\"},"+
				"{\"id\":\"3\",\"invdate\":\"2007-09-01\",\"name\":\"test3\",\"note\":\"note3\",\"amount\":\"400.00\",\"tax\":\"30.00\",\"total\":\"430.00\"},"+
				"{\"id\":\"4\",\"invdate\":\"2007-10-04\",\"name\":\"test\",\"note\":\"note\",\"amount\":\"200.00\",\"tax\":\"10.00\",\"total\":\"210.00\"},"+
				"{\"id\":\"5\",\"invdate\":\"2007-10-05\",\"name\":\"test2\",\"note\":\"note2\",\"amount\":\"300.00\",\"tax\":\"20.00\",\"total\":\"320.00\"},"+
				"{\"id\":\"6\",\"invdate\":\"2007-09-06\",\"name\":\"test3\",\"note\":\"note3\",\"amount\":\"400.00\",\"tax\":\"30.00\",\"total\":\"430.00\"},"+
				"{\"id\":\"7\",\"invdate\":\"2007-10-04\",\"name\":\"test\",\"note\":\"note\",\"amount\":\"200.00\",\"tax\":\"10.00\",\"total\":\"210.00\"},"+
				"{\"id\":\"8\",\"invdate\":\"2007-10-03\",\"name\":\"test2\",\"note\":\"note2\",\"amount\":\"300.00\",\"tax\":\"20.00\",\"total\":\"320.00\"},"+
				"{\"id\":\"9\",\"invdate\":\"2007-09-01\",\"name\":\"test3\",\"note\":\"note3\",\"amount\":\"400.00\",\"tax\":\"30.00\",\"total\":\"430.00\"}]}");

后期将写一篇，整体设计，包括持久层，vo，js封装等。

jqgrid常用方法：http://www.helloweba.com/view-blog-163.html