web ajax +kendo实现Grid绑定

本文详细介绍了Kendo UI框架的使用,包括数据绑定、下拉列表(kendoDropDownList)及强大的Grid功能。通过实例展示了如何获取数据、配置下拉列表和创建数据驱动的表格,提供了实现高效数据展示和交互的解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

kendo ajax介绍: 请百度----

这个是界面

首先要知道kendo是数据绑定的,所以先要有数据 这个就是后台ajax了,请自行获取数据(格式为json)。

kendo 具体的属性,用法介绍:  kendoDropDownList 就是下拉列表, 当然在html页面dom里面我们定义一个 <input id="txtGroup" type="text" name="TeamID" />里面有ID属性为了获取jquery对象然后转换成kendo对象,name属性是键值对。因为kendo里面都是键值对的形式。

js代码 有ajax 获取的部分

 $("#txtGroup").kendoDropDownList({
                dataTextField: "text",
                dataValueField: "value",
                optionLabel: { text: "全部", value: "" },
                height: 500,   //下拉列表的长度
                dataSource: {  //绑定的属性 @important
                    transport: { 
                        read: function (options) {
                            options.data = { code: "DataModifyTeam" };
                            post(options, "DataModifyRequestSearch.aspx/GetDictList");//这个是a我自己定义的ajax方法。可以自己定义。
                        }
                    }
                }
            });

然后在页面上就可以得到一个下拉列表了 。so 方便。。。

下面来介绍 kendoGrid 很强大的一个功能

$("#grid").kendoGrid({

 columns: [

{

   field: "name",

   title: "姓名"

   },

  “sex”,

 {

   field: "age", // create a column bound to the "age"field

   title: "Age"  // set itstitle to "Age"

  }],

 dataSource: [ { name: "Jane", age: 30 }, { name:"John", age: 33 }]

});

当然 我要解释一下,里面的属性:

Kendo 的数据源支持本地数据源(JavaScript 对象数组),或者远程数据源(XML, JSON, JSONP),支持CRUD操作(创建,读取,更新和删除操作),并支持排序,分页,过滤,分组和集合等。





评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值