同文地址: 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 );
}
}
|
相关推荐
应用kendoui grid实现的多级分组表格展现,里面包含了表格的分组统计以及单表合计功能、还有针对表格的刷新以及子表格刷新功能。此功能是在原有demo版本上改进,增加了很多的个别需求实现,在原来的版本是做不到的。...
首先,理解`kendoui grid customfilter`标签,这通常意味着我们需要实现自定义的过滤逻辑。在Kendo UI Grid中,过滤功能允许用户根据预设条件筛选数据。而自定义过滤则允许开发者扩展或替换默认的过滤行为,以适应更...
Kendo UI框架提供了强大的Excel导出功能,通过Grid的saveAsExcel能方便地导出Grid中的数据,而且格式美观大方,使用起来也非常方便。但是在实际使用中不是很理想,主要有以下两个问题: 1. 导出的列数据是原始值 ...
Kendo UI 的数据管理组件如 DataSource 和 Model 提供了一套完整的数据处理方案。DataSource 是一个轻量级的数据抽象层,它可以处理数据的加载、过滤、排序、分页和转换。Model 则用于定义数据对象的结构和行为,...
Kendo UI Grid是一款强大的数据网格组件,由Telerik公司开发,广泛应用于Web应用程序中,用于展示和操作结构化的数据。这个控件提供了丰富的功能,包括数据分页、排序、过滤、编辑、分组、汇总等,同时支持触摸设备...
Kendo UI ,在ASP.NET MVC 4中使用Kendo UI Grid
该代码类里面实现的主要操作: 1.ajax 访问后代接口,并将结果返回值绑定到kendo ui 的grid上。 2. 实现复杂的kendo ui 的grid的表头设置,这个是本人亲自写的,并且经过验证是正确的
1. **组件丰富**:Kendo UI包含了数据网格(Grid)、日历(Calendar)、下拉列表(ComboBox)、日期选择器(DatePicker)、时间选择器(TimePicker)、滑块(Slider)、图表(Charts)等多种UI组件,覆盖了日常开发...
Kendo UI Grid为开发者提供了100多种丰富的网格功能,从基本的筛选、排序,到高级的编页、分层数据分组等等。毫不夸张的说,Kendo UI Grid是同类产品中数一数二的佼佼者。耳听为虚眼见为实,下面我为大家整理了它的...
文件名`kendoui.aspnetmvc.2013.1.319.commercial.msi`暗示这是一个2013年1月发布的商业版本的安装包,其中包含了Kendo UI for ASP.NET MVC的特定版本。安装此文件后,开发者可以获得完整的库和服务器端组件,以便在...
2018年R3版本(kendoui.for.jquery.2018.3.911.commercial)是该框架的一个重要更新,提供了丰富的组件和功能,以满足现代Web开发的需求。 首先,Kendo UI的核心是其对jQuery库的深度整合。jQuery作为广泛使用的...
"Kendo UI for Vue" Kendo UI for Vue 是一个使用 Vue.js 框架的本机组件库,旨在帮助开发者快速构建企业级 Web 应用程序。下面将详细讲解 Kendo UI for Vue 的使用方法、配置过程、组件介绍等知识点。 什么是 ...
Telerik Kendo UI 2013.1.319 商业完整版本 无需序列号、无需破解; kendo ui 是一套Telerik 公司推出的面向HTML5 及 移动设备的轻量级UI组件,其主要有Js+Css实现了入 Grid,Tree,Menu,Chart等各种业务组件. 不...
Kendo UI 是一款由Telerik公司开发的前端UI库,专为构建现代Web应用程序而设计。它提供了丰富的组件集合,包括数据网格、日历、图表、表单元素等,支持多种浏览器和移动设备,适用于创建交互性强、用户体验优良的Web...
在"Kendo_grid js"这个项目中,我们将探讨如何使用Kendo UI的JavaScript API来实现Grid的增删改查功能,以及如何进行分页查询、服务交互和异常处理。 首先,Kendo UI Grid的创建通常涉及HTML模板和JavaScript配置。...
kendo UI 各个控件的使用说明,着重对grid的使用做了详解,包括增删改查以及查询功能
Telerik Kendo UI 2013.2.716 商业完整版 2013 Q2 版本 无需序列号、无需破解,完整使用; kendo ui 是一套Telerik 公司推出的面向HTML5 及 移动设备的轻量级UI组件,其主要有Js+Css实现了入 Grid,Tree,Menu,Chart...
Kendo UI是一套JavaScript库,它包含多个UI控件,如数据网格(Grid)、下拉列表(DropDownList)、日历(Calendar)等,这些控件可以与各种后端技术,包括ASP.NET MVC,无缝集成。在MVC3中,我们可以利用Razor视图...
在压缩包中,"telerik.kendoui.professional.2017.3.22"很可能包含了Kendo UI Professional的完整源码和示例项目,开发者可以通过研究源码理解其内部实现机制,同时参考实例来学习如何在实际项目中应用这些组件。...
Kendo UI 提供了一套完整的CSS样式,用于美化组件。2016年的更新可能包括对响应式设计的支持、新的主题或者对现有主题的改进,以适应不同设备和屏幕尺寸的需求。 **七、应用模板(apptemplates)** “apptemplates...