Question

当我在文本框中复制我的机器中存在的文件路径并点击保存时，我有一个文本框。我需要将该文件保存在kendo网格中。
你们能告诉我怎么做。
得到了网格和文本框。
但不确定如何将文件保存在网格中。
在小提琴中提供我的代码。

$(document).ready(function() {
    var grid = $("#grid").kendoGrid({
        dataSource: {
        data: [
            { FileName: 'need to get the value from the text box', LastName: 'LastName'},
            { FileName: 'need to get the value from the text box', LastName: 'LastName'},
            { FileName: 'need to get the value from the text box', LastName: 'LastName'},
            { FileName: 'need to get the value from the text box', LastName: 'LastName'},
            { FileName: 'need to get the value from the text box', LastName: 'LastName'}],
            schema: {
                model: {
                    fields: {
                        FileName: { type: "string" },
                        LastName: { type: "string" }                    }
                }
            },
            sort: {
                field: "FileName",
                dir: "asc"
            },
            pageSize: 10
        },
        height: 500,
        scrollable: true,
        sortable: true,
        selectable: true,
        filterable: true,
        pageable: true,
        columns: [
            {
                field: "FileName",
                title: "File Name"
            },
            {
                field: "LastName",
                title: "Last Name"
            }
        ]
    }).data("kendoGrid");

    grid.tbody.parents(".k-grid-content").eq(0).kendoScroller({ useOnDesktop: false });
});

Answer 1

这是DEMO。以下是代码：

<强> JS：

$(document).ready(function() {

    var grid = $("#grid").kendoGrid({
        dataSource: {
        data: [
            { FileName: 'need to get the value from the text box', LastName: 'LastName'},
            { FileName: 'need to get the value from the text box', LastName: 'LastName'},
            { FileName: 'need to get the value from the text box', LastName: 'LastName'},
            { FileName: 'need to get the value from the text box', LastName: 'LastName'},
            { FileName: 'need to get the value from the text box', LastName: 'LastName'}],
            schema: {
                model: {
                    fields: {
                        FileName: { type: "string" },
                        LastName: { type: "string" }                    }
                }
            },
            sort: {
                field: "FileName",
                dir: "asc"
            },
            pageSize: 10
        },
        height: 500,
        scrollable: true,
        //editable: true,
        sortable: true,
        selectable: true,
        filterable: true,
        pageable: true,
        columns: [
            {
                field: "FileName",
                title: "File Name"
            },
            {
                field: "LastName",
                title: "Last Name"
            }
        ]
    }).data("kendoGrid");

    //grid.tbody.parents(".k-grid-content").eq(0).kendoScroller({ useOnDesktop: false });

    $('#save').click(function(){
        var fname = $('#fname').val();
        //alert(fname);
        var grid = $("#grid").data("kendoGrid");
        var dataSource = grid.dataSource;
        var total = dataSource.data().length;
        dataSource.insert(total, {FileName:fname, LastName: 'Last Name'});
        //grid.addRow({FileName: fname});
        alert('New row added !!');
        $('#fname').val('')
    });
});

<强> HTML：

<h3>Enter filename in textbox and hit Save button. The new row with filename will be added to the grid</h3>
<input type="text" name="fname" id="fname" placeholder="Enter filename">
<button type="button" id="save">save</button>


<br>
<br>
<br>

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

Kendo ui datagrid - 通过从文本框中获取值来插入新行

1 个答案: