kendo ui中grid页面参数问题(1)

kendo ui 中grid 算是最长用的控件之一,当使用分页效果时,我们要传递分页参数与自己定义的参数如:

 1 var dataSource = new kendo.data.DataSource({
 2             transport: {
 3                 read : {
 4                     url : "对应后台路径",
 5                     contentType : "application/json",
 6                     type : "POST",
 7                     dataType : "json"
 8                 },
 9                 parameterMap : function(options, operation) {
10                     if (operation == "read") {
11                         var parameter = {
12                             page : options.page,
13                             pageSize : options.pageSize,
14                             take : options.take,
15                             skip : options.skip
16                         };
17                         return kendo.stringify(parameter);
18                     }
19                 }
20             },
21             serverPaging: true,
22             pageSize: 20,
23             schema : {
24                 model : {
25                 id : "",
26                 },
27                 data: function (response) {
28                     return response.data;
29                 },
30                 total: function (response) {
31                     return response.total;
32                 }
33             },
34      });

对应的grid写法为:

$("#XXXX").kendoGrid({
        dataSource : dataSource,
        height: ,
        toolbar: kendo.template($("#template").html()),
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5,
            page: 1,
            pageSize: 20,
            pageSizes: [20, 50, 100, 500]
        },
        columns: [
            {field : "XX",        title :"XX"    },
            {field : "XX",        title :"XX"    },
            {field : "XX",        title :"XX"    },
            {field : "XX",        title :"XX"    },
            {field : "XX",        title :"XX"    },
        ],
        selectable: "row",
        sortable:true,
        resizable: true
    }).data("kendoGrid");

后台解析方法(JAVA后台)当:

    @Override
    public String XXX(String info) {
        JSONObject json = JSONObject.fromObject(info);
        PageBounds pageBounds = new PageBounds(Integer.parseInt(json.get("page").toString()), Integer.parseInt(json.get("pageSize").toString()));
        Map<String,Object> map = new HashMap<String, Object>();//注意这里定义了一个空的map没有赋值,是为了占位,如果需要可以赋值
        PageList<Map<String, Object>> list = (PageList<Map<String, Object>>) XXXDao.XXX(pageBounds,map);

        try {
            list = (PageList<Map<String, Object>>) XXXDao.XXX(pageBounds,map);
        } catch (Exception e) {
            logger.error("获取信息列表失败!  具体信息为:     " + e);
        }

        JSONObject jsonObj = new JSONObject();
        jsonObj.accumulate("data", JSONArray.fromObject(list));
        jsonObj.accumulate("total", list.getPaginator().getTotalCount());
        return jsonObj.toString();
    }
dao层impl代码@Override
    public List<Map<String,Object>> XXX(PageBounds pageBounds,Map<String,Object> map) {
        return sqlSessionTemplate.selectList("XXDao.XXX",map,pageBounds);
    }

此处特别需要注意的是selectList()内部传递的是三个参数,第一个大家都知道是dao层的路径,第二个是页面内的其他参数(比如你需要从前台传到后台的用户ID等等),第三个就是你解析的前台grid分页参数,如果当你页面不需要传递其他参数的时候,第二个参数需要用一个变量占位,这个变量可以是NULL,数字,或者一个空变量都可以。如果不穿参数的话会报错。无法解析。

时间: 2024-10-06 00:29:46

kendo ui中grid页面参数问题(1)的相关文章

smarty模板中获取页面参数

{$smarty}保留变量不需要从PHP脚本中分配,是可以在模板中直接访问的数组类型变量,通常被用于访问一些特殊的模板变量.例如,直接在模板中访问页面请求变量.获取访问模板时的时间邮戳.直接访问PHP中的常量.从配置文件中读取变量等.该保留变量中的部分访问介绍如下. 1.在模板中访问页面请求变量 我们可以在PHP脚本中,通过超级全局数组$_GET.$_POST.$_REQUEST获取在客户端以不同方法提交给服务器的数据,也可以通过$_COOKIE或$_SESSION在多个脚本之间跟踪变量,或是通

easy ui 中grid级联操作

//先获取到当前选中行 var row = $('#tt').datagrid('getSelected'); //根据当前行获取,当前行的下标 var rindex = $('#tt').datagrid('getRowIndex', row); 在根据下标和要获取列的filed获取对应filed的Editor对象   var ed = $('#tt').datagrid('getEditor', { index : rindex, field : 'Country' }); //然后在根据对

Kendo UI Grid 模型绑定

开篇 接触 Asp.net MVC 时间较长的童鞋可能都会了解过模型绑定(Model Binding),而且在一些做 Web 项目的公司或是Team面试中也经常会被问到.项目中有很多 Action 中都使用了自定义的模型绑定,但是业务逻辑太过复杂不适合做为例子与大家分享,而今天在做一个 Kendo UI 的功能时觉得可以用 Kendo UI 做为例子与大家分享与探讨一个典型的 Model Binding 的过程. 写的比较随性,欢迎大家讨论及拍砖! 背景介绍 Kendo UI: 它是一个非常出名

kendo ui的treeView节点点击事件修改和grid的配置的一点总结

kendo-ui的treeView节点(node)点击时  可以触发一个select的事件(event),并且连续点击多次相同节点,可以触发并且只能触发一次该事件. 可是需求上需要实现:每次点击相同的节点,都要触发该select事件. 这个需求,是和kendo的select事件相悖的. 最开始想通过 外部手动触发select事件,但是发现并不能做到. 后来做了如下配置: $("#treeview").kendoTreeView({ dataSource: [ treeData ], s

开发的Web应用界面太难看?Kendo UI R1 2020工具全新发布帮你忙

Kendo UI for jQuery R1 2020试用版下载 2020年,Kendo UI全新出发,发布R1 2020!此版本在Kendo UI bundle包中的所有库中进行了一些更新,包括jQuery,Angular,React和Vue UI库!本系列文章将着重为大家这些库中更新的重点内容,欢迎持续关注哦~ jQuery 新组件 新组件:Breadcrumb Kendo UI jQuery Breadcrumb组件为开发人员提供一个简单直观的界面,可在各层次的导航层次之间移动.Bread

利用kendo ui window创建自己的promise window

新建一个appdialog.js文件,代码如下 var contexts = {}; var dialogCount = 0; var app = { getDialog: function (obj) { if (obj) { return obj.__dialog__; } return undefined; }, close: function (obj) { var theDialog = this.getDialog(obj); if (theDialog) { var rest =

关于kendo ui的使用改变颜色方式

1.概述: 在网上kendo ui教程中示例在演示的时候引用的css样式为kendo.common.min.css与kendo.default.min.css这两个外部样式,大家有没有发现,这两个样式在选中的时候会出现一个黄色的选中条,很难看(当然排除配色需要用到的黄色的时候),多数情况下我们使用kendo ui是不会使用这个黄色的选中效果的,如何修改呢? 2.引入CSS样式: <link href="css/kendo.common.min.css" rel="sty

Kendo UI:Grid中单元格日期格式化

摘自: http://blog.csdn.net/sun_jy2011/article/details/41546337 Kendo UI:Grid中怎么格式化时间类型数据? 解决方案 (1)使用format格式化 { field: "updateTime", title: "更新时间", width: 200, format: "{0: yyyy-MM-dd HH:mm:ss}" } (2)使用template实现 { field: "

kendo ui grid 创建一行数据多次添加(kendo ui grid datasource multiple create)

今天测试之前使用kendo ui grid 做的数据表格的时候发现了一个bug,我使用的是kendo ui grid 系统自带的自动添加数据和编辑数据的功能,每次添加完一条数据的时候继续添加的时候会发现之前添加的数据会重复添加.查看官方文档,文档说是dataSource schema model id 必须是唯一键,而且添加数据完成之后需要返回一个数据包含id,结果研究了半天没有找到问题所在. var crudServiceBaseUrl = "/NFC"; var dataSourc