个人中心
gpt4 book ai didi

jquery - 在 KendoGrid 中重新绑定(bind) DropDownList，具体取决于同一行上其他 DropDownList 中选择的值

转载 作者：行者123 更新时间：2023-12-03 22:22:38 27 4
gpt4 key购买 nike

这是一个常见问题，但我不知道如何使用 KendoUI 小部件和 Javascript 来解决它。我有一个 KendoGrid，其数据源来自对 Web 服务的 AJAX 调用。数据绑定(bind)到列。两列(源和目标)是两个下拉列表:

enter image description here

每列定义为

 if (stringStartsWith(colTitle, 'Source')) {
                    columns.push({
                        field: dataItem.replace(/\s+/g, ''),
                        title: colTitle,
                        width: 150,
                        locked: false,
                        editor: sourceDropDownEditor,
                        //template: "#=SourcetankIdentifier#",
                        attributes: { style: "text-align: left" },
                        type: "text"
                    });
                }

SourceDropDownEditor 如下:

function sourceDropDownEditor(container, options) {
    $('<input id="sourcesDropDownList" required data-text-field="Source" data-value-field="Source" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            dataTextField: "Source",
            dataValueField: "Source",
            dataSource: Sources           
        });
}

目的地下拉列表也是如此。

现在，我想要的是，当用户单击“编辑”按钮(网格是使用“内联编辑”定义的)并从源 DDL 中选择某个源值时；目标 DDL 中的列表必须根据此值进行更改。

我编写了一个函数来检索正确的列表，具体取决于源 DDL 中选择的值。但我不能做的是获取该行的目标 DLL 并相应地设置数据源。

根据要求提供更多详细信息:

网格是动态构建的:

function generateGrid(JSONData) {

    var model = generateModel(JSONData, selectedMenu);
    var columns = generateColumns(model);
    var data = generateData(gridData, columns);  

   var grid = $("#mainGrid").kendoGrid({              
        edit: function (e) {            
           ..
        },
        dataSource: {
            data: data,
            schema: {
                model: model
            },
            sort:   {
                field: defaultSort.replace(/\s+/g, ''),
                dir: "desc"               
            }
        },
        toolbar: [
            ..
        ],
        columns: columns,        
        editable: "inline",       
        sortable: true,                 
        resizable: true,
        filterable: true,
        selectable: "multiple",
        cancel: function(e) {
            $('#mainGrid').data('kendoGrid').dataSource.cancelChanges();
        },

剑道道场

这里dojo.telerik.com/uXeKa 。它基本上反射(reflect)了网格模板和列字段

最终解决方案

最终解决方案在这里:dojo.telerik.com/uXeKa/2 。不需要向网格的编辑功能中添加任何内容。只需要实现Source DDL的onChange函数，并设置destination的数据源即可。

最佳答案

请尝试使用以下代码片段。

<!DOCTYPE html>
<html>
<head>
    <title>Jayesh Goyani</title>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>

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



        var sources = [];
        var destinations = [];

        var products = [{
            ProductID: 1,
            ProductName: "Chai",
            SourceID: 1,
            DestinationID: 1,

        }, {
            ProductID: 2,
            ProductName: "Chang",
            SourceID: 2,
            DestinationID: 1,

        }, {
            ProductID: 3,
            ProductName: "Aniseed Syrup",
            SourceID: 3,
            DestinationID: 2,

        }, {
            ProductID: 4,
            ProductName: "Chef Anton's Cajun Seasoning",
            SourceID: 4,
            DestinationID: 2,
        }, {
            ProductID: 5,
            ProductName: "Chef Anton's Gumbo Mix",
            SourceID: 4,
            DestinationID: 2,
        }];

        $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: {
                    data: products,
                    schema: {
                        model: {
                            id: "ProductID",
                            fields: {
                                ProductName: { type: "string" }
                            }
                        }
                    },
                    pageSize: 10
                },
                sortable: true,
                edit: onGridEdit,
                filterable: true,
                pageable: {
                    input: true,
                    numeric: false
                },
                columns: [
                    { field: "ProductName" },
                     { field: "SourceID", title: "SourceID", values: sources },
                     { field: "DestinationID", title: "DestinationID", values: destinations },
                     { command: ["edit", "destroy"], title: "&nbsp;" }

                ],
                editable: "inline"
            });
        });

        var destinationID = 0;

        function onGridEdit(arg) {
            destinationID = arg.model.DestinationID;
            $.ajax({
                url: "http://localhost:3470/Home/GetSource",
                type: 'GET',
                success: function (data) {
                    var sourceDDL = $(arg.container).find("select[name^='SourceID']").data("kendoDropDownList");
                    sourceDDL.bind("change", onChange);
                    sourceDDL.setDataSource(data);
                    sourceDDL.value(arg.model.SourceID);
                    onChange();
                }
            });

        }

        function onChange(arg) {
            var sourceid = $("select[name^='SourceID']").data("kendoDropDownList").value();



            $.ajax({
                url: "http://localhost:3470/Home/GetDestination",
                type: 'GET',
                data: { SourceID: sourceid },
                success: function (data) {
                    var destinationDDL = $("select[name^='DestinationID']").data("kendoDropDownList");
                    destinationDDL.setDataSource(data);

                    if (arg) {
                        // Please uncomment below code if you want to reset ddl value on sourceDDl value change
                        // destinationDDL.select(-1);
                    }
                    else {
                        destinationDDL.value(destinationID);
                        destinationID = 0;
                    }
                }
            });
        }
    </script>
</body>
</html>

供引用:-

public class Source
{
    public int value { get; set; }
    public string text { get; set; }
}

public class Destination
{
    public int value { get; set; }
    public string text { get; set; }
}

.....
.....
public ActionResult GetSource()
{
    List<Source> list = new List<Source>();

    list.Add(new Source() { value = 1, text = "cat1" });
    list.Add(new Source() { value = 2, text = "cat2" });
    list.Add(new Source() { value = 3, text = "cat3" });
    list.Add(new Source() { value = 4, text = "cat4" });
    list.Add(new Source() { value = 5, text = "cat5" });

    return Json(list, JsonRequestBehavior.AllowGet);
}

public ActionResult GetDestination(int? SourceID)
{
    List<Destination> list = new List<Destination>();

    list.Add(new Destination() { value = 1, text = "des1_" + Convert.ToString(SourceID) });
    list.Add(new Destination() { value = 2, text = "des2_" });
    list.Add(new Destination() { value = 3, text = "des3_" });
    list.Add(new Destination() { value = 4, text = "des4_" });
    list.Add(new Destination() { value = 5, text = "des5_" });

    return Json(list, JsonRequestBehavior.AllowGet);
}

更新 1:(根据您的编辑器，我更新了 jquery 选择器语句)

function onGridEdit(arg) {
    var sourceDDL = $(arg.container).find("input[id^='sourcesDropDownList']").data("kendoDropDownList");
}
function onChange(arg) {
    var sourceid = $("input[id^='sourcesDropDownList']").data("kendoDropDownList").value(); 
    var destinationDDL = $("input[id^='destinationsDropDownList']").data("kendoDropDownList");  
}

如果有任何疑问，请告诉我。

关于jquery - 在 KendoGrid 中重新绑定(bind) DropDownList，具体取决于同一行上其他 DropDownList 中选择的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35058446/

27 4 0
文章推荐： JQuery .on ('keydown' ,...) 未触发新元素
文章推荐： jquery - 如何将网格从一个网格器拖动到另一个网格器？
文章推荐： jquery - jqGrid动态选择选项
文章推荐： jQuery 验证 : How to validate a non-form element?
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com