bootstrap table 第一彈：實現模態框彈出編輯
阿新 • • 發佈：2019-04-03
idf src prim edi javascrip com ear var 數據顯示
布局代碼：
效果圖：
<!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
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>
bootstrap table 第一彈：實現模態框彈出編輯