Kendo Ui数据源添加功能无法正常工作 [英] Kendo Ui DataSource Add Function not working properly
问题描述
我定义了Kendo数据源，如下所示.它正在ListView中填充值.
I defined a Kendo Data Source as below. It is populating values in a ListView.
var datasourceAppList = new kendo.data.DataSource({
transport: {
create: function(options){
//alert(options.data.desc);
alert(options.data.desc);
var localData = JSON.parse(localStorage.getItem("LsAppList"));
localData.push(options.data);
localStorage.setItem("LsAppList", JSON.stringify(localData)); //localStorage["LsAppList"] = JSON.stringify(localData);
options.success(localData);
},
read: function(options){
var localData = JSON.parse(localStorage["LsAppList"]);
options.success(localData);
},
update: function(options){
var localData = JSON.parse(localStorage["LsAppList"]);
for(var i=0; i<localData.length; i++){
if(localData[i].extappId == options.data.extappId){
localData[i].desc = options.data.desc;
localData[i].deviceNo = options.data.deviceNo;
localData[i].validationKey = options.data.validationKey;
}
}
localStorage["grid_data"] = JSON.stringify(localData);
options.success(localData);
},
destroy: function(options){
var localData = JSON.parse(localStorage["LsAppList"]);
localData.remove(options.data.ID);
localStorage["LsAppList"] = JSON.stringify(localData);
options.success(localData);
},
},
schema: {
model: {
extappId: "ID",
fields: {
extappId: { type: "number" },
desc: { type: "string" },
deviceNo: { type: "number" },
validationKey: { type: "string" }
}}
},
});
首先:我调用以下代码.它将数据正确地添加到te页面listview和localStorage.
First : I call the following code. it adds the data correctly both to te page listview and localStorage.
datasourceAppList.add({ extappId: "9905", desc: "test", deviceNo: "5", validationKey: "CACACACA"});
datasourceAppList.sync();
第二:我称为以下代码
datasourceAppList.add({ extappId: "9908", desc: "harvest", deviceNo: "7", validationKey: "ppppppp"});
datasourceAppList.sync();
问题:
- 该页面两次显示第一条记录.
- 本地存储具有第一条记录的2倍和第二条记录的1倍.
我在做什么错了?
---一个问题仍然存在.尽管localStorage是正确的，但列表视图填充错误.
--- one problem still exists. though the localStorage is correct, the listview is populating wrong.
第一个记录添加:ListView是正确的 第二条记录添加:ListView是Corract 第三条记录添加:前两行显示第一条记录，最后一行显示最后一条记录.
First Record Add : ListView is Correct Second Record Add : ListView is Corract Third Record Add : First 2 lines shows the first record and the last line shows the last record.
我的HTML代码是
<div id="applications" data-role="view" data-title="Defined Applications" data-layout="default" data-model="appdetail">
<ul id="applist" data-role="listview" data-style="inset" data-source="datasourceAppList" data-template="tmp" data-click="listViewClick" data-auto-bind="true"></ul>
<p align="center">
<a style="width: 30%" data-role="button" data-rel="modalview" data-click="showModalViewAdd" id="buttonAddApplication" data-icon="ecg-plus">Add</a>
<a style="width: 30%" data-role="button" data-rel="modalview" data-click="refreshApplicationList" id="buttonRefreshApplication" data-icon="refresh">Refresh</a>
</p>
</div>
<script id="tmp" type="text/x-kendo-template">
<a id = "#: extappId #">#: desc # </a>
</script>
推荐答案
这实际上是一个综合问题:
It is actually a combined problem:
您的schema定义是:
schema: {
model: {
extappId: "ID",
fields: {
extappId: { type: "number" },
desc: { type: "string" },
deviceNo: { type: "number" },
validationKey: { type: "string" }
}
}
}
它说extappId: "ID" ...这是什么?您是否要说extappId是该记录的id?如果是这样，则实际定义应为:
It says extappId: "ID"... what is this? Do you want to say that extappId is the id of that record? If so, the actual definition should be:
schema: {
model: {
id: "extappId",
fields: {
extappId: { type: "number" },
desc: { type: "string" },
deviceNo: { type: "number" },
validationKey: { type: "string" }
}
}
}
这里没有发生(正确地)定义id的情况，KendoUI期望id实际上是id，并且由于在下次sync时未尝试设置id，因此会尝试保存，等效于:
What happens here is not being (correctly) defined the id, KendoUI expects that id is actually id and since this is not being set during the create next time that you sync it tries to save it, it is equivalent to:
datasourceAppList.add({ extappId: 9905, desc: "test", deviceNo: 5, validationKey: "CACACACA"});
datasourceAppList.add({ extappId: 9908, desc: "harvest", deviceNo: 7, validationKey: "ppppppp"});
datasourceAppList.sync();
但是，如果您尝试此操作，您将看到永远不会调用create.现在发生的事情是记录的id(即extappId)已经定义并且不为null，因此KendoUI认为该记录已经保存.
But if you try this, you will see that then create is never invoked. Now what happens is that the id of the record (i.e. extappId) is already defined and not null and so KendoUI believes that is already saved.
为解决第二个问题，我的建议是将schema定义为:
For solving this second issue my recommendation is defining the schema as:
schema: {
model: {
id: "ID",
fields: {
extappId: { type: "number" },
desc: { type: "string" },
deviceNo: { type: "number" },
validationKey: { type: "string" }
}
}
}
现在，id是一个名为ID的字段，并且该ID应该在transport.create上创建(不能在调用add方法之前进行设置).
Now, the id is a field called ID and this ID should be created on transport.create (cannot be set before invoking add method).
然后，在create中进行设置，即可使用:
Then, you set it in create and you can use:
create: function(options){
// Set `ID` to kendo.guid
options.data.ID = kendo.guid();
alert(options.data.desc);
var localData = JSON.parse(localStorage.getItem("LsAppList"));
localData.push(options.data);
localStorage.setItem("LsAppList", JSON.stringify(localData)); //localStorage["LsAppList"] = JSON.stringify(localData);
options.success(localData);
},
在此处检查: http://jsfiddle.net/OnaBai/n7sNd/3/
这篇关于Kendo Ui数据源添加功能无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
