Datagrid之修改

时刻干饭

于 2021-10-12 16:00:20 发布

阅读量97

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/lszzz_/article/details/120725333

版权

1.增加修改的链接

插入画线的代码

{field:'操作',title:'操作',width:100,align:'center',formatter: function(value,row,index){
return '<a href="javascript:void(0);" οnclick="edit();">修改</a>';
}

里面有一个edit（）方法，

书写edit方法

注意：edit方法要放到$(function() {}外面

function edit() {
	//dialog对话框窗口的方法扩展自window(窗口)，
	// $("#win").window("open");
	//联想到$("#dd").dialog("open");
	$("#dd").dialog("open");
}

2.form表单窗口

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

3.写form表单，给dialog窗体绑定提交数据的按钮

<%@ 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/gray/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="btn-search" 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>

4.数据回显

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

5.dao包书写修改方法

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

②子控制器判断是否关闭窗口

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;
	}

③、submitForm()方法（对应确认修改按钮）

结果：如果等于1，证明修改提交成功，并且关闭窗口，顺便刷新数据

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');
 
			}
		}
	});
 
}

结果展示

图中选中此行，修改如图所示

修改后展示

自动刷新数据并且关闭修改窗口

时刻干饭

关注

0
点赞
踩
0

收藏

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

1.增加修改的链接插入画线的代码{field:'操作',title:'操作',width:100,align:'center',formatter: function(value,row,index){ return '<a href="javascript:void(0);" οnclick="edit();">修改</a>'; }里面有一个edit（）方法，书写edit方法注意：edit方法要放到$(fu...
复制链接

扫一扫