easyui下的datagrid后台数据加载和分页
2017-04-27 10:08
405 查看
Datagrid的创建需要做以下几件事情,
第一步,我们需要引入以下几个个包,少一个都不可以,否则你会发现你无论做的再怎么对结果都会出错,
第二步,引入了这些包之后,我们需要创建一个javabeans,就像是建表一样,照着填上去就可以了,
public class Library{
这些写你要的属性,然后点击右键获得get和set方法
private 类型 属性名;
public String toString() {
return "toString类型名 [类型名=" +类型名+
"]";
}
public Library() {
}
public Library(String
类型名){
super();
this.类型名=
类型名;
}
}
好了这个bean就做好了。
第三步,在后台dao层建立个方法,把bean的信息放进去
public List<bean的名字> daoShoworg(String
sql) {
List<bean的名字>
list =
new ArrayList<bean的名字>();
try {
conn = this.getConn();
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
while (rs.next()) {
Library 实例名=new bean的名字(
//一个个放进去
Rs.get类型(1),
);
list.add(lib);
}
} catch (Exception
e) {
e.printStackTrace();
} finally {
this.closeAll(conn,
pstmt,
rs);
}
return list;
}
这个后台代码就创建好了。
第四步,建立一个servlet,获得到dao里面的方法,然后往前台送,easyui会根据url=servlet获得数据,
String sql = “select
你需要的项目 from 表名”
//注意这里sql找到的要与你的后台的相对应,不能说select
了一name,age,然后后台只toString了一个
List<Library>
list =
a.daoShoworg(sql);
int total =
a.getTotal();
JSONArray Js = JSONArray.fromObject(list);
JSONObject jsonObject =
new JSONObject();
jsonObject.put("total",
list.size());
jsonObject.put("rows",
Js.toString());
PrintWriter out=response.getWriter();
out.print(jsonObject.toString());
第五步,后台代码都弄好了,现在就是要在前台添加一个datagrid了,首先在body底下添加一个div
<div>
<table id="dg">
</table>
</div>
然后这里介绍的使用js来渲染这个table,
在上面的js代码中写到
$(function(){
$('#dg').datagrid({
title:'',
//下面三列是分页所需待会会讲到
pagination:true,
pageSize:
8 ,
pageList:[8,16,24,32,40]
,
rownumbers:true,
height:505 ,
url:'你的json数据打包的后台'
,
fitColumns:true
,
striped:
true ,
frozenColumns:[[//冻结列特性 ,不要与fitColumns 特性一起使用
//这个checkbox在后面使用删除和修改需要用到,
{
field:'ck'
,
width:10 ,
checkbox:
true,
}
]],
//给你的数据放列名,这里如果你后台需要与之相对应,否则会出现交错或者空出的情况
columns:[[
{
field:'libname'
,//切记要和你的对象名一致,不然不会出来。
title:'列名',
width:20 ,
},
在对datagrid成功创建并且建立了数据之后之后就是对数据进行操作了,
A.分页
前端:
pagination:true,
pageSize:
8 ,
pageList:[8,16,24,32,40]
,
rownumbers:true,
在创建datagrid的时候写入这些,然后就交给后台了;
后台:
1.
int currentPage = Integer.parseInt(request.getParameter("page"));//1
int pageSize = Integer.parseInt(request.getParameter("rows"));//5
接受在前台传输过来的page和rows值,这个是easyui自带的,只要写了前端后台就可以接受到
2.
分页需要在原先的datagrid拼接json的后台servlet中的sql语句后面加个限制
limit "+ (currentPage-1)*pageSize +"
, "+ pageSize+"
3.在后台dao里面写个方法
public int getTotal(){
int count = 0;
String sql =
" select count(*) from 表 ";
try{
conn = this.getConn();
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
if(rs.next()){
count =
rs.getInt(1);
}
}
catch (Exception
e) {
e.printStackTrace();
} finally {
this.closeAll(conn,
pstmt,
rs);
}
return count;
}
}
然后在servlet用一个int来接受它
将这个int放进
jsonObject.put("total",
这个int);
好了现在这个datagrid就有了分页的效果
各位照套这个就可以了
第一步,我们需要引入以下几个个包,少一个都不可以,否则你会发现你无论做的再怎么对结果都会出错,
第二步,引入了这些包之后,我们需要创建一个javabeans,就像是建表一样,照着填上去就可以了,
public class Library{
这些写你要的属性,然后点击右键获得get和set方法
private 类型 属性名;
public String toString() {
return "toString类型名 [类型名=" +类型名+
"]";
}
public Library() {
}
public Library(String
类型名){
super();
this.类型名=
类型名;
}
}
好了这个bean就做好了。
第三步,在后台dao层建立个方法,把bean的信息放进去
public List<bean的名字> daoShoworg(String
sql) {
List<bean的名字>
list =
new ArrayList<bean的名字>();
try {
conn = this.getConn();
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
while (rs.next()) {
Library 实例名=new bean的名字(
//一个个放进去
Rs.get类型(1),
);
list.add(lib);
}
} catch (Exception
e) {
e.printStackTrace();
} finally {
this.closeAll(conn,
pstmt,
rs);
}
return list;
}
这个后台代码就创建好了。
第四步,建立一个servlet,获得到dao里面的方法,然后往前台送,easyui会根据url=servlet获得数据,
String sql = “select
你需要的项目 from 表名”
//注意这里sql找到的要与你的后台的相对应,不能说select
了一name,age,然后后台只toString了一个
List<Library>
list =
a.daoShoworg(sql);
int total =
a.getTotal();
JSONArray Js = JSONArray.fromObject(list);
JSONObject jsonObject =
new JSONObject();
jsonObject.put("total",
list.size());
jsonObject.put("rows",
Js.toString());
PrintWriter out=response.getWriter();
out.print(jsonObject.toString());
第五步,后台代码都弄好了,现在就是要在前台添加一个datagrid了,首先在body底下添加一个div
<div>
<table id="dg">
</table>
</div>
然后这里介绍的使用js来渲染这个table,
在上面的js代码中写到
$(function(){
$('#dg').datagrid({
title:'',
//下面三列是分页所需待会会讲到
pagination:true,
pageSize:
8 ,
pageList:[8,16,24,32,40]
,
rownumbers:true,
height:505 ,
url:'你的json数据打包的后台'
,
fitColumns:true
,
striped:
true ,
frozenColumns:[[//冻结列特性 ,不要与fitColumns 特性一起使用
//这个checkbox在后面使用删除和修改需要用到,
{
field:'ck'
,
width:10 ,
checkbox:
true,
}
]],
//给你的数据放列名,这里如果你后台需要与之相对应,否则会出现交错或者空出的情况
columns:[[
{
field:'libname'
,//切记要和你的对象名一致,不然不会出来。
title:'列名',
width:20 ,
},
在对datagrid成功创建并且建立了数据之后之后就是对数据进行操作了,
A.分页
前端:
pagination:true,
pageSize:
8 ,
pageList:[8,16,24,32,40]
,
rownumbers:true,
在创建datagrid的时候写入这些,然后就交给后台了;
后台:
1.
int currentPage = Integer.parseInt(request.getParameter("page"));//1
int pageSize = Integer.parseInt(request.getParameter("rows"));//5
接受在前台传输过来的page和rows值,这个是easyui自带的,只要写了前端后台就可以接受到
2.
分页需要在原先的datagrid拼接json的后台servlet中的sql语句后面加个限制
limit "+ (currentPage-1)*pageSize +"
, "+ pageSize+"
3.在后台dao里面写个方法
public int getTotal(){
int count = 0;
String sql =
" select count(*) from 表 ";
try{
conn = this.getConn();
pstmt = conn.prepareStatement(sql);
rs = pstmt.executeQuery();
if(rs.next()){
count =
rs.getInt(1);
}
}
catch (Exception
e) {
e.printStackTrace();
} finally {
this.closeAll(conn,
pstmt,
rs);
}
return count;
}
}
然后在servlet用一个int来接受它
将这个int放进
jsonObject.put("total",
这个int);
好了现在这个datagrid就有了分页的效果
各位照套这个就可以了
相关文章推荐
- asp.net 中使用EasyUI Datagrid 加载动态数据分页查询
- easyUI-DataGrid加载数据和分页
- 总结目前用Jquery-Easyui做后台,遇到datagrid分页及数据刷新问题
- ASP.NET easyUI--datagrid 通过ajax请求ASP.NET后台数据的分页查询
- 关于easyui datagrid 加载本地数据
- easyui datagrid 避免初始化就加载数据
- Jquery Easyui插件Datagrid获取后台mssql数据通过存储过程高效分页来获取
- Easyui Datagrid 如何实现后台交互显示用户数据列表
- 解决easyui datagrid加载数据时,checkbox列没有根据checkbox的值来确定是否选中
- 在前端页面对easyui中的datagrid与jqgrid加载后的数据进行操作
- 解决easyUI 1.4.1 dataGrid加载数据慢的问题
- EasyUI DataGrid分页数据绑定
- EasyUI DataGrid 使用(分页,url数据获取,data转json)
- easyui加载datagrid和treegrid的几种json数据格式
- easyui datagrid 动态列和前端分页,以及加载Datatable
- 使用easyUI的treegrid的时候,出现后台返回数据为空时,treegrid加载了前面请求到的数据到页面上的问题
- 【项目实战】---为EasyUI DataGrid的某一动态加载数据列添加超链接,点击超链接触发Onclick方法
- EasyUI入门4 datagrid数据加载的正确方式
- EasyUI DataGrid动态加载数据
- EasyUI Datagrid 分页的情况下实现点击表头的小三角图标对数据库中所有数据重新排序