先上效果圖
- 引入js文件
<!--js jquery --> <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.9.0.min.js"></script> <!--js bootstrap --> <script src="${pageContext.request.contextPath}/bootstrapJs/bootstrap.min.js"></script> <!-- js bootstrap-table 分頁插件 --> <script type="text/javascript"src="${pageContext.request.contextPath}/js/bootstrap-table.js"></script> <script src="${pageContext.request.contextPath}/bootstrapJs/table/bootstrap-table-zh-CN.js"></script> <!-- js bootstrap-datetimepicker 時間插件 --> <script src="${pageContext.request.contextPath}/bootstrapJs/datetimepicker/bootstrap-datetimepicker.min.js"></script> <script src="${pageContext.request.contextPath}/bootstrapJs/datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script> <!-- js knockout 增刪改查 插件 --> <script src="https://cdn.bootcss.com/knockout/3.4.0/knockout-min.js"></script> //必須 <script src="${pageContext.request.contextPath}/bootstrapJs/knockout/knockout.mapping-latest.js"></script>//必須 <!-- css --> <link href="${pageContext.request.contextPath}/css/bootstrap-table.css"rel="stylesheet" type="text/css" /> <link href="${pageContext.request.contextPath}/bootstrapCss/datetimepicker/bootstrap-datetimepicker.min.css" rel="stylesheet" /> //必須
2： 有的是彈出一個頁面 有的是彈出在本頁面定義的標簽 看你自己了 我使用的是在本頁面定義
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" 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">
<div class="form-group">
<label for="txt_departmentname">收入類目名稱</label>
<input type="text" name="txt_departmentname" data-bind="value:Name" class="form-control" id="txt_departmentname" placeholder="類目名稱">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>關閉</button>
<button type="button" id="btn_submit" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
</div>
</div>
</div>
</div>
</div>
3： js文件
$(function() {
//初始化
operate.operateInit();
});
// 操作
var operate = {
// 初始化按鈕事件
operateInit : function() {
this.operateAdd();
this.operateUpdate();
this.operateDelete();
this.DepartmentModel = {
id : ko.observable(), //和標簽中的data-bind 對應
Name : ko.observable(),
Level : ko.observable(),
Des : ko.observable(),
CreateTime : ko.observable()
};
},
// 新增
operateAdd : function() {
$('#btn_add').on(
"click",
function() {
$("#myModal").modal().on(
"shown.bs.modal",
function() {
var oEmptyModel = {
id : ko.observable(),
Name : ko.observable(),
Level : ko.observable(),
Des : ko.observable(),
CreateTime : ko.observable()
};
ko.utils.extend(operate.DepartmentModel,
oEmptyModel);
ko.applyBindings(operate.DepartmentModel,
document.getElementById("myModal"));
operate.operateSave();
}).on('hidden.bs.modal', function() {
ko.cleanNode(document.getElementById("myModal"));
});
});
},
// 編輯 修改這里我沒有做 如果需要的話 把彈出頁面中input中的data-bind中value:name 換成value:你后台傳來的變量名稱
operateUpdate : function() {
$('#btn_edit').on(
"click",
function() {
$("#myModal").modal().on(
"shown.bs.modal",
function() {
var arrselectedData = tableInit.myViewModel
.getSelections();
if (!operate.operateCheck(arrselectedData)) {
return;
}
// 將選中該行數據有數據Model通過Mapping組件轉換為viewmodel
ko.utils.extend(operate.DepartmentModel,
ko.mapping.fromJS(arrselectedData[0]));
ko.applyBindings(operate.DepartmentModel,
document.getElementById("myModal"));
operate.operateSave();
}).on('hidden.bs.modal', function() {
// 關閉彈出框的時候清除綁定(這個清空包括清空綁定和清空注冊事件)
ko.cleanNode(document.getElementById("myModal"));
});
});
},
// 刪除
operateDelete : function() { //當點擊刪除的時候 會進入這個方法
$('#btn_delete').on(
"click",
function() {
var arrselectedData = $("#tb_departments").bootstrapTable(
'getSelections');
if (arrselectedData.length <= 0) {
alert("請選中一行");
} else {
var b = JSON.stringify(arrselectedData);
$.ajax({
url : "/billMaven/categoryDelect",
type : "post",
data : {
"name" : b //傳輸到后台的是 json對象 后台接收后需要轉換成list 然后循環獲取id刪除
},
success : function(status) {
alert(status);
$("#tb_departments").bootstrapTable('refresh');
}
});
}
});
},
// 保存數據
operateSave : function() { //當點擊保存的時候回跳到這個方法
$('#btn_submit').on("click", function() {
// 取到當前的viewmodel
var oViewModel = operate.DepartmentModel;
// 將Viewmodel轉換為數據model
var oDataModel = ko.toJS(oViewModel);
if (oDataModel.Name == undefined || oDataModel.Name.trim() == "") {
alert("類目不能為空");
} else {
var span = $("#span").html();
$.ajax({
url : "/billMaven/categorysave", //url
type : "post",
data : { //參數
"name" : oDataModel.Name,
"state" : span
},
success : function(status) {
alert(status);
$("#tb_departments").bootstrapTable('refresh');
}
});
}
});
},
// 數據校驗
operateCheck : function(arr) {
if (arr.length <= 0) {
alert("請至少選擇一行數據");
return false;
}
if (arr.length > 1) {
alert("只能編輯一行數據");
return false;
}
return true;
}
}
引用 http://www.cnblogs.com/landeanfen/p/4976838.html 如果需要看理論的話 可以去他的博客看一下