bootstrap table編輯單元格（程式碼實例）-js教程-PHP中文網

首頁

web前端

js教程

bootstrap table編輯單元格（程式碼實例）

PHPz

Apr 19, 2018 pm 01:32 PM

bootstrap table 單元格

這次帶給大家bootstrap table編輯單元格，bootstrap table編輯單元格的注意事項有哪些，下面就是實戰案例，一起來看一下。

【相關影片推薦：Bootstrap教學】

要讓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中文網其它相關文章！

熱AI工具

熱工具

熱門話題

Java教學

1666

CakePHP 教程

1425

Laravel 教程

1328

PHP教程

1273

C# 教程

1253

Related knowledge

bootstrap搜索欄怎麼獲取 Apr 07, 2025 pm 03:33 PM

如何使用 Bootstrap 獲取搜索欄的值：確定搜索欄的 ID 或名稱。使用 JavaScript 獲取 DOM 元素。獲取元素的值。執行所需的操作。

vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟：安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選：自定義樣式。可選：使用插件。

bootstrap垂直居中怎麼弄 Apr 07, 2025 pm 03:21 PM

使用 Bootstrap 實現垂直居中：flexbox 法：使用 d-flex、justify-content-center 和 align-items-center 類，將元素置於 flexbox 容器內。 align-items-center 類法：對於不支持 flexbox 的瀏覽器，使用 align-items-center 類，前提是父元素具有已定義的高度。

bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。