Question

我想在弹出窗口中编辑listview项目。我把一些不同的例子拼凑在一起，但必须遗漏一些东西。这是我的，但我无法弄清楚如何将弹出窗口模板绑定到listview的数据源。

以下是我接触过这个问题的方法：

窗口模板：

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

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

Kendo / 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>

Answer 1

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

您正在使用标识符#listView绑定listview - 我无法在给定的HTML中看到该标识符。

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

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

使用弹出编辑器的Kendo ListView

1 个答案: