是否有可能有完整的CRUD功能在剑道网格与本地数据
Is it possible to have full CRUD functions in kendo grid with local data
我目前正在实现一个剑道网格,我正在用本地数据填充它。这是;我已经从我的操作生成了一个JSON字符串,并在视图页面上提供了这个字符串。
最后我想知道是否有可能实现完整的CRUD功能与本地数据?
这是到目前为止编写的代码示例;
<div id="example" class="k-content">
<div id="grid"></div>
<script>
$(document).ready(function() {
var myData = ${coursemodules},
dataSource = new kendo.data.DataSource({
data: myData,
batch: true,
pageSize: 30,
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: true},
name: { type: "string", validation: { required: true }},
qualificationLevel: { type: "string", validation: { required: true }},
description: { type: "string", validation: { required: true }},
published: { type: "boolean" },
gateApprove: { type: "boolean" },
duration: { type: "number", validation: { min: 1, required: true } },
academicBody: { type: "string" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
height: 350,
scrollable: true,
sortable: true,
pageable: true,
toolbar: ["create", "save", "cancel"],
columns: [
{
field: "id",
title: "ID",
width: '3%'
},
{
field: "name",
title: "Course Title",
width: '20%'
},
{
field: "description",
title:"Description",
width: '35%'
},
{
field: "published",
title: "Published",
width: '7%'
},
{
field: "gateApprove",
title: "Gate Approve",
width: '7%'
},
{
field: "duration",
title: "Duration",
width: '5%'
},
{
field: "academicBody.shortName",
title: "Academic Body",
width: '10%'
}
],
editable: true
});
});
</script>
</div>
我已经意识到,对于数据源,您必须声明传输以实现CRUD。但是,我需要声明"数据"。我尝试同时声明传输和数据。
可以,这是JSFiddle,希望对你有帮助。
// this should be updated when new entries are added, updated or deleted
var data =
[{
"ID": 3,
"TopMenuId": 2,
"Title": "Cashier",
"Link": "www.fake123.com"},
{
"ID": 4,
"TopMenuId": 2,
"Title": "Deposit",
"Link": "www.fake123.com"}
];
$("#grid").kendoGrid({
dataSource: {
transport: {
read: function(options) {
options.success(data);
},
create: function(options) {
alert(data.length);
},
update: function(options) {
alert("Update");
},
destroy: function(options) {
alert("Destroy");
alert(data.length);
}
},
batch: true,
pageSize: 4,
schema: {
model: {
id: "ID",
fields: {
ID: {
editable: false,
nullable: true
},
TopMenuId: {
editable: false,
nullable: true
},
Title: {
editable: true,
validation: {
required: true
}
},
Link: {
editable: true
}
}
},
data: "",
total: function(result) {
result = result.data || result;
return result.length || 0;
}
}
},
editable: true,
toolbar: ["create", "save", "cancel"],
height: 250,
scrollable: true,
sortable: true,
filterable: false,
pageable: true,
columns: [
{
field: "TopMenuId",
title: "Menu Id"},
{
field: "Title",
title: "Title"},
{
field: "Link",
title: "Link"},
{
command: "destroy"}
]
});
在绑定本地数据时,Grid小部件使用表示本地传输的抽象。因此,它不需要自定义传输;在网格中所做的修改将反映到绑定的数据源。这包括通过取消进行回滚。
在teleerik文档中有一个完整的功能示例
您需要的是在dataSource
对象中定义transport
块,并使用自定义CRUD函数更新本地源。
transport: {
create: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
options.data.ID = localData[localData.length-1].ID + 1;
localData.push(options.data);
localStorage["grid_data"] = JSON.stringify(localData);
options.success(options.data);
},
read: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
options.success(localData);
},
update: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
for(var i=0; i<localData.length; i++){
if(localData[i].ID == options.data.ID){
localData[i].Value = options.data.Value;
}
}
localStorage["grid_data"] = JSON.stringify(localData);
options.success(options.data);
},
destroy: function(options){
var localData = JSON.parse(localStorage["grid_data"]);
for(var i=0; i<localData.length; i++){
if(localData[i].ID === options.data.ID){
localData.splice(i,1);
break;
}
}
localStorage["grid_data"] = JSON.stringify(localData);
options.success(localData);
},
}
相关文章:
- $.每个jquery循环打印一个“;未定义的“;对于getJSON请求后的每个元素,网格数据都会完美地打印出来
- 在页面上获取网格数据之前出现 jQuery 错误
- 对于光滑网格数据视图,如果有更多的行数,则不会加载所有行
- ExtJS 4.2 将网格数据导出到可下载的 CSV 文件
- 如何导出 Html.Kendo().网格数据以通用方式使用javascript表现出色
- 如何从网格数据表插件 jQuery 中清除数据
- 光滑网格数据查看链接
- 访问网格数据存储的加载函数内的sortInfo属性
- jquery 在我对 Kendo UI 网格数据进行更改后返回错误
- 如何在网格数据绑定为动态时为 jqgrid 单元格设置自定义标题
- AngularJS-ui网格-数据显示问题
- 单击事件时刷新网格数据
- 对列进行分组时,网格数据将消失
- 如何在ExtJS 5中使用分页过滤网格数据
- 将angularjs网格数据从一个控制器暴露到另一个控制器
- AngularJS Ui网格数据表,如何避免多ng重复
- Dojo使用JsonRestStore重新加载网格数据
- 用于存储网格数据的javascript对象
- 将网格数据发送到服务器Exjts4
- 参数以'null'使用Jquery时调用ajax绑定网格数据