如何使用 jQuery 将 Kendo DropDownList 动态添加到 html5 表中

Posted 2023-05-07

【中文标题】如何使用 jQuery 将 Kendo DropDownList 动态添加到 html5 表中

【英文标题】：How to add Kendo DropDownList dynamically into a table of html5 with jQuery

【发布时间】：2017-07-17 09:36:09

【问题描述】：

单击带有 class="classAdd" 的按钮后，我需要将一行动态添加到 html5 表中，并且我对作为剑道下拉列表的行的一列有问题，它不显示好吧。

HTML5：

<table id="tablePost" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Producto</th>
            <th>Precio</th>
            <th>Cantidad</th>
        </tr>
    </thead>
    <tbody>
        <tr class="productos-presupuesto">
            <td>
                @(Html.Kendo().DropDownList()
                .Name("productoPresupuesto")
                .OptionLabel("Seleccione un producto...")
                .DataTextField("DescripcionProducto")
                .DataValueField("CodigoProducto")
                .HtmlAttributes(new  style = "width:100%" )
                .Filter("contains")
                .DataSource(source =>
                
                    source.Read(read =>
                    
                        read.Action("ObtenerProductoAsync","Mantenimiento");
                    );
                )
                )
            </td>
            <td>
                <input class="form-control" type="number" name="precio" />
            </td>
            <td>
                <input class="form-control" type="number" name="cantidad" />
            </td>
            <td>
                <button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add more</button>
            </td>
        </tr>
    </tbody>
</table>

这是第一行，它工作正常，但是当我尝试添加新行时，剑道的下拉列表不显示正常，这发生在我单击按钮添加更多之后。

jQuery:

    $(document).ready(function () 
        $(document).on("click", ".classAdd", function ()  //
            var rowCount = $('.productos-presupuesto').length + 1;
            var contactdiv = '<tr class="productos-presupuesto">' +
                '<td><input id="productoPresupuesto' + rowCount + '" /></td>' +
                '<td><input type="text" name="precio' + rowCount + '" class="form-control" /></td>' +
                '<td><input type="text" name="cantidad' + rowCount + '" class="form-control" /></td>' +
                '<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add more</button>' +
                '<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
                '</tr>';

                $("#productoPresupuesto"+ rowCount).kendoDropDownList(
                    dataTextField: 'DescripcionProducto',
                    dataValueField: 'CodigoProducto',
                    dataSource: 
                        transport: 
                            read: 
                                type: "jsonp",
                                url: "Mantenimiento/ObtenerProductoAsync"
                            
                        
                    

                );

            $('#tablePost').append(contactdiv);
        );
    );

我该如何解决这个问题？

【参考方案1】：

移动这一行：

$('#tablePost').append(contactdiv);

所以它在这个之上：

$("#productoPresupuesto"+ rowCount).kendoDropDownList(

您在变量 'contactdiv' 中构建的 html 需要附加到 DOM，然后才能使用上行中的 jquery 选择器查找元素并将其转换为下拉列表。

【讨论】：

感谢您的回复。但它没有在下拉列表中显示任何值以供选择，其值由 Mantenimiento 控制器的 ObtenerProductoAsync 方法返回。

很高兴为您提供帮助。 Jsonp 用于跨域请求，工作方式略有不同，需要定义回调来处理结果。看起来你在这里不需要它。