让我来详细讲解一下"BootstrapTable与KnockoutJS相结合实现增删改查功能【一】"的完整攻略。
1. 简介
本攻略将带你了解如何结合BootstrapTable和KnockoutJS实现一个完整的增删改查功能的web应用，本文将分成两部分剖析它的实现过程。
2. 实现前准备
在实现之前你需要先安装几个必要的依赖：
npm install bootstrap-table bootstrap knockout
之后你需要引用这些依赖给你的应用：
<!-- 引用bootstrap样式表 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 引用bootstraptable样式表 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css">
<!-- 引用knockoutjs -->
<script src="https://cdn.bootcss.com/knockout/3.4.2/knockout.min.js"></script>
<!-- 引用jquery -->
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 引用bootstrap JS组件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 引用bootstrapTable -->
<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>
3. 实现过程
3.1 创建ViewModel
ViewModel负责开发者和model的交互，你可以用knockoutjs来创建ViewModel，这样在之后的操作中你只需关注数据，而不需要考虑界面。
function Student(id, name, age, address) {
this.id = ko.observable(id);
this.name = ko.observable(name);
this.age = ko.observable(age);
this.address = ko.observable(address);
}
function ViewModel() {
var self = this;
self.students = ko.observableArray();
//加载数据
$.ajax({
url: '/api/students/',
async: false,
dataType: 'json',
success: function (data) {
self.students(data);
}
});
3.2 创建表头
在表页面上，你需要使用一个类似于如下代码来创建表头：
<table id="students-table"
data-toggle="table"
data-pagination="true"
data-card-view="true"
data-side-pagination="server"
data-url="/api/students/"
data-row-style="rowStyle">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">名称</th>
<th data-field="age">年龄</th>
<th data-field="address">地址</th>
<th data-field="operate"
data-formatter="operateFormatter"
data-events="operateEvents">操作</th>
</tr>
</thead>
</table>
3.3 创建操作按键
window.operateEvents = {
'click .delete': function (e, value, row, index) {
if (confirm("确认删除么？")) {
$.ajax({
url: '/api/students/' + row.id,
type: 'DELETE',
async: false,
success: function (data) {
$('#students-table').bootstrapTable('remove', {
field: 'id',
values: [row.id]
});
}
});
}
}
};
具体来讲，通过定义操作按键的事件，我们把删除模块的请求会发到后台API，请求方法是"DELETE"，删除一条数据后，通过id查找出该行并删除其 DOM 对象。
3.4 数据加载
我们通过AJAX请求获得数据，这使得我们触发过API实现了获取所有学生信息的功能，这则是正式的GET请求，以查询数据。
$.ajax({
url: '/api/students/',
async: false,
dataType: 'json',
success: function (data) {
self.students.removeAll();
for (var i = 0; i < data.length; i++) {
self.students.push(new Student(data[i].id, data[i].name, data[i].age, data[i].address));
}
}
});
3.5 模拟新增数据
// 新增一条学生记录
self.create = function () {
self.editingStudent(new Student(0, '', '', ''));
$('#myModal').modal('show');
};
// 提交新增学生信息
self.doCreate = function () {
$.ajax({
url: '/api/students/',
type: 'POST',
async: false,
dataType: 'json',
contentType: 'application/json',
data: ko.toJSON(self.editingStudent()),
success: function (data) {
self.students.push(new Student(data.id, data.name, data.age, data.address));
}
});
$('#myModal').modal('hide');
};
3.6 模拟编辑数据
// 编辑一条学生记录
self.edit = function (student) {
self.editingStudent(new Student(student.id(), student.name(), student.age(), student.address()));
$('#myModal').modal('show');
};
// 提交编辑学生信息
self.doEdit = function () {
$.ajax({
url: '/api/students/' + self.editingStudent().id(),
type: 'PUT',
async: false,
dataType: 'json',
contentType: 'application/json',
data: ko.toJSON(self.editingStudent()),
success: function (data) {
var studentFromServer = new Student(data.id, data.name, data.age, data.address);
var originalStudent = ko.utils.arrayFirst(self.students(), function (stu) {
return stu.id() === data.id;
});
self.students.replace(originalStudent, studentFromServer);
}
});
$('#myModal').modal('hide');
};
以上的代码实现了模拟新增和编辑数据，如果实际环境中需要在表格中实现增改查的功能，则需要使用 AJAX 调用服务端接口完成。
3.7 实现样式效果
<!-- 添加和编辑学生信息模态框 -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4>添加/编辑学生信息</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label for="id" class="control-label col-lg-3">ID：</label>
<div class="col-lg-9">
<input id="id" type="text" class="form-control" data-bind="value: editingStudent().id" disabled>
</div>
</div>
<div class="form-group">
<label for="name" class="control-label col-lg-3">名称：</label>
<div class="col-lg-9">
<input id="name" type="text" class="form-control" data-bind="value: editingStudent().name">
</div>
</div>
<div class="form-group">
<label for="age" class="control-label col-lg-3">年龄：</label>
<div class="col-lg-9">
<input id="age" type="text" class="form-control" data-bind="value: editingStudent().age">
</div>
</div>
<div class="form-group">
<label for="address" class="control-label col-lg-3">地址：</label>
<div class="col-lg-9">
<input id="address" type="text" class="form-control" data-bind="value: editingStudent().address">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">关闭</button>
<button class="btn btn-primary" data-bind="click:doCreate">确认</button>
<button class="btn btn-primary" data-bind="click:doEdit">确认</button>
</div>
</div>
</div>
</div>
4. 示例
示例一
下面是一个数据示例：
var students = [
{ id: 1, name: '小明', age: 12, address: '北京' },
{ id: 2, name: '小花', age: 22, address: '上海' }
];
这个示例就是一个包含两条数据的学生信息数组，通过这个示例，你可以通过字面量定义一个初始化数据集合，用于测试你的应用是否能正确地显示出来。
示例二
下面是另一个数据示例：
ko.observableArray([
new Student(1, '小明', 12, '北京'),
new Student(2, '小梅', 20, '天津'),
new Student(3, '小王', 21, '上海'),
new Student(4, '小李', 23, '浙江'),
new Student(5, '小胡', 25, '北京')
])
以上示例中的 new Student() 则是定义了一个学生信息，kobservableArray() 表示一个包含了这些学生信息的数组集合，通过这个示例，你可以快速通过构造器来初始化你的数据模型，如果没有数据，你也可以通过此示例插入一些固定数据做验证。
5. 总结
本文为你讲解了如何使用BootstrapTable与KnockoutJS相结合来实现增删改查的功能，包括如何利用AJAX来请求和提交这些数据，从而完成数据的加载和数据的增改。你可以根据本文所讲的步骤来开发你的web应用程序。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：BootstrapTable与KnockoutJS相结合实现增删改查功能【一】 - Python技术站
微信扫一扫 
支付宝扫一扫 