Kendo ui datagrid - 通過從文本框中提取值插入新行

我有一個文本框，當我在文本框中複製存在於我的機器中的文件路徑並點擊保存。我需要將該文件保存在劍道網格中。
你能告訴我怎麼做。
得到了網格和文本框。
但不知道如何將文件保存在網格中。
在小提琴中提供我的代碼。

這裏是我的演示： http://jsfiddle.net/6ozr348y/1/Kendo ui datagrid - 通過從文本框中提取值插入新行

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

來源

2017-08-02 texi rv

糾正我，如果我錯了，我不知道如果這是你」重新嘗試實現，但我認爲，由於安全原因，使用JavaScript中的字符串路徑從本地文件系統抓取文件是不可能的。 –

@SamJudge有無論如何我們可以實現它？ –

這是可能的，但不是純粹的JavaScript，也可能不是你想要完成的方式。瀏覽器通常只允許使用''標籤上傳文件，即使如此，一些瀏覽器（chrome）也會隱藏網站的文件路徑。您需要將您的文件作爲表單的一部分提交，允許實際的瀏覽器將文件數據傳遞給服務器端腳本並將其存儲在服務器上，然後重新加載頁面，並將該上載文件的數據作爲AJAX請求（或者在使用服務器端腳本創建頁面時組成數據）。 –

這裏是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>

來源

2017-08-14 07:21:27

Kendo ui datagrid - 通過從文本框中提取值插入新行

回答

相關問題