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

【问题标题】：Kendo ui datagrid - Insert new row by fetching value from textboxKendo ui datagrid - 通过从文本框中获取值来插入新行
【发布时间】：2018-01-10 06:42:54
【问题描述】：

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

这是我的演示： http://jsfiddle.net/6ozr348y/1/

$(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 });
});

【问题讨论】：

如果我错了，请纠正我，我不确定这是否是你想要实现的，但我认为使用字符串从本地文件系统中获取文件是不可能的由于安全原因，javascript中的路径。
@SamJudge 我们能做到吗？？
这是可能的，但不是纯粹在 javascript 中，而且可能不是您希望的方式。浏览器通常只允许使用<input type="file"> 标签上传文件，即使这样，一些浏览器 (chrome) 也会对网站隐藏文件路径。您需要将文件作为表单的一部分提交，允许实际的浏览器将文件数据传递给服务器端脚本并将其存储在您的服务器上，然后重新加载页面，并将该上传文件的数据作为AJAX 请求（或在使用服务器端脚本创建页面时组合数据）。

标签： javascript jquery kendo-ui datagrid kendo-grid

【解决方案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>

【讨论】：