黑马day45EasyUI修改dataGrid一行数据页面代码。

最新推荐文章于 2022-04-12 20:07:39 发布

原创最新推荐文章于 2022-04-12 20:07:39 发布 · 685 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用EasyUI和Ajax技术的商品管理页面实现案例，详细展示了如何通过EasyUI搭建美观实用的表格展示界面，并利用Ajax进行数据的异步更新。

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" type="text/css" href="../css/easyui.css">
<link rel="stylesheet" type="text/css" href="../css/icon.css">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>

<script type="text/javascript">
	//===JQuery页面加载完毕执行。
	$(function() {
		$('#dg').datagrid({
			url : '${pageContext.request.contextPath}/GetProductHavePage',
			columns : [ [ {
				field : 'pid',
				title : 'Code',
				width : 100
			}, {
				field : 'pname',
				title : 'Name',
				width : 100
			}, {
				field : 'shop_price',
				title : 'Price',
				width : 100,
				align : 'right'
			}, {
				field : 'pdesc',
				title : '描述',
				width : '300px'
			}, {
				field : 'pimage',
				title : '图片',
				width : '100px',
				formatter : function(value, row, index) {
					return "<img src='../" + value + "' width='100%' />";
				}

			} ] ],
			pagination : true,
			pageList : [ 5, 10, 15 ]
		});
	});
	
	function myUpt(){
		//===打开一个窗口。===【div id="dd"】
		$("#dd").window("open");
		//回显===//===调用getSelected方法
		var j = $("#dg").datagrid("getSelected");//===Json对象。
		//填充===【form id="uptPro"】
		$("#uptPro").form("load",j);//===表单填充Json对象j的数据。
	}
	
	function myClose(){
		//===【div id="dd"】
		$("#dd").window("close");
	}
	
	/*
		===以 ajax 的方式提交表单。
		==######【EasyUI第一次见？】学Ajax没学？Yes===
		【网站前台页面使用Bootstrap，表单提交有form，不需要Ajax方式；所以前面没讲（这里用到才讲）；
		   网站后台页面使用EasyUI，表单提交。常需要Ajax方式提交表单。常见应用：修改表单回显的数据】
	*/
	function mySave(){
		//以 ajax 的方式提交表单。==######【EasyUI第一次见？】学Ajax没学？Yes===
		$('#uptPro').form({    
		    url:"${pageContext.request.contextPath}/UptPro",    
		    success:function(data){    
				if("yes" == data){
					$("#dd").window("close");
					$("#dg").datagrid("reload","${pageContext.request.contextPath}/GetProductHavePage");
				}
		    }    
		});    
		// submit the form    
		$('#uptPro').submit(); 
	}
</script>
</head>
<body>
	<div id="dd" class="easyui-dialog" title="My Dialog"
		style="width: 400px; height: 200px;"
		data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#liangGe'">
		<form id="uptPro" method="post">
			<input type="hidden" name="pid" />
			<table border="1" width="100%" class="imagetable">
				<tr>
					<td>商品名称</td>
					<td><input type="text" name="pname" /></td>
				</tr>

				<tr>
					<td>商品价格</td>
					<td><input type="text" name="shop_price" /></td>
				</tr>
				<tr>
					<td>商品图片【没有上传】</td>
					<td><input type="text" name="pimage" /></td>
				</tr>
				<tr>
					<td>商品是否热门</td>
					<td><input type="radio" name="is_hot" value="0"
						checked="checked" />不热门 <input type="radio" name="is_hot"
						value="1" />热门</td>
				</tr>
			</table>
		</form>

		<div id="liangGe">
			<a href="#" class="easyui-linkbutton" onclick="mySave()">保存</a> 
			<a href="#" class="easyui-linkbutton" onclick="myClose()">关闭</a>
		</div>

	</div>

	<a id="btn" href="#" class="easyui-linkbutton"
		data-options="iconCls:'icon-edit'" onclick="myUpt()">修改商品</a>
	<table id="dg"></table>
	<div>test</div>
	</table>

</body>
</html>