javascript - 当从 API 调用读取多选选项时，如何使用复选框预先选择 KendoMultiselect 的值

Question

我正在尝试为 Kendo 网格中的一列的多选复选框过滤器设置预选值。我不知道如何实现这一目标。

我尝试使用“value”属性。但它似乎不适用于我的代码。我尝试了以下两种方法，考虑到 getStatusCol API 确实将“New”作为其值之一。

GetStatusCol API 以字符串 [] 形式返回状态。

function setStatus(element) {
    element.kendoMultiSelect({
        dataSource: {
            type: "json",
            serverFiltering: true,
            transport: {
                read: {
                    url: "../../api/GetStatusCol"
                }
            }
        },
        value: ["New"],
        change: function (e) {
        var filter = { logic: "or", filters: [] };
        var values = this.value();
        $.each(values, function (i, v) {                 
            filter.filters.push({ field: "Status", operator: "eq", value: v});                   
        });
        console.log(this.dataSource.data());
        this.dataSource.filter(filter);
        },          
    });
}  

并且还尝试稍后定义值，如下所示

function setStatus(element) {
    element.kendoMultiSelect({
        dataSource: {
            type: "json",
            serverFiltering: true,
            transport: {
                read: {
                    url: "../../api/GetStatusCol"
                }
            }
        },

        change: function (e) {
        ...         
    });
    element.getKendoMultiSelect().value(["New"]);

}  

以下是我如何定义列和多选用户界面

Columns: [
    { field: "ID", title: "ID", type: "number", hidden: true, "menu": false },                       
    {
        field: "Status", title: "Status", type: "string", filterable: {
            ui: setStatus,
            multi: true
        }
    }                       
]


function setStatus(element) {
    element.kendoMultiSelect({
        dataSource: {
            type: "json",
            serverFiltering: true,
            transport: {
                read: {
                    url: "../../api/GetStatusCol"
                }
            }
        },
        change: function (e) {
        var filter = { logic: "or", filters: [] };
        var values = this.value();
        $.each(values, function (i, v) {                 
            filter.filters.push({ field: "Status", operator: "eq", value: v});                   
        });
        console.log(this.dataSource.data());
        this.dataSource.filter(filter);
        },          
    });
}

我是剑道新手，需要一些帮助来弄清楚这里出了什么问题。

提前谢谢您!

Answer 1

如果您将多选绑定(bind)到字符串数组。该值可以像字符串数组一样指定，正如您已经实现的那样。

<select id="multiselect" multiple="multiple"></select>
<script>
$("#multiselect").kendoMultiSelect({
     dataSource: ["New", "In Progress", "Closed", "Re-open"],
     value: ["New"]
});
</script>

但是如果您的 API 返回像对象数组这样的数据，您需要像下面这样映射它:-

<div id="example" >
    <div class="demo-section k-content">
        <h4>Products</h4>
        <select id="products"></select>
    </div>
    <script>
        $(document).ready(function() {
            $("#products").kendoMultiSelect({
                placeholder: "Select products...",
                dataTextField: "ProductName",
                dataValueField: "ProductName",
                autoBind: false,
                dataSource: {
                    type: "json",
                    serverFiltering: true,
                    transport: {
                        read: {
                             url: "https://demos.telerik.com/kendo-ui/service/products",
                                                 dataType: "jsonp"
                        }
                    }
                },
                value: [
                    { ProductName: "Ipoh Coffee"},
                    { ProductName: "Chai" }
                ]
            });
        });
    </script>
</div>

使用API reference ，了解更多示例。