jqGrid 项目总结

拼搏现实的明天。 2022-06-18 04:45 186阅读 0赞

<!DOCTYPE HTML>
    <html lang="en-US">
    <head>
    <meta charset="UTF-8">
    <title></title>
    
    <link rel="stylesheet" type="text/css" href="css/custom-jqgird/jquery-ui-1.8.16.custom.css" media="all"/>
    
    <link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" media="all"/>
    </head>
    <body>
    	<div class="tab-con">			
    		<div class="result-table">
    			<table id="hrCalendar"></table> <div id="phrCalendar"></div>
    		</div>
    		
    		<div class="digg ar">
    			<a href="#2" target="_self" page="2" class=""><<</a>
    			<a href="#2" target="_self" page="2" class="">上一页</a>
    			<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>
    			<a href="#2" target="_self" page="2" class="">下一页</a>
    			<a href="#2" target="_self" page="2" class="">>></a>
    		</div>
    	</div>
    
    	
    	<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
    	
    	<script type="text/javascript" src="js/grid.locale-cn.js"></script>
    	
    	<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
    	
    	
    	
    	<script type="text/javascript" src="js/jquery.tablednd.js"></script>
    	
    	<script type="text/javascript">
    	//js
    	</script>
    	
    </body>
    </html>

/*
    	jqGrid 如何开始工作  （how jqGrid works  ）
    	jqGrid依赖于jqueryui的css和主题包，
    	从  www.jqueryui.com  下载 jquery-ui-custom.css和对应的主题包。
    	从http://www.trirand.com/blog/?page_id=6 jqgrid的官网下载jqGrid，可以自定义，选择需要的插件，不会的同学可以全选，使用jqGrid的min版。
    	想看源码的话 jqgrid git  https://github.com/tonytomov/jqGrid  ，可以从git下载，git下载的源码是分开的。	
    	
    	*/
    	var customOperate = {
    		"url":"",
    		customEdit:function(url, rowId){
    			this.url = this.url || "www.baidu.com"
    			//console.log("编辑",url, rowId);
    			return false;
    		},
    		customRedoPub:function(url, rowId){
    			//console.log("撤销",url, rowId);
    			return false;
    		},
    		customDel:function(url, rowId){
    			//console.log("删除",url, rowId);
    			return false;
    		}
    	};
    	
    	jQuery(function(){
    		/*
    			jquery.tablednd.js  初始化拖动插件
    		*/
    		jQuery("#hrCalendar").tableDnD({
    			scrollAmount:100, 
    			topIndex:3,
    			startIndex:0,
    			onDrop:function(a, b){
    				//a 为 table，b为拖动的行
    			},
    			onDragStart:function(a, b){
    				//a 为 table，b为拖动的行
    				this.startIndex = $(b).index() ;
    			},
    			/*
    				@parm  a:拖动的行
    				@parm  b:释放鼠标左键时的行
    				@return boolean  是否可以拖动
    			*/
    			onAllowDrop:function(a, b){
    				var $b = $(b), $bIndex = $b.index() ;
    				if( this.startIndex > this.topIndex && $bIndex > this.topIndex && $bIndex !== 0 ){
    					return true;
    				}else if( this.startIndex <= this.topIndex && $bIndex <= this.topIndex && $bIndex !== 0) {
    					return true;
    				}else{
    					return false;
    				}
    			}
    		});
    		
    		/*jqGrid 
    			1、options 初始化参数
    				
    		*/
    		jQuery("#hrCalendar").jqGrid({ 
    			url:'data/a.json', 		//请求数据格式url
    			datatype: "json", 		//返回的数据类型
    			colNames:['主显月份', '主题', '起始时间','结束时间','状态','执行操作'], 	//header，表头显示的name
    			colModel:[	//定义每列值的属性，具体的可以参见    colModel Options http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options
    				{name:'id',index:'id',  align:"center",width:50}, 		
    				{name:'',index:'',  align:"center"}, 
    				{name:'',index:'',  align:"center"}, 
    				{name:'',index:'',  align:"center"}, 
    				{name:'',index:'', align:"center"},
    				{name:'note',index:'note',  sortable:false, align:"center"}
    			], 
    			rowNum:10, 
    			autowidth:true, 		//width:auto;
    			multiselect:true,		//true,第一列添加checkbox，可以全选
    			multiselectWidth:51,	//checkbox 列宽
    			height: 'auto',			//与width不同，设置height：auto，
    			pagerpos:"right",		//是用默认分页的时候，分页页码在nav上的位置。
    			hoverrows: false,		//鼠标经过行时hover样式，true，增加hover状态。
    			altRows:true,			//是否隔行换色，
    			altclass:"ui-state-highlight-hover",	//隔行换色的class。
    			sortname: 'invdate', 
    			iewrecords: true, 
    			sortorder: "desc", 
    			beforeSelectRow:function(){				//事件：在选中行之前，返回true，选中行，返回false，不选中。
    				return false;
    			},
    			//@parm  data:返回的json对象
    			loadComplete:function(data){			//加载完数据时，在回调函数中，生成分页。
    				$.customPager({
    					"page": data.page,				//当前页
    					"total": data.total,			//总页数
    					"records": data.records			//总记录数
    				})
    			},
    			gridComplete: function() { 				//表格生成完成后的回调函数。
    				$("#_empty","#hrCalendar").addClass("nodrag nodrop"); 
    				jQuery("#hrCalendar").tableDnDUpdate(); 						//更新jquery.tablednd.js插件的方法。		
    				
    				var rowIds = jQuery("#hrCalendar").jqGrid('getDataIDs');		//返回当前grid里所有数据的id
    				
    				for(var i=0;i < rowIds.length;i++){
    					var rowId = rowIds[i];					
    					var content =  ['<a href="#" class="bluelink" οnclick="customOperate.customEdit(\'\',' + rowId + ')">编辑内容</a>|',
    									'<a href="#" class="redlink" οnclick="customOperate.customRedoPub(\'\',' + rowId + ')">撤销发布</a>| ',
    									'<a href="#" class="redlink" οnclick="customOperate.customDel(\'\',' + rowId + ')">删除</a> '].join("");
    					//根据rowid来设定指定列的值。
    					jQuery("#hrCalendar").setCell(rowId,"note", content, "", { title:" "} );
    				}
    			}
    		}); 
    		
    		$.customPager = function(options){
    			var op = $.extend({
    				"page": 1,		//当前页
    				"total": 2,		//总页数
    				"records": 14	//总记录数
    			}, options);
    			
    			$("#totalNum").text(op.total);
    			
    			var arr = $(".digg").find("a");
    			var first = arr[0], 
    				last = arr[4], 
    				prev = arr[1], 
    				next = arr[3], 
    				cur = arr[2];
    				
    			$(first).attr("page", 1);
    			$(last).attr("page", op.total);
    			$(cur).attr("page", op.page).text(op.page);
    			
    			
    			//上一页和第一页
    			if( op.page <= 1 ){
    				$(prev).hide(); 
    			}else{
    				$(prev).attr("page", op.page - 1);
    				$(prev).show();
    			}
    			
    			//下一页和最后一页
    			if( op.page >= op.total ){
    				$(next).hide();
    			}else{
    				$(next).attr("page", op.page + 1);
    				$(next).show() ;
    			}
    			
    			arr.click(function(){
    				var page = $(this).attr("page");
    				$("#hrCalendar").setGridParam({ "page": page });			//这个是用自己的分页很方便，只要设一下jqgrid的参数page就可以了。
    				$("#hrCalendar").trigger("reloadGrid");						//页数变了，然后重新加载grid。
    			})
    		}
    	})

json 数据格式

{
        "page": 2,
        "total": 5,
        "records": 14,
        "rows": [{
            "id": "14",
            "cell": ["2012年8月6日", "职称评定", "2011年8月1日", "2011年8月1日", "已发布", null]
        },{
            "id": "13",
            "cell": ["2011年8月1日", "职称评定", "2011年8月1日", "2011年8月1日", "已发布", null]
        }, {
            "id": "12",
            "cell": ["2011年8月1日", "休假规则", "2011年8月1日", "2011年8月1日", "已发布", null]
        }, {
            "id": "11",
            "cell": ["2011年5月1日", "年度调薪", "2011年8月1日", "2011年8月1日", "已发布", null]
        }, {
            "id": "10",
            "cell": ["2011年4月1日", "个人晋升", "2011年8月1日", "2011年8月1日", "已发布", null]
        }, {
            "id": "9",
            "cell": ["2010年5月1日", "公司福利", "2011年8月1日", "2011年8月1日", "已发布", null]
        }, {
            "id": "8",
            "cell": ["2011年8月1日", "职称评定", "2011年8月1日", "2011年8月1日", "已发布", null]
        }, {
            "id": "7",
            "cell": ["2011年3月1日", "休假规则", "2011年8月1日", "2011年8月1日", "已发布", null]
        }, {
            "id": "6",
            "cell": ["2010年8月1日", "公司福利", "2011年8月1日", "2011年8月1日", "已发布", null]
        }, {
            "id": "5",
            "cell": ["2011年8月1日", "个人晋升", "2011年8月1日", "2011年8月1日", "已发布", null]
        }, {
            "id": "4",
            "cell": ["2012年8月6日", "职称评定", "2011年8月1日", "2011年8月1日", "已发布", null]
        },{
            "id": "3",
            "cell": ["2012年8月6日", "职称评定", "2011年8月1日", "2011年8月1日", "已发布", null]
        },{
            "id": "2",
            "cell": ["2012年8月6日", "职称评定", "2011年8月1日", "2011年8月1日", "已发布", null]
        },{
            "id": "1",
            "cell": ["2012年8月6日", "职称评定", "2011年8月1日", "2011年8月1日", "已发布", null]
        }]
    }