首页 >web前端 >js教程 >bootstrap table编辑单元格（代码实例）

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

PHPz原创: 2018-04-19 13:32:396150浏览

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

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

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
 <title>bootstrap-table demo</title>
 <!-- Bootstrap 3.3.6 -->
 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" rel="external nofollow" >
 <!-- Bootstrap table -->
 <link rel="stylesheet" href="bootstrap-table-1.11.0/bootstrap-table.css" rel="external nofollow" >
 <!-- x-editable -->
 <link rel="stylesheet" href="x-editable/bootstrap3-editable/css/bootstrap-editable.css" rel="external nofollow" >
</head>
<body>
 <div class="container">
 <p></p>
 <table id="table" class="table table-bordered table-hover">
 </table>
 </div>
 <!-- jQuery 2.2.0 -->
 <script src="jQuery-2.2.0.min.js"></script>
 <!-- Bootstrap 3.3.6 -->
 <script src="bootstrap/js/bootstrap.min.js"></script>
 <!-- bootstrap table -->
 <script src="bootstrap-table-1.11.0/bootstrap-table.js"></script>
 <script src="bootstrap-table-1.11.0/extensions/editable/bootstrap-table-editable.js"></script>
 <script src="x-editable/bootstrap3-editable/js/bootstrap-editable.js"></script>
 <script src="bootstrap-table-1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
 <script type="text/javascript">
 $(function(){
  $(&#39;#table&#39;).bootstrapTable({
   url:&#39;data.json&#39;,
   columns:[
    {field: &#39;id&#39;,title: &#39;ID&#39;},
    {field: &#39;name&#39;,title: &#39;名称&#39;},
    {field: &#39;price&#39;,title: &#39;单价&#39;},
    {field: &#39;number&#39;,title: &#39;数量&#39;, sortable:true,
     cellStyle:function(value,row,index) {
      return {
       "css":{
        padding:&#39;0px&#39;
       }
      };
     },
     formatter:function(value,row,index){
      if(value == undefined) return "0";
      else return value;
     },
     editable:{
      type:&#39;text&#39;,
      clear:false,
      validate:function(value){
       if(isNaN(value)) return {newValue:0, msg:&#39;只允许输入数字&#39;};
       else if(value<0) return {newValue:0, msg:&#39;数量不能小于0&#39;};
       else if(value>=1000000) return {newValue:0, msg:&#39;当前最大只能输入999999&#39;};
      },
      display:function(value){
       $(this).text(Number(value));
      },
      //onblur:&#39;ignore&#39;,
      showbuttons:false,
      defaultValue:0,
      mode:&#39;inline&#39;
     }
    },
    {field:&#39;amount&#39;, title: &#39;总价&#39;}
   ],
   //height:300,
   idField:&#39;id&#39;,
   onEditableHidden: function(field, row, $el, reason) { // 当编辑状态被隐藏时触发
    if(reason === &#39;save&#39;) {
     var $td = $el.closest(&#39;tr&#39;).children();
     $td.eq(-1).html((row.price*row.number).toFixed(2));
     $el.closest(&#39;tr&#39;).next().find(&#39;.editable&#39;).editable(&#39;show&#39;); //编辑状态向下一行移动
    } else if(reason === &#39;nochange&#39;) {
     $el.closest(&#39;tr&#39;).next().find(&#39;.editable&#39;).editable(&#39;show&#39;);
    }
   }
  });
  $(&#39;#table&#39;).on( &#39;click&#39;, &#39;td:has(.editable)&#39;, function (e) {
   //e.preventDefault();
   e.stopPropagation(); // 阻止事件的冒泡行为
   $(this).find(&#39;.editable&#39;).editable(&#39;show&#39;); // 打开被点击单元格的编辑状态
  } );
 
 });
 </script>
 
</body>
</html>

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！