Kendo Ui 数据源添加功能无法正常工作 [英] Kendo Ui DataSource Add Function not working properly
问题描述
我定义了一个 Kendo 数据源，如下所示.它正在 ListView 中填充值.
var datasourceAppList = new kendo.data.DataSource({运输: {创建:功能(选项){//警报(options.data.desc);警报(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);},阅读:功能(选项){var localData = JSON.parse(localStorage["LsAppList"]);options.success(localData);},更新:功能(选项){var localData = JSON.parse(localStorage["LsAppList"]);for(var i=0; i首先:我调用以下代码.它正确地将数据添加到页面列表视图和本地存储中.
datasourceAppList.add({ extappId: "9905", desc: "test", deviceNo: "5", validationKey: "CACACACA"});datasourceAppList.sync();第二:我调用以下代码
datasourceAppList.add({ extappId: "9908", desc: "harvest", deviceNo: "7", validationKey: "ppppppp"});datasourceAppList.sync();问题:
- 页面两次显示第一条记录.
- localstorage 有 2 次第一条记录和 1 次第二条记录.
我做错了什么?
---仍然存在一个问题.虽然 localStorage 是正确的，但列表视图填充错误.
第一条记录添加:ListView是正确的第二条记录添加:ListView 正确第三条记录添加:前两行显示第一条记录，最后一行显示最后一条记录.
我的 HTML 代码是
<ul id="applist" data-role="listview" data-style="inset" data-source="datasourceAppList" data-template="tmp" data-click="listViewClick" data-auto-bind="真"></ul><p align="center"><a style="width: 30%" data-role="button" data-rel="modalview" data-click="showModalViewAdd" id="buttonAddApplication" data-icon="ecg-plus">添加</a＞<a style="width: 30%" data-role="button" data-rel="modalview" data-click="refreshApplicationList" id="buttonRefreshApplication" data-icon="refresh">Refresh</a></p><script id="tmp" type="text/x-kendo-template"><a id = "#: extappId #">#: desc # </a>
其实是一个组合问题:
你的schema定义是:
架构:{模型: {extappId: "ID",字段:{extappId: { type: "number" },描述:{ 类型:字符串"}，deviceNo: { type: "number" },验证键:{ 类型:字符串"}}}}它说 extappId: "ID"...这是什么?你想说 extappId 是那条记录的 id 吗?如果是这样，实际的定义应该是:
架构:{模型: {id: "extappId",字段:{extappId: { type: "number" },描述:{ 类型:字符串"}，deviceNo: { type: "number" },验证键:{ 类型:字符串"}}}}这里发生的事情不是(正确)定义了 id，KendoUI 期望 id 实际上是 id 并且因为这不是在 create 下一次你 sync 尝试保存它时设置，它相当于:
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)已经定义并且不为空，因此 KendoUI 认为它已经保存.
为了解决第二个问题，我的建议是将 schema 定义为:
架构:{模型: {id: "身份证",字段:{extappId: { type: "number" },描述:{ 类型:字符串"}，deviceNo: { type: "number" },验证键:{ 类型:字符串"}}}}现在，id 是一个名为 ID 的字段，这个 ID 应该在 transport.create 上创建(在调用 add 方法之前不能设置).
然后，你在create中设置它，你可以使用:
创建:功能(选项){//将 `ID` 设置为 kendo.guidoptions.data.ID = kendo.guid();警报(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/
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" }
}}
},
});
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();
Second: I call the folowing code
datasourceAppList.add({ extappId: "9908", desc: "harvest", deviceNo: "7", validationKey: "ppppppp"});
datasourceAppList.sync();
Problems:
- the page is showing the first record twice.
- The localstorage has 2 times the first record and 1 time the second record.
what am I doing wrong?
--- one problem still exists. though the localStorage is correct, the listview is populating wrong.
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.
My HTML code is
<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:
You schema definition is:
schema: {
model: {
extappId: "ID",
fields: {
extappId: { type: "number" },
desc: { type: "string" },
deviceNo: { type: "number" },
validationKey: { type: "string" }
}
}
}
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" }
}
}
}
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();
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.
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" }
}
}
}
Now, the id is a field called ID and this ID should be created on transport.create (cannot be set before invoking add method).
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);
},
Check it here : http://jsfiddle.net/OnaBai/n7sNd/3/
这篇关于Kendo Ui 数据源添加功能无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
