我如何在 kendo UI 数据源中编写动态 URL，例如 "update/{id}"

Question

我有一个网站 API。在那我写了一个更新方法。但它需要 table 行的 id 才能更新到该行。我使用网格来显示数据并使用工具栏来编辑行。我的问题是如何将该 ID 传递给更新。有人可以指导我吗？？

Answer 1

好吧，我建议你多解释一下你的问题，但我认为如果你有一个工具栏作为模板，我认为这个例子会有所帮助：

  <script type="text/x-kendo-template" id="template">
            <div class="toolbar">
             <button type="button" id="update">Update</button>

            </div>
  </script>

您"grid"需要属性"toolbar"

    $("#grid").kendoGrid({
        dataSource: dataSource,
        pageable: true,
        height: 550,
        filterable:true,
        toolbar: kendo.template($("#template").html()),
        columns: [
            { field:"username", title: "Username" , width: "120px"  },
            { field: "nombre", title:"Nombre", width: "120px" },
            { field: "apellido", title:"Apellido", width: "120px" },
            { field: "ci", title:"Documento de Identidad", width: "120px" },
            { field: "email", title:"Direccion de Correo", width: "120px" },
            { field: "activo",title:"Estatus", width: "120px" },
            { field: "fecha_caducidad",title:"Fin Demo", width: "120px",template: "#= kendo.toString(kendo.parseDate(fecha_caducidad, 'yyyy-MM-dd'), 'MM/dd/yyyy') #" },
            { field: "licencia_status",title:" ", width: "40px",template:'<img src="assets/images/#:data.licencia_status#.png"/>' },
            { command: ["edit"], title: "&nbsp;", width: "120px" }],
        editable: "popup",
        dataBound: function () {
            var rows = this.items();
            $(rows).each(function () {
                var index = $(this).index() + 1;
                var rowLabel = $(this).find(".row-number");
                $(rowLabel).html(index);
            });
        },
        selectable: true
    });

因此，您可以配置一个 kendo 按钮并在事件点击中添加功能：

 $("#update").kendoButton({
        click: function(){

           //Here you will have the selected row

            var self=$('#grid').data('kendoGrid')
            var index = self.items().index(self.select());
            var rowActual= self.dataSource.data()[index];
            rowActual=self.dataItem(self.select()); 


            if(rowActual==undefined || rowActual ==null) {

                alert("No row selected");


            }else{
                  $.ajax({
                            type: "POST",
                            url: "update",
                            data: {
                                id:rowActual.id
                            },

                            dataType: 'json',
                            success: function (data) {          


                            },
                            error: function(){                                  

                            }
                        });
            }

        }
    });

并在 ajax 中发送行 ID，但如果您使用内联版本更新行，您可以尝试使用这样的数据源

        dataSource = new kendo.data.DataSource({
            transport: {
                read: function(options) {
                    $.ajax( {
                        url: "readUsuarios",
                        dataType: "json",
                        success: function(result) {
                            options.success(result);
                        }
                    });

                },
                update: function(options) {

                    $.ajax( {
                        url: "updateUsuarios",
                        dataType: "json",
                        data: {
                            models: kendo.stringify(options.data.models)
                        },
                        success: function(data) {

                               // response server; 

                        },
                        error: function(result) {
                            // notify the data source that the request failed
                            options.error(result);
                        }
                    });
                }
            },
            batch: true,
            pageSize: 20,
            schema: {
                model: {
                    id: "id",
                    fields: {

                        username: { editable: false, nullable: true },
                        nombre: { validation: { required: true } },
                        apellido: { type: "string", validation: { required: true} },
                        ci: { type: "string", validation: { required: true} },
                        email: { type: "string", validation: { required: true } },
                        activo: { type: "boolean",editable: false },
                        fecha_caducidad: { type: "date" },
                        licencia_status:{editable: false} 

                    }
                }
            }
        });

希望对您有所帮助！

Answer 2

更新：函数（选项）{

                $.ajax( {
                    url: function(data) { return "updateUsuarios/"+data.Id,
                    dataType: "json",
                   .....

我如何在 kendo UI 数据源中编写动态 URL，例如 "update/{id}"

How I write a dynamic URL in kendo UI DataSource like "update/{id}"

kendo-ui

kendo-grid

kendo-datasource