Question

我有Kendo Grid，其中我有下拉输入[editable]。现在我想根据下一行中的值来过滤下拉列表中的值。例如：

_________________________________________
Column 1 | Column 2 (this is a dropdown)
_________________________________________
A        | Show only values relevant to A
__________________________________________
B        | Show values relevant to B
_____________________________________________
C        | Show values relevant to C
_________________________________________

Answer 1

您可以执行以下操作

编辑行时，从第一列获取名称
根据第一列值
在下面给出的示例中，我编辑了Kendo UI提供的用于级联下拉列表的现有示例，因此我编写了额外的代码来获取第一列的ID，因此在您的情况下，您可以排除其他步骤

需要HTML

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

需要的脚本

<script>
    // array of all brands
    var brands = [
        { brandId: 1, name: "Ford" },
        { brandId: 2, name: "BMW" }
    ];

    // array of all models
    var models = [
        { modelId: 1, name: "Explorer", brandId: 1},
        { modelId: 2, name: "Focus", brandId: 1},
        { modelId: 3, name: "X3", brandId: 2},
        { modelId: 4, name: "X5", brandId: 2}
    ];

    $("#grid").kendoGrid({
        dataSource: {
            data: [
                { id: 1, brandId: 1, modelId: 2 }, // initial data item (Ford, Focus)
                { id: 2, brandId: 2, modelId: 3 } // initial data item (BMW, X3)
            ],
            schema: {
                model: {
                    id: "id",
                    fields: {
                        id: { editable: false }, // the id field is not editable
                        brandId: {editable: false}
                    }
                }
            }
        },
        editable: "inline", // use inline mode so both dropdownlists are visible (required for cascading)
        columns: [
        { field: "id" },
        {
            // the brandId column
            title: "Brand",
            field: "brandId", // bound to the brandId field
            template: "#= brandName(brandId) #", // the template shows the name corresponding to the brandId field

        },
        {
            //The modelId column
            title: "Model",
            field: "modelId",  // bound to the modelId field
            template: "#= modelName(modelId) #", //the template shows the name corresponding to the modelId field
            editor: function(container) { // use a dropdownlist as an editor
                var input = $('<input id="modelId" name="modelId">');
                input.appendTo(container);
                input.kendoDropDownList({
                    dataTextField: "name",
                    dataValueField: "modelId",
                    //cascadeFrom: "brandId", // cascade from the brands dropdownlist
                    dataSource: filterModels() // bind it to the models array
                }).appendTo(container);
            }
        },
        { command: "edit" }
        ]
    });

    function brandName(brandId) {
        for (var i = 0; i < brands.length; i++) {
            if (brands[i].brandId == brandId) {
                return brands[i].name;
            }
        }
    }

    function brandId(brandName) {
        for (var i = 0; i < brands.length; i++) {
            if (brands[i].name == brandName) {
                return brands[i].brandId;
            }
        }
    }

    function modelName(modelId) {
        for (var i = 0; i < models.length; i++) {
            if (models[i].modelId == modelId) {
                return models[i].name;
            }
        }
    }

    // this function will be used by the drop down to filter the data based on the previous column value
    function filterModels()
    {
        // bring the brand name from previous column
        var brandName = $('#modelId').closest('td').prev('td').text();
        // additional work in this sample to get the Id
        var id =  brandId(brandName);
        // filter the data of the drop down list
        var details= $.grep(models, function(n,i){
             return n.brandId==id;
        });
        return details;
    }
</script>

这是一个有效的demo

希望它会帮助你

根据另一行的值过滤Kendo网格行中的Kendo Dropdownlist值

1 个答案: