datagrid之修改

最新推荐文章于 2024-07-24 22:27:20 发布

zw._123

最新推荐文章于 2024-07-24 22:27:20 发布

阅读量100

点赞数

文章标签： stm32

本文链接：https://blog.csdn.net/zwhy_123/article/details/120335651

版权

思维导图：

1.添加操作列

参考api文档：

book.js文件中新增操作列，

2.添加弹窗与表单

dialog控件和form控件

userManage.jsp:

<%@ 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">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/static/js/book.js"></script>
<title>存放书籍的页面</title>
</head>
<body>
	<input type="hidden" id="ctx"
		value="${pageContext.request.contextPath }">
	<div id="tb">
		<input class="easyui-textbox" id="bname" name="bname"
			style="width: 20%; padding-left: 10px"
			data-options="label:'书名:',required:true"> <a id="btn-search"
			href="#" class="easyui-linkbutton"
			data-options="iconCls:'icon-search'">搜索</a> <a id="" href="#"
			class="easyui-linkbutton" data-options="iconCls:'icon-search'">新增</a>
	</div>
	<table id="dg"></table>

	<div id="dd" class="easyui-dialog" title="编辑窗体"
		style="width: 500px; height: 200px;"
		data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#bb'">
		<!-- 提交的from表单 -->
		<form id="ff" action="" method="post">
			<div style="margin-bottom: 20px">
				<input class="easyui-textbox" name="bname" style="width: 100%"
					data-options="label:'书名:',required:true">
			</div>
			<div style="margin-bottom: 20px">
				<input class="easyui-textbox" name="price" style="width: 100%"
					data-options="label:'价格:',required:true">
			</div>
			<input type="hidden" id="book_id" name="bid" value="">
		</form>

		<div style="text-align: center; padding: 5px 0">
			<a href="javascript:void(0)" class="easyui-linkbutton"
				onclick="submitForm()" style="width: 80px">Submit</a> <a
				href="javascript:void(0)" class="easyui-linkbutton"
				onclick="clearForm()" style="width: 80px">Clear</a>
		</div>
	</div>
</body>
</html>

book.js文件：

$(function(){
	/**
	 * 在easyui中，点击下一页上一页等默认的分页效果，携带的参数是page/rows
	 * bootstrap,点击下一页上一页等默认的分页效果，携带的参数是page/offset
	 */
	$('#dg').datagrid({    
	    url:$("#ctx").val()+'/book.action?methodName=datagrid',   
	    pagination:true,
	    fitColums:true,
	    toolbar:'#tb',
	    columns:[[   
	        {field:'bid',title:'id',width:100},    
	        {field:'bname',title:'名称',width:100},    
	        {field:'price',title:'价格',width:100,align:'right'},  
	        {field:'操作',title:'操作',width:100,align:'right',formatter: function(value,row,index){
				return '<a href="javascript:void(0);" onclick="edit();">修改</a>';
			}
}
	    ]]    
	});
	
	$('#btn-search').click(function(){
		$('#dg').datagrid('load',{
			bname:$("#bname").val()
		})	
	}); 
})

function edit(){
//	dialog对话框窗口的方法扩展自window（窗口）
//	$("#win").window("open");
//	联想到$("#dd").dialog("open");
	$("#dd").dialog("open");
	/**
	 * 将选中的数据表格对应数据填写到表单中
	 * 1.datagrid控件获取对应行数据row
	 * 2.对应的行数据row填写form控件
	 */
	var row= $('#dg').datagrid("getSelected");
	console.log(row);
//	注意：要与form表单的name属性相对应，否则无法回填数据
	$('#ff').form('load',row);
}

function submitForm(){
	$('#ff').form('submit', {
		url: $("#ctx").val()+'/book.action?methodName=edit',
		success: function(data){
//			alert(data);
			if(data==1){
				$("#dd").dialog("close");
				$('#dg').datagrid('reload');
			}
		}
	});

}

弹窗：

3.回显数据

function edit(){
//   dialog对话框窗口的方法扩展自window（窗口）
//   $("#win").window("open");
//   联想到$("#dd").dialog("open");
   $("#dd").dialog("open");
   /**
   * 将选中的数据表格对应数据填写到表单中
   * 1.datagrid控件获取对应行数据row
   * 2.对应的行数据row填写form控件
   */
   var row= $('#dg').datagrid("getSelected");
   console.log(row);
//   注意：要与form表单的name属性相对应，否则无法回填数据
   $('#ff').form('load',row);
}

窗体：

BookDao:

public void edit(Book book) throws Exception {
super.executeUpdate("update t_mvc_book set bname=?,price=? where bid=?", book, new String[] {"bname","price","bid"});
}

BookAction:

public String edit(HttpServletRequest req, HttpServletResponse resp) {
       try {
           bookDao.edit(book);
           ResponseUtil.writeJson(resp, 1);
       } catch (Exception e) {
           e.printStackTrace();
           try {
               ResponseUtil.writeJson(resp, 0);
           } catch (Exception e1) {
               e1.printStackTrace();
           }
       }
       return null;
   }

判断是否修改成功及无刷新datagrid数据表格：

function submitForm(){
   $('#ff').form('submit', {
       url: $("#ctx").val()+'/book.action?methodName=edit',
       success: function(data){
//           alert(data);
           if(data==1){
               $("#dd").dialog("close");
               $('#dg').datagrid('reload');
           }
       }
   });
}

zw._123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
datagrid之修改

思维导图：1.添加操作列参考api文档：book.js文件中新增操作列，2.添加弹窗与表单 dialog控件和form控件userManage.jsp:<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 ...
复制链接

扫一扫