好的,所以我有两个可观察的数据源。一个使用名为 TestRequest 的模型,我可以有多个模型。另一个使用 TestResult 模型,每个 TestRequest 可以存在多个。我有一个 requestId 数据项,我正在过滤它以填充我的依赖网格。使用声明性数据和声明性过滤器,一切正常。如果我动态设置过滤器,我不能再向过滤的数据源添加新记录。我怎样才能解决这个问题?我打算在数据源的更改事件的处理程序中设置“外部”ID(这就是我维护客户端主键的方式)。我可以从我的处理程序中得知“添加”操作正在触发,但是编辑器弹出窗口(我在两个网格上都使用弹出窗口编辑)没有显示?我还需要启用其他魔法吗?
如果我需要发布代码,请告诉我,我会将我的 html 和 js 放在服务器上,供大家查看和批评:)
提前致谢。
相关的 JavaScript:
var TestRequest = kendo.data.Model.define({
id: "Id",
fields: {
"accessionNumber": { type: "string" },
"specimenCollectionDate": { type: "date" },
"specimenReceivedDate": { type: "date" },
"resultReportDate": { type: "date" },
"testDescription": { type: "string" },
"relevantClincalInfo": { type: "string" },
"specimenSource": { type: "string" },
"resultStatus": { type: "string" },
"reasonForTest": { type: "string" },
"comments": { type: "string" }
}
});
var testRequestDataSource = new kendo.data.DataSource({
schema: {
model: TestRequest
}
});
testRequestDataSource.bind("change", function(e) {
if (e.action === "add") {
e.items[0].dirty = true;
kendo.data.ObservableObject.fn.set.call(e.items[0], "Id", viewModel.testsResults.nextRequestId);
viewModel.testsResults.nextRequestId++;
}
});
var TestResult = kendo.data.Model.define({
id: "Id",
fields: {
"requestId": {
type: "number",
editable: false
},
"foo": {
type: "string"
}
}
});
var testResultDataSource = new kendo.data.DataSource({
data: [
{
Id: 1,
requestId: 1,
foo: "bar"
},
{
Id: 2,
requestId: 1,
foo: "baz"
},
{
Id: 3,
requestId: 2,
foo: "beep"
}
],
schema: {
model: TestResult
},
filter: {
"field": "requestId",
"operator": "eq",
"value": 0
}
});
testResultDataSource.bind("change", function(e){
if (e.action === "add") {
e.items[0].dirty = true;
kendo.data.ObservableObject.fn.set.call(e.items[0], "Id", viewModel.testsResults.nextResulttId);
viewModel.testsResults.nextResultId++;
}
});
var viewModel = kendo.observable({
...
testsResults: {
nextRequestId: 1,
nextResultId: 4,
testRequests: testRequestDataSource,
testResults: testResultDataSource,
testRequestChange: function() {
var selectedItems =testRequestGrid.select();
var selectedRow = $(selectedItems[0]);
var selectedUid = selectedRow.data("uid");
var selectedData = testRequestGrid.dataSource.getByUid(selectedUid);
var requestId = selectedData.id;
this.testsResults.testResults.filter({
"field":"requestId",
"operator":"eq",
"value": requestId
});
},
testRequestEdited: function(e) {
var uid = e.model.uid;
// TODO: fix below code to use callback or better event
setTimeout(function() {
testRequestGrid.select(testRequestGrid.tbody.find(">tr[data-uid='"+uid+"']"));
}, 100);
},
....
....
的HTML:
<div id="testsResults">
<h2>Tests/Results</h2>
<fieldset>
<legend>Test Requests</legend>
<div id="testRequests">
<div data-role="grid"
data-bind="source: testsResults.testRequests, events: { change: testsResults.testRequestChange, save: testsResults.testRequestEdited }"
data-editable="popup"
data-selectable="true"
data-toolbar='["create"]'
data-columns='[{"field":"accessionNumber","title":"Accession #"},
{"field":"specimenCollectionDate", "title":"Specimen Collection Date", "hidden":"true"},
{"field":"specimenReceivedDate", "title":"Specimen Received Date", "hidden":"true"},
{"field":"resultReportDate", "title":"Result Report Date", "hidden":"true"},
{"field":"testDescription","title":"Test Description"},
{"field":"relevantClinicalInfo", "title":"Relevant Clinical Information", "hidden":"true"},
{"field":"specimenSource","title":"Specimen Source", "hidden":"true"},
{"field":"resultStatus","title":"Result Status","hidden":"true"},
{"field":"reasonForTest","title":"Reason For Test", "hidden":"true"},
{"field":"comments","title":"Comments","hidden":"true"},
{"command":["edit","destroy"], "title":" ", "width":"170px"}]'>
</div>
</div>
</fieldset>
<fieldset>
<legend>Test Results</legend>
<div id="testResults">
<div data-role="grid"
data-bind="source: testsResults.testResults"
data-editable="popup"
data-selectable="true"
data-toolbar='["create"]'
data-columns='[{"field":"requestId","title": "Test Request ID", "hidden":"true"},
{"field":"foo", "title":"Foo"},
{"command":["edit","destroy"], "title":" ", "width":"170px"}]'>
</div>
</div>
</fieldset>
</div>