Merge pull request #4276 from wenzhixin/feature/3726

Added option widthUnit to allow any unit

site/docs/api/column-options.md

@@ -60,14 +60,26 @@ The column options is defined in `jQuery.fn.bootstrapTable.columnDefaults`.
 
 - **Attribute:** `data-width`
 
-- **Type:** `Number | String`
+- **Type:** `Number`
 
 - **Detail:**
 
-  The width of column. If not defined, the width will auto expand to fit its contents. Though if the table is left responsive and sized too small this `'width'` might be ignored (use min/max-width via class or such then). Also you can add `'%'` to your number and the Bootstrap Table will use the percentage unit, otherwise, leave as number (or add `'px'`) to make it use pixels.
+  The width of column. If not defined, the width will auto expand to fit its contents. Though if the table is left responsive and sized too small this `'width'` might be ignored (use min/max-width via class or such then). The default used Unit is 'px', use `widthUnit` to change it!
 
 - **Default:** `undefined`
 
+## widthUnit
+
+- **Attribute:** `data-width-unit`
+
+- **Type:** `String`
+
+- **Detail:**
+
+  Defines the unit which is used for the option `width`.
+
+- **Default:** `px`
+
 ## rowspan
 
 - **Attribute:** `rowspan | data-rowspan`

src/bootstrap-table.js

@@ -229,31 +229,13 @@ class BootstrapTable {
       }
 
       columns.forEach((column, j) => {
-        let text = ''
-
-        let halign = '' // header align style
-
-        let align = '' // body align style
-
-        let style = ''
         const class_ = Utils.sprintf(' class="%s"', column['class'])
-        let unitWidth = 'px'
-        let width = column.width
-
-        if (column.width !== undefined && (!this.options.cardView)) {
-          if (typeof column.width === 'string') {
-            if (column.width.includes('%')) {
-              unitWidth = '%'
-            }
-          }
-        }
-        if (column.width && typeof column.width === 'string') {
-          width = column.width.replace('%', '').replace('px', '')
-        }
+        const unitWidth = column.widthUnit
+        const width = Number.parseFloat(column.width)
 
-        halign = Utils.sprintf('text-align: %s; ', column.halign ? column.halign : column.align)
-        align = Utils.sprintf('text-align: %s; ', column.align)
-        style = Utils.sprintf('vertical-align: %s; ', column.valign)
+        const halign = Utils.sprintf('text-align: %s; ', column.halign ? column.halign : column.align)
+        const align = Utils.sprintf('text-align: %s; ', column.align)
+        let style = Utils.sprintf('vertical-align: %s; ', column.valign)
         style += Utils.sprintf('width: %s; ', (column.checkbox || column.radio) && !width
           ? (!column.showSelectTitle ? '36px' : undefined)
           : (width ? width + unitWidth : undefined))
@@ -296,7 +278,7 @@ class BootstrapTable {
         html.push(Utils.sprintf('<div class="th-inner %s">', this.options.sortable && column.sortable
           ? 'sortable both' : ''))
 
-        text = this.options.escape ? Utils.escapeHTML(column.title) : column.title
+        let text = this.options.escape ? Utils.escapeHTML(column.title) : column.title
 
         const title = text
         if (column.checkbox) {

src/constants/index.js

@@ -338,6 +338,7 @@ const COLUMN_DEFAULTS = {
   titleTooltip: undefined,
   'class': undefined,
   width: undefined,
+  widthUnit: 'px',
   rowspan: undefined,
   colspan: undefined,
   align: undefined, // left, right, center