核心代碼：
columns: [ { checkbox:true //第一列顯示復選框 }, ...
{ field: 'fail_num', title: '失敗數' }, { field: 'operate', title: '操作', width: 120, align: 'center', valign: 'middle', formatter: actionFormatter, }, ], }); //操作欄的格式化,value代表當前單元格中的值，row代表當前行數據，index表示當前行的下標 function actionFormatter(value, row, index) { var id = index; var data = JSON.stringify(row); var result = ""; result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>"; result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + row + "','" + id + "')\" title='編輯'><span class='glyphicon glyphicon-pencil'></span></a>"; result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='刪除'><span class='glyphicon glyphicon-remove'></span></a>"; return result; } // getData方法獲取全部頁面數據后，將data轉為json對象，使用index當前行號作為下標獲取對應數據 function EditViewById(row, index){ var data = JSON.stringify($("#mytab").bootstrapTable('getData')); //獲取全部數據 var data_json = JSON.parse(data); //data_json和data_json2一樣都是json對象 {#var data_json2 = eval("(" + data+ ")"); #} console.log(data_json); //由於data2已經是對象了，alert不能顯示對象只能顯示為[object Object],需要控制台打印 {#alert(data_json[0]); #} //根據index找到對應行數據，填充數據到修改模態框 $("#update_submit_test_time").val(data_json[index].project_name); $("#update_case_num").val(data_json[index].case_num); $("#update_executed_num").val(data_json[index].executed_num); $("#update_pass_num").val(data_json[index].pass_num); $("#update_fail_num").val(data_json[index].fail_num); //彈出修改模態框，非新增模態框 $('#updateModal').modal('show') }
前端完整代碼：
{% load staticfiles %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>項目列表</title> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script> <!--日歷圖標樣式--> {# <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">#} <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"> {# <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>#} {# <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>#} <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment-with-locales.js"></script> <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script> </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>#} {# 自定義搜索條件區域#} <div class="fixed-table-toolbar"> <div class="pull-left search"> <input id="search-keyword" class="form-control" placeholder="請輸入項目名查詢"> </div> <div class="columns columns-left btn-group pull-left"> <button id="search-button" type="button" class="btn btn-primary">查詢</button> </div> <!-- 按鈕觸發模態框 --> <div class="columns columns-right btn-group pull-right"> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">新增項目</button> </div> <!-- 新增模態框（Modal） --> <form action="/add_smoke/" method="post" class="form-horizontal" role="form"> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> <h4 class="modal-title" id="myModalLabel"> 新增項目 </h4> </div> {# 模態框body #} <div class="modal-body" style="height: 100%;"> <div class="form-group"> <label for="firstname" class="col-sm-3 control-label">項目名稱</label> <div class="col-sm-7"> <select data-placeholder="選擇項目..." class="form-control" name="project_name" id="project_name"> <option value="">請選擇項目</option> <option value="110000" hassubinfo="true">北京</option> <option value="120000" hassubinfo="true">天津</option> <option value="130000" hassubinfo="true">河北省</option> <option value="140000" hassubinfo="true">山西省</option> <option value="steward" hassubinfo="true">客戶管家</option> <option value="210000" hassubinfo="true">遼寧省</option> </select> </div> </div> <div class="form-group"> <label for="firstname" class="col-sm-3 control-label">轉測時間</label> {# <div class="col-sm-7">#} {# <input type="text" class="form-control" name="tableName"#} {# placeholder="請輸入項目名，僅限輸入英文字符">#} {# </div>#} <div class='input-group date' id='datetimepicker2'> <input type='text' class="form-control" name="submit_test_time" id="submit_test_time"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> <div class="form-group"> <label for="lastname" class="col-sm-3 control-label">用例總數</label> <div class="col-sm-7"> <input type="text" class="form-control" name="case_num" id="case_num" placeholder="請輸入冒煙用例總數"> </input> </div> </div> <div class="form-group"> <label for="firstname" class="col-sm-3 control-label">執行總數</label> <div class="col-sm-7"> <input type="text" class="form-control" name="executed_num" id="executed_num" placeholder="請輸入項目經理名"> </div> </div> <div class="form-group"> <label for="lastname" class="col-sm-3 control-label">成功數</label> <div class="col-sm-7"> <input type="text" class="form-control" name="pass_num" id="pass_num" placeholder="請輸入項目描述"> </input> </div> </div> <div class="form-group"> <label for="lastname" class="col-sm-3 control-label">失敗數</label> <div class="col-sm-7"> <input type="text" class="form-control" name="fail_num" id="fail_num" placeholder="請輸入項目描述"> </input> </div> </div> </div> {# 模態框底部#} <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <input type="submit" class="btn btn-primary"value="提交"/> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> {##} </form> <!-- 修改數據模態框（Modal） --> <form action="/update_smoke/" method="post" class="form-horizontal" role="form"> <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> <h4 class="modal-title" id="updateModalLabel"> 修改項目 </h4> </div> {# 模態框body #} <div class="modal-body" style="height: 100%;"> <div class="form-group"> <label for="firstname" class="col-sm-3 control-label">項目名稱</label> <div class="col-sm-7"> <select data-placeholder="選擇項目..." class="form-control" name="update_project_name" id="update_project_name"> <option value="">請選擇項目</option> <option value="110000" hassubinfo="true">北京</option> <option value="120000" hassubinfo="true">天津</option> <option value="130000" hassubinfo="true">河北省</option> <option value="140000" hassubinfo="true">山西省</option> <option value="steward" hassubinfo="true">客戶管家</option> <option value="210000" hassubinfo="true">遼寧省</option> </select> </div> </div> <div class="form-group"> <label for="firstname" class="col-sm-3 control-label">轉測時間</label> {# <div class="col-sm-7">#} {# <input type="text" class="form-control" name="tableName"#} {# placeholder="請輸入項目名，僅限輸入英文字符">#} {# </div>#} <div class='input-group date' id='datetimepicker2'> <input type='text' class="form-control" name="update_submit_test_time" id="update_submit_test_time"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> <div class="form-group"> <label for="lastname" class="col-sm-3 control-label">用例總數</label> <div class="col-sm-7"> <input type="text" class="form-control" name="update_case_num" id="update_case_num" placeholder="請輸入冒煙用例總數"> </input> </div> </div> <div class="form-group"> <label for="firstname" class="col-sm-3 control-label">執行總數</label> <div class="col-sm-7"> <input type="text" class="form-control" name="update_executed_num" id="update_executed_num" placeholder="請輸入項目經理名"> </div> </div> <div class="form-group"> <label for="lastname" class="col-sm-3 control-label">成功數</label> <div class="col-sm-7"> <input type="text" class="form-control" name="update_pass_num" id="update_pass_num" placeholder="請輸入項目描述"> </input> </div> </div> <div class="form-group"> <label for="lastname" class="col-sm-3 control-label">失敗數</label> <div class="col-sm-7"> <input type="text" class="form-control" name="update_fail_num" id="update_fail_num" placeholder="請輸入項目描述"> </input> </div> </div> </div> {# 模態框底部#} <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <input type="submit" class="btn btn-primary"value="提交"/> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> {##} </form> </div> {# bootstrap table自動渲染區域#} <table id="mytab" class="table table-hover"></table> </body><script type="text/javascript"> $('#mytab').bootstrapTable({ {#全部參數#} {#url: "{% static 'guchen_obj.json' %}", //請求后台的URL（*）或者外部json文件，json內容若為json數組[{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}]，#} //且鍵的名字必須與下方columns的field值一樣，同時sidePagination需要設置為client或者直接注釋掉，這樣前台才能讀取到數據，且分頁正常。 //當json文件內容為json對象時：{"total": 2,"rows": [{"id": 0,"name": "Item 0","price": "$0"},{"id": 1,"name": "Item 1","price": "$1"}]}， //分頁要寫為server，但是server如果沒有處理的話,會在第一頁顯示所有的數據，分頁插件不會起作用 url:"/get_smoke_data", //從后台獲取數據時，可以是json數組，也可以是json對象 dataType: "json", method: 'get', //請求方式（*） toolbar: '#toolbar', //工具按鈕用哪個容器 striped: true, //是否顯示行間隔色 cache: false, //是否使用緩存，默認為true，所以一般情況下需要設置一下這個屬性（*） pagination: true, //是否顯示分頁（*） sortable: true, //是否啟用排序 sortOrder: "asc", //排序方式 {#queryParams: oTableInit.queryParams,//傳遞參數（*）#} {#sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）,數據為json數組時寫client，json對象時（有total和rows時）這里要為server方式，寫client列表無數據#} pageNumber: 1, //初始化加載第一頁，默認第一頁 pageSize: 5, //每頁的記錄行數（*） pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*） {#search: true, //是否顯示表格搜索，此搜索是客戶端搜索，不會進服務端，所以，個人感覺意義不大#} strictSearch: true, showColumns: true, //是否顯示所有的列 showRefresh: true, //是否顯示刷新按鈕 minimumCountColumns: 2, //最少允許的列數 clickToSelect: true, //是否啟用點擊選中行 {#height: 500, //行高，如果沒有設置height屬性，表格自動根據記錄條數覺得表格高度#} uniqueId: "ID", //每一行的唯一標識，一般為主鍵列 showToggle: false, //是否顯示詳細視圖和列表視圖的切換按鈕 cardView: false, //是否顯示詳細視圖 detailView: false, //是否顯示父子表 idField: 'project_name', //指定主鍵 singleSelect: true, //開啟單選,想要獲取被選中的行數據必須要有該參數 //得到查詢的參數 queryParams: function (params) { //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的 var query_params = { rows: params.limit, //頁面大小 page: (params.offset / params.limit) + 1, //頁碼 sort: params.sort, //排序列名 sortOrder: params.order, //排位命令（desc，asc） //查詢框中的參數傳遞給后台 search_kw: $('#search-keyword').val(), // 請求時向服務端傳遞的參數 }; return query_params; }, columns: [ { checkbox:true //第一列顯示復選框 }, { field: 'project_name', //返回數據rows數組中的每個字典的鍵名與此處的field值要保持一致 title: '項目名' }, { field: 'version', title: '版本' }, {#{#} {# field: 'submit_test_time', // 需要序列化，暫時隱藏#} {# title: '轉測時間'#} {# },#} { field: 'case_num', title: '用例總數' }, { field: 'executed_num', title: '已執行' }, { field: 'pass_num', title: '通過數' }, { field: 'fail_num', title: '失敗數' }, { field: 'operate', title: '操作', width: 120, align: 'center', valign: 'middle', formatter: actionFormatter, }, ], }); //操作欄的格式化,value代表當前單元格中的值，row代表當前行數據，index表示當前行的下標 function actionFormatter(value, row, index) { var id = index; var data = JSON.stringify(row); var result = ""; result += "<a href='javascript:;' class='btn btn-xs green' onclick=\"EditViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span></a>"; {#result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + JSON.stringify(row) + "','" + id + "')\" title='編輯'><span class='glyphicon glyphicon-pencil'></span></a>";#} result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"EditViewById('" + row + "','" + id + "')\" title='編輯'><span class='glyphicon glyphicon-pencil'></span></a>"; {#result += "<a href='javascript:;' class='btn btn-xs blue' onclick=\"edit()\" title='編輯'><span class='glyphicon glyphicon-pencil'></span></a>";#} result += "<a href='javascript:;' class='btn btn-xs red' onclick=\"DeleteByIds('" + id + "')\" title='刪除'><span class='glyphicon glyphicon-remove'></span></a>"; return result; } //getData方法獲取全部頁面數據后，將data轉為json對象，使用index當前行號作為下標獲取對應數據 function EditViewById(row, index){ var data = JSON.stringify($("#mytab").bootstrapTable('getData')); //獲取全部數據 var data_json = JSON.parse(data); //data_json和data_json2一樣都是json對象 {#var data_json2 = eval("(" + data+ ")"); #} console.log(data_json); //由於data2已經是對象了，alert不能顯示對象只能顯示為[object Object],需要控制台打印 {#alert(data_json[0]); #} //根據index找到對應行數據，填充數據到修改模態框 $("#update_submit_test_time").val(data_json[index].project_name); $("#update_case_num").val(data_json[index].case_num); $("#update_executed_num").val(data_json[index].executed_num); $("#update_pass_num").val(data_json[index].pass_num); $("#update_fail_num").val(data_json[index].fail_num); //彈出修改模態框，非新增模態框 $('#updateModal').modal('show') } // 搜索查詢按鈕觸發事件 $(function() { $("#search-button").click(function () { $('#mytab').bootstrapTable(('refresh')); // 很重要的一步，刷新url！ $('#search-keyword').val('') }) }) // 選擇時間日期 $(function () { $('#datetimepicker2').datetimepicker({ format: 'YYYY-MM-DD hh:mm', locale: moment.locale('zh-cn') }); }); </script> </html>