EasyUI——datagrid(全)

最新推荐文章于 2024-04-13 07:06:41 发布

Bug本身

最新推荐文章于 2024-04-13 07:06:41 发布

阅读量1.2k

点赞数 1

文章标签： easyui

本文链接：https://blog.csdn.net/ZhiCun_java/article/details/107063315

版权

datagrid

前端
- js代码
- jsp模态框
后台
- dao层
- Action
运行效果

前端

js代码

$(function(){
	var ctx=$("#ctx").val();
	//表格
	$('#dg').datagrid({    
		url:ctx+'/book.action?methodName=datagrid',
	    pagination:true,
	    singleSelect:true,
	    toolbar:'#tb',
	    columns:[[
	        {field:'id',title:'id',width:50},
	        {field:'name',title:'书名',width:150},
	        {field:'pinyin',title:'拼音',width:180},
	        {field:'cid',title:'类别',width:30,align:'left'},
	        {field:'author',title:'作者',width:100},
	        {field:'price',title:'单价',width:50},
	        {field:'image',title:'图片',width:250},
	        {field:'deployTime',title:'发布时间',width:150},
	        {field:'publishing',title:'出版社',width:70},
	        {field:'xxx',title:'操作', width:200,
				formatter: function(value,row,index){
					return '<a href="javascript:void(0)" οnclick="edit()">修改</a>&nbsp;&nbsp;<a href="javascript:void(0)" οnclick="del()">刪除</a>';
				}
			}
	    ]]
	});
	
	//搜索按钮
	$('#btn-search').click(function(){
		$('#dg').datagrid('load', {
		    name:$('#name').val()
		});
	});
	
	//新增按钮
	$("#btn-add").click(function(){
		$("#bookEdit").dialog('open');
	});
	
	$('#btn-save').click(function(){
		$('#ff').form('submit', {
			url:ctx+'/book.action?methodName=save',
		    success:function(data){
		    	data=eval('('+data+')');
		    	if(data.code==200){
		    		alert(data.msg);
		    		//关闭对话框
		    		$('#ff').form('clear');
		    		$("#bookEdit").dialog('close');
		    		$('#dg').datagrid('reload');
		    	}
		    }
		}); 
	});
	
})
function edit(){
	var row=$('#dg').datagrid('getSelected');
	if(row){
		$('#ff').form('load',row);
	}
	$("#bookEdit").dialog('open');
}

function del(){
	var row=$('#dg').datagrid('getSelected');
	if(row){
		$.ajax({
			url:ctx.value+'/book.action?methodName=del&&id='+row.id,
			success:function(data){
		    	data=eval('('+data+')');
		    	if(data.code==200){
		    		alert(data.msg);
		    		$('#dg').datagrid('reload');
		    	}
		    }
		});
	}
}

jsp模态框

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<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/default/easyui.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>
<!-- 组件库源码-js文件 -->
<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>book增删改</title>
</head>
<body>
	<input type="hidden" id="ctx" value="${pageContext.request.contextPath}">
	<div id="tb">
		<input class="easyui-textbox" id="name" name="name" style="width:25%;padding-left:5px" data-options="label:'书名:',">
		<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>
	
	<div id="bookEdit" class="easyui-dialog" title="书籍信息编辑" style="width:250px;height:350px;"   
        data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#fbtns'">
		<form id="ff" method="post">
			<input type="hidden" name="id" />
		    <div>
		        <label for="name">书籍名称:</label>
		        <input class="easyui-validatebox" type="text" name="name" data-options="required:true" />   
		    </div>
		    <div>
		        <label for="cid">书籍类别:</label>
		        <input class="easyui-validatebox" type="text" name="cid" data-options="required:true" />   
		    </div>
		    <div>
		        <label for="author">作者:</label>
		        <input class="easyui-validatebox" type="text" name="author" data-options="required:true" />   
		    </div>
		    <div>
		        <label for="price">价格:</label>
		        <input class="easyui-validatebox" type="text" name="price" data-options="required:true" />   
		    </div>
		    <div>
		        <label for="image">图片地址:</label>
		        <input class="easyui-validatebox" type="text" name="image" data-options="required:true" />   
		    </div>
		    <div>
		        <label for="publishing">出版社:</label>
		        <input class="easyui-validatebox" type="text" name="publishing" data-options="required:true" />   
		    </div>
		    <div>
		        <label for="description">描述:</label>
		        <input class="easyui-validatebox" type="text" name="description" data-options="required:true" />   
		    </div>
		    <div>
		        <label for="state">物流状态:</label>
		        <input class="easyui-validatebox" type="text" name="state" data-options="required:true" />   
		    </div>
		    <div>
		        <label for="deployTime">发布时间:</label>
		        <input class="easyui-validatebox" type="text" name="deployTime" data-options="required:true" />   
		    </div>
		    <div>
		        <label for="sales">数量:</label>
		        <input class="easyui-validatebox" type="text" name="sales" data-options="required:true" />   
		    </div>
		</form> 
		<div id="fbtns">
			<a id="btn-save" href="#" class="easyui-linkbutton"">保存</a>
			<a id="btn-cancel" href="#" class="easyui-linkbutton"">取消</a>
		</div>
	</div>
	<table id="dg"></table>  
</body>
</html>

后台

dao层

package com.rong.dao;

import java.sql.SQLException;
import java.util.List;

import com.rong.entity.Book;
import com.rong.util.BaseDao;
import com.rong.util.PageBean;
import com.rong.util.PinYinUtil;
import com.rong.util.StringUtils;

public class BookDao extends BaseDao<Book> {

	public List<Book> list(Book book,PageBean pagebean) throws InstantiationException, IllegalAccessException, SQLException{
		String name=book.getName();
		String sql="select * from t_easyui_book where true";
		if(!StringUtils.isBlank(name)) {
			sql+=" and name like '%"+name+"%' ";
		}
		return super.executeQuery(sql, Book.class, pagebean);
	}
	
	public int add(Book book) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
		book.setPinyin(PinYinUtil.getAllPingYin(book.getName()));
		String sql="insert into t_easyui_book values(null,?,?,?,?,?,?,?,?,?,?,?)";
		return super.executeUpdate(sql, book,new String[] {"name","pinyin","cid","author","price","image","publishing","description","state","deployTime","sales"});
	}
	
	public int edit(Book book) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
		book.setPinyin(PinYinUtil.getAllPingYin(book.getName()));
		String sql="update t_easyui_book set name=?,pinyin=?,cid=?,author=?,price=?,image=?,publishing=?,description=?,state=?,deployTime=?,sales=? where id=?";
		return super.executeUpdate(sql, book,new String[] {"name","pinyin","cid","author","price","image","publishing","description","state","deployTime","sales","id"});
	}
	
	public int del(Book book) throws NoSuchFieldException, SecurityException, IllegalArgumentException, IllegalAccessException, SQLException {
		String sql="delete from t_easyui_book where id=?";
		return super.executeUpdate(sql, book,new String[] {"id"});
	}
	
}

Action

增加修改二合一，数据库id设置自动增长

package com.rong.web;

import java.io.IOException;
import java.sql.SQLException;
import java.util.Arrays;
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.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.rong.dao.BookDao;
import com.rong.dao.PermissionDao;
import com.rong.entity.Book;
import com.rong.entity.Permission;
import com.rong.framework.ActionSupport;
import com.rong.framework.ModelDriven;
import com.rong.util.DataGridResult;
import com.rong.util.PageBean;
import com.rong.util.ResponseUtil;
import com.rong.util.Result;
import com.rong.vo.TreeVo;

public class BookAction extends ActionSupport implements ModelDriven<Book> {

	private Book book=new Book();
	private BookDao bookdao=new BookDao();
	@Override
	public Book getModel() {
		return book;
	}
	
	public String datagrid(HttpServletRequest req,HttpServletResponse resp) throws IOException {
		PageBean pagebean=new PageBean();
		pagebean.setRequest(req);
		try {
			List<Book> list=this.bookdao.list(book, pagebean);
			ResponseUtil.weiteJson(resp, DataGridResult.ok(pagebean.getTotal()+"", list));
		} catch (InstantiationException e) {
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return null;
	}
	
	public String save(HttpServletRequest req,HttpServletResponse resp) throws IOException {
		try {
			if(book.getId()!=0) {
				this.bookdao.edit(book);
			}else {
				int add=this.bookdao.add(book);
			}
			ResponseUtil.weiteJson(resp, Result.SUCCESS);
		} catch (NoSuchFieldException e) {
			e.printStackTrace();
		} catch (SecurityException e) {
			e.printStackTrace();
		} catch (IllegalArgumentException e) {
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return null;
	}
	
	public String del(HttpServletRequest req,HttpServletResponse resp) throws IOException {
		try {
			this.bookdao.del(book);
			ResponseUtil.weiteJson(resp, Result.SUCCESS);
		} catch (NoSuchFieldException e) {
			e.printStackTrace();
		} catch (SecurityException e) {
			e.printStackTrace();
		} catch (IllegalArgumentException e) {
			e.printStackTrace();
		} catch (IllegalAccessException e) {
			e.printStackTrace();
		} catch (SQLException e) {
			e.printStackTrace();
		}
		return null;
	}
	
}