datagrid之修改

最新推荐文章于 2023-04-26 08:41:39 发布

顾北！

最新推荐文章于 2023-04-26 08:41:39 发布

阅读量354

点赞数

分类专栏：初学文章标签： easyui

本文链接：https://blog.csdn.net/m0_60402568/article/details/120317927

版权

初学专栏收录该内容

86 篇文章 0 订阅

订阅专栏

目标：

1、dialog（对话框窗口）控件的使用

2、form控件的使用

一.增加操作列

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

二.选中datagrid数据表格中的一列

var row=$('#dg').datagrid("getSelected");

三.在dialog窗体中添加表单

$("#dd").dialog("open");

四.把选中的数据绑定到form表单中

//注意：要与form表单的name属性相对应，否则无法回填数据
	$('#ff').form('load',row);

五.点击确定调用form控件方法提交到后台

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

}

六.关闭窗体

$("#dd").dialog("close");

七.刷新数据

$('#dg').datagrid('reload');

在usermanage中添加form表单

usermanage界面代码

<%@ 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 tyep="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" id="bb">
        <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>

在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"});
		}

在action写

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) {
			// TODO Auto-generated catch block
			e1.printStackTrace();
		}
	}
	return null;
	}

最终结果

一开始选中第一行：

然后在点击修改书名为as 价格为21

这就是修改成功的界面了

顾北！

关注

0
点赞
踩
0

收藏

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

目标：1、dialog（对话框窗口）控件的使用2、form控件的使用一.增加操作列 {field:'操作',title:'操作',width:100,align:'right',formatter: function(value,row,index){ return '<a href="javascript:void(0);" onclick="edit();">修改</a>' }} 二.选中datagrid数据表格中的一列var row=
复制链接

扫一扫