KendoUI 基础：Grid 绑定template展示

Grid 绑定template展示

 1 <div id="TodayEditorGrid" style="margin:0 10px"></div>
 2
 3 <script id="trTemplate2" type="text/x-kendo-template">
 4 <tr>
 5 <td style=" margin: 0; padding: 1px 0;">
 6 <p class="fontTitle1">#: BusinessForm #<p>
 7 </td>
 8 <td style=" margin: 0; padding: 1px 0;">
 9 <p class="fontTitle21">#: SKU #</p>
10 <p class="fontTitle22">#: ProductCategory #</p>
11 </td>
12 </tr>
13 </script>
14
15
16
17 <script>
18
19 var dataToday = new kendo.data.DataSource({
20 transport: {
21 read: {
22 dataType: "json",
23 url: url,
24 },
25 parameterMap: function (options, operation) {
26
27 return { pageIndex: options.page, pageCount: options.pageSize };
28 }
29 },
30 serverPaging: true,
31 pageSize: 10,
32 schema: {
33 total: function (d) {
34 return d.total;
35 },
36 data: function (d) {
37 return d.rows;
38 }
39 }
40 });
41
42 var page = 1, pageCount = 10;
43 $(document).ready(function () {
44
45 $("#TodayEditorGrid").kendoGrid({
46 dataSource: dataToday,
47 editable: false,
48 height: 565,
49 resizable: true,
50 selectable: "single row",
51 rowTemplate: kendo.template($("#trTemplate2").html()),
52 columns: [
53 { title: " ", width: '20%' },
54 { headerTemplate: '<p class="fontTitle21">SKU</p><p class="fontTitle22">templateType</p>', width: '80%' },
55 ],
56 pageable: {
57 pageSize: 15,
58 info: false,
59 refresh: true, //启用刷新按钮
60 }
61 });
62
63 });
64
65 </script>

View Code

效果展示图：

转载于:https://www.cnblogs.com/W--Jing/p/7241187.html

KendoUI 基础：Grid 绑定template展示相关推荐

KendoUI之Grid的问题详解
KendoUI之Grid的问题详解 KendoUI之Grid的问题详解 1.kendoLov带出的值出现 null和undefined 2.Grid不可编辑时,设置行背景颜色 3.设置Grid某列的T ...
layui数据表格（一：基础篇，数据展示、分页组件、表格内嵌表单和图片）
表格展示神器之一:layui表格前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...
php for 循环 try_PHP基础案例四：展示学生列表
php中文网课程每日17点准时技术干货分享相关推荐: 1.<PHP基础案例一:展示学生资料卡> 2.<PHP基础案例二:计算学生年龄> 3.<PHP基础案例三:判断学 ...
java基础-多线程应用案例展示
java基础-多线程应用案例展示作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.两只熊,100只蜜蜂,蜜蜂每次生产的蜂蜜量是1,罐子的容量是30,熊在罐子的蜂蜜量达到20的时候 ...
kendoui ajax,KendoUI Grid绑定数据
用ajax如何绑定KendoUI Grid 传送数据这是我前台代码 $(function () { $("#grid").kendoGrid({ dataSource: { t ...
kendoui 基础教程分享
kendoui web基础教程分享,全部翻译自kendo ui官网(kendoui.com) 关于Kendo UI Web:包含数百个创建HTML5 web app的必备元素,包括UI组件.数据源.验 ...
kendoui固定宽度_中文版kendoUI API — Grid（一）
1.altRowTemplate 类型:Function | String 说明:提供表格行的交替模板,默认grid表格为每一个数据元素提供一个tr 注意:模板中最外层的html元素必须是 ,这个必须 ...
【Android基础】ArrayAdapter适配器展示数据
文章目录前言创建ListView 启动渲染数据效果图前言适配器充当View与数据之间的桥梁,本文记录下ArrayAdapter适配器展示数据: ArrayAdapter比较简单,只能显示一行 ...
最基础的绑定服务步骤
##绑定服务的步骤 1. 定义服务 public class ServcieDemo extends Service {} 2. 注册服务 <service android:name=" ...
一步一个脚印学习WCF系列之WCF基础术语—绑定（Binding）（五）
阅读目录一:为什么会出现绑定? 一:为什么会出现绑定? . 服务之间的通信是多种多样的,有很多种通信模式 . 消息通信模式就有比如:同步请求/应答模式,异步的即发即弃消息等一系列,传递消息的传输协议 ...

KendoUI 基础：Grid 绑定template展示

KendoUI 基础：Grid 绑定template展示相关推荐

最新文章

热门文章