KendoUI Grid For JSP

最新推荐文章于 2021-02-10 22:36:17 发布
最新推荐文章于 2021-02-10 22:36:17 发布
阅读量469 收藏
点赞数
分类专栏： 前端快速开发框架 文章标签： kendo kendoUI jsp java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42547157/article/details/82798784
版权

1.基础用法

       引入标签库：<%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>

      页面标签：结构如下：


<kendo:grid name="grid" groupable="true" sortable="true" style="height:550px;">

    <kendo:grid-columns>

        <kendo:grid-column title="Company Name" field="companyName" />

    </kendo:grid-columns>

    <kendo:dataSource pageSize="10">

         <kendo:dataSource-schema>

            <kendo:dataSource-schema-model>

                <kendo:dataSource-schema-model-fields>

                    <kendo:dataSource-schema-model-field name="companyName" type="string" />

                </kendo:dataSource-schema-model-fields>

            </kendo:dataSource-schema-model>

        </kendo:dataSource-schema>

        <kendo:dataSource-transport>

            <kendo:dataSource-transport-read url="${transportReadUrl}"/>

        </kendo:dataSource-transport>

    </kendo:dataSource>

</kendo:grid>


2.绑定数据：

   本地绑定:kendo:dataSource中data属性填写为el表达式拿到的内容

<kendo:dataSource data="${products}" pageSize="20">


   ajax请求绑定:

<kendo:dataSource>的子标签<kendo:dataSource-transport>中<kendo:dataSource-transport-read>的url设置请求路径

 

<kendo:dataSource pageSize="20" serverPaging="true" serverSorting="true" serverFiltering="true" serverGrouping="true">

            <kendo:dataSource-transport>             

                <kendo:dataSource-transport-read url="${transportReadUrl}" type="POST" contentType="application/json"/> 

                <kendo:dataSource-transport-parameterMap>

                    function(options){return JSON.stringify(options);}

                </kendo:dataSource-transport-parameterMap>             

            </kendo:dataSource-transport>

 </kendo:dataSource>

 

 

3.导出

    导出Excel：

<kendo:grid>标签下加入<kendo:grid-excel>设置

<kendo:grid-excel fileName="Kendo UI Grid Export.xlsx" filterable="true" proxyURL="${saveUrl}" />

   

  导出pdf：

<kendo:grid>标签下加入<kendo:grid-pdf>设置

<kendo:grid-pdf allPages="true" avoidLinks="true" paperSize="A4"

         landscape="true" repeatHeaders="true" template="page-template" scale="0.8"

         proxyURL="${saveUrl}" fileName="Kendo UI Grid Export.pdf">

         <kendo:grid-pdf-margin top="2cm" left="1cm" right="1cm" bottom="1cm" />

     </kendo:grid-pdf>

 

4.表格数据编辑

   普通编辑

  • 添加工具栏<kendo:grid-toolbar>
  • 添加<kendo:dataSource>的子标签<kendo:dataSource-transport>中<kendo:dataSource-transport-create>等对应按钮标签
  • <kendo:dataSource-transport-parameterMap>对返回的数据做添加修改判断

 

<kendo:grid-toolbar>

            <kendo:grid-toolbarItem name="create"/>

            <kendo:grid-toolbarItem name="save"/>

            <kendo:grid-toolbarItem name="cancel"/>

</kendo:grid-toolbar>

  <kendo:dataSource-transport>

                <kendo:dataSource-transport-create url="${createUrl}" dataType="json" type="POST" contentType="application/json" />

                <kendo:dataSource-transport-read url="${readUrl}" dataType="json" type="POST" contentType="application/json" />

                <kendo:dataSource-transport-update url="${updateUrl}" dataType="json" type="POST" contentType="application/json" />

                <kendo:dataSource-transport-destroy url="${destroyUrl}" dataType="json" type="POST" contentType="application/json" />

                <kendo:dataSource-transport-parameterMap>

                    <script>

                        function parameterMap(options,type) {

                            if(type==="read"){

                                return JSON.stringify(options);

                            } else {

                                return JSON.stringify(options.models);

                            }

                        }

                    </script>

                </kendo:dataSource-transport-parameterMap>

   </kendo:dataSource-transport>

 

    行内编辑

 <kendo:grid-editable mode="inline" confirmation="Are you sure you want to remove this item?"/>表明编辑模式

<kendo:grid-columns>下的标签<kendo:grid-column>填写<kendo:grid-column-command>从而在Grid里增加编辑按钮

<kendo:grid-editable mode="inline" confirmation="Are you sure you want to remove this item?"/> 

<kendo:grid-column title="&nbsp;" width="250px">

                <kendo:grid-column-command>

                    <kendo:grid-column-commandItem name="edit" />

                    <kendo:grid-column-commandItem name="destroy" />

                </kendo:grid-column-command>

 </kendo:grid-column>

 <kendo:dataSource-transport>

                <kendo:dataSource-transport-create url="${createUrl}" dataType="json" type="POST" contentType="application/json" />

                <kendo:dataSource-transport-read url="${readUrl}" dataType="json" type="POST" contentType="application/json"/>

                <kendo:dataSource-transport-update url="${updateUrl}" dataType="json" type="POST" contentType="application/json" />

                <kendo:dataSource-transport-destroy url="${destroyUrl}" dataType="json" type="POST" contentType="application/json" />

                <kendo:dataSource-transport-parameterMap>

                    <script>

                        function parameterMap(options,type) {                          

                            return JSON.stringify(options);                        

                        }

                    </script>

                </kendo:dataSource-transport-parameterMap>

            </kendo:dataSource-transport>

 

  弹出框编辑

和行内一样，mode变成popup

<kendo:grid-editable mode="popup"/>

 

编辑验证：

编写方法继承kendo.ui.validator，示例如下：

<script>  

        //register custom validation rules

        (function ($, kendo) {

            $.extend(true, kendo.ui.validator, {

                 rules: { // custom rules

                     productnamevalidation: function (input, params) {

                         //check for the name attribute

                         if (input.filter("[name='productName']").length && input.val()) {

                             return /^[A-Z]/.test(input.val());

                         }

                         return true;

                     }

                 },

                 messages: { //custom rules messages

                     productnamevalidation: "Product Name should start with capital letter"

                 }

            });

        })(jQuery, kendo);

</script>

 

 

下拉继续加载数据：

取消分页，指出滑动

三元判断

<kendo:grid-pageable numeric="false" previousNext="false"></kendo:grid-pageable>

 <kendo:grid-scrollable endless="true"/>

 <kendo:dataSource-transport-parameterMap>

                    <script>

                        function parameterMap (options, operation) {

                            if (operation !== "read" && options.models) {

                                return { models: kendo.stringify(options.models) };

                            }

                            return kendo.data.transports["odata"].parameterMap(options, operation);

                        }

                    </script>

</kendo:dataSource-transport-parameterMap>

<kendo:dataSource-schema>

                <kendo:dataSource-schema-data>

                    <script>

                        function data(response) {

                            return response.d ? response.d.results : response;

                        }

                    </script>

                </kendo:dataSource-schema-data>

</kendo:dataSource-schema>

 

过滤：

  行级过滤：

 启用行级过滤：<kendo:grid-filterable mode="row"/>

 column标签里设置过滤条件

<kendo:grid-editable mode="popup"/>

<kendo:grid-columns>

            <kendo:grid-column title="Order ID" field="orderId" width="225px">

                 <kendo:grid-column-filterable>

                     <kendo:grid-column-filterable-cell showOperators="false" />

                 </kendo:grid-column-filterable>

            </kendo:grid-column>

            <kendo:grid-column title="Ship Name" field="shipName" width="500px">

                <kendo:grid-column-filterable>

                    <kendo:grid-column-filterable-cell operator="contains" suggestionOperator="contains" />

                </kendo:grid-column-filterable>

            </kendo:grid-column>

            <kendo:grid-column title="Freight" field="freight" width="255px" >

                <kendo:grid-column-filterable>

                     <kendo:grid-column-filterable-cell operator="gte" />

                </kendo:grid-column-filterable>

            </kendo:grid-column>

            <kendo:grid-column title="Order Date" field="orderDate" format="{0:MM/dd/yyyy}" />

        </kendo:grid-columns>

 

根据所有数据的值来筛选

<kendo:grid-columns>

           <kendo:grid-column title="Product Name" field="productName" >

               <kendo:grid-column-filterable multi="true" search="true" />

           </kendo:grid-column>

           <kendo:grid-column title="Unit Price" field="unitPrice" format="{0:c}" >

               <kendo:grid-column-filterable multi="true"/>

           </kendo:grid-column>

           <kendo:grid-column title="Units In Stock" field="unitsInStock" >

               <kendo:grid-column-filterable multi="true"/>

           </kendo:grid-column>

           <kendo:grid-column title="Discontinued" field="discontinued" >

               <kendo:grid-column-filterable multi="true"/>

           </kendo:grid-column>

           <kendo:grid-column command="destroy" title="&nbsp;" />

       </kendo:grid-columns>

 

自定义筛选（ 以什么开始。。。）

<kendo:grid-columns>

        <kendo:grid-column template="#=firstName# #=lastName#" title="Name"/>                

        <kendo:grid-column field="city" title="City">

            <kendo:grid-column-filterable>

                <kendo:grid-column-filterable-ui>

                    <script>

                        function cityFilter(element) {

                            element.kendoDropDownList({

                                optionLabel: "--Select Value --",

                                dataSource: {

                                    transport: {

                                        read: "${citiesUrl}"

                                    }

                                }

                            });

                        }

                    </script>    

                </kendo:grid-column-filterable-ui>

            </kendo:grid-column-filterable>          

        </kendo:grid-column>

        <kendo:grid-column field="title" title="Title">  

            <kendo:grid-column-filterable>

                <kendo:grid-column-filterable-ui>

                    <script>

                        function cityTitle(element) {

                            element.kendoAutoComplete({

                                dataSource: {

                                    transport: {

                                        read: "${titlesUrl}"

                                    }

                                }

                            });

                        }

                    </script>    

                </kendo:grid-column-filterable-ui>

            </kendo:grid-column-filterable>                  

        </kendo:grid-column>

 

排序：

<kendo:grid-sortable allowUnsort="false" mode="single" />

 

继承：类似树形结构

  • 新建模板（相当于子节点的概念），适用于HashMap结构
  • 构建函数
  • 声明Grid组件时设置属性

<kendo:grid-detailTemplate id="template">

    <kendo:grid name="grid_#=employeeId#" pageable="true" sortable="true" scrollable="false">

        <kendo:grid-columns>

            <kendo:grid-column title="Order ID" field="orderId" width="110px" />

            <kendo:grid-column title="Ship Country" field="shipCountry" width="110px" />

            <kendo:grid-column title="Ship Address" field="shipAddress" />

            <kendo:grid-column title="Ship Name" field="shipName" width="300px" />           

        </kendo:grid-columns>    

        <kendo:dataSource pageSize="10" serverPaging="true" serverSorting="true">

            <kendo:dataSource-schema data="data" total="total"></kendo:dataSource-schema>            

            <kendo:dataSource-transport>

                <kendo:dataSource-transport-read url="${transportNestedReadUrl}" data="<%=data %>" type="POST" contentType="application/json"/>

                <kendo:dataSource-transport-parameterMap>

                    <script>

                        function parameterMap(options) {

                            return JSON.stringify(options);

                        }

                    </script>

                </kendo:dataSource-transport-parameterMap>

            </kendo:dataSource-transport>

        </kendo:dataSource>                          

    </kendo:grid>           

</kendo:grid-detailTemplate>

  

 <script>function dataBound() {this.expandRow(this.tbody.find("tr.k-master-row").first());}</script>

  

<kendo:grid name="grid" pageable="true" sortable="true" height="600px" detailTemplate="template" dataBound="dataBound">。。。。。。</kendo:grid>

效果图：

Undefinded_Null
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
KendoUI速查手册--中文
01-23
KendoUI速查手册--中文
【kendoUI grid 某列值发生变更,另一列值空,另一列值设为指定值,另一列值修改】
qq_39201012的博客
08-10 320
【代码】【kendoUI grid 某列值发生变更,另一列值空,另一列值设为指定值,另一列值修改】
使用kendoUI展示报表，并实现导出excel
1073960086的博客
07-25 3581
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;base href="https://demos.telerik.com/kendo-ui/grid/excel-export"&gt; &lt;style&gt;html { font-size: 14px; font-family: Arial, Helvetica, sa...
KendoUI —— data management 类组件 Grid 表格
永远的北极光
07-18 3414
一、效果展示 二、基础学习 1、页面引用js与css 2、语法： $("#id").kendoGrid({ 属性设置列表 }); 三、属性 1、dataSource了与 schema 属性 数据源，可以是本地数据（如：json对象数组）或远程数据（如：访问REST 服务返回json数据） 下面是自己测试成功的模板（官网给的不可用！）：
Kendo UI:Grid中标题css样式设置
热门推荐
sun
11-27 1万+
问题 Grid表格的标题样式怎么设置？ 解决方案 使用headerAttributes属性设置，如果有css中class属性，需要加双引号””.如 { field: "name", headerAttributes: { "class": "table-header-cell", style: "text-align: right; font-s
Kendo UI for Vue.docx
04-18
"Kendo UI for Vue" Kendo UI for Vue 是一个使用 Vue.js 框架的本机组件库，旨在帮助开发者快速构建企业级 Web 应用程序。下面将详细讲解 Kendo UI for Vue 的使用方法、配置过程、组件介绍等知识点。 什么是 ...
kendoui.for.jquery.2018.3.911.commercial
09-19
2018年R3版本（kendoui.for.jquery.2018.3.911.commercial）是该框架的一个重要更新，提供了丰富的组件和功能，以满足现代Web开发的需求。 首先，Kendo UI的核心是其对jQuery库的深度整合。jQuery作为广泛使用的...
Kendo UI框架grid的Excel导出功能改进js代码
08-26
Kendo UI框架提供了强大的Excel导出功能，通过Grid的saveAsExcel能方便地导出Grid中的数据，而且格式美观大方，使用起来也非常方便。但是在实际使用中不是很理想，主要有以下两个问题： 1. 导出的列数据是原始值 ...
KendoUI for Jquery 2023
最新发布
01-17
KendoUI提供了大量的预构建UI组件，包括数据网格（Grid）、日历（Calendar）、下拉列表（DropDownList）、树视图（TreeView）、图表（Charts）、表单元素（Forms）等。这些组件都是高度可定制的，支持多种主题，能够...
Kendoui grid多级分组表格展现
03-19
应用kendoui grid实现的多级分组表格展现，里面包含了表格的分组统计以及单表合计功能、还有针对表格的刷新以及子表格刷新功能。此功能是在原有demo版本上改进，增加了很多的个别需求实现，在原来的版本是做不到的。...
kendoui学习笔记（隐藏表格列、关于绑定的几种情况）
xiaoxinshuaiga的博客
07-17 4322
隐藏表格列 ： &lt;div id="grid"&gt;&lt;/div&gt; &lt;script&gt; $("#grid").kendoGrid({ columns: [ { field: "name" }, { field: "age" } ], dataSource: [ { name: "Jane Doe&quo
KendoUI的显示隐藏列AND排序
火麒马
01-08 1054
对于kendoUI的显示隐藏模块呢，它的hidden 属性是true或者false ,所以给他赋值必须是bool类型的，这样可以确保一致性，那么它的显示和隐藏的触发条件还是可以用 的hidden = t.w == null ? false : t.w.style_name == null ? false : t.w.style_name== "display:none"?true:false...
kendoui mysql_KendoUI for JSP-如何连接到MySQL
weixin_35682327的博客
02-10 62
伙计们，我对剑道比较陌生，现在我正在通过他们的例子学习如何用数据库中的数据填充剑道网格。 但是，他们的例子是用SQLite，我想用MySQL试试。 以下是我到目前为止所做的工作:clients.java@WebServlet(description = "A servlet to return data about employees from the database", urlPatterns...
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:Grid
baiduwenku112的博客
11-25 432
Kendo.ui.Grid Kendo Ui Grid控件，继承至Widget。 一、构造 allowCopy Boolen|Object (默认：false) 当他设置true，用户就可以选中行点击复制，可以复制进入excel和记事本。 设置Object可以设置高级Copy，比如复制后通过分隔符隔开。 <div id="grid"></div> <script> $("#grid").kendoGrid...
Kendo ui 使用总结----Kendo UI Grid
u012658972的博客
07-13 2099
代码中理解比较好。 代码 数据获取： var melDataSource = new kendo.data.DataSource({ transport: { read: { type: "post", url: '/controller/method', ...
kendoui学习笔记（查询、表格自适应高度、自定义操作command、弹框window）
xiaoxinshuaiga的博客
07-12 3359
用于查询的写法： 第一种写法 $("#search").click(function () { var name = $("#name").val(); grid.data("kendoGrid").dataSource.filter([ { field: "Name", value:...
Kendo UI:Grid自定义command实现对行数据的操作
sun
11-27 9056
问题 Grid中如何自定义操作列？ 解决方案 通过click选项设置，如 { name: "details", click: function(e) { var tr = $(e.target).closest("tr"); // get the current table row (tr) var dat
三、UI-Grid 筛选
西柚叨叨的博客
03-29 5286
原文： 103 Filtering 简单设置 UI-Grid能够行筛选。需要在 grid options中设置enableFiltering标识（默认是关闭状态）。在 column def中设置enableFiltering ：false 可以禁用该列的过滤。参看下面例子中的“company”列。在 column def中可以通过filter: { term: ‘xxx’ } 设置筛选选项。可以
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、付费专栏及课程。

余额充值