1

我想在弹出窗口中编辑列表视图项目。我拼凑了一些不同的例子，但一定遗漏了一些东西。这是我所拥有的，但我不知道如何将弹出窗口模板绑定到列表视图的数据源。

以下是我的处理方法：

窗口模板：

<div id="window"></div>

<script type="text/x-kendo-template" id="win-template">
        <div>#:StuId#</div>
</script>

剑道/jQuery 代码：

<script>
    $(document).ready(function () {
            var dataSource = new kendo.data.DataSource({
                pageSize: 50,
                transport: {
                    read: {
                        url: "GetData.asmx/GetStudentsByFeederId",
                        dataType: "xml",
                        data: { feederId: ("0123") }
                    }
                },
                schema: {
                    type: "xml",
                    data: "/ArrayOfStudentVO/StudentVO",
                    model: {
                        id: "student_id",
                        fields: {
                            StuId: { field: "student_id/text()", type: "string" },
                            StuName: { field: "stu_name/text()", type: "string"},
                            MathRec: { field: "math_rec/text()", type: "string" },
                            EnglishRec: { field: "english_rec/text()", type: "string" }
                        }
                    }
                }
            });

            /* PAGER FUNCTION (Used in ListView) */

            $("#pager").kendoPager({
                dataSource: dataSource
            });

            /* LIST VIEW CREATION */

            var listView = $("#listView").kendoListView({
                editable: "true",
                selectable: "true",
                dataBound: onDataBound,
                change: onChange,
                dataSource: dataSource,
                template: kendo.template($("#template").html())
            }).data("kendoListView");

            function onChange() {
                var data = dataSource.view();
                selected = $.map(this.select(), function(item) {
                    return data[$(item).index()].StuId;
            });

            kendoConsole.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
            popUp(selected);
        }

       function popUp(d) {
            var window = $("#window"),
                undo = $("#undo")
                        .bind("click", function() {
                            window.data("d").open();
                            undo.hide();
                        });

            if (!window.data("d")) {
                window.kendoWindow({
                    width: "600px",
                    title: "Student Information",
                    close: onClose,
                    content: { template: kendo.template($("#win-template").html()) }
                });
            }
        }

        var onClose = function() {
                undo.show();
            }

    </script>
4

1 回答 1

0

在代码中我可以看到两个问题，

您正在将列表视图与标识符 #listView 绑定 - 我无法在给定的 HTML 中看到该标识符。

在 HTML 中，您已将模板标识符指定为 #win-template，而在 Javascript 代码中，标识符为 #template - 它应该是相同的。

而且 HTML 中也没有给出 #pager 标识符。

于 2013-04-22T09:15:20.827 回答