zoukankan      html  css  js  c++  java

  • 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",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.             autotrue,         //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. }  
  • 相关阅读:
    2016去哪儿编程题：乘坐公交
    lintcode:交错正负数
    lintcode:Ugly Number I
    KMP算法
    适配器模式
    迭代器模式
    命令模式
    外观模式
    工厂方法模式
    代理模式
  • 原文地址：https://www.cnblogs.com/zhwl/p/2234813.html
Copyright © 2011-2022 走看看