`
kendoui
  • 浏览: 28120 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

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

阅读更多

同文地址: 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 );
    }
}

 

1
1
分享到:
评论

相关推荐

    Kendoui grid多级分组表格展现

    应用kendoui grid实现的多级分组表格展现,里面包含了表格的分组统计以及单表合计功能、还有针对表格的刷新以及子表格刷新功能。此功能是在原有demo版本上改进,增加了很多的个别需求实现,在原来的版本是做不到的。...

    动态设置显示kendoui grid控件某一列的格式

    首先,理解`kendoui grid customfilter`标签,这通常意味着我们需要实现自定义的过滤逻辑。在Kendo UI Grid中,过滤功能允许用户根据预设条件筛选数据。而自定义过滤则允许开发者扩展或替换默认的过滤行为,以适应更...

    Kendo UI框架grid的Excel导出功能改进js代码

    Kendo UI框架提供了强大的Excel导出功能,通过Grid的saveAsExcel能方便地导出Grid中的数据,而且格式美观大方,使用起来也非常方便。但是在实际使用中不是很理想,主要有以下两个问题: 1. 导出的列数据是原始值 ...

    KendoUI速查手册--中文

    Kendo UI 的数据管理组件如 DataSource 和 Model 提供了一套完整的数据处理方案。DataSource 是一个轻量级的数据抽象层,它可以处理数据的加载、过滤、排序、分页和转换。Model 则用于定义数据对象的结构和行为,...

    标准kendo ui-grid控件用法

    Kendo UI Grid是一款强大的数据网格组件,由Telerik公司开发,广泛应用于Web应用程序中,用于展示和操作结构化的数据。这个控件提供了丰富的功能,包括数据分页、排序、过滤、编辑、分组、汇总等,同时支持触摸设备...

    Kendo UI Grid

    Kendo UI ,在ASP.NET MVC 4中使用Kendo UI Grid

    ui jquery kendo ui 一个不错的国外ui kendoui 又名剑道UI

    1. **组件丰富**:Kendo UI包含了数据网格(Grid)、日历(Calendar)、下拉列表(ComboBox)、日期选择器(DatePicker)、时间选择器(TimePicker)、滑块(Slider)、图表(Charts)等多种UI组件,覆盖了日常开发...

    kendo ui 实现复杂表头

    该代码类里面实现的主要操作: 1.ajax 访问后代接口,并将结果返回值绑定到kendo ui 的grid上。 2. 实现复杂的kendo ui 的grid的表头设置,这个是本人亲自写的,并且经过验证是正确的

    Kendo UI Grid示例下载

    Kendo UI Grid为开发者提供了100多种丰富的网格功能,从基本的筛选、排序,到高级的编页、分层数据分组等等。毫不夸张的说,Kendo UI Grid是同类产品中数一数二的佼佼者。耳听为虚眼见为实,下面我为大家整理了它的...

    kendoui asp.net mvc

    文件名`kendoui.aspnetmvc.2013.1.319.commercial.msi`暗示这是一个2013年1月发布的商业版本的安装包,其中包含了Kendo UI for ASP.NET MVC的特定版本。安装此文件后,开发者可以获得完整的库和服务器端组件,以便在...

    kendoui.for.jquery.2018.3.911.commercial

    2018年R3版本(kendoui.for.jquery.2018.3.911.commercial)是该框架的一个重要更新,提供了丰富的组件和功能,以满足现代Web开发的需求。 首先,Kendo UI的核心是其对jQuery库的深度整合。jQuery作为广泛使用的...

    Kendo UI for Vue.docx

    "Kendo UI for Vue" Kendo UI for Vue 是一个使用 Vue.js 框架的本机组件库,旨在帮助开发者快速构建企业级 Web 应用程序。下面将详细讲解 Kendo UI for Vue 的使用方法、配置过程、组件介绍等知识点。 什么是 ...

    Telerik Kendo UI 2013.1.319 商业完整版本

    Telerik Kendo UI 2013.1.319 商业完整版本 无需序列号、无需破解; kendo ui 是一套Telerik 公司推出的面向HTML5 及 移动设备的轻量级UI组件,其主要有Js+Css实现了入 Grid,Tree,Menu,Chart等各种业务组件. 不...

    kendo ui学习资料

    Kendo UI 是一款由Telerik公司开发的前端UI库,专为构建现代Web应用程序而设计。它提供了丰富的组件集合,包括数据网格、日历、图表、表单元素等,支持多种浏览器和移动设备,适用于创建交互性强、用户体验优良的Web...

    kendo-ui-js-grid.zip_Kendo_grid js

    在"Kendo_grid js"这个项目中,我们将探讨如何使用Kendo UI的JavaScript API来实现Grid的增删改查功能,以及如何进行分页查询、服务交互和异常处理。 首先,Kendo UI Grid的创建通常涉及HTML模板和JavaScript配置。...

    Telerik Kendo UI 2013.2.716 商业完整版

    Telerik Kendo UI 2013.2.716 商业完整版 2013 Q2 版本 无需序列号、无需破解,完整使用; kendo ui 是一套Telerik 公司推出的面向HTML5 及 移动设备的轻量级UI组件,其主要有Js+Css实现了入 Grid,Tree,Menu,Chart...

    Kendo UI控件详细使用说明代码详解

    kendo UI 各个控件的使用说明,着重对grid的使用做了详解,包括增删改查以及查询功能

    MVC3中使用kendoui实例

    Kendo UI是一套JavaScript库,它包含多个UI控件,如数据网格(Grid)、下拉列表(DropDownList)、日历(Calendar)等,这些控件可以与各种后端技术,包括ASP.NET MVC,无缝集成。在MVC3中,我们可以利用Razor视图...

    kendo UI 2017 最新版 源码+实例

    在压缩包中,"telerik.kendoui.professional.2017.3.22"很可能包含了Kendo UI Professional的完整源码和示例项目,开发者可以通过研究源码理解其内部实现机制,同时参考实例来学习如何在实际项目中应用这些组件。...

    Kendo UI 2016 专业版更新.

    Kendo UI 提供了一套完整的CSS样式,用于美化组件。2016年的更新可能包括对响应式设计的支持、新的主题或者对现有主题的改进,以适应不同设备和屏幕尺寸的需求。 **七、应用模板(apptemplates)** “apptemplates...

Global site tag (gtag.js) - Google Analytics