bootstrap table 的简单Demo
暂时够用,不够用再补充 T_T
script:
<link rel="stylesheet" href="lib/bootstrap.min.css"> <!-- table css--> <link rel="stylesheet" href="lib/bootstrap-table.css"> <script src="lib/jquery-1.11.1.min.js"></script> <script src="lib/bootstrap.min.js"></script> <!--table js--> <script src="lib/bootstrap-table.js"></script> <script> $(function () { var data = [{ uid: "7791", name: "keenleung1", age: "26", height: "165", description: "描述" }, { uid: "7792", name: "keenleung2", age: "26", height: "165", description: "描述" }, { uid: "7793", name: "keenleung3", age: "26", height: "165", description: "描述" }, { uid: "7794", name: "keenleung4", age: "26", height: "165", description: "描述" }, { uid: "7795", name: "keenleung5", age: "26", height: "165", description: "描述" }, ]; $('#table').bootstrapTable('load', data); var $result = $('#eventsResult'); // 选择一行 $('#table').on('click-row.bs.table', function (e, row, $element) { alert(JSON.stringify(row.uid)); }); }); function actionFormatter(value, row, index) { return [ "<button class='btn btn-primary like'>选取</button>", "<button class='btn btn-default unlike'>取消</button>", ].join(''); } window.actionEvents = { 'click .like': function (e, value, row, index) { alert(JSON.stringify(row)); return false; }, 'click .unlike': function (e, value, row, index) { alert("unlike click"); return false; }, }; </script> <style type="text/css"></style> <script type="text/javascript"></script>
html:
<div class="alert alert-success" id="eventsResult"> Here is the result of event. </div> <table id="table" data-toggle="table"> <thead> <tr> <th data-field="name">姓名</th> <th data-field="age">年龄</th> <th data-field="height">身高</th> <th data-field="description">描述</th> <th class="text-left" data-field="action" data-formatter="actionFormatter" data-events="actionEvents">操作</th> </tr> </thead> </table>
官网案例:http://bootstrap-table.wenzhixin.net.cn/zh-cn/examples/