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数据

回答

相关问题