最近用easyui的datagrid,此datagrid具有增删改查,满足基本的使用:
1.jsp代码(对页面的初始化操作):
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<title>ComboBox - jQuery EasyUI Demo</title>
<%
String path = request.getContextPath();
%>
<link rel="stylesheet" type="text/css" href="<%=path %>/jquery_ui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=path %>/jquery_ui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="<%=path %>/jquery_ui/ui.css">
<script type="text/javascript" src="<%=path %>/jquery_ui/jquery-1.6.min.js"></script>
<script type="text/javascript" src="<%=path %>/jquery_ui/jquery.easyui.min.js"></script>
<script>
$(function(){
var lastIndex;
$('#test').datagrid({
title:'My DataGrid',
iconCls:'icon-save',
width:800,
height:"auto",
nowrap: false,
striped: true,
collapsible:true,
url:'TestAction!getGridInfo.action',
idField:'id',
singleSelect:true,
fitColumns: true,
frozenColumns:[[
{field:'ck',checkbox:true},
{title:'编号',field:'id',width:80,sortable:true}
]],
columns:[[
{title:'基本信息',colspan:2},
{
field:'tel',
title:'移动电话',
width:100,
align:'center',
rowspan:2,
editor: {
type: 'numberbox',
options:{
required: true,
validType: "length[11,11]"
}
}
}
],[
{
field:'name',
title:'姓名',
width:120,
editor:'text'
},
{field:'address',title:'地址',width:220,rowspan:2,editor:'text'}
]],
pagination:true,
toolbar:[{
id:'btnadd',
text:'Add',
iconCls:'icon-add',
handler:function(){
$('#btnsave').linkbutton('enable');
alert('add')
}
},{
id:'btncut',
text:'Cut',
iconCls:'icon-cut',
handler:function(){
$('#btnsave').linkbutton('enable');
alert('cut')
}
},'-',{
id:'btnsave',
text:'Save',
disabled:true,
iconCls:'icon-save',
handler:function(){
$('#btnsave').linkbutton('disable');
alert('save')
}
}],
onClickRow: function(rowindex){
$('#test').datagrid('endEdit', lastIndex);
$('#test').datagrid('beginEdit', rowindex);
var ed = $('#test').datagrid('getEditors', rowindex);
for (var i = 0; i < ed.length; i++){
var e = ed[i];
$(e.target).bind("keyup",function(event){
if (event.which == 13){
$('#test').datagrid('endEdit', rowindex);
}
});
}
lastIndex = rowindex;
},
onAfterEdit: function(rowIndex, rowData){
$.ajax({
url: "<%=request.getContextPath()%>/TestAction!updateGrid.action",
data: "name="+encodeURIComponent(rowData.name)+"&address="+encodeURIComponent(rowData.address)+"&tel="+encodeURIComponent(rowData.tel)+"&id="+rowData.id,
cache:false,
async : true
})
}
});
var p = $('#test').datagrid('getPager');
$(p).pagination({
pageSize:10,
pageList:[10,20,50],
beforePageText: '第',
afterPageText: '页 共 {pages} 页',
displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条',
onBeforeRefresh:function(){
$("#test").datagrid("reload");
}
});
});
function search(value){
var p = $('#test').datagrid('getPager');
$(p).pagination({
pageNumber: 1
});
var queryParams = $('#test').datagrid('options').queryParams;
queryParams.name=value;
$('#test').datagrid("reload");
}
</script>
<style type="text/css">
.demo-info{
background:#FFFEE6;
color:#8F5700;
padding:12px;
}
.demo-tip{
width:24px;
height:16px;
float:left;
}
</style>
</head>
<body>
<h2>Complex DataGrid</h2>
<div class="demo-info">
<div class="demo-tip icon-tip"></div>
<div>Click the button to do actions with datagrid.</div>
</div>
<input class='easyui-searchbox' prompt='请输入姓名进行搜索' style='width:798px' searcher='search'/>
<table id="test"></table>
</body>
</html>
2.处理逻辑的TestAction类:
public class TestAction extends ActionSupport{
private int rows;
private int page;
private long total;
private QueryDao dao = new QueryDao();
public long getTotal() {
return total;
}
public void setTotal(long total) {
this.total = total;
}
public int getRows() {
return rows;
}
public void setRows(int rows) {
this.rows = rows;
}
public int getPage() {
return page;
}
public void setPage(int page) {
this.page = page;
}
public void getGridInfo(){
HttpServletRequest request = ServletActionContext.getRequest();
List<Grid> list = new ArrayList<Grid>();
String name = request.getParameter("name");
if(!("".equals(name) || name == null)){
//根据名称进行模糊查询,并初始化查询出来的数据的页数和行数
name = name.trim();
list = dao.getGridByName(name, page, rows);
total = dao.getSize();
}else{
total = dao.getTotal();
list=dao.getGridData(page ,rows);
}
Map<String,Object> jsonMap = new HashMap<String,Object>();
jsonMap.put("total", total);
jsonMap.put("rows", list);
JSONObject json=new JSONObject();
json=JSONObject.fromObject(jsonMap);
try {
ServletActionContext.getResponse().setContentType("text/html;charset=utf-8");
PrintWriter pw=ServletActionContext.getResponse().getWriter();
pw.println(json.toString());
pw.flush();
pw.close();
} catch (IOException e) {
e.printStackTrace();
}
}
public void updateGrid(){
String id=(String)ServletActionContext.getRequest().getParameter("id");
String name=(String)ServletActionContext.getRequest().getParameter("name");
String address=(String)ServletActionContext.getRequest().getParameter("address");
String tel=(String)ServletActionContext.getRequest().getParameter("tel");
String hql="update Grid g set g.name=?,g.address=?,g.tel=? where g.id=?";
try
{
DataAccess.createPersister().saveOrUpdateBySqlString(hql,new Object[]{name,address,tel,id});
dao.updateGridCache(id);
}
catch (Exception ex)
{
ex.printStackTrace();
}
}
}
3.查询数据的QueryDao(如果大数据量,建议使用缓存):
public class QueryDao{
private long size;
private int initPage;
public int getInitPage() {
return initPage;
}
public long getSize() {
return size;
}
/**
* 查询出所有的grid数据,便于进行大数据量的模糊查询
* @return
*/
public List<Grid> getAllGrid(){
String hql = "from Grid";
try
{
Query query = DataAccess.createQuery();
@SuppressWarnings("unchecked")
List<Grid> gridResult = query.queryByHqlString(hql);
return gridResult;
}
catch (Exception ex)
{
ex.printStackTrace();
}
return new ArrayList<Grid>();
}
public List<Grid> getGridData(int page , int row){
//Cache cache = CacheManager.getInstance().getCache("grid");
List<Grid> list = (List<Grid>)getAllGrid();
return spliList(list, page, row);
}
public Long getTotal(){
String countHql = "select count(*) from Grid";
try
{
Query query = DataAccess.createQuery();
List countList = query.queryByHqlString(countHql);
long total = (Long)countList.get(0);
return total;
}
catch (Exception ex)
{
ex.printStackTrace();
}
return 0L;
}
public Grid getGridById(String id){
String hql = "from Grid where id=?";
try
{
Query query = DataAccess.createQuery();
List countList = query.queryByHqlString(hql,new Object[]{id});
return (Grid)countList.get(0);
}
catch (Exception ex)
{
ex.printStackTrace();
}
return new Grid();
}
/**
* 查询包含此数据名的数据
* @param name
* @param total
* @return
*/
public List<Grid> getGridByName(String name,int page, int rows){
List<Grid> gridList = new ArrayList<Grid>();
Cache cache = CacheManager.getInstance().getCache("grid");
List<Grid> list = (List<Grid>)cache.getValue();
for(int i = 0, len = list.size(); i < len; i++){
Grid grid = (Grid) list.get(i);
if(grid.getName().contains(name)){
gridList.add(grid);
}
}
size = gridList.size();
return spliList(gridList, page, rows);
}
/**
* 对list进行分页
* @param list
* @param page
* @param rows
* @return
*/
public List spliList(List list, int page, int rows){
List grid = new ArrayList();
int a = (page - 1) * rows;
int b = a + rows;
for(int i = a; i < b; i++){
try {
grid.add(list.get(i));
} catch (IndexOutOfBoundsException e) {
return grid;
}
}
return grid;
}
public void updateGridCache(String id){
Cache cache = CacheManager.getInstance().getCache("grid");
List<Grid> list = (List<Grid>)cache.getValue();
for (int i = 0, len = list.size(); i < len; i++) {
Grid grid = list.get(i);
if(id.equals(grid.getId())){
Grid updateGrid = getGridById(id);
list.remove(i);
list.add(i, updateGrid);
cache.setValue(list);
return;
}
}
}
}
以上就是如何基本使用easyui的datagrid...
分享到：
相关推荐
4. **使用JavaScript打印库**：可以利用像jsPDF这样的库，将Datagrid数据转换为PDF文档，再进行打印。这种方式不仅能够保留格式，还便于用户保存和分享。 5. ** formatter回调**：在打印前，通过遍历Datagrid的所有...
文件`Jquery_easyui_datagrid_js导出excel.doc`可能是文档说明或者包含插件使用的示例代码。通常，jQuery插件能简化Datagrid数据导出的操作。一种常见的方式是使用`html2canvas`和`jsPDF`库，它们可以将HTML内容转换...
1. **理解EasyUI datagrid**：首先，你需要熟悉EasyUI datagrid的基本用法，包括其初始化、数据加载、列配置等。 2. **分析源码**：查看easyui的源代码，找到处理表格滚动的部分，理解其工作原理。 3. **创建固定...
easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格easyui datagrid中实现上下左右、回车切换单元格
easyUI datagrid 自动调整行号大小
easyui datagrid editor回车切换单元格示例，适合熟悉easyui但又不懂如何做的人员，可能参考一下源码JS。
JS EasyUI DataGrid是一款基于jQuery和EasyUI框架的数据表格组件，它提供了丰富的功能，如数据分页、排序、过滤和自定义操作等。在实际应用中，动态加载数据是DataGrid的一个重要特性，允许用户在需要时加载更多的...
这个“jquery easyui datagrid demo”包含了一些关于如何使用 jQuery EasyUI 中 Datagrid 组件的示例和相关文档，帮助我们理解和应用 Datagrid。 首先，`datagrid.doc` 文件很可能是 Datagrid 的简要说明文档，它...
在本示例中，我们关注的是如何在EasyUI的Datagrid组件上添加一个特殊功能：当鼠标悬停在某一行时，弹出一个窗口显示该行的关键信息，例如用于图片预览。以下是对这个知识点的详细解释： 1. **EasyUI Datagrid**： ...
总的来说，这个实例提供了关于如何在 EasyUI 的 DataGrid 中启用和使用过滤功能的指导。通过设置列的过滤属性、处理过滤事件和重新加载数据，我们可以创建一个交互性强、用户体验良好的数据管理界面。这个实例对于...
在使用EasyUI框架开发Web应用时，Datagrid组件是一个非常重要的元素，它提供了一种方便的方式来展示和操作数据。在标题“easyui datagrid在编辑状态下更新列的值”中，我们关注的是如何在Datagrid的编辑模式下动态地...
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像（onMouseOver/onMouseOut） Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件，源码奉献！！！
默认情况下，EasyUI Datagrid 支持基本的数据排序功能，但其默认排序逻辑是基于字符编码的，因此无法直接实现中文按拼音顺序的排序。 #### 三、前端解决方案 对于前端来说，可以通过自定义排序函数的方式来实现中文...
通过这个样例，开发者可以学习到如何结合EasyUI Datagrid和SpringMVC实现后台分页查询，理解前后端数据交互的原理，并且掌握相关框架和组件的使用。这将有助于提升Web应用的数据展示效率和用户体验。
在IT领域，尤其是在Web开发中，EasyUI是一个广泛使用的JavaScript框架，它基于jQuery，提供了丰富的UI组件，如Datagrid，用于构建数据展示和管理的表格。在本篇中，我们将深入探讨如何在EasyUI的Datagrid中实现行...
本文将深入探讨如何使用EasyUI datagrid实现多条件筛选功能，特别是支持可复选的筛选条件，类似于淘宝网站上的商品筛选功能。 首先，`datagrid`是EasyUI中的一个核心组件，它用于展示数据表格，支持分页、排序、...
在使用EasyUI框架进行前端开发的过程中，可能会遇到dataGrid组件在数据为空时列显示不完整的问题。这不仅影响用户体验，也降低了系统的可用性。本文将详细介绍如何解决当dataGrid列较多且无数据显示不全的情况，并...
EasyUI Datagrid是基于HTML和JavaScript的，它使用了jQuery库来简化DOM操作和事件处理。Datagrid提供了一个灵活的表格布局，可以轻松地处理大量数据，并支持多种自定义选项，如列宽调整、行选择、复选框选择等。 2...
easyUI datagrid 行上移，下移，置顶，置底的方法
EasyUI是一个基于jQuery的轻量级框架，提供了一系列易于使用的UI组件，包括datagrid，用于创建表格布局。 在EasyUI的datagrid中，列的宽度通常可以设置为固定、自动或自适应。固定宽度是直接设定每列的具体像素值；...