您的位置：首页 > 产品设计 > UI/UE

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

2017-09-04 10:15 344 查看

<%@ 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

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

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