집 > 기사 > 웹 프론트엔드 > 부트스트랩 테이블 편집 셀(코드 예)

부트스트랩 테이블 편집 셀(코드 예)

PHPz원래의: 2018-04-19 13:32:396053검색

이번에는 부트스트랩 테이블에서 셀을 편집하는 방법을 알려드리겠습니다. 부트스트랩 테이블에서 셀을 편집할 때 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

부트스트랩 테이블을 편집 가능하게 만들려면 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!