jqgrid按钮、主题皮肤和弹窗

最新推荐文章于 2025-05-18 23:21:56 发布

原创最新推荐文章于 2025-05-18 23:21:56 发布 · 4.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jqgrid #layer #主题 #弹出框

html 同时被 3 个专栏收录

11 篇文章

订阅专栏

JavaScrip

9 篇文章

订阅专栏

jqgrid

2 篇文章

订阅专栏

本文记录了在学习jqgrid过程中如何更换主题皮肤，并分享了找到的一个可用主题资源。同时，介绍了如何将layer弹出框与jqgrid结合使用的经验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近学习jqgrid表格，想更换主题皮肤，但是网上找的很多更换主题的方法都没用，然后我之前无意中找到了一篇文章，上面给的链接下载的主题刚好我可以用。然后就想记录下来并分享！

首先先看代码：

<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<title>夏季主题jqgrid表格</title>
	<link rel="stylesheet" type="text/css" href="jqgrid/css/ui.jqgrid.css">
	<!--<link rel="stylesheet" type="text/css" style="white-space:pre" href="jqgrid/jquery.ui/jquery-ui.css">-->
	
        <!-- 主题 -->
	<!--<link rel="stylesheet" type="text/css" href="black-tie/jquery-ui.css" />-->
	<!--<link rel="stylesheet" type="text/css" href="flick/jquery-ui.css" />-->
	<!--<link rel="stylesheet" type="text/css" href="hot-sneaks/jquery-ui.css" />-->
	<!--<link rel="stylesheet" type="text/css" href="pepper-grinder/jquery-ui.css" />-->
	<link rel="stylesheet" type="text/css" href="sunny/jquery-ui.css" />
	
	<script type="text/javascript" src="jqgrid/js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="jqgrid/js/i18n/grid.locale-cn.js"></script>
	<script type="text/javascript" src="jqgrid/js/jquery.jqGrid.min.js"></script>
	<script type="text/javascript" src="jqgrid/jquery.ui/jquery-ui.js"></script>
	<script src="layer/layer.js"></script>
	
	<style>
		.ui-jqgrid .ui-jqgrid-htable .ui-th-div{
			height:25px;
		}
		.ui-jqgrid .ui-pg-selbox, .ui-jqgrid .ui-jqgrid-toppager .ui-pg-selbox{
			height: 22px;
			font-size: 15px;
		}
	</style>
</head>
<body>
	<table id="list"></table>
	<div id="pager"></div>
	<form method="post" name="order" id="order" style="display:none;width: 350px;margin-left: 72px;margin-top: 40px;"> 
		<fieldset> 
			<legend>修改数据</legend> 
			<table> 
				<tbody> 
					<tr> 
						<td>ID:</td> 
						<td><input type="text" name="id" readonly=true id="invid" /></td> 
					</tr> 
					<tr> 
						<td>姓名:</td> 
						<td><input type="text" name="name" /></td> 
					</tr> 
					<tr> 
						<td>年龄:</td> 
						<td><input type="text" name="age" /></td> 
					</tr> 
					<tr> 
						<td>身高:</td> 
						<td><input type="text" name="high" /></td> 
					</tr> 
					<tr> 
						<td>体重:</td> 
						<td><input type="text" name="weight" /></td> 
					</tr> 
					<tr> 
						<td>爱好:</td> 
						<td><input type="text" name="like" /></td> 
					</tr> 
					<tr> 
						<td>经历:</td> 
						<td><input type="text" name="experience" /></td> 
					</tr> 
					<tr> 
						<td>&nbsp;</td> 
						<td><input type="button" id="savedata" value="Save" /></td> 
					</tr> 
				</tbody> 
			</table> 
		</fieldset> 
	</form>
	<script type="text/javascript">
//		var openDialog4Adding = function() {  
//			alert("add Demo");			
//		};  
//		var openDialog4Updating = function(rowid) { // (6) 接受选中行的id为参数  
//		};  
//		var openDialog4Deleting = function(rowid) { // (8) 接受选中行的id为参数  
//			alert("delete Demo");
//		};
		
		$("#list").jqGrid({        
		   	url:'data/JSONData.json',//请求数据的地址
			datatype: "json",
		   	colNames:['Id','姓名', '年龄','身高','体重','爱好','经历'],
			//jqgrid主要通过下面的索引信息与后台传过来的值对应
		   	colModel:[
			   	{name:'id',index:'id', width:200},
			   	{name:'name',index:'name', width:200},
			   	{name:'age',index:'age', width:300},
				{name:'high',index:'high', width:200},
			   	{name:'weight',index:'weight', width:200},
			   	{name:'like',index:'like', width:300},
				{name:'experience',index:'experience', width:300},
		    ],
		   	caption:"我是jqgrid的标题",
			rownumbers: true,//显示序号
		    rowNum : 10,
		    rowList : [ 10, 20, 30 ],
		    pager : '#pager',
		    sortname : 'id',
		    recordpos : 'right',
			multiselect : true,//是否可以多选
			loadonce:true,//分页功能实现
		    height:300,
			width:1000,
		    viewrecords : true
		});
		$("#list").jqGrid('navGrid', '#pager', {
		    add : false,
		    del : false,
		    edit : false,
		    position : 'left',
		    //addfunc : openDialog4Adding,    // (1) 点击添加按钮，则调用openDialog4Adding方法  
		    //editfunc : openDialog4Updating, // (2) 点击编辑按钮，则调用openDialog4Updating方法  
		    //delfunc : openDialog4Deleting,  // (3) 点击删除按钮，则调用openDialog4Deleting方法  
		    //alerttext : "请选择需要操作的数据行!"  // (4) 当未选中任何行而点击编辑、删除、查看按钮时，弹出的提示信息  
	 	}).navButtonAdd('#pager',{         
		   	caption:"",       
		   	buttonicon:"ui-icon-pencil",          
		   	onClickButton: function(){          
		    	var gsr = jQuery("#list").jqGrid('getGridParam', 'selrow'); //获取选中行的数据
	  			if (gsr) { 
	  				jQuery("#list").jqGrid('GridToForm', gsr, "#order"); 
	  				layer.open({
						type: 1,//页面层
						title:['修改','font-size:20px;background-color:pink;color:#fff'],
						area: ['500px', '500px','background-color:lightblue'],
						fixed: false, //不固定
						maxmin: true,//页面最大化和最小化
						anim: 6,//抖动
						content: $('#order'),
						btn:['确定','取消','哦'],
						btnAlign:'c',
						btn3:function(){
							layer.alert("123");
						}
					});
	  			}else{ 
	  				layer.alert("请选择需要操作的数据行!");
	  			}	  			
		    },       
		    position:"last"      
		});
		jQuery("#savedata").click(function() { 
			var invid = jQuery("#invid").val(); 
			if (invid) { 
				jQuery("#list").jqGrid('FormToGrid', invid, "#order"); 
			} 
		});
	</script>
</body>
</html>