easyui-datagrid个人实例

这个实例数据表格的功能，可以实现分页，增删改查功能

1.user.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
%>
<!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">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="<%=path%>/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="<%=path%>/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/easyui/demo.css">
<script type="text/javascript" src="<%=path%>/easyui/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
src="<%=path%>/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function() {
var flag ;//判断新增还是修改

$(‘#tab‘).datagrid({
title : ‘用户列表‘,
iconCls : ‘icon-edit‘,//图标
//width : ‘400px‘,
height : ‘auto‘,
nowrap : false,//当true的时候，会显示在一行里
striped : true,//各行变色
border : true,
collapsible : false,//是否可折叠的
fit : true,//自动大小
url : ‘/egoTest/user/queryUser.do‘,
//sortName: ‘code‘,
//sortOrder: ‘desc‘,
remoteSort : false,
loadMsg:‘数据正在加载，请等待......‘,
idField : ‘id‘,
singleSelect : true,//是否单选
pagination : true,//分页控件
rownumbers : true,//行号
checkOnSelect : true,
selectOnCheck : true,
// remoteSort : false,
// sortName:‘userName‘,
// sortOrder:‘asc‘,
rowStyler:function(index,record){
console.info(index);
console.info(record);
/*if(record.age > 5000){
return "background:red";
}*/
},
frozenColumns:
[[
//你把 ck 换成 QID 试试
{ field: ‘QID‘, checkbox: true }
]],
columns : [ [ {
field : ‘id‘,
title : ‘id‘,
width : ‘30%‘
}, {
field : ‘userName‘,
title : ‘userName‘,
width : ‘30%‘,
sortable:true
}, {
field : ‘age‘,
title : ‘age‘,
width : ‘30%‘,
align : ‘right‘,
sortable:true
} ] ],
toolbar : [ {
text : ‘添加‘,
iconCls : ‘icon-add‘,
handler : function() {
flag = ‘add‘;
$("#my_dialog").dialog({
title:"新增用户"
})
$("#form_user").get(0).reset();
$("#my_dialog").dialog(‘open‘);
}
}, ‘-‘, {
text : ‘修改‘,
iconCls : ‘icon-edit‘,
handler : function() {
flag = ‘edit‘;
var arr = $("#tab").datagrid("getSelections");
if(arr.length != 1){
$.messager.show({
title:‘提示信息‘,
msg:‘只能选择一行记录进行修改‘
});
}else{
$("#my_dialog").dialog({
title:"修改用户"
})
$("#my_dialog").dialog(‘open‘);
$("#form_user").get(0).reset();
$("#form_user").form(‘load‘,{
id :arr[0].id ,
userName : arr[0].userName ,
age : arr[0].age
});

}
}
}, ‘-‘, {
text : ‘删除‘,
iconCls : ‘icon-remove‘,
handler : function() {
var arr = $("#tab").datagrid("getSelections");
if(arr.length <= 0){
$.messager.show({
title:‘提示信息‘,
msg:‘只能选择一行记录进行删除!‘
});
}else{
$.messager.confirm("提示信息","确认删除吗",function(r){
if(r){
var ids = ‘‘;
for(var i =0;i<arr.length;i++){
ids += arr[i].id + ",";
}
ids = ids.substring(0,ids.length-1);
$.post(‘/egoTest/user/deleteUser.do‘,{ids:ids},function(result){
$("#tab").datagrid("reload");
$("#tab").datagrid(‘unselectAll‘); //清空idFiled
$.messager.show({
title:‘提示信息‘,
msg:‘操作成功!‘
});
});
}else{
return;
}
})
}
}
} , ‘-‘, {
text : ‘查询‘,
iconCls : ‘icon-search‘,
handler : function() {
$("#lay").layout(‘expand‘,‘north‘);
}
}],
});

//设置分页控件
var p = $(‘#tab‘).datagrid(‘getPager‘);
$(p).pagination({
pageSize : 10,//每页显示的记录条数，默认为10
pageList : [ 5, 10, 15, 20, 50 ],//可以设置每页记录条数的列表
beforePageText : ‘第‘,//页数文本框前显示的汉字
afterPageText : ‘页 共 {pages} 页‘,
displayMsg : ‘当前显示 {from} - {to} 条记录 共 {total} 条记录‘,
onBeforeRefresh : function() {
$(this).pagination(‘loading‘);
// alert(‘before refresh‘);
$(this).pagination(‘loaded‘);
$(‘#tab‘).datagrid(‘reload‘);
}
});

$("#btn1").click(function(){
if($(‘#form_user‘).form(‘validate‘)){
$.ajax({
type : ‘POST‘,
url : flag == ‘add‘?‘/egoTest/user/saveUser.do‘:‘/egoTest/user/updateUser.do‘,
data: $(‘#form_user‘).serialize(),
dataType : ‘json‘,
success : function(data) {
//关闭窗口
$("#my_dialog").dialog(‘close‘);
//刷新datagrid
$("#tab").datagrid(‘reload‘);
//提示信息
$.messager.show({
title: data.status,
msg: data.message
});
},
error : function(data) {
$.messager.show({
title: ‘提示信息‘,
msg:‘错误返回‘
})
}
});
}else{
$.messager.show({
title : ‘提示信息‘,
msg:‘数据验证不通过，不能保存！‘
})
}
});

$("#btn2").click(function(){
$("#my_dialog").dialog(‘close‘);
});

$("#searchbtn").click(function(){
$("#tab").datagrid(‘load‘,serializeForm($("#mysearch")));
});

$("#clearbtn").click(function(){
$("#mysearch").form(‘clear‘);
$("#tab").datagrid(‘load‘,{});
});

function serializeForm(form){
var obj = {};
$.each(form.serializeArray(),function(index){
if(obj[this[‘name‘]]){
obj[this[‘name‘]] = obj[this[‘name‘]] + ‘,‘ +this[‘value‘];
}else{
obj[this[‘name‘]] = this[‘value‘];
}
});
return obj;
}

});
</script>
<style type="text/css">
body {
font-family:verdana,helvetica,arial,sans-serif;
padding:5px;
font-size:12px;
margin:0;
}
</style>
</head>
<body>

<div id="lay" class="easyui-layout" style="width: 100%; height: 100%;">
<div region="north" title="用户查询" collapsed=true style="height: 100px;">
<form id="mysearch" method="post">
用户名:<input name="userName" class="easyui-validatebox" required="true" missingMessage="请输入姓名" value=""/>
年龄:<input name="age" class="easyui-validatebox" required="true" missingMessage="请输入年龄" value=""/>
<a id="searchbtn" class="easyui-linkbutton">查询</a>
<a id="clearbtn" class="easyui-linkbutton">清空</a>
</form>
</div>
<div region="center">
<table id="tab"></table>
</div>
</div>

<div id="my_dialog" title="新增用户" modal=true draggable=false class="easyui-dialog" closed=true style="width:700px;height:400px;">
<form id="form_user" action="">
<table align="center">
<tr>
<td>编号:</td>
<td><input type="text" id="id" name="id"
class="easyui-validatebox" required="true" missingMessage="请输入编号" /></td>
</tr>
<tr>
<td>姓名:</td>
<td><input type="text" id="userName" name="userName"
class="easyui-validatebox" required="true" missingMessage="请输入姓名" /></td>
</tr>
<tr>
<td>年龄:</td>
<td><input type="password" id="age" name="age"
class="easyui-validatebox" required="true" missingMessage="请输入年龄" /></td>
</tr>
<tr>
<td colspan="2">
<a id="btn1" class="easyui-linkbutton">确定</a>
<a id="btn2" class="easyui-linkbutton">取消</a>
</td>
</tr>

</table>
</form>
</div>
</body>

</html>

2.UserController.java

package com.controller;

import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

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

import net.sf.json.JSONObject;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;

import com.model.User;
import com.service.UserService;
import com.util.Page;

@Controller
@RequestMapping("/user")
public class UserController {
@Resource
private UserService userService;

@RequestMapping("/getAllUser")
public String getAllUser(HttpServletRequest request,
HttpServletResponse response, ModelMap modelMap, Page page) {
List<String> list = new ArrayList<String>();
list.add("cxx1");
list.add("cxx2");
list.add("cxx3");

List<User> uList = userService.getAllUser(page);
modelMap.put("uList", uList);
modelMap.put("list", list);
return "index2";

}

@RequestMapping("/getAjaxUser")
public void getAjaxUser(HttpServletRequest request,
HttpServletResponse response, ModelMap modelMap, Page page) {
try {
response.setContentType("text/html;charset=UTF-8");
List<User> uList = userService.getAllUser(page);
Map<String, Object> map = new HashMap<String, Object>();
// map.put( "total",total);
map.put("total", 57);
map.put("rows", uList);

JSONObject json = JSONObject.fromObject(map);
// String str = "aabbcc";
PrintWriter pw = response.getWriter();
pw.write(json.toString());
pw.flush();
pw.close();
} catch (Exception e) {
e.printStackTrace();
}
}

@RequestMapping("/getAjaxUser2")
public void getAjaxUser2(HttpServletRequest request,
HttpServletResponse response, ModelMap modelMap, Page page) {
try {
response.setContentType("text/html;charset=UTF-8");
List<User> uList = userService.getAllUser(page);
Map<String, Object> map = new HashMap<String, Object>();
// map.put( "total",total);
map.put("total", Integer.valueOf(page.getTotal()));
map.put("rows", uList);

JSONObject json = JSONObject.fromObject(map);
// String str = "aabbcc";
PrintWriter pw = response.getWriter();
pw.write(json.toString());
pw.flush();
pw.close();
} catch (Exception e) {
e.printStackTrace();
}
}

@RequestMapping("/queryUser")
public void queryUser(HttpServletRequest request,
HttpServletResponse response, ModelMap modelMap, Page page) {
try {
String currentPage = request.getParameter("page");
String pageSize = request.getParameter("rows");

String userName = request.getParameter("userName")==null?"":request.getParameter("userName");
String age = request.getParameter("age")==null?"":request.getParameter("age");
Map<String,Object> queryMap = new HashMap<String,Object>();
queryMap.put("userName",userName);
queryMap.put("age",age);

page.setCurrentPage(Integer.parseInt(currentPage));
page.setPageSize(Integer.parseInt(pageSize));
response.setContentType("text/html;charset=UTF-8");
// Thread.sleep(500);
List<User> uList = userService.queryUser(page,queryMap);
Map<String, Object> map = new HashMap<String, Object>();
// map.put( "total",total);
map.put("total", Integer.valueOf(page.getTotal()));
map.put("rows", uList);

JSONObject json = JSONObject.fromObject(map);
// String str = "aabbcc";
PrintWriter pw = response.getWriter();
pw.write(json.toString());
pw.flush();
pw.close();
} catch (Exception e) {
e.printStackTrace();
}
}

@RequestMapping("/saveUser")
public void saveUser(HttpServletRequest request,
HttpServletResponse response,User u) {

try{

response.setContentType("text/html;charset=UTF-8");
PrintWriter pw = response.getWriter();
String id = request.getParameter("id");
String userName = request.getParameter("userName");
String age = request.getParameter("age");
u.setId(Integer.parseInt(id));
u.setUserName(userName);
u.setAge(Integer.parseInt(age));
userService.saveUser(u);

String result = "{\"status\":\"ok\",\"message\":\"操作成功\"}";
pw.write(result);
pw.flush();
pw.close();
}catch (Exception e) {
e.printStackTrace();
}
}

@RequestMapping("/updateUser")
public void updateUser(HttpServletRequest request,
HttpServletResponse response,User u){
try{
String id = request.getParameter("id");
String userName = request.getParameter("userName");
String age = request.getParameter("age");
u = userService.findUserById(id);

u.setId(Integer.parseInt(id));
u.setUserName(userName);
u.setAge(Integer.parseInt(age));
userService.updateUser(u);

response.setContentType("text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
PrintWriter pw = response.getWriter();
String result = "{\"status\":\"ok\",\"message\":\"操作成功\"}";
pw.write(result);
pw.flush();
pw.close();
}catch (Exception e) {
e.printStackTrace();
}
}

@RequestMapping("/deleteUser")
public void deleteUser(HttpServletRequest request,
HttpServletResponse response,User u){
String[] ids = request.getParameter("ids").split(",");
for(int i=0;i<ids.length;i++){
userService.deleteUser(ids[i]);
}
}

}

时间： 2024-10-16 20:33:48

easyui-datagrid个人实例的相关文章

Jquery easyui datagrid 导出Excel

datagrid的扩展方法,用于将当前的数据生成excel需要的内容. 1 <script> 2 /** 3 Jquery easyui datagrid js导出excel 4 修改自extgrid导出excel 5 * allows for downloading of grid data (store) directly into excel 6 * Method: extracts data of gridPanel store, uses columnModel to constru

实现easyui datagrid在没有数据时显示相关提示内容

本示例实现easyui datagrid加载/查询数据时,如果没有相关记录,则在datagrid中显示没有相关记录的提示信息,效果如下图所示 本实例要实现如下图所示的效果: 本示例easyui版本为1.3.4,如果运行后没有效果,自己检查easyui版本 不同版本对appendRow和mergeCells支持不一样,参数不一致什么的. 无法隐藏分页导航容器,可以用chrome开发工具或者firebug查看分页导航容器的样式和原始datagrid table表格的关系. 源代码如下 $(funct

EasyUI datagrid 改变行的背景色

1.简介 使用jQuery EasyUI datagrid获取数据列表的时候,可能需求需要改变某些数据行的背景色,或者将其数据行显示为奇数偶数行不同,这是改变背景色就是非常必要的. 2.实现 使用datagrid的特性:rowStyler 实例如下: $('#keyManagement-gd').datagrid({ rowStyler:function(index,row){ if (row.classification=="Encrypting_Key" || row.classi

jQuery EasyUI datagrid实现本地分页的方法

本文实例讲述了jQuery EasyUI datagrid实现本地分页的方法.分享给大家供大家参考.具体如下: 一般分页都是后台做,前端做无论从哪方面考虑都不合适.但是有的时候还是有这种需求. 这里重点用到了pagination的监听,以及JS数组的slice方法来完成.代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 3

谈谈easyui datagrid 的数据加载(转)

这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法. 这里就自己的使用经验,对两种方式做简单总结和归纳,并且对使用过程中容易产生的误区做较为详细的描述,希望能对大家有所帮助. url方式加载数据 调用方式 目前可能大多数人都是选择这种方式,因为跟流行的框架结合的也比较好,使用url的话,可以将

jQuery EasyUI Datagrid组件的完整的基础DOM结构

该日志由 世纪之光 于2年前发表在datagrid分类下 转载: jQuery EasyUI Datagrid组件的完整的基础DOM结构 | WebUI框架使用参考+ http://www.easyui.info/archives/1157.html 关键字: datagrid源码分析, datagrid结构, easyui源码分析 标题可能有点长,什么叫“完整的基础DOM结构”,这里“基础”的意思是指这个结构不依赖具体数据,不依赖Datagrid的view属性,只要存在Datagrid实例就会

springMVC注解方式+easyUI+MYSQL配置实例

刚接触springMVC,使用的注解方式,也在学习阶段,所以把自己学习到的记下来.本文利用springMVC从数据库读取用户信息为例,分享一下. 1.准备相关架包及资源.因为使用springMVC+easyUI+MYSQL的方式构建项目,所以要下载spring的jar包.easyUI资源.mysql包. 2.新建空项目名称为test,将架包导入项目.即把下载来的spring-framework-3.1.1.RELEASE/libs中的对应jar包复制到项目的/WebRoot/WEB-INF/li

[JS][easyui]jQuery EasyUI Datagrid VirtualScrollView视图简单分析

 大家都知道EasyUI的Datagrid组件在加载大数据量时的优势并不是很明显,相对于其他一些框架,如果数据量达到几千,便会比较慢,特别是在IE下面.针对这种情况,我们首要做的是要相办法优化datagrid组件的各方面性能,不过任何事情都是可以变通解决的,virtualScrollView就是一种不错的解决方案. virtualScrollView的准则就是尽量少画tr到table里,表格的高度是有限的,而用户的可见区域是很有限的,所以数据量很大的时候,是没有必要将所有数据数据都画到表格中

EasyUI Datagrid的简单使用

此前同样写过EasyUI Datagrid的demo,好记性不如烂笔头,何况记性也不是那么好,赶紧记录一下.照搬上一篇EasyUI Tree的格式. 实现效果:获取数据库表的数据,在EasyUI Datagrid上展示出来并使用分页控件进行分页. 项目.框架.数据库:创建的是Maven项目,采用Spring+SpringMVC+Mybatis框架,数据库SQL Server 2005 1.创建数据库表 表结构: 表数据: 2.通过mybatis逆向工程映射TreeTestTable(表名略丑)

jQuery EasyUI Datagrid组件默认视图分析

在Datagrid基础DOM结构的一文中,我对Datagrid组件的骨架做了很详细的描述.有了骨架还并不完整,还得有血有肉有衣服穿才行.强大的Datagrid组件允许我们自己定义如何在基础骨架上长出健壮诱人的身体,我们只要定义Datagrid的视图就可以实现. 在大多数情况下,我们并无特别要求,Datagrid给我们提供了默认的视图,默认视图被使用在90%以上的场景,所以对默认视图的分析显得非常有必要.注意视图里面定义了哪些接口,哪些方法,如果要自己写视图的话,最好把这些接口和方法都写齐全.话不