jqGrid 项目总结

最新推荐文章于 2023-11-07 22:47:05 发布

ly115176236

最新推荐文章于 2023-11-07 22:47:05 发布

阅读量5k

点赞数

分类专栏： javascript 文章标签： function class null stylesheet jquery url

本文链接：https://blog.csdn.net/ly115176236/article/details/6829642

版权

javascript 专栏收录该内容

11 篇文章

订阅专栏

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<!-- jqgrid 依赖于 jqueryui ，对应的主题需要自己从jqueryui的网上下载。	-->
<link rel="stylesheet" type="text/css" href="css/custom-jqgird/jquery-ui-1.8.16.custom.css" media="all"/>
<!-- ui.jqgrid.css 在下载的jqGrid包里	-->
<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>
		<!--pagger 在这里我没有使用默认的分页，而是自己另外写的。-->
		<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>

	<!-- js	-->
	<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
	<!-- jqGrid de iln8 语言包，中文环境下必须安装grid.locale-cn.js，其他环境需要装对应的语言包	-->
	<script type="text/javascript" src="js/grid.locale-cn.js"></script>
	<!-- jqGrid的所有的压缩版。	-->
	<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
	<!-- js	以上这些在你下载的压缩包都有。-->
	
	<!--jquery.tablednd.js 这个不属于jqGrid，这是另外一个jquery的插件，用来实现行间的拖动 -->
	<script type="text/javascript" src="js/jquery.tablednd.js"></script>
	
	<script type="text/javascript">
	//js
	</script>
	<!--   js	-->
</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]
    }]
}