Merge pull request #582 from wenzhixin/fix/print-ignore-lint-error

Fix print extension lint errors and add row/cell styles

Author: wenzhixin

extensions/print.html

@@ -27,7 +27,11 @@
         <th data-field="name">
           Item Name
         </th>
-        <th data-field="price" data-footer-formatter="priceFormatter">
+        <th
+          data-field="price"
+          data-footer-formatter="priceFormatter"
+          data-cell-style="priceStyle"
+        >
           <i class="fa fa-print"></i> Item Price
         </th>
       </tr>
@@ -40,9 +44,33 @@
 
   function mounted () {
     $table.bootstrapTable({
-      printStyles: ['https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css']
+      printStyles: ['https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css'],
+      rowStyle (row, index) {
+        return {
+          css: index % 2 === 0 ? { 'font-weight': 'bold' } : {}
+        }
+      }
     })
   }
 
   window.priceFormatter = data => `$${data.reduce((sum, item) => sum + parseFloat(item.price.replace('$', '')), 0)}`
+
+  window.priceStyle = function (value) {
+    const price = parseFloat(value.replace('$', ''))
+
+    if (price >= 15) {
+      return {
+        css: { 'background-color': '#d4edda', color: '#155724', 'font-weight': 'bold' }
+      }
+    }
+    if (price >= 7) {
+      return {
+        css: { 'background-color': '#fff3cd', color: '#856404', 'font-weight': 'bold' }
+      }
+    }
+    return {
+      css: { 'background-color': '#f8d7da', color: '#721c24', 'font-weight': 'bold' }
+    }
+  }
 </script>
+

options/buttons-order.html

@@ -15,11 +15,21 @@
 
 <template>
   <ul id="sortable">
-    <li data-value="fullscreen">fullscreen</li>
-    <li data-value="paginationSwitch">paginationSwitch</li>
-    <li data-value="refresh">refresh</li>
-    <li data-value="toggle">toggle</li>
-    <li data-value="columns">columns</li>
+    <li data-value="fullscreen">
+      fullscreen
+    </li>
+    <li data-value="paginationSwitch">
+      paginationSwitch
+    </li>
+    <li data-value="refresh">
+      refresh
+    </li>
+    <li data-value="toggle">
+      toggle
+    </li>
+    <li data-value="columns">
+      columns
+    </li>
   </ul>
 
   <table