1

我有一个包含一行的表，其中存在一个文本框和一个动态下拉列表，我想克隆该行。为此，我正在执行以下操作：

下面的代码用于显示包含一行的表格，其中包含一个文本框和动态下拉框：

<table>
<tr>
    <td id="j" class="i">
        Skills
        <input data-bind="value:skl" name="skl" id="skl" style="width: 120px; height: auto"
            data-type="string" class="k-textbox" />
        <input id="styp" style="width: 120px; height: auto" /><span></span>
        <button class="add" value="add">
            Add</button>
    </td>
    <td>
    </td>
    <td>
        @* <span data-for="styp" class="k-invalid-msg"></span></td>*@
    </td>
</tr>
@*this code is to display the add rows and delete rows functionality*@
<tr id="fo" style="display: none">
    <td width="100%">
        <input type="text" class="k-textbox" id="a" width="100 px" height="20 px" />
        <select style="width: 90px; height: auto" id="options" data-bind="value:skill" data-text-field="skill"
            data-value-field="skillid" data-source="skilldatasource" data-role="dropdownlist">
        </select>
        <button type="button" id="b" class="delete" value="delete">
            Delete</button>
    </td>
    <td>
    </td>
    <td>
    </td>
</tr>
</table>


//Below code is for defining datasource to the dropdownlist

var skilldatasource = new kendo.data.DataSource({
transport: {
    read:
        {
            url: "/ProfileMgmtProfileSearch/Skills",
            type: "POST",
            dataType: "json"
        }
},
schema: {
    model: {
        id: "skillid",
        fields: {
            skillid: { type: "number" },
            skill: { type: "string" }
        }
    }
}
})

skilldatasource.read();

$(document).ready(function () {
//Add button click functionality to Add new row to the Skills row with same fields //and also append a delete button to it:
$('.add').click(function () {
    alert("cliked");
    id++;
    var prot = $("#fo").find("td").clone();
    // $("#options").clone();
    prot.attr("class", "")
    prot.attr("id", id);
    prot.addClass("new");
    $('<tr/>').append(prot).insertAfter($('#theTable tbody>tr:last'));
    var dropdownlist2 = prot.find("select#options");
    alert("hai....");
    alert(dropdownlist2);
    dropdownlist2.kendoDropDownList({});
});

// button click functionality to delete the specified row containing that delete button
$('#theTable').delegate('.delete', 'click', function () {
    $(this).closest("td").remove();
    var first = dropdownlist.dataSource.get(c--);
    dropdownlist.dataSource.remove(first);
})
});

==================================================== ============================ 

Here by executing the above code am able to clone the entire row but the dropdown box is not getting values in it i.e., datasource is not cloned, so plz help me out of these problem.
4

0 回答 0