Home > Article > Web Front-end > bootstrap table editing cell (code example)

bootstrap table editing cell (code example)

PHPzOriginal: 2018-04-19 13:32:396122browse

This time I will bring you bootstrap table editing cells. What are the precautions for bootstrap table editing cells? The following is a practical case, let’s take a look.

[Related video recommendation: Bootstrap tutorial]

To make bootstrap-table editable, you need to use the x-editable plug-in.

First import the necessary css and js files on the page

<!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>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

bootstrap table editing cell (code example)

Related articles