jqGrid 项目总结

  1. <!DOCTYPE HTML>  
  2. <html lang="en-US">  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title></title>  
  6. <!-- jqgrid 依赖于 jqueryui ，对应的主题需要自己从jqueryui的网上下载。   -->  
  7. <link rel="stylesheet" type="text/css" href="css/custom-jqgird/jquery-ui-1.8.16.custom.css" media="all"/>  
  8. <!-- ui.jqgrid.css 在下载的jqGrid包里  -->  
  9. <link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" media="all"/>  
  10. </head>  
  11. <body>  
  12.     <div class="tab-con">           
  13.         <div class="result-table">  
  14.             <table id="hrCalendar"></table> <div id="phrCalendar"></div>  
  15.         </div>  
  16.         <!--pagger 在这里我没有使用默认的分页，而是自己另外写的。-->  
  17.         <div class="digg ar">  
  18.             <a href="#2" target="_self" page="2" class=""><<</a>  
  19.             <a href="#2" target="_self" page="2" class="">上一页</a>  
  20.             <span><span class="digg-font">第</span><a href="#2" target="_self" page="2" class="">1</a>/<span id="totalNum">15</span><span class="digg-font">页</span></span>  
  21.             <a href="#2" target="_self" page="2" class="">下一页</a>  
  22.             <a href="#2" target="_self" page="2" class="">>></a>  
  23.         </div>  
  24.     </div>  
  25.   
  26.     <!-- js  -->  
  27.     <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>  
  28.     <!-- jqGrid de iln8 语言包，中文环境下必须安装grid.locale-cn.js，其他环境需要装对应的语言包 -->  
  29.     <script type="text/javascript" src="js/grid.locale-cn.js"></script>  
  30.     <!-- jqGrid的所有的压缩版。  -->  
  31.     <script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>  
  32.     <!-- js  以上这些在你下载的压缩包都有。-->  
  33.       
  34.     <!--jquery.tablednd.js 这个不属于jqGrid，这是另外一个jquery的插件，用来实现行间的拖动 -->  
  35.     <script type="text/javascript" src="js/jquery.tablednd.js"></script>  
  36.       
  37.     <script type="text/javascript">  
  38.     //js  
  39.     </script>  
  40.     <!--   js    -->  
  41. </body>  
  42. </html>  

 

 

view plain
  1. /* 
  2.     jqGrid 如何开始工作  （how jqGrid works  ） 
  3.     jqGrid依赖于jqueryui的css和主题包， 
  4.     从  www.jqueryui.com  下载 jquery-ui-custom.css和对应的主题包。 
  5.     从http://www.trirand.com/blog/?page_id=6 jqgrid的官网下载jqGrid，可以自定义，选择需要的插件，不会的同学可以全选，使用jqGrid的min版。 
  6.     想看源码的话 jqgrid git  https://github.com/tonytomov/jqGrid  ，可以从git下载，git下载的源码是分开的。  
  7.      
  8.     */  
  9.     var customOperate = {  
  10.         "url":"",  
  11.         customEdit:function(url, rowId){  
  12.             this.url = this.url || "www.baidu.com"  
  13.             //console.log("编辑",url, rowId);  
  14.             return false;  
  15.         },  
  16.         customRedoPub:function(url, rowId){  
  17.             //console.log("撤销",url, rowId);  
  18.             return false;  
  19.         },  
  20.         customDel:function(url, rowId){  
  21.             //console.log("删除",url, rowId);  
  22.             return false;  
  23.         }  
  24.     };  
  25.       
  26.     jQuery(function(){  
  27.         /* 
  28.             jquery.tablednd.js  初始化拖动插件 
  29.         */  
  30.         jQuery("#hrCalendar").tableDnD({  
  31.             scrollAmount:100,   
  32.             topIndex:3,  
  33.             startIndex:0,  
  34.             onDrop:function(a, b){  
  35.                 //a 为 table，b为拖动的行  
  36.             },  
  37.             onDragStart:function(a, b){  
  38.                 //a 为 table，b为拖动的行  
  39.                 this.startIndex = $(b).index() ;  
  40.             },  
  41.             /* 
  42.                 @parm  a:拖动的行 
  43.                 @parm  b:释放鼠标左键时的行 
  44.                 @return boolean  是否可以拖动 
  45.             */  
  46.             onAllowDrop:function(a, b){  
  47.                 var $b = $(b), $bIndex = $b.index() ;  
  48.                 if( this.startIndex > this.topIndex && $bIndex > this.topIndex && $bIndex !== 0 ){  
  49.                     return true;  
  50.                 }else if( this.startIndex <= this.topIndex && $bIndex <= this.topIndex && $bIndex !== 0) {  
  51.                     return true;  
  52.                 }else{  
  53.                     return false;  
  54.                 }  
  55.             }  
  56.         });  
  57.           
  58.         /*jqGrid  
  59.             1、options 初始化参数 
  60.                  
  61.         */  
  62.         jQuery("#hrCalendar").jqGrid({   
  63.             url:'data/a.json',      //请求数据格式url  
  64.             datatype: "json",       //返回的数据类型  
  65.             colNames:['主显月份', '主题', '起始时间','结束时间','状态','执行操作'],     //header，表头显示的name  
  66.             colModel:[  //定义每列值的属性，具体的可以参见    colModel Options http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options  
  67.                 {name:'id',index:'id',  align:"center",width:50},         
  68.                 {name:'',index:'',  align:"center"},   
  69.                 {name:'',index:'',  align:"center"},   
  70.                 {name:'',index:'',  align:"center"},   
  71.                 {name:'',index:'', align:"center"},  
  72.                 {name:'note',index:'note',  sortable:false, align:"center"}  
  73.             ],   
  74.             rowNum:10,   
  75.             autowidth:true,         //width:auto;  
  76.             multiselect:true,       //true,第一列添加checkbox，可以全选  
  77.             multiselectWidth:51,    //checkbox 列宽  
  78.             height: 'auto',         //与width不同，设置height：auto，  
  79.             pagerpos:"right",       //是用默认分页的时候，分页页码在nav上的位置。  
  80.             hoverrows: false,       //鼠标经过行时hover样式，true，增加hover状态。  
  81.             altRows:true,           //是否隔行换色，  
  82.             altclass:"ui-state-highlight-hover",    //隔行换色的class。  
  83.             sortname: 'invdate',   
  84.             iewrecords: true,   
  85.             sortorder: "desc",   
  86.             beforeSelectRow:function(){             //事件：在选中行之前，返回true，选中行，返回false，不选中。  
  87.                 return false;  
  88.             },  
  89.             //@parm  data:返回的json对象  
  90.             loadComplete:function(data){            //加载完数据时，在回调函数中，生成分页。  
  91.                 $.customPager({  
  92.                     "page": data.page,              //当前页  
  93.                     "total": data.total,            //总页数  
  94.                     "records": data.records         //总记录数  
  95.                 })  
  96.             },  
  97.             gridComplete: function() {              //表格生成完成后的回调函数。  
  98.                 $("#_empty","#hrCalendar").addClass("nodrag nodrop");   
  99.                 jQuery("#hrCalendar").tableDnDUpdate();                         //更新jquery.tablednd.js插件的方法。          
  100.                   
  101.                 var rowIds = jQuery("#hrCalendar").jqGrid('getDataIDs');        //返回当前grid里所有数据的id  
  102.                   
  103.                 for(var i=0;i < rowIds.length;i++){  
  104.                     var rowId = rowIds[i];                    
  105.                     var content =  ['<a href="#" class="bluelink" onclick="customOperate.customEdit(\'\',' + rowId + ')">编辑内容</a>|',  
  106.                                     '<a href="#" class="redlink" onclick="customOperate.customRedoPub(\'\',' + rowId + ')">撤销发布</a>| ',  
  107.                                     '<a href="#" class="redlink" onclick="customOperate.customDel(\'\',' + rowId + ')">删除</a> '].join("");  
  108.                     //根据rowid来设定指定列的值。  
  109.                     jQuery("#hrCalendar").setCell(rowId,"note", content, "", { title:" "} );  
  110.                 }  
  111.             }  
  112.         });   
  113.           
  114.         $.customPager = function(options){  
  115.             var op = $.extend({  
  116.                 "page": 1,      //当前页  
  117.                 "total": 2,     //总页数  
  118.                 "records": 14   //总记录数  
  119.             }, options);  
  120.               
  121.             $("#totalNum").text(op.total);  
  122.               
  123.             var arr = $(".digg").find("a");  
  124.             var first = arr[0],   
  125.                 last = arr[4],   
  126.                 prev = arr[1],   
  127.                 next = arr[3],   
  128.                 cur = arr[2];  
  129.                   
  130.             $(first).attr("page", 1);  
  131.             $(last).attr("page", op.total);  
  132.             $(cur).attr("page", op.page).text(op.page);  
  133.               
  134.               
  135.             //上一页和第一页  
  136.             if( op.page <= 1 ){  
  137.                 $(prev).hide();   
  138.             }else{  
  139.                 $(prev).attr("page", op.page - 1);  
  140.                 $(prev).show();  
  141.             }  
  142.               
  143.             //下一页和最后一页  
  144.             if( op.page >= op.total ){  
  145.                 $(next).hide();  
  146.             }else{  
  147.                 $(next).attr("page", op.page + 1);  
  148.                 $(next).show() ;  
  149.             }  
  150.               
  151.             arr.click(function(){  
  152.                 var page = $(this).attr("page");  
  153.                 $("#hrCalendar").setGridParam({ "page": page });            //这个是用自己的分页很方便，只要设一下jqgrid的参数page就可以了。  
  154.                 $("#hrCalendar").trigger("reloadGrid");                     //页数变了，然后重新加载grid。  
  155.             })  
  156.         }  
  157.     })  


json 数据格式

 

 

view plain
  1. {  
  2.     "page": 2,  
  3.     "total": 5,  
  4.     "records": 14,  
  5.     "rows": [{  
  6.         "id": "14",  
  7.         "cell": ["2012年8月6日", "职称评定", "2011年8月1日", "2011年8月1日", "已发布", null]  
  8.     },{  
  9.         "id": "13",  
  10.         "cell": ["2011年8月1日", "职称评定", "2011年8月1日", "2011年8月1日", "已发布", null]  
  11.     }, {  
  12.         "id": "12",  
  13.         "cell": ["2011年8月1日", "休假规则", "2011年8月1日", "2011年8月1日", "已发布", null]  
  14.     }, {  
  15.         "id": "11",  
  16.         "cell": ["2011年5月1日", "年度调薪", "2011年8月1日", "2011年8月1日", "已发布", null]  
  17.     }, {  
  18.         "id": "10",  
  19.         "cell": ["2011年4月1日", "个人晋升", "2011年8月1日", "2011年8月1日", "已发布", null]  
  20.     }, {  
  21.         "id": "9",  
  22.         "cell": ["2010年5月1日", "公司福利", "2011年8月1日", "2011年8月1日", "已发布", null]  
  23.     }, {  
  24.         "id": "8",  
  25.         "cell": ["2011年8月1日", "职称评定", "2011年8月1日", "2011年8月1日", "已发布", null]  
  26.     }, {  
  27.         "id": "7",  
  28.         "cell": ["2011年3月1日", "休假规则", "2011年8月1日", "2011年8月1日", "已发布", null]  
  29.     }, {  
  30.         "id": "6",  
  31.         "cell": ["2010年8月1日", "公司福利", "2011年8月1日", "2011年8月1日", "已发布", null]  
  32.     }, {  
  33.         "id": "5",  
  34.         "cell": ["2011年8月1日", "个人晋升", "2011年8月1日", "2011年8月1日", "已发布", null]  
  35.     }, {  
  36.         "id": "4",  
  37.         "cell": ["2012年8月6日", "职称评定", "2011年8月1日", "2011年8月1日", "已发布", null]  
  38.     },{  
  39.         "id": "3",  
  40.         "cell": ["2012年8月6日", "职称评定", "2011年8月1日", "2011年8月1日", "已发布", null]  
  41.     },{  
  42.         "id": "2",  
  43.         "cell": ["2012年8月6日", "职称评定", "2011年8月1日", "2011年8月1日", "已发布", null]  
  44.     },{  
  45.         "id": "1",  
  46.         "cell": ["2012年8月6日", "职称评定", "2011年8月1日", "2011年8月1日", "已发布", null]  
  47.     }]  
  48. }  
posted @ 2011-11-03 17:32  郑文亮  阅读(1509)  评论(0)  编辑  收藏  举报