Twitter Bootstrap表可編輯json數據

爲什麼我不能以這種方式使用引導可編輯表？Twitter Bootstrap表可編輯json數據

<table id="addElements" data-height="299"> 
    <thead> 
     <tr> 
      <th data-field="id" data-align="right">Item ID</th> 
      <th data-field="element" data-align="center">Element</th> 
      <th data-field="weight" data-align="">Težina</th> 
      <th data-field="default_thickness" data-align="">Debljina</th> 
     </tr> 
    </thead> 
</table> 


    //put data in js variable and fill the table 
var elementData = [{ 
    "id": "1", 
    "element": "c", 
    "weight": "20", 
    "default_thickness": "6" 
}, { 
    "id": "2", 
    "element": "k", 
    "weight": "21", 
    "default_thickness": "2" 
}, { 
    "id": "3", 
    "element": "p", 
    "weight": "18", 
    "default_thickness": "2" 
}]; 
$(function() { 
    $('#addElements').bootstrapTable({ 
     data: elementData 
    }); 
}) 

$.fn.editable.defaults.mode = 'inline'; 
    $('td').editable({ 
      url: '/post', 
      type: 'text', 
      pk: 1, 
      name: 'parket', 
      title: 'Enter username' 
     });

在這種小提琴 https://jsfiddle.net/aleksacavic/03agu1ex/1/ 它的工作原理，點擊後，表格單元格處於編輯模式。但是我的網站上的相同代碼不起作用？我錯過了什麼？正如我所看到的，在我的身邊，點擊時，單元格不允許更改類，只有表格線程被突出顯示，沒有創建附加元素（輸入字段）。感謝

來源

2015-07-21 aleksacavic

你錯過了準備功能，由於這jQuery是不能夠綁定數據。

//put data in js variable and fill the table 
$(window).bind("load", function() { 
    var elementData = [{ 
     "id": "1", 
     "element": "c", 
     "weight": "20", 
     "default_thickness": "6" 
    }, { 
     "id": "2", 
     "element": "k", 
     "weight": "21", 
     "default_thickness": "2" 
    }, { 
     "id": "3", 
     "element": "p", 
     "weight": "18", 
     "default_thickness": "2" 
    }]; 
    $(function() { 
     $('#addElements').bootstrapTable({ 
      data: elementData 
     }); 
    }) 


$.fn.editable.defaults.mode = 'inline'; 
     $('a').editable({ 
      url: '/post', 
      type: 'text', 
      pk: 1, 
      name: 'parket', 
      title: 'Enter username' 
     }); 
    $('td').editable({ 
      url: '/post', 
      type: 'text', 
      pk: 1, 
      name: 'parket', 
      title: 'Enter username' 
     }); 
});

來源

2015-07-22 09:50:58

謝謝回答。做過某事。一切都是一樣的。剛纔我爲此目的創建了模型civil.cavic.me/fiddle.html – aleksacavic

我按照你的建議將所有內容都包裝在.ready函數中，但是在我的結尾沒有任何變化。我可以在你的截圖中看到它的工作...：@ – aleksacavic

$ .fn.editable.defaults.mode ='inline'; $（ 'A'）編輯（{ 網址： '/後'，類型： '文本'， PK：1，名稱： 'PARKET'，標題： '輸入用戶名' }）。 $（ 'TD'）編輯（{ 網址： '/後'，類型： '文本'， PK：1，名稱： 'PARKET'，標題： '輸入用戶名' }）。 }）; 運行瀏覽器控制檯上的代碼，並檢查它一旦 –

嘗試和負載增加延遲，應該修復它：

setTimeout(function(){ 
      $.fn.editable.defaults.mode = 'inline'; 
      var a = $('a'); 
      $('a').editable({ 
       type: 'text', 
       pk: 1, 
       name: 'parket', 
       title: 'Enter username' 
      }); 
      $('td').editable({ 
       type: 'text', 
       pk: 1, 
       name: 'parket', 
       title: 'Enter username' 
      }); 
     },500);

來源

2015-09-01 17:24:03 born2net

Twitter Bootstrap表可編輯json數據

回答

相關問題