bootstrap table编辑单元格（代码实例）

这次给大家带来bootstrap table编辑单元格，bootstrap table编辑单元格的注意事项有哪些，下面就是实战案例，一起来看一下。

【相关视频推荐：Bootstrap教程】

要使bootstrap-table实现可编辑，需要配合使用x-editable插件。

先在页面上导入必要的css和js文件

nbsp;html>           
 
   
           $(function(){  $('#table').bootstrapTable({   url:'data.json',   columns:[    {field: 'id',title: 'ID'},    {field: 'name',title: '名称'},    {field: 'price',title: '单价'},    {field: 'number',title: '数量', sortable:true,     cellStyle:function(value,row,index) {      return {       "css":{        padding:'0px'       }      };     },     formatter:function(value,row,index){      if(value == undefined) return "0";      else return value;     },     editable:{      type:'text',      clear:false,      validate:function(value){       if(isNaN(value)) return {newValue:0, msg:'只允许输入数字'};       else if(value=1000000) return {newValue:0, msg:'当前最大只能输入999999'};      },      display:function(value){       $(this).text(Number(value));      },      //onblur:'ignore',      showbuttons:false,      defaultValue:0,      mode:'inline'     }    },    {field:'amount', title: '总价'}   ],   //height:300,   idField:'id',   onEditableHidden: function(field, row, $el, reason) { // 当编辑状态被隐藏时触发    if(reason === 'save') {     var $td = $el.closest('tr').children();     $td.eq(-1).html((row.price*row.number).toFixed(2));     $el.closest('tr').next().find('.editable').editable('show'); //编辑状态向下一行移动    } else if(reason === 'nochange') {     $el.closest('tr').next().find('.editable').editable('show');    }   }  });  $('#table').on( 'click', 'td:has(.editable)', function (e) {   //e.preventDefault();   e.stopPropagation(); // 阻止事件的冒泡行为   $(this).find('.editable').editable('show'); // 打开被点击单元格的编辑状态  } );  });  

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！

推荐阅读：

Bootstrap教程

Bootstrap教程

以上就是bootstrap table编辑单元格（代码实例）的详细内容，更多请关注【创想鸟】其它相关文章！