jquery easyUI分页dataGrid-Json
dataGrid-调用json的url可以是存放json数据的文件
也可以是返回json格式数据的请求url
后台
private int page;//使用插件,当前页码
//private int rows;//使用插件,每页行数,暂不使用
//----------------------
public String ajaxGrid() throws Exception{
int pageNo=0;
if(page!=0){
pageNo=page;
}
pages=userDao.getUserByPageNo(pageNo);
HttpServletResponse response=(HttpServletResponse) ActionContext.getContext().get(ServletActionContext.HTTP_RESPONSE);
//必须加上,防止前端从JSON中取出的数据成乱码
response.setCharacterEncoding("UTF-8");
PrintWriter out=response.getWriter();
//JSONObject纯对象
JSONObject jsonObject=new JSONObject();
jsonObject.put("total", pages.getTotalCount());
jsonObject.put("rows", pages.getPageList());
out.print(jsonObject.toString());
System.out.println("-------"+jsonObject);
return null;
}
前端
<%@ include file="base/baseHead.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<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="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script>
$(function(){
$('#test').datagrid({
//title:'My Title',
iconCls:'icon-save',
width:600,
height:350,
nowrap: false,
striped: true,
collapsible:true,
url:'ajaxGriduser.jspx',
sortName: 'uid',
sortOrder: 'desc',
remoteSort: false,
idField:'uid',
pageNumber:1,
pageSize:5,//若后台禁用pageList,此只用于显示
pageList:[5,10,20,50],
frozenColumns:[[
{field:'ck',checkbox:true},
{title:'uid',field:'uid',width:80,sortable:true}
]],
columns:[[
{field:'uname',title:'Name',width:120},
{field:'upwd',title:'Pwd',width:120,rowspan:2,sortable:true,
sorter:function(a,b){
return (a>b?1:-1);
}
},
]],
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');
if (p){
$(p).pagination({
onBeforeRefresh:function(){
alert('before refresh');
}
});
}
});
function getSelections(){
var ids = [];
var rows = $('#test').datagrid('getSelections');
for(var i=0;i<rows.length;i++){
ids.push(rows[i].uid);
}
alert(ids.join(':'));
}
function clearSelections(){
$('#test').datagrid('clearSelections');
}
</script>
</head>
<body>
<h1>DataGrid</h1>
<div style="margin-bottom:10px;">
<a href="#" onclick="getSelections()">选择项的id</a>
<a href="#" onclick="clearSelections()">取消选择</a>
</div>
<table id="test"></table>
</body>
</html>
转载于:https://www.cnblogs.com/archie2010/archive/2011/01/10/1931920.html
jquery easyUI分页dataGrid-Json相关推荐
- 给Jquery easyui 的datagrid 每行增加操作链接（转载）
转自:http://www.thinkphp.cn/code/207.html 通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接 我们都知道Jquery的E ...
- 给Jquery easyui 的datagrid 每行增加操作链接(转)
http://www.thinkphp.cn/code/207.html 通过formatter方法给Jquery easyui 的datagrid 每行增加操作链接 我们都知道Jquery的Easy ...
- 给Jquery easyui 的datagrid 每行添加操作链接
背景 我们都知道Jquery的Easy-UI的datagrid能够加入而且自己定义Toolbar,这样我们选择一行然后选择toolbar的对应button就能够对这行的数据进行操作.但实际项目里我们可 ...
- JQuery EasyUI之DataGrid列名和数据列分别设置不同对齐方式(转)
需求如下 现有数据列三列 Name,Age,CreateDate 数据 张三,18,2000-12-09 :12:34:56 李四,28,2000-12-09 :12:34:56 王麻子,38,200 ...
- JQuery EasyUI之DataGrid列名和数据列分别设置不同对齐方式
我使用的Jquery Easyui 1.2.6 需求如下 现有数据列三列 Name,Age,CreateDate 数据 张三,18,2000-12-09 :12:34:56 李四,28,2000-1 ...
- jquery easyui的datagrid在初始化的时候会请求两次URL？
为什么80%的码农都做不了架构师?>>> html代码中利用class声明了datagrid,导致easyUI解析class代码的时候先解析class声明中的datagrid, ...
- jQuery EasyUI DataGrid Checkbox 数据设定与取值
纯粹做个记录,以免日后忘记该怎么设定. 这一篇将会说明两种使用 jQuery EasyUI DataGrid 的 Checkbox 设定方式,以及在既有数据下将 checked 为 true 的该笔数 ...
- jQuery EasyUI教程之datagrid应用-1
一.利用jQuery EasyUI的DataGrid创建CRUD应用 对网页应用程序来说,正确采集和管理数据通常很有必要,DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录.本教 ...
- eazyui ajax传值,jquery easyui ajax data属性传值方式
$.ajax({ url:url, type:'post', data:data, dataType:'json', contentType: "application/x-www-form ...
最新文章
- 6行代码解决golang TCP粘包
- node 获取表单数据 为空_数据结构与算法(python)单向链表篇
- html zoom中心,css中的zoom的使用
- 项目实例改编：利用structs2的action 实时显示图片、pdf和其他内容的框架抽取。（转）...
- Centos编译安装Apache 2.4.6笔记 配置
- Linux 文件 IO
- c 语言 求文件大小,C程序中如何读取目录中的文件并判断文件大小等信息
- 浅谈HTTP中Get与Post的区别[转 hyddd]
- 阿里内核月报2017年01月
- Python与MongoDB的交互
- 为什么“隐性知识”比“刻意练习”更重要？
- 【刘润五分钟商学院】-163生存，还是灭亡，没有中间态
- CentOS7系统安装搜狗拼音输入法
- 自制Openerp图表
- 面向对象-基础语法讲解（案例-烤地瓜、搬家具）
- Pygame实战：预防老年痴呆，写个Python小游戏来锻炼大脑！！！
- PPT中一种类似手写的字体
- weather 城市编号
- vue-admin-elem对接地图报错Unable to preventDefault inside passive event listener invocation.
- 突发事件，如何快速制作答题卡 ｜ Mixlab设计黑客