Question

好的，我有两个可观察的数据源。一个人使用名为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>

Answer 1

耶！我得回答我自己的问题。问题是新记录与过滤器不匹配，因此无法显示编辑弹出窗口。我在数据源的更改事件处理程序中添加了缺少的部分，一切都很有效：

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);
        var filters = this.filter().filters;
        var requestId = filters[0].value;
        kendo.data.ObservableObject.fn.set.call(e.items[0], "requestId", requestId);
        viewModel.testsResults.nextResultId++;
}

}）;

具有动态过滤器的相关Kendo网格防止添加记录

1 个答案: