EasyUI之DataGrid 修改

最新推荐文章于 2022-05-10 09:41:18 发布

邂逅于晚风

最新推荐文章于 2022-05-10 09:41:18 发布

阅读量629

点赞数

文章标签： easyui

本文链接：https://blog.csdn.net/weixin_58670730/article/details/120317896

版权

本文展示了如何使用EasyUI DataGrid在表格中添加操作列，实现实时修改功能，包括获取选中行数据、展示修改窗口并自动刷新。通过实例教程，一步步教你如何在页面上弹出表单进行编辑，并在后台进行数据更新。

摘要由CSDN通过智能技术生成

前言：在上一篇文章中使用EasyUI完成了点击左侧菜单显示对应的选项卡页面效果，选项卡数据从数据库获取。但是仅仅只能查看数据，没有其他操作。

这篇文章基于EasyUI之DataGrid 查询应用进行优。

1添加操作列

/*表头*/
		columns: [[
			
			{ field: 'bid', title: '代码', width: 300 },
			{ field: 'bname', title: '名称', width: 300 },
			{ field: 'price', title: '价格', width: 300},
			{
				field: 'cz', title: '操作', width : 300, formatter: function(value, row, index) {
					return '<a href="#" onclick="upd()">修改</a>'
				}
			}
		]]

目标：

当点击修改标签时，在页面上弹出一个form表单的窗口，把当前选中行的数据进行回显。修改数据后，自动关闭窗口，刷新数据。

2在js定义修改方法

点击修改时：打开窗口、数据回显。方法查看EasyUI API

function upd() {
	/*点击修改按钮时
		1.打开窗口
		2.把值赋值给表单
			2.1通过datagrid表格getSelected方法 获取选中行的值
			2.2调用form表单load的方法填充到表单中
			2.3表单name属性必须与对象属性保持一致
	*/
	$("#dd").dialog("open");
	var row = $("#dg").datagrid("getSelected");
	$("#ff").form('load', row);
}

3jsp页面

在jsp页面中：对话窗口默认关闭,把表单提交按钮绑定给窗口（按钮绑定给窗口与不绑定作用一致）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/easyUI/jquery-easyui-1.5.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/easyUI/jquery-easyui-1.5.1/themes/icon.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/easyUI/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/easyUI/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/easyUI/js/book.js"></script>
<body>
	<!-- 绝对路径 -->
	<input type="hidden" value="${pageContext.request.contextPath}" id="hh">
	<!--  查询按钮 -->
	 <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-add" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">新增</a>
</div> 
		<!-- DataGrid（数据表格）-->
	<table id="dg"></table>  
	<!-- 	对话窗口，默认关闭  closed:true,  绑定按钮组buttons:'#button' -->
	<div id="dd" class="easyui-dialog" title="对话窗口" style="width:400px;height:200px;"   
        data-options="iconCls:'icon-save',resizable:true,modal:true ,closed:true ,buttons:'#button'">   
   		<!-- 表单 -->
    <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="button">
        <a href="#" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
        <a href="#" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
    </div>


</div>  
	

</body>
</html>

4 修改数据

给表单提交按钮绑定事件

function submitForm() {
	/*表单提交函数
		1.调用form表单提交方法
		2.提交成功，关闭窗口，刷新数据
			2.1通过后台返回值调用关闭窗口方法以及刷新数据方法
	*/
	
	$("#ff").form('submit',{
		url:$("#hh").val() + '/book.action?methodName=upd',
		success: function(data) {
			if(data==1){
				$("#dd").dialog("close");
				var row=$('#dg').datagrid('reload');

			}
		}
		
	});

5在子控制器编写修改方法

package com.wyy.Action;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.wyy.dao.BookDao;
import com.wyy.entity.Book;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.PageBean;
import com.zking.util.ResponseUtil;

public class BookAction extends ActionSupport implements ModelDriver<Book> {

	Book b = new Book();
	BookDao bo = new BookDao();

	@Override
	public Book getModel() {
		// TODO Auto-generated method stub
		return b;
	}

	public String list(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		PageBean p = new PageBean();
		// 初始化
		p.setRequest(req);
		List<Book> all = bo.getAll(b, p);
		Map<String, Object> map = new HashMap<String, Object>();
		// 根据EasyUI DataGrid属性设置键
		map.put("total", p.getTotal());
		map.put("rows", all);
		ResponseUtil.writeJSON(resp, map);
		return null;
	}

	public String upd(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		bo.upd(b);
		//返回值去页面
		ResponseUtil.writeJSON(resp, 1);
		ResponseUtil.writeJSON(resp, 0);
		return null;
	}
	
	

}

修改效果