<%@ page language="java" contentType="text/html; charset=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=charset=utf-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="themes/icon.css">
<script type="text/javascript" src="jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery/jquery.easyui.min.js"></script>
<script type="text/javascript">
$(function(){
$('#test').datagrid({
title:'',
iconCls:'icon-save',
width:'auto',
height:'auto',
nowrap: true,
autoRowHeight: false,
striped: true,
collapsible:true,
url:'datagrid_data.json',
sortName: 'code',
sortOrder: 'desc',
remoteSort: false,
idField:'code',
columns:[[
{field:'ck',checkbox:true},
{title:'Code',field:'code',width:80,sortable:true},
{field:'name',title:'Name',width:120},
{field:'addr',title:'Address',width:220,sortable:true,
sorter:function(a,b){
return (a>b?1:-1);
}
},
{field:'col4',title:'Col41',width:150}
]],
pagination:true,
rownumbers: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')
}
}]
});
var p = $('#test').datagrid('getPager');
$(p).pagination({
onBeforeRefresh:function(){
alert('before refresh');
}
});
});
function resize(){
$('#test').datagrid('resize', {
width:700,
height:400
});
}
function getSelected(){
var selected = $('#test').datagrid('getSelected');
if (selected){
alert(selected.code+":"+selected.name+":"+selected.addr+":"+selected.col4);
}
}
function getSelections(){
var ids = [];
var rows = $('#test').datagrid('getSelections');
for(var i=0;i<rows.length;i++){
ids.push(rows[i].code);
}
alert(ids.join(':'));
}
function clearSelections(){
$('#test').datagrid('clearSelections');
}
function selectRow(){
$('#test').datagrid('selectRow',2);
}
function selectRecord(){
$('#test').datagrid('selectRecord','002');
}
function unselectRow(){
$('#test').datagrid('unselectRow',2);
}
function mergeCells(){
$('#test').datagrid('mergeCells',{
index:2,
field:'addr',
rowspan:2,
colspan:2
});
}
</script>
</head>
<body>
<table id="test"></table>
</body>
</html>
如果是连接数据库的话，返回如下格式的json字符串即可
{
"total":100,
"rows":[
{"code":"001","name":"Name 1","addr":"Address 11","col4":"col4 data"},
{"code":"002","name":"Name 2","addr":"Address 13","col4":"col4 data"},
{"code":"003","name":"Name 3","addr":"Address 87","col4":"col4 data"},
{"code":"004","name":"Name 4","addr":"Address 63","col4":"col4 data"},
{"code":"005","name":"Name 5","addr":"Address 45","col4":"col4 data"},
{"code":"006","name":"Name 6","addr":"Address 16","col4":"col4 data"},
{"code":"007","name":"Name 7","addr":"Address 27","col4":"col4 data"},
{"code":"008","name":"Name 8","addr":"Address 81","col4":"col4 data"},
{"code":"009","name":"Name 9","addr":"Address 69","col4":"col4 data"},
{"code":"010","name":"Name 10","addr":"Address 78","col4":"col4 data"}
]
}
分享到：
相关推荐
总的来说，"jquery easyui pagination 分页插件扩展"是一个针对jQuery EasyUI分页组件的功能增强方案，旨在满足开发者的个性化需求，通过自定义代码或插件形式，实现更丰富、更灵活的分页效果。对于需要处理大量数据...
Datagrid 是 jQuery EasyUI 中一个强大的数据展示组件，常用于表格数据的展示和操作，支持分页、排序、过滤、编辑等功能。通过阅读这份文档，我们可以了解 Datagrid 的基本配置和高级特性，以及如何与后端数据源进行...
本文将详细介绍如何在jQuery EasyUI中实现分页功能，并解决在实际应用过程中可能遇到的一些常见问题。 #### 二、HTML结构 首先，我们需要了解HTML结构是如何搭建的。从提供的代码片段来看，主要包含了以下几个部分...
1. **数据网格（datagrid）**：DataGrid 是一个强大的表格控件，支持分页、排序、过滤、编辑等功能，可以与后端数据库进行数据交互，实现动态加载和数据操作。 2. **下拉菜单（combobox）**：Combobox 提供了一个可...
在初试 Jquery EasyUI 的 Demo 中，你可以通过阅读 `初试JqueryEasyUI.docx` 和 `初试JqueryEasyUI.mht` 文件了解详细步骤和示例代码。`EasyUIDemo` 文件可能是包含实际演示的 HTML 和 JavaScript 代码，可以运行...
总的来说，jQuery EasyUI 是一款强大的前端开发工具，通过它，开发者可以轻松实现界面的快速搭建，提高开发效率，同时保持良好的用户体验。在实际项目中，熟练掌握 jQuery EasyUI 的使用技巧和 API，对于提升工作...
2. **数据绑定**：jQuery EasyUI 支持与后台数据源进行数据绑定，通过Ajax或JSONP实现异步加载，使页面内容动态更新，提高用户体验。例如，表格组件Grid可以直接与服务器端的数据接口进行交互，实现分页、排序、过滤...
总的来说，jQuery EasyUI 是一款强大的前端开发工具，通过它，开发者可以轻松实现复杂的界面设计和交互功能，提高开发效率。这个压缩包中的所有文件，包括 jQuery 库和 EasyUI 组件，都为开发者提供了一个完整的开发...
1. **数据展示**: 使用JQueryEasyUI的表格组件可以方便地展示数据库中的数据，支持排序、分页、过滤等功能。 2. **表单处理**: 表单组件如输入框、选择框、日期选择器等，可以帮助快速构建用户交互界面，方便用户...
7. **性能优化**：学习如何通过延迟加载、分页、异步请求等技术提升EasyUI应用的性能和用户体验。 8. **兼容性和适配**：了解EasyUI对不同浏览器的兼容性，以及在移动设备上的表现和调整策略。 9. **实战示例**：...
同时，jQuery EasyUI支持数据网格（DataGrid），它能够展示大量数据，并提供排序、过滤、分页等功能，这对于数据展示和管理至关重要。 在代码部分，李炎恢老师提供的示例代码将帮助你更直观地理解讲义中的理论知识...
此外，jQuery EasyUI 还强调组件间的互操作性，允许开发者通过 JavaScript 和 CSS 样式轻松地组合和定制组件，实现复杂的用户界面效果。手册中也会涵盖这些集成和扩展的话题。 总之，jQuery EasyUI 1.4.2 版 API ...
- **案例1：登录表单**：利用jQuery EasyUI中的表单、按钮和对话框组件实现一个简单的登录界面。 - **案例2：商品列表页**：运用表格组件展示商品信息，并通过工具栏实现筛选和排序功能。 - **案例3：个人中心页面**...
jQuery EasyUI 是一个基于 jQuery 的前端框架，它提供了一系列易于使用的组件，如对话框、表格、下拉菜单、树形结构等，帮助开发者快速构建用户界面。1.4.5 版本是该框架的一个稳定版本，其API中文版对于国内开发者...
2. **表格(Table)**：EasyUI 的表格组件允许动态加载数据，支持排序、分页、过滤和编辑等功能。通过`.datagrid()`方法，你可以将HTML表格转化为功能丰富的数据展示区。 3. **菜单(Menu)**：菜单系统提供了一种组织...
在 `JqueryEasyUI1.4参考手册.chm` 中，你将找到关于 jQuery EasyUI 1.4 版本的详尽指南。`.chm` 文件是一种微软编写的帮助文档格式，它包含索引、搜索功能和一系列主题，方便用户查找和学习。 **组件介绍** ...
jQuery EasyUI还支持插件扩展，例如，为了实现拖放功能，可以使用`draggable`和`droppable`插件，通过设置相应的参数和回调函数，实现元素的拖放操作。 总的来说，jQuery EasyUI官方API中文版是开发者不可或缺的...
它可以实现分页、排序、过滤和编辑等功能，并支持远程数据加载。 #### 2.2 对话框（Dialog） 对话框用于显示独立的内容，可以设置为模态或非模态，支持关闭按钮、最大化、最小化等操作。常用于弹出窗口展示信息或...
通过深入研究这些代码，可以了解每个案例的实现思路，学习如何结合EasyUI组件和jQuery方法实现特定功能。此外，查看源码也有助于理解EasyUI的API用法以及事件绑定和回调机制。 ### 5. 学习与实践 - **学习资源**：...