ホーム エクスプローラ ヘルプ
サインイン
githab
/
bootstrap-table
2
0
Fork 0
ファイル 課題 0 プルリクエスト 0 Wiki
ソースを参照

Update docs.

zhixin 11 年 前
親
f265104e23
コミット
5cb1664f1e
7 ファイル変更、603 行追加、52 行削除
分割表示 差分情報を表示
  1. 0 36
      demos/index.html
  2. 107 0
      docs/data1.json
  3. 0 0
      docs/data2.json
  4. 273 0
      docs/docs.css
  5. 41 2
      docs/docs.js
  6. 171 12
      index.html
  7. 11 2
      src/bootstrap-table.js

+ 0 - 36
demos/index.html
ファイルの表示 

@@ -1,36 +0,0 @@
 
-<!DOCTYPE html>
 
-<html>
 
-<head>
 
-    <title></title>
 
-    <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css" />
 
-    <link rel="stylesheet" href="../src/bootstrap-table.css" />
 
-</head>
 
-<body>
 
-<div class="container">
 
-    <table class="bootstrap-table" data-url="data.json" data-height="500">
 
-        <thead>
 
-            <tr>
 
-                <th data-field="state" data-checkbox="true"></th>
 
-                <th data-field="id" data-align="right">Item ID</th>
 
-                <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
 
-                <th data-field="price" data-align="">Item Price</th>
 
-            </tr>
 
-        </thead>
 
-    </table>
 
-    <p>
 
-        <button class="btn btn-default">getSelections</button>
 
-    </p>
 
-</div>
 
-
 
-<script type="text/javascript" src="../assets/jquery.min.js"></script>
 
-<script type="text/javascript" src="../assets/bootstrap/js/bootstrap.min.js"></script>
 
-<script type="text/javascript" src="../src/bootstrap-table.js"></script>
 
-<script type="text/javascript">
 
-    $(function() {
 
-        $('button').click(function() {
 
-            console.log($('.bootstrap-table').bootstrapTable('getSelections'));
 
-        });
 
-    });
 
-</script>
 
-</body>
 
-</html>

+ 107 - 0
docs/data1.json
ファイルの表示 

@@ -0,0 +1,107 @@
 
+[
 
+    {
 
+        "id": 0,
 
+        "name": "test0",
 
+        "price": "$0"
 
+    },
 
+    {
 
+        "id": 1,
 
+        "name": "test1",
 
+        "price": "$1"
 
+    },
 
+    {
 
+        "id": 2,
 
+        "name": "test2",
 
+        "price": "$2"
 
+    },
 
+    {
 
+        "id": 3,
 
+        "name": "test3",
 
+        "price": "$3"
 
+    },
 
+    {
 
+        "id": 4,
 
+        "name": "test4",
 
+        "price": "$4"
 
+    },
 
+    {
 
+        "id": 5,
 
+        "name": "test5",
 
+        "price": "$5"
 
+    },
 
+    {
 
+        "id": 6,
 
+        "name": "test6",
 
+        "price": "$6"
 
+    },
 
+    {
 
+        "id": 7,
 
+        "name": "test7",
 
+        "price": "$7"
 
+    },
 
+    {
 
+        "id": 8,
 
+        "name": "test8",
 
+        "price": "$8"
 
+    },
 
+    {
 
+        "id": 9,
 
+        "name": "test9",
 
+        "price": "$9"
 
+    },
 
+    {
 
+        "id": 10,
 
+        "name": "test10",
 
+        "price": "$10"
 
+    },
 
+    {
 
+        "id": 11,
 
+        "name": "test11",
 
+        "price": "$11"
 
+    },
 
+    {
 
+        "id": 12,
 
+        "name": "test12",
 
+        "price": "$12"
 
+    },
 
+    {
 
+        "id": 13,
 
+        "name": "test13",
 
+        "price": "$13"
 
+    },
 
+    {
 
+        "id": 14,
 
+        "name": "test14",
 
+        "price": "$14"
 
+    },
 
+    {
 
+        "id": 15,
 
+        "name": "test15",
 
+        "price": "$15"
 
+    },
 
+    {
 
+        "id": 16,
 
+        "name": "test16",
 
+        "price": "$16"
 
+    },
 
+    {
 
+        "id": 17,
 
+        "name": "test17",
 
+        "price": "$17"
 
+    },
 
+    {
 
+        "id": 18,
 
+        "name": "test18",
 
+        "price": "$18"
 
+    },
 
+    {
 
+        "id": 19,
 
+        "name": "test19",
 
+        "price": "$19"
 
+    },
 
+    {
 
+        "id": 20,
 
+        "name": "test20",
 
+        "price": "$20"
 
+    }
 
+]

demos/data.json → docs/data2.json
ファイルの表示


+ 273 - 0
docs/docs.css
ファイルの表示 

@@ -40,6 +40,11 @@ h1[id] {
 
     margin-top: -45px;
 
 }
 
 
+pre code {
 
+    display: block;
 
+    padding: 0 1em;
 
+}
 
+
 
 /*
 
  * Side navigation
 
  *
 
@@ -133,4 +138,272 @@ h1[id] {
 
     .bs-sidebar.affix {
 
         width: 263px;
 
     }
 
+}
 
+
 
+/*
 
+ * Examples
 
+ *
 
+ * Isolated sections of example content for each component or feature. Usually
 
+ * followed by a code snippet.
 
+ */
 
+
 
+.bs-example {
 
+    position: relative;
 
+    padding: 45px 15px 15px;
 
+    margin: 0 -15px 15px;
 
+    background-color: #fafafa;
 
+    box-shadow: inset 0 3px 6px rgba(0,0,0,.05);
 
+    border-color: #e5e5e5 #eee #eee;
 
+    border-style: solid;
 
+    border-width: 1px 0;
 
+}
 
+/* Echo out a label for the example */
 
+.bs-example:after {
 
+    content: "Example";
 
+    position: absolute;
 
+    top:  15px;
 
+    left: 15px;
 
+    font-size: 12px;
 
+    font-weight: bold;
 
+    color: #bbb;
 
+    text-transform: uppercase;
 
+    letter-spacing: 1px;
 
+}
 
+
 
+/* Tweak display of the code snippets when following an example */
 
+.bs-example + .highlight {
 
+    margin: -15px -15px 15px;
 
+    border-radius: 0;
 
+    border-width: 0 0 1px;
 
+}
 
+
 
+/* Make the examples and snippets not full-width */
 
+@media (min-width: 768px) {
 
+    .bs-example {
 
+        margin-left: 0;
 
+        margin-right: 0;
 
+        background-color: #fff;
 
+        border-width: 1px;
 
+        border-color: #ddd;
 
+        border-radius: 4px 4px 0 0;
 
+        box-shadow: none;
 
+    }
 
+    .bs-example + .highlight {
 
+        margin-top: -16px;
 
+        margin-left: 0;
 
+        margin-right: 0;
 
+        border-width: 1px;
 
+        border-bottom-left-radius: 4px;
 
+        border-bottom-right-radius: 4px;
 
+    }
 
+}
 
+
 
+/* Undo width of container */
 
+.bs-example .container {
 
+    width: auto;
 
+}
 
+
 
+/* Tweak content of examples for optimum awesome */
 
+.bs-example > p:last-child,
 
+.bs-example > ul:last-child,
 
+.bs-example > ol:last-child,
 
+.bs-example > blockquote:last-child,
 
+.bs-example > .form-control:last-child,
 
+.bs-example > .table:last-child,
 
+.bs-example > .navbar:last-child,
 
+.bs-example > .jumbotron:last-child,
 
+.bs-example > .alert:last-child,
 
+.bs-example > .panel:last-child,
 
+.bs-example > .list-group:last-child,
 
+.bs-example > .well:last-child,
 
+.bs-example > .progress:last-child,
 
+.bs-example > .table-responsive:last-child > .table {
 
+    margin-bottom: 0;
 
+}
 
+.bs-example > p > .close {
 
+    float: none;
 
+}
 
+
 
+/* Typography */
 
+.bs-example-type .table .info {
 
+    color: #999;
 
+    vertical-align: middle;
 
+}
 
+.bs-example-type .table td {
 
+    padding: 15px 0;
 
+    border-color: #eee;
 
+}
 
+.bs-example-type .table tr:first-child td {
 
+    border-top: 0;
 
+}
 
+.bs-example-type h1,
 
+.bs-example-type h2,
 
+.bs-example-type h3,
 
+.bs-example-type h4,
 
+.bs-example-type h5,
 
+.bs-example-type h6 {
 
+    margin: 0;
 
+}
 
+
 
+/* Images */
 
+.bs-example > .img-circle,
 
+.bs-example > .img-rounded,
 
+.bs-example > .img-thumbnail {
 
+    margin: 5px;
 
+}
 
+
 
+/* Tables */
 
+.bs-example > .table-responsive > .table {
 
+    background-color: #fff;
 
+}
 
+
 
+/* Buttons */
 
+.bs-example > .btn,
 
+.bs-example > .btn-group {
 
+    margin-top: 5px;
 
+    margin-bottom: 5px;
 
+}
 
+.bs-example > .btn-toolbar + .btn-toolbar {
 
+    margin-top: 10px;
 
+}
 
+
 
+/* Forms */
 
+.bs-example-control-sizing select,
 
+.bs-example-control-sizing input[type="text"] + input[type="text"] {
 
+    margin-top: 10px;
 
+}
 
+.bs-example-form .input-group {
 
+    margin-bottom: 10px;
 
+}
 
+.bs-example > textarea.form-control {
 
+    resize: vertical;
 
+}
 
+
 
+/* List groups */
 
+.bs-example > .list-group {
 
+    max-width: 400px;
 
+}
 
+
 
+/* Navbars */
 
+.bs-example .navbar:last-child {
 
+    margin-bottom: 0;
 
+}
 
+.bs-navbar-top-example,
 
+.bs-navbar-bottom-example {
 
+    z-index: 1;
 
+    padding: 0;
 
+    overflow: hidden; /* cut the drop shadows off */
 
+}
 
+.bs-navbar-top-example .navbar-header,
 
+.bs-navbar-bottom-example .navbar-header {
 
+    margin-left: 0;
 
+}
 
+.bs-navbar-top-example .navbar-fixed-top,
 
+.bs-navbar-bottom-example .navbar-fixed-bottom {
 
+    position: relative;
 
+    margin-left: 0;
 
+    margin-right: 0;
 
+}
 
+.bs-navbar-top-example {
 
+    padding-bottom: 45px;
 
+}
 
+.bs-navbar-top-example:after {
 
+    top: auto;
 
+    bottom: 15px;
 
+}
 
+.bs-navbar-top-example .navbar-fixed-top {
 
+    top: -1px;
 
+}
 
+.bs-navbar-bottom-example {
 
+    padding-top: 45px;
 
+}
 
+.bs-navbar-bottom-example .navbar-fixed-bottom {
 
+    bottom: -1px;
 
+}
 
+.bs-navbar-bottom-example .navbar {
 
+    margin-bottom: 0;
 
+}
 
+@media (min-width: 768px) {
 
+    .bs-navbar-top-example .navbar-fixed-top,
 
+    .bs-navbar-bottom-example .navbar-fixed-bottom {
 
+        position: absolute;
 
+    }
 
+    .bs-navbar-top-example {
 
+        border-radius: 0 0 4px 4px;
 
+    }
 
+    .bs-navbar-bottom-example {
 
+        border-radius: 4px 4px 0 0;
 
+    }
 
+}
 
+
 
+/* Pagination */
 
+.bs-example .pagination {
 
+    margin-top: 10px;
 
+    margin-bottom: 10px;
 
+}
 
+
 
+/* Pager */
 
+.bs-example > .pager {
 
+    margin-top: 0;
 
+}
 
+
 
+/* Example modals */
 
+.bs-example-modal {
 
+    background-color: #f5f5f5;
 
+}
 
+.bs-example-modal .modal {
 
+    position: relative;
 
+    top: auto;
 
+    right: auto;
 
+    left: auto;
 
+    bottom: auto;
 
+    z-index: 1;
 
+    display: block;
 
+}
 
+.bs-example-modal .modal-dialog {
 
+    left: auto;
 
+    margin-left: auto;
 
+    margin-right: auto;
 
+}
 
+
 
+/* Example dropdowns */
 
+.bs-example > .dropdown > .dropdown-menu {
 
+    position: static;
 
+    display: block;
 
+    margin-bottom: 5px;
 
+}
 
+
 
+/* Example tabbable tabs */
 
+.bs-example-tabs .nav-tabs {
 
+    margin-bottom: 15px;
 
+}
 
+
 
+/* Tooltips */
 
+.bs-example-tooltips {
 
+    text-align: center;
 
+}
 
+.bs-example-tooltips > .btn {
 
+    margin-top: 5px;
 
+    margin-bottom: 5px;
 
+}
 
+
 
+/* Popovers */
 
+.bs-example-popover {
 
+    padding-bottom: 24px;
 
+    background-color: #f9f9f9;
 
+}
 
+.bs-example-popover .popover {
 
+    position: relative;
 
+    display: block;
 
+    float: left;
 
+    width: 260px;
 
+    margin: 20px;
 
+}
 
+
 
+/* Scrollspy demo on fixed height div */
 
+.scrollspy-example {
 
+    position: relative;
 
+    height: 200px;
 
+    margin-top: 10px;
 
+    overflow: auto;
 
 }

+ 41 - 2
docs/docs.js
ファイルの表示 

@@ -192,14 +192,53 @@ $(function () {
 
             {field: 'description', title: 'Description', width: 400, sortable: true}
 
         ],
 
         data: [
 
-            {name: 'onClickRow', parameter: 'row', description: 'Fires when user click a row, the parameters contains: <br />row: the record corresponding to the clicked row'},
 
-            {name: 'onSort', parameter: 'name, order', description: 'Fires when user sort a column, the parameters contains: <br />name: the sort column field name<br />order: the sort column order'}
 
+            {
 
+                name: 'onClickRow',
 
+                parameter: 'row',
 
+                description: 'Fires when user click a row, the parameters contains: <br />row: the record corresponding to the clicked row.'},
 
+            {
 
+                name: 'onSort',
 
+                parameter: 'name, order',
 
+                description: 'Fires when user sort a column, the parameters contains: <br />name: the sort column field name<br />order: the sort column order.'
 
+            },
 
+            {
 
+                name: 'onCheck',
 
+                parameter: 'row',
 
+                description: 'Fires when user check a row, the parameters contains: <br />row: the record corresponding to the clicked row.'
 
+            },
 
+            {
 
+                name: 'onUncheck',
 
+                parameter: 'row',
 
+                description: 'Fires when user uncheck a row, the parameters contains: <br />row: the record corresponding to the clicked row.'
 
+            },
 
+            {
 
+                name: 'onCheckAll',
 
+                parameter: 'rows',
 
+                description: 'Fires when user check all rows.'
 
+            },
 
+            {
 
+                name: 'onUncheckAll',
 
+                parameter: 'rows',
 
+                description: 'Fires when user uncheck all rows.'
 
+            }
 
         ],
 
         onClickRow: function (row) {
 
             console.log(row);
 
         },
 
         onSort: function (name, order) {
 
             console.log(name, order);
 
+        },
 
+        onCheck: function(row) {
 
+            console.log(row);
 
+        },
 
+        onUncheck: function(row) {
 
+            console.log(row);
 
+        },
 
+        onCheckAll: function(rows) {
 
+            console.log(rows);
 
+        },
 
+        onUncheckAll: function(rows) {
 
+            console.log(rows);
 
         }
 
     });
 
     $('#method').bootstrapTable({

+ 171 - 12
index.html
ファイルの表示 

@@ -28,9 +28,6 @@
 
                 <li class="active">
 
                     <a href="index.html">Documentation</a>
 
                 </li>
 
-                <li>
 
-                    <a href="examples.html">Examples</a>
 
-                </li>
 
             </ul>
 
         </nav>
 
     </div>
 
@@ -38,7 +35,7 @@
 
 <div class="bs-header" id="content">
 
     <div class="container">
 
         <h1>Bootstrap Table</h1>
 
-        <p>The table displays data in a tabular format and offers rich support to select, sort. The table has been designed to reduce development time and to require no specific knowledge from developers. It is both featherweight and feature-rich.</p>
 
+        <p>The table displays data in a tabular format and offers rich support to radio, checkbox, sort, pagination and so on. The table has been designed to reduce development time and to require no specific knowledge from developers. It is both featherweight and feature-rich.</p>
 
     </div>
 
 </div>
 
 <div class="container">
 
@@ -50,34 +47,196 @@
 
                     <li><a href="#columns">Column Properties</a></li>
 
                     <li><a href="#events">Events</a></li>
 
                     <li><a href="#methods">Methods</a></li>
 
+                    <li>
 
+                        <a href="#examples">Examples</a>
 
+                        <ul class="nav">
 
+                            <li><a href="#basic">Basic Table</a></li>
 
+                            <li><a href="#sort">Sort Table</a></li>
 
+                            <li><a href="#radio">Radio Table</a></li>
 
+                            <li><a href="#checkbox">Checkbox Table</a></li>
 
+                            <li><a href="#pagination">Pagination Table</a></li>
 
+                        </ul>
 
+                    </li>
 
+                    <li><a href="#acknowledgements">Acknowledgements</a></li>
 
                 </ul>
 
             </div>
 
         </div>
 
         <div class="col-md-9" role="main">
 
-            <section>
 
+            <div>
 
                 <div class="page-header">
 
                     <h1 id="properties">Table Properties:</h1>
 
                 </div>
 
                 <table id="table"></table>
 
-            </section>
 
-            <section>
 
+            </div>
 
+            <div>
 
                 <div class="page-header">
 
                     <h1 id="columns">Column Properties:</h1>
 
                 </div>
 
                 <table id="column"></table>
 
-            </section>
 
-            <section>
 
+            </div>
 
+            <div>
 
                 <div class="page-header">
 
                     <h1 id="events">Events:</h1>
 
                 </div>
 
                 <table id="event"></table>
 
-            </section>
 
-            <section>
 
+            </div>
 
+            <div>
 
                 <div class="page-header">
 
                     <h1 id="methods">Methods:</h1>
 
                 </div>
 
                 <table id="method"></table>
 
-            </section>
 
+            </div>
 
+            <div>
 
+                <div class="page-header">
 
+                    <h1 id="examples">Examples:</h1>
 
+                </div>
 
+
 
+                <h2 id="basic">Basic Table</h2>
 
+                <div class="bs-example">
 
+                    <table class="bootstrap-table" data-url="docs/data1.json" data-height="246">
 
+                        <thead>
 
+                        <tr>
 
+                            <th data-field="id" data-align="right">Item ID</th>
 
+                            <th data-field="name" data-align="center">Item Name</th>
 
+                            <th data-field="price" data-align="left">Item Price</th>
 
+                        </tr>
 
+                        </thead>
 
+                    </table>
 
+                </div>
 
+                <div class="highlight">
 
+<pre><code class="language-html">
 
+&lt;table class="bootstrap-table" data-url="docs/data1.json" data-height="246"&gt;
 
+    &lt;thead&gt;
 
+        &lt;tr&gt;
 
+            &lt;th data-field="id" data-align="right"&gt;Item ID&lt;/th&gt;
 
+            &lt;th data-field="name" data-align="center"&gt;Item Name&lt;/th&gt;
 
+            &lt;th data-field="price" data-align="left"&gt;Item Price&lt;/th&gt;
 
+        &lt;/tr&gt;
 
+    &lt;/thead&gt;
 
+&lt;/table&gt;
 
+</code></pre>
 
+                </div>
 
+
 
+                <h2 id="sort">Sort Table</h2>
 
+                <div class="bs-example">
 
+                    <table class="bootstrap-table" data-url="docs/data1.json" data-height="246">
 
+                        <thead>
 
+                        <tr>
 
+                            <th data-field="id" data-align="right" data-sortable="true">Item ID</th>
 
+                            <th data-field="name" data-align="center" data-sortable="true">Item Name</th>
 
+                            <th data-field="price" data-sortable="true" data-sortable="true">Item Price</th>
 
+                        </tr>
 
+                        </thead>
 
+                    </table>
 
+                </div>
 
+                <div class="highlight">
 
+<pre><code class="language-html">
 
+&lt;table class="bootstrap-table" data-url="docs/data1.json" data-height="246"&gt;
 
+    &lt;thead&gt;
 
+        &lt;tr&gt;
 
+            &lt;th data-field="id" data-align="right" data-sortable="true"&gt;Item ID&lt;/th&gt;
 
+            &lt;th data-field="name" data-align="center" data-sortable="true"&gt;Item Name&lt;/th&gt;
 
+            &lt;th data-field="price" data-sortable="true" data-sortable="true"&gt;Item Price&lt;/th&gt;
 
+        &lt;/tr&gt;
 
+    &lt;/thead&gt;
 
+&lt;/table&gt;
 
+</code></pre>
 
+                </div>
 
+
 
+                <h2 id="radio">Radio Table</h2>
 
+                <div class="bs-example">
 
+                    <table class="bootstrap-table" data-url="docs/data1.json" data-height="246">
 
+                        <thead>
 
+                        <tr>
 
+                            <th data-field="state" data-radio="true"></th>
 
+                            <th data-field="id" data-align="right">Item ID</th>
 
+                            <th data-field="name" data-align="center">Item Name</th>
 
+                            <th data-field="price" data-align="left">Item Price</th>
 
+                        </tr>
 
+                        </thead>
 
+                    </table>
 
+                </div>
 
+                <div class="highlight">
 
+<pre><code class="language-html">
 
+&lt;table class="bootstrap-table" data-url="docs/data1.json" data-height="246"&gt;
 
+    &lt;thead&gt;
 
+        &lt;tr&gt;
 
+            &lt;th data-field="state" data-radio="true"&gt;&lt;/th&gt;
 
+            &lt;th data-field="id" data-align="right"&gt;Item ID&lt;/th&gt;
 
+            &lt;th data-field="name" data-align="center"&gt;Item Name&lt;/th&gt;
 
+            &lt;th data-field="price" data-align="left"&gt;Item Price&lt;/th&gt;
 
+        &lt;/tr&gt;
 
+    &lt;/thead&gt;
 
+&lt;/table&gt;
 
+</code></pre>
 
+                </div>
 
+
 
+                <h2 id="checkbox">Checkbox Table</h2>
 
+                <div class="bs-example">
 
+                    <table class="bootstrap-table" data-url="docs/data1.json" data-height="246">
 
+                        <thead>
 
+                        <tr>
 
+                            <th data-field="state" data-checkbox="true"></th>
 
+                            <th data-field="id" data-align="right">Item ID</th>
 
+                            <th data-field="name" data-align="center">Item Name</th>
 
+                            <th data-field="price" data-align="">Item Price</th>
 
+                        </tr>
 
+                        </thead>
 
+                    </table>
 
+                </div>
 
+                <div class="highlight">
 
+<pre><code class="language-html">
 
+&lt;table class="bootstrap-table" data-url="docs/data1.json" data-height="246"&gt;
 
+    &lt;thead&gt;
 
+        &lt;tr&gt;
 
+            &lt;th data-field="state" data-checkbox="true"&gt;&lt;/th&gt;
 
+            &lt;th data-field="id" data-align="right"&gt;Item ID&lt;/th&gt;
 
+            &lt;th data-field="name" data-align="center"&gt;Item Name&lt;/th&gt;
 
+            &lt;th data-field="price" data-align="left"&gt;Item Price&lt;/th&gt;
 
+        &lt;/tr&gt;
 
+    &lt;/thead&gt;
 
+&lt;/table&gt;
 
+</code></pre>
 
+                </div>
 
+
 
+                <h2 id="pagination">Pagination Table</h2>
 
+                <div class="bs-example">
 
+                    <table class="bootstrap-table" data-url="docs/data2.json" data-height="246" data-pagination="true">
 
+                        <thead>
 
+                        <tr>
 
+                            <th data-field="state" data-checkbox="true"></th>
 
+                            <th data-field="id" data-align="right">Item ID</th>
 
+                            <th data-field="name" data-align="center">Item Name</th>
 
+                            <th data-field="price" data-align="">Item Price</th>
 
+                        </tr>
 
+                        </thead>
 
+                    </table>
 
+                </div>
 
+                <div class="highlight">
 
+<pre><code class="language-html">
 
+&lt;table class="bootstrap-table" data-url="docs/data1.json" data-height="246" data-pagination="true"&gt;
 
+    &lt;thead&gt;
 
+        &lt;tr&gt;
 
+            &lt;th data-field="state" data-checkbox="true"&gt;&lt;/th&gt;
 
+            &lt;th data-field="id" data-align="right"&gt;Item ID&lt;/th&gt;
 
+            &lt;th data-field="name" data-align="center"&gt;Item Name&lt;/th&gt;
 
+            &lt;th data-field="price" data-align="left"&gt;Item Price&lt;/th&gt;
 
+        &lt;/tr&gt;
 
+    &lt;/thead&gt;
 
+&lt;/table&gt;
 
+</code></pre>
 
+                </div>
 
+            </div>
 
+            <div>
 
+                <div class="page-header">
 
+                    <h1 id="acknowledgements">Acknowledgements:</h1>
 
+                </div>
 
+                <p>© 2012-2014, Bootstrap Table is licensed under the The MIT License. Coded by wenzhixin. </p>
 
+                <p>My website (<a href="http://wenzhixin.net.cn">wenzhixin.net.cn</a>)</p>
 
+                <p>My repos (<a href="http://repos.wenzhixin.net.cn">repos.wenzhixin.net.cn</a>)</p>
 
+                <p>Github (<a href="https://github.com/wenzhixin">@wenzhixin</a>)</p>
 
+                <p>Email (wenzhixin2010@gmail.com)</p>
 
+            </div>
 
         </div>
 
     </div>
 
 </div>

+ 11 - 2
src/bootstrap-table.js
ファイルの表示 

@@ -60,7 +60,12 @@
 
         pageSize: 10,
 
         pageList: [10, 20, 30, 40, 50],
 
 
-        onSort: function(name, order) {return false;}
 
+        onClickRow: function(item) {return false;},
 
+        onSort: function(name, order) {return false;},
 
+        onCheck: function(row) {return false;},
 
+        onUncheck: function(row) {return false;},
 
+        onCheckAll: function(rows) {return false;},
 
+        onUncheckAll: function(rows) {return false;}
 
     };
 
 
     BootstrapTable.prototype.init = function() {
 
@@ -352,7 +357,7 @@
 
         for (var i = this.pageFrom - 1; i < this.pageTo; i++) {
 
             var item = this.data[i];
 
 
-            html.push('<tr>');
 
+            html.push('<tr' + ' data-index="' + i + '">');
 
 
             $.each(that.header.fields, function(j, field) {
 
                 var text = '',
 
@@ -385,6 +390,10 @@
 
 
         this.$body.html(html.join(''));
 
 
+        this.$body.find('tr').off('click').on('click', function() {
 
+            that.options.onClickRow(that.data[$(this).data('index')]);
 
+        });
 
+
 
         this.$selectItem = this.$body.find('[name="btSelectItem"]');
 
         this.$selectItem.off('click').on('click', function() {
 
             var checkAll = that.data.length === that.$selectItem.filter(':checked').length;