Uncaught TypeError：無法讀取未定義的屬性'tbody'

Question

我有加載我的對象數組中的數據的Kendo網格。這是加載加載罰款，直到我添加一些修改，購買添加一個按鈕裏面的每個行中點擊按鈕的目標和模型彈出窗口必須打開。

我按照此Example來修改它。我想要的只是能夠點擊按鈕和模型打開，但現在網格不顯示這個錯誤的原因是猜測「未捕獲TypeError：無法讀取屬性'tbody'的未定義」，我在控制檯上發現。

我怎樣才能得到模型彈出窗口打開從按鈕點擊網格？

的Javascript

<script type="text/javascript"> 
    $(document).ready(function() { 
     $(function() { 
      //array objects which will add the data to the table 
      var People = [{ firstName: "E", lastName: "Es" }, { firstName: "Ray", lastName: "Rs" }, 
          { firstName: "J", lastName: "Js" }, { firstName: "RR", lastName: "ESW" }, 
          { firstName: "G", lastName: "Gp" }, { firstName: "DS", lastName: "JN" },, 
          { firstName: "ZKZG", lastName: "RD" }, { firstName: "JJJ", lastName: "FGJHGH" }]; 

      //Creating my kendo grid 
      $("#grid").kendoGrid({ 

       //now am specifying the data or binding the data to the datasource 
       dataSource: { 
        data: People, 
        FirstName: { editable: false } 
       }, 
       pageable: { pageSize: 10, buttonCount: 5 }, 
       height: 400, 
       resizable: true, 
       columnMenu: true, 
       scrollable: true, 
       pagebale: true, 
       sortable: { mode: "multiple" }, 

       columns: [ 

        { template: '<input type="button" class="info k-button k-button-icontext" name="info" value="Info" style="height: 26px; margin: 0px 2px; min-width: 64px;" />' }, 
        { title: "First Name", field: "firstName" }, 
        { title: "Last Name", field: "lastName" }, 
        { title: "Surname", field: "firstName" }, 
        { title: "Province", field: "firstName" }, 
        { title: "City", field: "firstName" }, 
        { title: "Last Name", field: "lastName" }], 

        rowTemplate: kendo.template($("#rowTemp").html()) 
      }) 
     }); 

     //Kendo model her 
     $('#grid').data('kendoGrid').tbody.find('.info').click(function() { 
      $('<div id="info_win">Some content here</div>').appendTo(document.body); // it is showing the error her 
      $("#info_win").kendoWindow({ 
       title: "Edit roles here", 
       modal: false, 
       resizable: true, 
       visible: false, 
       width: 300 
      }).data("kendoWindow").center().open(); 
     }); 
     }); 
</script> 

，我想從格上單擊按鈕顯示

視圖模型

 <div class="form-group form-horizontal custom-form"> 
      <label id="txtDate"> Date:</label> 
      <div id="calendar2" class="input-group"> 
       <div class="input-group-addon"> 
        <i class="fa fa-calendar"></i> 
       </div> 
       <input type="date" class="form-control pull-right" id="txtDate"> 
      </div> 
     </div> 
     </div> 
    </div> 

電網

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

劍道模板

<script type="text/x-kendo-template" id="rowTemp"> 

    <tr> 
     <td></td> 
     <td></td> 
     <td align="center"><input type="button" class="info k-button k-button-icontext" name="info" value="Info" style="height: 26px; margin: 0px 2px; min-width: 64px;" /></td> 

    </tr> 
</script> 

Answer 1

第一個問題是，你認爲你有一個自動執行的函數內部網格初始化，但它不是......它是一個jQuery選擇內，這意味着它內部的代碼永遠不會執行，因此當你嘗試訪問tbody時，網格不存在，因爲初始化代碼從未運行過。

所以，你需要改變

$(function() { 
    // grid initialization 
}); 

要這樣：

(function() { 
    // grid initialization 
})(); 

二：姓：{編輯：假}不是有效的數據源的初始化代碼...我認爲你是什麼試圖做的是datasource.schema.model配置（http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.model）。

第三：「pagebale」不是有效的配置選項（但它不會造成任何傷害）。

第四種：您正嘗試使用列模板來顯示按鈕，並且行模板顯示按鈕，但行模板與您的數據不匹配。

這裏是一個演示固定我的關於自執行功能VS jQuery選擇第一點：http://dojo.telerik.com/@Stephen/ULEhA

這可以讓你得到你的Grid並沒有TBODY錯誤運行...但你仍然需要修復其餘的配置和列/行模板（這是一個完整的其他問題）。