KendoUI Grid 前后端(Java) 完整案例之查询翻页

最新推荐文章于 2021-02-12 15:45:38 发布
最新推荐文章于 2021-02-12 15:45:38 发布
阅读量661 收藏
点赞数
文章标签： kendoui grid

同文地址： http://kendoui.io/blog/38.html

 

KendoUI Grid 前后端(Java 代码参考)（以下案例基于springmvc + freemarker + MyBatis + RequireJS ）

前端：demo.js

?
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
require([ 'lib/domReady!' ],      function  () {
 
     kendo.culture( "zh-CN" );
 
     $( "#grid" ).kendoGrid({
         dataSource: {
             transport: {
                 read: {
                     url: CONTEXT_PATH +  "/api/teedm01" ,
                     dataType:  "json"
                 }
             },
             pageSize: 10,
             serverPaging:  true ,
             serverSorting:  true ,
             serverFiltering:  true ,
             schema: {
                 data:  function  (d) {  return  d.data; },
                 total:  function  (d) {  return  d.count; }
             }
         },
         height: 300,
         selectable:  "multiple cell" ,
         pageable:  true ,
         sortable:  true ,
         columns: [
             {
                 field:  "companyCode" ,
                 title:  "公司代码"
             },
             {
                 field:  "companyName" ,
                 title:  "公司名称"
             },
             {
                 field:  "companyTel" ,
                 title:  "公司电话"
             },
             {
                 field:  "companyAddr" ,
                 title:  "公司地址"
             },
             {
                 field:  "countryCode" ,
                 title:  "国家代码"
             },
             {
                 field:  "companyDate" ,
                 title:  "公司成立日期"
             }
         ]
     });
 
});

 

1
<span style= "font-family: 微软雅黑, 'Microsoft YaHei';" ><br></span>

前端: demo.ftl

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<! DOCTYPE  html>
< html >
< head >
     < title >Grid单表展示</ title >
     <#import "spring.ftl" as spring />
     < link  rel = "stylesheet"  type = "text/css"  href="<@spring.url '/avatar/plugins/kendoui/styles/kendo.common.min.css'/>"/>
< link  rel = "stylesheet"  type = "text/css"  href="<@spring.url '/avatar/plugins/kendoui/styles/kendo.blueopal.min.css'/>"/>
< link  rel = "stylesheet"  type = "text/css"  href="<@spring.url '/avatar/styles/default/css/style.css'/>">
< link  rel = "stylesheet"  type = "text/css"  href="<@spring.url '/avatar/styles/base.css'/>">
 
</ head >
< body >
     < div  id = "example"  style = "margin: 0 auto ;width: 1000px;padding: 10px;" >
         < div  id = "grid" ></ div >
     </ div >
 
     < script  data-main="<@spring.url '/avatar/demo/grid/basic/app.js'/>" src="<@spring.url '/avatar/js/lib/require.js'/>" ></ script >
</ body >
</ html >

Java后端控制器：DemoController.java

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import  org.springframework.stereotype.Controller;
import  org.springframework.ui.ModelMap;
import  org.springframework.web.bind.annotation.RequestMapping;
import  org.springframework.web.bind.annotation.RequestMethod;
 
@Controller
@RequestMapping ( "/grid" )
public  class  DemoController{
 
    @RequestMapping (value= "/basic" , method=RequestMethod.GET)
    public  String show(ModelMap model) {
       return  "demo.ftl" ;
    }
}

 

Java后端Rest接口：DemoApi.java

?
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import  com.sheeyi.avatar.common.entity.PageResultEntity;
import  com.sheeyi.avatar.common.entity.ResultEntity;
import  com.sheeyi.avatar.core.anotation.mapping.*;
import  com.sheeyi.avatar.core.base.BaseResource;
import  com.sheeyi.avatar.core.dao.mapper.MapperExample;
import  com.sheeyi.avatar.core.web.Query;
import  com.sheeyi.avatar.demo.grid.model.Teedm01;
import  org.springframework.http.ResponseEntity;
import  org.springframework.web.bind.annotation.*;
import  org.springframework.web.context.request.WebRequest;
 
import  java.util.Map;
 
@RestController
@RequestMapping ( "/api/teedm01" )
public  class  Teedm01Api  extends  BaseResource<Teedm01> {
 
     @GetManyRequestMapping
     public  PageResultEntity<Teedm01> selectByMapper(  @RequestParam  Map<String,Object> params ){
 
         int  offset = Query.getOffset( params );
         int  limit = Query.getLimit(params);
 
         return  super .selectByMap( params, offset, limit);
     }
 
     @CountRequestMapping
     private  ResponseEntity count( WebRequest webRequest ){
 
         return  super .countByExample( new  MapperExample());
     }
 
     @GetOneRequestMapping
     public  Teedm01 selectByKey(  @PathVariable ( "id" ) String id  ){
         return  super .selectByKey( id );
     }
 
     @PutRequestMapping
     public  ResponseEntity<ResultEntity> update(  @RequestBody  Teedm01 t ){
         return  super .update( t );
     }
 
     @PostRequestMapping
     public  ResponseEntity<ResultEntity> insert( Teedm01 t ){
 
         return  super .insert( t );
     }
 
     @DeleteRequestMapping
     public  ResponseEntity<ResultEntity> delete(  @PathVariable ( "id" ) String id ){
 
         return  super .delete( id );
     }
}

 

Java后端工具类：Query.java

?
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
39
40
41
42
43
import  org.springframework.util.StringUtils;
 
import  java.util.Map;
 
public  class  Query {
 
     public  static  final  String OFFSEET =  "skip" ;
 
     public  static  final  String LIMIT =  "pageSize" ;
 
     public  static  final  int  DEFAULT_OFFSET =  0 ;
 
     public  static  final  int  DEFAULT_LIMIT =  10 ;
 
     public  static  int  getOffset( Map params ){
 
         Object offset = params.get( OFFSEET );
         if (!StringUtils.isEmpty( offset )){
 
             try  {
                 return  Integer.parseInt(offset.toString());
             } catch  ( NumberFormatException e ){
                 return  DEFAULT_OFFSET;
             }
         }
         return  DEFAULT_OFFSET;
     }
 
     public  static  int  getLimit( Map params ){
 
         Object limit = params.get( LIMIT );
         if (!StringUtils.isEmpty( limit )){
 
             try  {
                 return  Integer.parseInt(limit.toString());
             } catch  ( NumberFormatException e ){
                 return  DEFAULT_LIMIT;
             }
         }
         return  DEFAULT_LIMIT;
     }
 
}

 

Java后端Rest集成基类：BaseResource.java

?
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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
import  com.sheeyi.avatar.common.ResultStatus;
import  com.sheeyi.avatar.common.entity.PageResultEntity;
import  com.sheeyi.avatar.common.entity.ResultEntity;
import  com.sheeyi.avatar.common.entity.ResultEntityBuilder;
import  com.sheeyi.avatar.core.dao.mapper.MapperExample;
import  org.apache.ibatis.session.RowBounds;
import  org.springframework.beans.factory.annotation.Autowired;
import  org.springframework.http.HttpStatus;
import  org.springframework.http.ResponseEntity;
import  org.springframework.web.context.request.WebRequest;
 
import  java.util.HashMap;
import  java.util.Iterator;
import  java.util.List;
import  java.util.Map;
 
public  abstract  class  BaseResource<T> {
 
     @Autowired
     protected  BaseService<T> baseService;
 
     public  PageResultEntity<T> selectByExample(MapperExample example,  int  skip,  int  pageSize){
 
         RowBounds rowBounds =  new  RowBounds(skip, pageSize);
 
         List<T> ts = baseService.selectByExample(example, rowBounds);
         int  count = baseService.countByExample(example);
 
         PageResultEntity<T> pageResultEntity =  new  PageResultEntity<T>();
         pageResultEntity.setData( ts );
         pageResultEntity.setCount( count );
 
         return  pageResultEntity;
     }
 
     public  PageResultEntity<T> selectByMap(Map<String, Object> params,  int  skip,  int  pageSize){
 
         PageResultEntity<T> pageResultEntity = getPageResultEntity(params, skip, pageSize);
         return  pageResultEntity;
     }
 
     protected  PageResultEntity<T> getPageResultEntity(Map<String, Object> params,  int  skip,  int  pageSize) {
         RowBounds rowBounds =  new  RowBounds(skip, pageSize);
 
         List<T> ts = baseService.selectByMap(params, rowBounds);
         int  count = baseService.countByMap(params);
 
         PageResultEntity<T> pageResultEntity =  new  PageResultEntity<T>();
         pageResultEntity.setData( ts );
         pageResultEntity.setCount( count );
         return  pageResultEntity;
     }
 
     public  PageResultEntity<T> select(WebRequest request, int  skip,  int  pageSize  ) {
         HashMap params =  new  HashMap();
         Iterator<String> it = request.getParameterNames();
         while  (it.hasNext())
         {
             String key = it.next();
             if (!key.equals( "take" )&&!key.equals( "page" )&&!key.equals( "pageSize" )&&!key.equals( "skip" ))
                 params.put(key,request.getParameter(key));
         }
 
         PageResultEntity<T> pageResultEntity = getPageResultEntity(params, skip, pageSize);
         return  pageResultEntity;
     }
 
 
     public  ResponseEntity<ResultEntity> countByExample(MapperExample example){
 
         int  count = baseService.countByExample(example);
         return  new  ResponseEntity<ResultEntity>(ResultEntityBuilder.build().result( String.valueOf( count ) ), HttpStatus.OK);
     }
 
     public  T selectByKey( String id  ){
         T t =baseService.selectByKey( id );
         return  t;
     }
 
     public  ResponseEntity<ResultEntity> update( T t ){
         baseService.updateByKey( t );
         ResultEntity resultEntity = ResultEntityBuilder.build().status(ResultStatus.SUCCESS).msg(  "更新操作成功."  );
         ResponseEntity<ResultEntity> responseEntity =  new  ResponseEntity<ResultEntity>( resultEntity, HttpStatus.OK);
         return  responseEntity;
     }
 
     public  ResponseEntity<ResultEntity> insert( T t ){
         baseService.insert(t);
 
         ResultEntity resultEntity = ResultEntityBuilder.build().status(ResultStatus.SUCCESS).msg(  "新增操作成功."  );
         ResponseEntity<ResultEntity> responseEntity =  new  ResponseEntity<ResultEntity>(resultEntity, HttpStatus.OK);
         return  responseEntity;
     }
 
     public  ResponseEntity<ResultEntity> insertPatch( List<T> t ){
         baseService.insertPatch(t);
 
         ResultEntity resultEntity = ResultEntityBuilder.build().status(ResultStatus.SUCCESS).msg(  "批量新增操作成功."  );
         ResponseEntity<ResultEntity> responseEntity =  new  ResponseEntity<ResultEntity>(resultEntity, HttpStatus.OK);
         return  responseEntity;
     }
 
     public  ResponseEntity<ResultEntity> delete( String id ){
 
         baseService.deleteByKey(id);
 
         ResultEntity resultEntity = ResultEntityBuilder.build().status(ResultStatus.SUCCESS).msg(  "删除操作成功."  );
         ResponseEntity<ResultEntity> responseEntity =  new  ResponseEntity<ResultEntity>( resultEntity, HttpStatus.OK);
         return  responseEntity;
     }
}

 

Java后端业务逻辑Service：DemoService.java

?
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
39
40
41
import  com.sheeyi.avatar.core.base.BaseService;
import  com.sheeyi.avatar.demo.grid.model.Teedm01;
import  com.sheeyi.avatar.logging.AvatarLogger;
import  com.sheeyi.avatar.logging.AvatarLoggerFactory;
import  org.apache.ibatis.session.RowBounds;
import  org.springframework.cache.annotation.CacheEvict;
import  org.springframework.cache.annotation.CachePut;
import  org.springframework.cache.annotation.Cacheable;
import  org.springframework.stereotype.Service;
 
import  java.util.List;
import  java.util.Map;
 
@Service
public  class  DemoService  extends  BaseService<Demo> {
 
     @Override
     public  Demo selectByKey( Object key ){
 
 
         return  super .selectByKey( key);
     }
 
     @Override
     public   List<Demo> selectByMap(Map<String, Object> params, RowBounds rowBounds)
     {
         return  super .selectByMap(params, rowBounds);
     }
 
     @Override
     public  int  updateByKey( Demo teedm01 )
     {
         return  super .updateByKey( teedm01 );
     }
 
     @Override
     public  int  deleteByKey(Object key){
 
         return  super .deleteByKey( key );
     }
}

 

iteye_4931
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Kendoui grid多级分组表格展现
03-19
应用kendoui grid实现的多级分组表格展现，里面包含了表格的分组统计以及单表合计功能、还有针对表格的刷新以及子表格刷新功能。此功能是在原有demo版本上改进，增加了很多的个别需求实现，在原来的版本是做不到的。 具体的引用js和style我没有上传，此代码只是备忘以及便于各位在使用kendoui这个插件时能更多的运用一些技巧的处理，所以只提供了查看的代码以及极个别的js部分。 应用kendoui版本：kendoui.trial.2012.3.1114
kendo ui使用之Grid后台分页查询
07-06 456
UI框架kendoui非常不错，这里附上地址：http://demos.telerik.com/kendo-ui/grid/index 它的API很强大，不过相信有很多懒人不愿意认真的去学习和了解，单单看例子，可能不能完全满足我们要实现的功能，这里就一步步教大学实现后台分页查询功能。 新建一个ASP.NET的WEB项目，请在WEB中引入kendpublic class DataHan...
java 对象查询_java – JDBI对象查询
weixin_36463088的博客
02-12 249
之前我曾经使用JDBI作为Java持久性的东西,但它始终是流畅的API而不是对象API.现在尝试使用Object API.我有一个非常简单的DAO对象：public interface PersonDAO {@SqlQuery("insert into person(id,first_name,last_name,position) values(:id,:firstName,:lastName,...
Telerik Kendo UI 那点事【3】GridView MVVM前后台联动服务端分页、分组、过滤（查询）、排序
蓝星极盾
09-25 1万+
中文化之后，我们开始具体使用kendo ui组件。经常开发系统的我，通常从最常用的控件用起，那就是表格控件GridView！现在的软件系统基本上就是标签框、文本框、选择框、树、表格堆砌而成。因此接触任何一种UI组件的时候，我通常都最为关注GridView，表格控件。小小的表格控件，做的好，能够给前端呈现和使用带来很好的感受的同时，还能够大幅度降低开发的工作量。 Kendo UI在这方面让我十分满
Kendo UI框架grid的Excel导出功能改进js代码
08-26
Kendo UI框架提供了强大的Excel导出功能，通过Grid的saveAsExcel能方便地导出Grid中的数据，而且格式美观大方，使用起来也非常方便。但是在实际使用中不是很理想，主要有以下两个问题： 1. 导出的列数据是原始值 ...
动态设置显示kendoui grid控件某一列的格式
09-22
首先，理解`kendoui grid customfilter`标签，这通常意味着我们需要实现自定义的过滤逻辑。在Kendo UI Grid中，过滤功能允许用户根据预设条件筛选数据。而自定义过滤则允许开发者扩展或替换默认的过滤行为，以适应更...
KendoUI速查手册--中文
01-23
Kendo UI 的数据管理组件如 DataSource 和 Model 提供了一套完整的数据处理方案。DataSource 是一个轻量级的数据抽象层，它可以处理数据的加载、过滤、排序、分页和转换。Model 则用于定义数据对象的结构和行为，...
kendo-ui-js-grid.zip_Kendo_grid js
09-21
在"Kendo_grid js"这个项目中，我们将探讨如何使用Kendo UI的JavaScript API来实现Grid的增删改查功能，以及如何进行分页查询、服务交互和异常处理。 首先，Kendo UI Grid的创建通常涉及HTML模板和JavaScript配置。...
KendoUI所有事件自带功能的事件
火麒马
12-28 3069
各位朋友，当你看到下面的事件的时候，你的思想上已经完成这个功能了 events: [ CHANGE, 'dataBinding', 'cancel', DATABOUND, DETAILEXPAND, ...
我的KendoUI使用经验总结
分享技术，共同进步!
10-23 1万+
kendoUI的文档大多外国网站，访问速度很尴尬。这边梳理我开发过程中遇到的一些重要的问题。 (1) 要想使用kendo对象的属性或方法，必须将所需html元素绑定kendo对象。 var editDiv = $(&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;#editWindow&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;a...
KendoUI Grid For JSP
weixin_42547157的博客
09-21 469
1.基础用法        引入标签库：&lt;%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%&gt;       页面标签：结构如下： &lt;kendo:grid name="grid" groupable="true" sortable="true" style="height:55
Kendo UI Grid 用法详细整理
热门推荐
yzh的博客
12-12 2万+
在使用Kendo UI进行前端开发过程中，我们用的最多的可能就是数据表格Grid。在此文中，我将我所用到和知道的grid数据校验、数据绑定、数据操作、动态列加载、合并行/列/头、点击事件、内置事件、单元格跳转、提示框、全选、行移动、状态栏添加合计、轮播效果和分组折叠等用法，做了一个十分详细的整理，同时在其中也有很多grid操作的实际案例补充，如果有耐心看完，将能在使用Kendo UI grid时，用的更加灵活，加油吧。 知识无极限，与你来相见，欢迎点赞支持！...
KendoUI Grid分组、分页控件参数记录
GoodIdea
12-23 2208
$('#grid').kendoGrid({ dataSource:{ transport:{ read:{ //读取 url:"", //请求地址 type:"POST", //请求方法 POST GET dataType:"json" //数...
KendoUI Grid 服务器分页（可选单页显示数据量）
weixin_30457881的博客
07-13 1517
1 <div id="parent"> 2 <div id="grid"></div> 3 </div> 1 var dataSource = new kendo.data.DataSource({ 2 transport: { 3 rea...
kendo-ui中kendoGrid的用法
yjz764297625的博客
06-30 803
本文实现了一个kendo-ui中kendoGrid从servlet中获取数据，从而显示出来的例子。 程序结构如下： [img]http://dl2.iteye.com/upload/attachment/0086/3520/192b910d-9f0a-3312-9d11-7b5a359ff430.jpg[/img] User.java代码如下： [code="java"] p...
kendo-ui 获取后台数据
woyizhizaizhaoni的专栏
11-12 570
1: dataSource: DataSourceFactory.createBaseFrontDefault('/api/staff/supplierPersonMoney/procPerMoneyDet?processInstId=' + processInstId + '&processResultCode=' + '审批'), 2: let data: k...
kendoui.for.jquery
最新发布
08-07
Kendoui for jQuery 是一套基于jQuery的Web开发工具库。它提供了丰富的界面组件和强大的功能，帮助开发者快速构建交互丰富、用户友好的Web应用。 Kendoui for jQuery 包含多个组件，如表格、图表、日历、下拉框等。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值