Bearbeitungszelle für Bootstrap-Tabelle (Codebeispiel)-js-Tutorial-php.cn

Bearbeitungszelle für Bootstrap-Tabelle (Codebeispiel)

PHPz

Freigeben： 2018-10-16 10:13:00

Original

6131 Leute haben es durchsucht

Dieses Mal werde ich Ihnen Bootstrap-Tabellenbearbeitungszellen vorstellen. Was sind die Vorsichtsmaßnahmen für Bootstrap-Tabellenbearbeitungszellen?

[Ähnliche Videoempfehlungen: Bootstrap-Tutorial]

Um die Bootstrap-Tabelle bearbeitbar zu machen, müssen Sie das x-editable Plug-in verwenden .

Importieren Sie zunächst die erforderlichen CSS- und JS-Dateien auf der Seite

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

Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, bitte Achten Sie auf andere verwandte Themen im Artikel zur chinesischen PHP-Website!

Empfohlene Lektüre:

JS implementiert einfache vier arithmetische Operationen

JS implementiert ein Dropdown-Menü zur Anmeldungsregistrierung Fenster

Das obige ist der detaillierte Inhalt vonBearbeitungszelle für Bootstrap-Tabelle (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!