BootstrapTable与KnockoutJS相结合实现增删改查功能【二】_javascript技巧

在上篇文章给大家介绍了BootstrapTable与KnockoutJS相结合实现增删改查功能【一】，介绍了下knockout.js的一些基础用法。接下来通过本文继续给大家介绍。如果你也打算用ko去做项目，且看看吧！

Bootstrap是一个前端框架，解放Web开发者的好东东，展现出的UI非常高端大气上档次，理论上可以不用写一行css。只要在标签中加上合适的属性即可。

KnockoutJS是一个JavaScript实现的MVVM框架。非常棒。比如列表数据项增减后，不需要重新刷新整个控件片段或自己写JS增删节点，只要预先定义模板和符合其语法定义的属性即可。简单的说，我们只需要关注数据的存取。

一、效果预览

其实也没啥效果，就是简单的增删改查，重点还是在代码上面，使用ko能够大量节省界面DOM数据绑定的操作。下面是整个整个增删改查逻辑的js代码：

页面效果：

二、代码示例

好了，进入重点吧！博主打算分两块介绍，第一部分是表格初始化部分，第二部分是按钮操作增删改部分。

1、表格初始化

1.1、准备工作

首先看看需要引用的js和css文件

都是一些常用的css和js文件，我们自定义的js文件主要有两个: knockout.bootstraptable.js 和 Department.js 。上篇我们介绍过使用ko可以自定义我们的data-bind。同样，这里对于table的绑定，我们也定义一个自定义的绑定，代码 knockout.bootstraptable.js 里面。

//添加ko自定义绑定
ko.bindingHandlers.myBootstrapTable = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
//这里的oParam就是绑定的viewmodel
var oViewModel = valueAccessor();
var $ele = $(element).bootstrapTable(oViewModel.params);
//给viewmodel添加bootstrapTable方法
oViewModel.bootstrapTable = function () {
return $ele.bootstrapTable.apply($ele, arguments);
}
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel) {}
};
//初始化
(function ($) {
//向ko里面新增一个bootstrapTableViewModel方法
ko.bootstrapTableViewModel = function (options) {
var that = this;
this.default = {
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
cache:false,
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
showToggle: true,
};
this.params = $.extend({}, this.default, options || {});
//得到选中的记录
this.getSelections = function () {
var arrRes = that.bootstrapTable("getSelections")
return arrRes;
};
//刷新
this.refresh = function () {
that.bootstrapTable("refresh");
};
};
})(jQuery); 

代码释疑：这个js文件主要做了两件事

1.自定义data-bind属性myBootstrapTable。对于ko.bindingHandlers.myBootstrapTable里面的update方法，如非必须，可以不用定义。

2.通过向ko对象里面添加bootstrapTableViewModel来封装bootstrapTable。

1.2、html标签启动绑定

	部门名称	部门级别	描述	创建时间

代码释疑：定义一个table标签，使用自定义绑定myBootstrapTable，上篇说过，$root可以理解为初始化的意思。为了简单，所有的colums就直接在