Browse Source

Add table methods examples.

zhixin 11 years ago
parent
commit
0b1b8a3278
1 changed files with 31 additions and 7 deletions
  1. 31 7
      docs/examples.html

+ 31 - 7
docs/examples.html

@@ -66,7 +66,7 @@
                     <li><a href="#radio-table">Radio Table</a></li>
                     <li><a href="#checkbox-table">Checkbox Table</a></li>
                     <li><a href="#pagination-table">Pagination Table</a></li>
-                    <li><a href="#load-data-table">Load Data Table</a></li>
+                    <li><a href="#table-methods">Table Methods</a></li>
                 </ul>
             </div>
         </div>
@@ -283,20 +283,33 @@
 
             <div>
                 <div class="page-header">
-                    <h1 id="load-data-table">Load Data Table</h1>
+                    <h1 id="table-methods">Table methods</h1>
                 </div>
                 <div class="bs-example">
                     <div class="btn-group btn-default">
+                        <button class="btn btn-default" id="get-selections">
+                            Get Selections
+                        </button>
                         <button class="btn btn-default" id="load-data" data-method="load">
-                            <i class="glyphicon glyphicon-refresh"></i> Load Data
+                            Load Data
                         </button>
                         <button class="btn btn-default" id="append-data" data-method="append">
-                            <i class="glyphicon glyphicon-plusglyphicon glyphicon-plus"></i> Append Data
+                            Append Data
+                        </button>
+                        <button class="btn btn-default" id="merge-cells">
+                            Merge Cells
+                        </button>
+                        <button class="btn btn-default" id="check-all" data-method="checkAll">
+                            Check All
+                        </button>
+                        <button class="btn btn-default" id="uncheck-all" data-method="uncheckAll">
+                            Uncheck All
                         </button>
                     </div>
-                    <table id="table-large-data" data-height="246">
+                    <table id="table-methods-table" data-height="246">
                         <thead>
                         <tr>
+                            <th data-field="state" data-checkbox="true"></th>
                             <th data-field="id">Item ID</th>
                             <th data-field="name">Item Name</th>
                             <th data-field="price">Item Price</th>
@@ -320,13 +333,24 @@
                                     return rows;
                                 },
                                 // init table use data
-                                $table = $('#table-large-data').bootstrapTable({
+                                $table = $('#table-methods-table').bootstrapTable({
                                     data: getRows()
                                 });
 
-                            $('#load-data, #append-data').click(function() {
+                            $('#get-selections').click(function() {
+                                alert('Selected values: ' + JSON.stringify($table.bootstrapTable('getSelections')));
+                            });
+                            $('#load-data, #append-data, #check-all, #uncheck-all').click(function() {
                                 $table.bootstrapTable($(this).data('method'), getRows());
                             });
+                            $('#merge-cells').click(function() {
+                                $table.bootstrapTable('mergeCells', {
+                                    index: 1,
+                                    field: 'name',
+                                    colspan: 2,
+                                    rowspan: 3
+                                })
+                            });
                         });
                     </script>
                 </div>