首页 发现 帮助
登录
githab
/
bootstrap-table
2
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

Merge branch 'develop' into keep-details-open

A. David 5 年之前
父节点
320e4b8d92 4204fe35f5
当前提交
ea108a2aa4
共有 10 个文件被更改，包括 135 次插入 和 13 次删除
分列视图 显示文件统计
  1. 8 0
      site/_themes/src/App.vue
  2. 二进制
      site/assets/images/bootstrap5.jpg
  3. 95 0
      site/themes/bootstrap5.md
  4. 12 5
      src/bootstrap-table.js
  5. 1 0
      src/constants/index.js
  6. 1 1
      src/extensions/export/bootstrap-table-export.js
  7. 4 1
      src/extensions/filter-control/bootstrap-table-filter-control.js
  8. 1 1
      src/extensions/filter-control/utils.js
  9. 3 5
      src/extensions/multiple-sort/bootstrap-table-multiple-sort.js
  10. 10 0
      src/themes/_theme.scss

+ 8 - 0
site/_themes/src/App.vue
查看文件 

@@ -88,6 +88,14 @@ export default {
 
         ],
 
         css: [
 
           {
 
+            name: 'Bootstrap v5',
 
+            desc: 'The most popular HTML, CSS, and JavaScript framework.',
 
+            img: '/assets/images/bootstrap5.jpg',
 
+            url: '/themes/bootstrap5/',
 
+            demo: 'https://examples.bootstrap-table.com/index.html?bootstrap5',
 
+            price: ''
 
+          },
 
+          {
 
             name: 'Bootstrap v4',
 
             desc: 'The most popular HTML, CSS, and JavaScript framework.',
 
             img: '/assets/images/bootstrap4.jpg',

二进制
site/assets/images/bootstrap5.jpg
查看文件


+ 95 - 0
site/themes/bootstrap5.md
查看文件 

@@ -0,0 +1,95 @@
 
+---
 
+layout: simple
 
+title: Bootstrap v5
 
+description: A getting started of add Bootstrap Table to Bootstrap v5, how to download and use, basic templates, and more.
 
+group: themes
 
+toc: true
 
+---
 
+
 
+## Quick start
 
+
 
+Looking to quickly add Bootstrap Table to your <a href="https://getbootstrap.com/" target="_blank">Bootstrap v5</a> project? Use CDN, provided for free by the folks at UNPKG. Using a package manager or need to download the source files? [Head to the downloads page]({{ site.baseurl }}/docs/getting-started/download/).
 
+
 
+### CSS
 
+
 
+Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets to load our CSS.
 
+
 
+{% highlight html %}
 
+<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table.min.css">
 
+{% endhighlight %}
 
+
 
+### JS
 
+
 
+Place the following `<script>`s near the end of your pages, right before the closing `</body>` tag, to enable them. jQuery must come first, then Bootstrap.js, and then our JavaScript plugins.
 
+
 
+{% highlight html %}
 
+<script src="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table.min.js"></script>
 
+{% endhighlight %}
 
+
 
+## Starter template
 
+
 
+Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors.
 
+
 
+Put it all together and your pages should look like this:
 
+
 
+{% highlight html %}
 
+<!doctype html>
 
+<html lang="en">
 
+  <head>
 
+    <!-- Required meta tags -->
 
+    <meta charset="utf-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
+
 
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
 
+    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table.min.css">
 
+
 
+    <title>Hello, Bootstrap Table!</title>
 
+  </head>
 
+  <body>
 
+    <table data-toggle="table">
 
+      <thead>
 
+        <tr>
 
+          <th>Item ID</th>
 
+          <th>Item Name</th>
 
+          <th>Item Price</th>
 
+        </tr>
 
+      </thead>
 
+      <tbody>
 
+        <tr>
 
+          <td>1</td>
 
+          <td>Item 1</td>
 
+          <td>$1</td>
 
+        </tr>
 
+        <tr>
 
+          <td>2</td>
 
+          <td>Item 2</td>
 
+          <td>$2</td>
 
+        </tr>
 
+      </tbody>
 
+    </table>
 
+
 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
 
+    <script src="https://unpkg.com/bootstrap-table@{{ site.current_version }}/dist/bootstrap-table.min.js"></script>
 
+  </body>
 
+</html>
 
+{% endhighlight %}
 
+
 
+### HTML5 doctype
 
+
 
+Bootstrap Table requires the use of the HTML5 doctype. Without it, you'll see some funky incomplete styling, but including it shouldn't cause any considerable hiccups.
 
+
 
+{% highlight html %}
 
+<!doctype html>
 
+<html lang="en">
 
+  ...
 
+</html>
 
+{% endhighlight %}
 
+
 
+## Community
 
+
 
+Stay up to date on the development of Bootstrap Table and reach out to the community with these helpful resources.
 
+
 
+- Follow [@{{ site.twitter }} on Twitter](https://twitter.com/{{ site.twitter }}).
 
+- Read [The Official Bootstrap Table News]({{ site.base_url }}/news).
 
+- Implementation help may be found at Stack Overflow (tagged [`bootstrap-table`](https://stackoverflow.com/questions/tagged/bootstrap-table)).

+ 12 - 5
src/bootstrap-table.js
查看文件 

@@ -37,6 +37,7 @@ class BootstrapTable {
 
 
     this.constants = Constants.CONSTANTS
 
     this.constants.theme = $.fn.bootstrapTable.theme
 
+    this.constants.dataToggle = this.constants.html.dataToggle || 'data-toggle'
 
 
     const buttonsPrefix = opts.buttonsPrefix ? `${opts.buttonsPrefix}-` : ''
 
 
@@ -229,7 +230,7 @@ class BootstrapTable {
 
 
   initHeader () {
 
     const visibleColumns = {}
 
-    const html = []
 
+    const headerHtml = []
 
 
     this.header = {
 
       fields: [],
 
@@ -247,6 +248,8 @@ class BootstrapTable {
 
     Utils.updateFieldGroup(this.options.columns)
 
 
     this.options.columns.forEach((columns, i) => {
 
+      const html = []
 
+
 
       html.push(`<tr${Utils.sprintf(' class="%s"', this._headerTrClasses[i])} ${Utils.sprintf(' style="%s"', this._headerTrStyles[i])}>`)
 
 
       let detailViewTemplate = ''
 
@@ -364,9 +367,13 @@ class BootstrapTable {
 
       }
 
 
       html.push('</tr>')
 
+
 
+      if (html.length > 3) {
 
+        headerHtml.push(html.join(''))
 
+      }
 
     })
 
 
-    this.$header.html(html.join(''))
 
+    this.$header.html(headerHtml.join(''))
 
     this.$header.find('th[data-field]').each((i, el) => {
 
       $(el).data(visibleColumns[$(el).data('field')])
 
     })
 
@@ -621,7 +628,7 @@ class BootstrapTable {
 
           const html = []
 
 
           html.push(`<div class="keep-open ${this.constants.classes.buttonsDropdown}" title="${opts.formatColumns()}">
 
-            <button class="${this.constants.buttonsClass} dropdown-toggle" type="button" data-toggle="dropdown"
 
+            <button class="${this.constants.buttonsClass} dropdown-toggle" type="button" ${this.constants.dataToggle}="dropdown"
 
             aria-label="Columns" title="${opts.formatColumns()}">
 
             ${opts.showButtonIcons ? Utils.sprintf(this.constants.html.icon, opts.iconsPrefix, opts.icons.columns) : ''}
 
             ${opts.showButtonText ? opts.formatColumns() : ''}
 
@@ -1174,7 +1181,7 @@ class BootstrapTable {
 
 
       const pageNumber = [
 
         `<span class="${this.constants.classes.paginationDropdown}">
 
-        <button class="${this.constants.buttonsClass} dropdown-toggle" type="button" data-toggle="dropdown">
 
+        <button class="${this.constants.buttonsClass} dropdown-toggle" type="button" ${this.constants.dataToggle}="dropdown">
 
         <span class="page-size">
 
         ${allSelected ? opts.formatAllRows() : opts.pageSize}
 
         </span>
 
@@ -1567,7 +1574,7 @@ class BootstrapTable {
 
           this.options.undefinedText : value
 
       }
 
 
-      if (this.searchText !== '' && this.options.searchHighlight) {
 
+      if (this.searchText && this.options.searchHighlight) {
 
         value = Utils.calculateObjectValue(column, column.searchHighlightFormatter, [value, this.searchText], value.toString().replace(new RegExp(`(${ this.searchText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') })`, 'gim'), '<mark>$1</mark>'))
 
       }

+ 1 - 0
src/constants/index.js
查看文件 

@@ -150,6 +150,7 @@ const CONSTANTS = {
 
       buttonActive: 'active'
 
     },
 
     html: {
 
+      dataToggle: 'data-bs-toggle',
 
       toolbarDropdown: ['<div class="dropdown-menu dropdown-menu-right">', '</div>'],
 
       toolbarDropdownItem: '<label class="dropdown-item dropdown-item-marker">%s</label>',
 
       pageDropdown: ['<div class="dropdown-menu">', '</div>'],

+ 1 - 1
src/extensions/export/bootstrap-table-export.js
查看文件 

@@ -106,7 +106,7 @@ $.BootstrapTable = class extends $.BootstrapTable {
 
             <div class="export ${this.constants.classes.buttonsDropdown}">
 
             <button class="${this.constants.buttonsClass} dropdown-toggle"
 
             aria-label="Export"
 
-            data-toggle="dropdown"
 
+            ${this.constants.dataToggle}="dropdown"
 
             type="button"
 
             title="${o.formatExport()}">
 
             ${o.showButtonIcons ? Utils.sprintf(this.constants.html.icon, o.iconsPrefix, o.icons.export) : ''}

+ 4 - 1
src/extensions/filter-control/bootstrap-table-filter-control.js
查看文件 

@@ -123,7 +123,10 @@ $.BootstrapTable = class extends $.BootstrapTable {
 
           // Avoid recreate the controls
 
           const $controlContainer = UtilsFilterControl.getControlContainer(this)
 
 
-          if ($controlContainer.find('select').length > 0 || $controlContainer.find('input:not([type="checkbox"]):not([type="radio"])').length > 0) {
 
+          if (
 
+            ($controlContainer.find('select').length > 0 || $controlContainer.find('input:not([type="checkbox"]):not([type="radio"])').length > 0) &&
 
+            !this.options.filterControlContainer
 
+          ) {
 
             return
 
           }

+ 1 - 1
src/extensions/filter-control/utils.js
查看文件 

@@ -248,7 +248,7 @@ export function initFilterSelectControls (that) {
 
 
       for (let i = 0; i < z; i++) {
 
         // Added a new value
 
-        let fieldValue = data[i][field]
 
+        let fieldValue = Utils.getItemField(data[i], field, false)
 
         const formatter = that.options.editable && column.editable ? column._formatter : that.header.formatters[j]
 
         let formattedValue = Utils.calculateObjectValue(that.header, formatter, [fieldValue, data[i], i], fieldValue)

+ 3 - 5
src/extensions/multiple-sort/bootstrap-table-multiple-sort.js
查看文件 

@@ -144,9 +144,7 @@ const theme = {
 
             <div class="modal-content">
 
               <div class="modal-header">
 
                 <h5 class="modal-title" id="%sLabel">%s</h5>
 
-                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 
-                  <span aria-hidden="true">&times;</span>
 
-                </button>
 
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 
               </div>
 
               <div class="modal-body">
 
                 <div class="bootstrap-table">
 
@@ -173,14 +171,14 @@ const theme = {
 
                     </div>
 
               </div>
 
               <div class="modal-footer">
 
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">%s</button>
 
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">%s</button>
 
                 <button type="button" class="btn btn-primary multi-sort-order-button">%s</button>
 
               </div>
 
             </div>
 
           </div>
 
         </div>
 
       `,
 
-      multipleSortButton: '<button class="multi-sort btn btn-secondary" type="button" data-toggle="modal" data-target="#%s" title="%s">%s</button>',
 
+      multipleSortButton: '<button class="multi-sort btn btn-secondary" type="button" data-bs-toggle="modal" data-target="#%s" title="%s">%s</button>',
 
       multipleSortSelect: '<select class="%s %s form-control">'
 
     }
 
   },

+ 10 - 0
src/themes/_theme.scss
查看文件 

@@ -353,6 +353,16 @@
 
       padding: .5rem 1rem;
 
     }
 
   }
 
+
 
+  &.bootstrap5 {
 
+    .float-left {
 
+      float: left;
 
+    }
 
+
 
+    .float-right {
 
+      float: right;
 
+    }
 
+  }
 
 }
 
 
 /* calculate scrollbar width */