3

我有一个网格，其中每一行都有一个带有值的选择下拉框。

选择项目后，如何使网格重新加载以反映更改？

我想这样做的原因是因为从下拉列表中选择的项目会影响另一列中的金额。

这是我的下拉列表的代码：

function shippingModelSelect(container, options)
{
    $('<input required data-text-field="modelName" data-value-field="modelId" data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        autoBind: false,
        dataSource: [
        {
            "modelName": "Individual shipping cost", 
            "modelId": 1
        },
        {
            "modelName": "Based on weight", 
            "modelId": 2
        },
        {
            "modelName": "Based on value", 
            "modelId": 3
        }
        ],
        close: function()
        {
            handleChange();            
        }
    });
}

我的手柄更改功能：

var gridAlert = $('#gridAlert');
var handleChange = function(input, value) {
    if(input && value)
    {
        detail = 'Product <b>'+input[0].name+'</b> changed to <b>'+value+'</b>';
        gridAlert.html('<b>Changes saved!</b><p>'+detail+'</p>');
        gridAlert.fadeIn('slow', function(){
            setTimeout(function(){
                gridAlert.fadeOut();
            }, 2000)
        });
    }
    dataSource.sync();
}

最后是我的网格设置：

dataSource = new kendo.data.DataSource({
    serverPaging: true,
    serverSorting: true,
    serverFiltering: true,
    serverGrouping: true,
    serverAggregates: true,
    transport: {
        read: {
            url: ROOT+'products/manage'
        },
        update: {
            url: ROOT+'products/set-product',
            type: "POST",
            data: function(data)
            {
                data.dateAdded = kendo.toString(data.dateAdded, 'yyyy-MM-dd hh:ii:ss')
                return data;
            }
        }
    },
    pageSize: 20,
    sort: {
        field: 'id',
        dir: 'desc'
    },
    error: function(e) {
        alert(e.errorThrown+"\n"+e.status+"\n"+e.xhr.responseText) ;
    },
    schema: {
        data: "data",
        total: "rowcount",
        model: {
            id: "id",
            fields: {
                id: {
                    type: 'number',
                    editable: false
                },
                SKU: {
                    type: "string"
                },
                name: {
                    type: "string"
                },
                dateAdded: {
                    type: "date",
                    format: "{0:yyyy/MM/dd hh:mm}",
                    editable: false
                },
                shippingModel: {
                    type: "string"
                },
                shippingModelId: {
                    type: "number"
                },
                price: {
                    type: "number"
                }
            }
        }
    }
})

$('#productGrid').kendoGrid({
    dataSource: dataSource,
    autoBind: true,
    columns: [
    {
        field: "image",
        title: "Image",
        width: 30,
        template: "#= '<img title=\"'+alt+'\" src=\"images/'+image+'\"/>' #"
    },
    {
        field: "SKU",
        title: "SKU",
        width: 50,
        headerTemplate: "<abbr title=\"Stock Keeping Unit - A unique identifier for this product\">SKU</abbr>"
    },
    {
        field: "stockQuantity",
        title: "Quantity",        
        width: 30
    },
    {
        field: "name",
        title: "Name",
        width: 200
    },
    {
        field: "dateAdded",
        title: "Date Added",
        width: 80,
        template: "#= niceDate #"
    },
    {
        field: "shippingModelId",
        title: "Shipping Model",
        width: 50,
        editor: shippingModelSelect,
        template: "#= shippingModel #"
    },
    {
        field: "price",
        title: "Price",
        width: 80,
        //format: "{0:c}",
        template: "#= '&pound;'+price.toFixed(2)+'<br /><span class=\"grey\">+&pound;'+shipping+' shipping</span>' #"
    }
    ],
    sortable: true,
    editable: true,
    pageable: {
        refresh: true,
        pageSizes: [10, 20, 50]
    },
    scrollable: false,
    reorderable: true,
    edit: function(e) {
        var value;        
        var numericInput = e.container.find("[data-type='number']");

        // Handle numeric
        if (numericInput.length > 0)
        {
            var numeric = numericInput.data("kendoNumericTextBox");    

            numeric.bind("change", function(e) {
                value = this.value();
                handleChange(numericInput, value);
            });

            return;
        }

        var input = e.container.find(":input");

        // Handle checkbox
        if (input.is(":checkbox"))
        {
            value = input.is(":checked");
            input.change(function(){
                value = input.is(":checked");
                handleChange(input, value);
            });
        }
        else
        {        
            // Handle text
            value = input.val();
            input.keyup(function(){
                value = input.val();
            });
            input.change(function(){
                value = input.val();
            });

            input.blur(function(){
                handleChange(input, value);
            });
        }
    }
}
)
4

1 回答 1

4

你需要做两件事。

  1. 等待更改完成同步
  2. 告诉网格重新读取数据源

这应该为你做

dataSource.bind("sync", function(e) {
  $('#productGrid').data("kendoGrid").dataSource.read();
});

有关更多信息，请参阅其文档站点上的数据源同步事件和数据源读取方法。

于 2013-03-17T16:06:52.180 回答