Fix #33: add switchable cloumn option.

docs/examples.html

@@ -328,15 +328,15 @@
                     <h1 id="show-columns-table">Show Columns Table</h1>
                 </div>
                 <div class="bs-example">
-                    <table data-toggle="table" data-url="data3.json" data-height="246" data-show-columns="true" data-id-field="id">
+                    <table data-toggle="table" data-url="data3.json" data-height="246" data-show-columns="true" data-id-field="id" data-minimun-count-columns="3">
                         <thead>
                         <tr>
                             <th data-field="state" data-radio="true"></th>
-                            <th data-field="name">Name</th>
+                            <th data-field="name" data-switchable="false">Name</th>
                             <th data-field="price">Price</th>
                             <th data-field="column1">Columns1</th>
                             <th data-field="column2" data-visible="false">Columns2</th>
-                            <th data-field="column3">Columns3</th>
+                            <th data-field="column3" data-switchable="false">Columns3</th>
                             <th data-field="column4" data-visible="false">Columns4</th>
                         </tr>
                         </thead>

index.html

@@ -7,5 +7,6 @@
 <script>
     location.replace('docs' + location.hash);
 </script>
+<input checked="disabled">
 </body>
 </html>

src/bootstrap-table.js

@@ -128,6 +128,7 @@
         sortable: false,
         order: 'asc', // asc, desc
         visible: true,
+        switchable: true,
         formatter: undefined,
         sorter: undefined
     };
@@ -344,6 +345,7 @@
             html = [],
             timeoutId = 0,
             $keepOpen,
+            $switchable,
             $search;
 
         this.$toolbar = this.$container.find('.fixed-table-toolbar').html('');
@@ -367,11 +369,12 @@
                 if (column.radio || column.checkbox) {
                     return;
                 }
-                var checked = column.visible ? ' checked="checked"' : '';
+                var checked = column.visible ? ' checked="checked"' : '',
+                    disabled = column.switchable ? '' : ' disabled="disabled"';
 
                 html.push(sprintf('<li>' +
-                    '<label><input type="checkbox" value="%s"%s> %s</label>' +
-                    '</li>', i, checked, column.title));
+                    '<label><input type="checkbox" value="%s"%s%s> %s</label>' +
+                    '</li>', i, checked, disabled, column.title));
             });
             html.push('</ul>',
                 '</div>');
@@ -382,10 +385,12 @@
             $keepOpen.find('li').off('click').on('click', function (event) {
                 event.stopImmediatePropagation();
             });
-            $keepOpen.find('input').off('click').on('click', function () {
+            $switchable = $keepOpen.find('input:enabled');
+            $switchable.off('click').on('click', function () {
                 var $this = $(this),
-                    $items = $keepOpen.find('input').prop('disabled', false);
+                    $items = $keepOpen.find('input');
 
+                $switchable.prop('disabled', false);
                 that.options.columns[$this.val()].visible = $this.prop('checked');
                 that.initHeader();
                 that.initBody();