布局代碼：
效果圖：
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/static/bootstrap-table/bootstrap-table.css">
<script src="/static/js/jquery.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.js"></script>
<script src="/static/bootstrap-table/bootstrap-table.js"></script>
<script src="/static/bootstrap-table/locals/bootstrap-table-zh-CN.js"></script>
<!--<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>-->
<!--<script src="https://unpkg.com/bootstrap-table@1.14.2/dist/extensions/export/bootstrap-table-export.min.js"></script>-->
<title>數據表</title>
<style>
</style>
</head>
<body>
<div id="toolbox">
<button class="btn" ><span class="glyphicon glyphicon-plus"></span> 新增</button>
<button class="btn" id="edit_table_btn"><span class="glyphicon glyphicon-pencil"></span> 編輯</button>
<button class="btn"><span class="glyphicon glyphicon-remove"></span> 刪除</button>
</div>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="myModal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">編輯報價單</h4>
</div>
<div class="modal-body">
<form action="" class="form-horizontal">
<div class="form-group">
<input type="hidden" class="form-control" disabled="disabled" id="modal_id">
<label for="" class="col-sm-2 control-label">報價單號</label>
<div class="col-sm-9">
<input type="text" class="form-control" disabled="disabled" id="modal_bj_no">
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-2 control-label">客戶</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="modal_cus_name">
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-2 control-label">報價產品</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="modal_bj_prd">
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-2 control-label" >單價</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="modal_up">
</div>
</div>
<div class="form-group">
<label for="" class="col-sm-2 control-label" >模具成本</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="modal_mj_cst">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
<button type="button" class="btn btn-primary" id="sava-edit-btn">保存</button>
</div>
</div>
</div>
</div>
<table id="mytable"></table>
</body>
</html>
javascript代碼：
<script>
/* * 總結： * 解決的問題點：以下$table = $(bootstrapTable) 對象 * 1.使用bootstrap table 顯示數據，實現點擊 [編輯] 按鈕，彈出模態框，並把該行的數據顯示在模態框中。 * 知識點1:js觸發模態框顯示，$("myModal").modal() * 知識點2:使用getSelections獲取到,bootstrap table選中的行的數據。info = $table.bootstrapTable("getSelections")[0],獲取到的是一個json數據，格式[{.....}] * 知識點3:頁面向模態框傳值，其實模態框本身就是在頁面上，只是被隱藏了，所有直接用$("模態框輸入框選擇器").val(表單里面的值) * 知識點4:編輯的模態框的值傳回table,這里用到 bootstrapTable的updateRow,調用方式 * $table.bootstrapTable('updateRow',{ * index:index, * row:{ * id:new_id, * name:new_name, * ... * } * }) * 知識點5:我們發現上面的編輯需要用到行號，但是在getSelections中並不包含行號的信息，所有我們需要單獨的找到當前編輯的行的行號。然后就有了下面的代碼： * onClickRow:function(row,$e){ * index = $e.data('index'); * }, * */
var $table = $("#mytable"); var index= ''; $table.bootstrapTable({ //url:"https://examples.wenzhixin.net.cn/examples/bootstrap_table/data",
url: 'get_json/', sortable: true, search: true, pagination: 'true', //開啟分頁
toolbar: "#toolbox", singleSelect: true, showColumns: true, clickToSelect: true, showRefresh: true, //下面onClickRow為點擊該行的時候獲取到該行的行號; 在外邊設置index,當點擊某一行的時候，再改寫該值。
onClickRow:function(row,$e){ index = $e.data('index'); }, //sidePagination:'server', //分頁處理 ？？
idField:'id', columns: [{checkbox: true}, { field: 'id', title: 'ID', sortable: true, }, /*{ //這一段為為一行增加序號，但是在getSelections里面獲取不到值，盡管有設置field:'index'。 field:'index', title:'序號', formatter:function (value, row, index) { var options = $table.bootstrapTable('getOptions'); return options.pageSize * (options.pageNumber - 1) + index + 1;} },*/{ field: 'bj_no', title: '報價單號', sortable: true, }, { field: 'cus_name', title: "客戶", sortable: true, }, { field: 'bj_prd', title: "報價產品", sortable: true, }, { field: 'up', title: "單價", sortable: true, }, { field: 'mj_cst', title: "模具成本", sortable: true, }], }); var $editbtn = $("#edit_table_btn"); $(function () { $editbtn.click(function () { var info = $table.bootstrapTable('getSelections')[0]; if(info.length==2){ alert("請選擇數據"); }else{ $("#modal_id").val(info.id) $("#modal_bj_no").val(info.bj_no) $("#modal_cus_name").val(info.cus_name) $("#modal_bj_prd").val(info.bj_prd) $("#modal_up").val(info.up) $("#modal_mj_cst").val(info.mj_cst) $("#myModal").modal(); } }); /* //獲取點擊的行的行號 有效：為獲得編輯的行號的嘗試。 $table.on("click-row.bs.table",function(e, row, $element) { var index= $element.data('index'); alert(index); }); */
//關閉模態框數據保存到table
$("#sava-edit-btn").click(function () { $('#myModal').modal('hide'); var id = $("#modal_id").val(); var new_cus_name = $("#modal_cus_name").val(); var new_bj_prd = $("#modal_bj_prd").val(); var new_up = $("#modal_up").val(); var new_mj_cst = $("#modal_mj_cst").val(); $table.bootstrapTable("updateRow",{ index:index, row:{ id:id, cus_name:new_cus_name, bj_prd:new_bj_prd, up:new_up, mj_cst:new_mj_cst } }); }) }) </script>