php - 剑道模板无法读取/刷新网格

Question

我有一个通用网格，列出了一系列流程，每个流程都有一个子网格，其中包含每个流程的参与者。

就像这样

这是代码：

              $("#grid").kendoGrid({
                        dataSource: {
                            type: "json",
                            data: <?php echo $datos_procesos; ?>,
                            pageSize: 20
                        },
                        sortable: true,
                        filterable: {
                            extra: false,
                            operators: {
                                string: {
                                    startswith: "Empieza con",
                                    eq: "Igual a",
                                    neq: "No es igual a",
                                    contains: "Contiene",
                                    endswith: "Termina con"
                                }
                            }
                        },
                        selectable: "multiple",
                        pageable: {
                            refresh: true,
                            pageSizes: true,
                            buttonCount: 5
                        },
                });

                function detailInit(e) {
                    var detailRow = e.detailRow;

                    detailRow.find(".tabstrip").kendoTabStrip({
                        animation: {
                            open: { effects: "fadeIn" }
                        }
                    });

                    detailRow.find("#participantes").kendoGrid({
                        dataSource: {
                            type: "json",
                            data: <?php echo $datos_usuarios; ?>,
                            serverPaging: false,
                            pageSize: 7,
                            filter: { field: "IDPROCESO", operator: "eq", value: e.data.IDPROCESO }
                        },
                        scrollable: false,
                        sortable: true,
                        pageable: {
                            refresh: true
                        },
                        filterable: {
                            extra: false,
                            operators: {
                                string: {
                                    startswith: "Empieza con",
                                    eq: "Igual a",
                                    neq: "No es igual a",
                                    contains: "Contiene",
                                    endswith: "Termina con"
                                }
                            }
                        },
                        columns: [
                            { field: "NOMBRE", title:"Nombre" },
                            { field: "EMAIL", title:"Email" },
                            { field: "ACCIONES", title: "", encoded: false },
                        ]
                    });

                    $("a[id^='delete']").kendoTooltip({
                        content: "Desasignar usuario",
                        position: "top"
                    });

                    $("a[id^='delete']").click(function(event){
                        event.preventDefault();
                        var u = $(this).attr("href");

                        $.ajax({
                              url: u
                            }).success(function() {
                              alert("Se ha desasignado al usuario del proceso.");
                            }).error(function() {
                              alert("Se ha producido un error al desasignar el usuario del proceso.");
                            });
                        });
                    });

html代码只是简单的几行

             <div id="grid"></div>

            <script type="text/x-kendo-template" id="template">
                <div class="tabstrip">
                     <ul>
                        <li class="k-state-active">
                            Participantes
                        </li>

                     </ul>
                    <div>
                        <div id="participantes"></div>
                    </div>

                </div>
            </script>

一切正常，网格显示正确，数据来自一个 php 函数，该函数从数据库中提取进程和每个进程的参与者。

当我尝试删除进程的参与者时，我的问题出现了，我想刷新或读取新的更新数据，但它不起作用。

如果我单击创建的链接 a[id^='delete'] 它会通过 ajax 删除参与者调用 php 函数，但是我无法在成功回调中重新加载网格。“pageable: {refresh: true}”属性也不起作用

我有几个问题，例如“无法读取未定义的属性'dataSource'”或“无法读取未定义的属性'读取'”

我是 kendoUI 的新手，我有点迷茫，如果有人能给我一个线索，我将不胜感激。

谢谢您的帮助

Answer 1

我建议在参与者子网格中使用命令行破坏。Kendo Grid 处理从子网格中删除项目，您不需要再次加载数据。

detailRow.find("#participantes").kendoGrid({
    dataSource: {
        transport: {
            read:  {
                url: //here url where sub grid data is read,
                dataType: "jsonp"
            },
            destroy: {
                url: // here server side url which removes particpant,
                dataType: "jsonp"
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return {models: kendo.stringify(options.models)};
                }
            }
        },
        serverPaging: false,
        pageSize: 7,
        filter: { field: "IDPROCESO", operator: "eq", value: e.data.IDPROCESO }
    },
    scrollable: false,
    sortable: true,
    pageable: {
        refresh: true
    },
    filterable: {
        extra: false,
        operators: {
            string: {
                startswith: "Empieza con",
                eq: "Igual a",
                neq: "No es igual a",
                contains: "Contiene",
                endswith: "Termina con"
            }
        }
    },
    columns: [
        { field: "NOMBRE", title:"Nombre" },
        { field: "EMAIL", title:"Email" },
        { field: "ACCIONES", title: "", encoded: false },
        { command: ["destroy"], title: " " }],
    ]
});