BootstrapTable和KnockoutJS相结合 实现添加、删除、修改、检查等功能[二]

在上一篇文章中，我们通过结合BootstrapTable和KnockoutJS介绍了查询的添加、删除和修改功能，并介绍了knockout.js的一些基本用法，接下来我们将通过这篇文章继续向大家介绍。如果你也打算用ko做项目，就看看吧！

Bootstrap是一个前端框架，解放了Web开发人员的好东西，显示出非常高端的UI，所以理论上没有必要写css线。只需将适当的属性添加到标签中。

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

首先，预览效果。

其实没有任何作用，就是简单的增删改，重点还是在代码上。使用ko可以节省很多接口DOM的数据绑定操作。以下是整个添加、删除、更改和检查逻辑的js代码：

页面效果：

第二，代码示例。

好了，言归正传！博主打算分两部分来介绍，第一部分是表初始化部分，第二部分是按钮操作添加、删除、修改部分。

1.表初始化。

1.1、前期准备工作。

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

link href=' ~/Content/bootstrap/CSS/bootstrap . min . CSS ' rel='样式表'/link href=' ~/Content/bootstrap-table/bootstrap-table . min . CSS ' rel='样式表'/脚本src='http:~/脚本/jquery-1 . 9 . 1 . min . js '/script script src='http: ~/Content/bootstrap/js/bootstrap . min . js '/脚本src=' http :同样，对于这里的表的绑定，我们还定义了一个自定义绑定，它位于代码敲除. bootstraptable.js中

//添加ko自定义绑定ko . binding handlers . mybootstraptable={ init : function(element，valueaccessor，allbindingaccessor，viewmodel) {//oParam这里是绑定的view model varoviewmodel=value accessor()；var $ele=$(元素)。bootstrapTable(oview model . params)；//添加bootstrapTable方法oview model . bootstrapTable=function(){ return $ ele . bootstrapTable . apply($ ele，arguments)到viewmodel}}，update:函数(element，valueAccessor，allBindingsAccessor，viewModel){ } }；//initialize()函数($) {//添加一个bootstrapTableViewModel方法ko。bootstraptableviewmodel=function(options){ var=this；这个。默认值={search:true。//是否显示表搜索，这个搜索是客户端搜索，不会进入服务器，所以我个人感觉严格搜索3360true，显示列3360true，//是否显示所有列cache:false，ShowRefresh: true，//是否显示刷新按钮minimumcountcolumns3360 2，//最小允许列数clicktoselect3360 true，//是否启用点击选中行showtoggle 3360 true，}；this.params=$。extend({}，this.default，options | | { })；//获取所选记录。get selections=function(){ var arrres=that。引导表(' getselections ')返回arrres};//刷新这个。refresh=function(){即。引导表(“刷新”)；};};})(jQuery)；代码解释：这个js文件主要做两件事。

1.自定义数据绑定属性myBootstrapTable。如果不需要，则不需要定义ko . binding handlers . mybootstraptable中的更新方法。

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

1.2.html标记开始绑定。

表ID=' TB _ dept '数据-绑定=' mybootstraptable : $ root ' th data-checkbox=' true '/th data-field=' name '部门名称/th data-field=' Level '部门级别/th data-field=' des ' description/th data-field=' strcreate time '创建时间/th/tr/the ad/表代码说明：定义一个表标记，并使用自定义绑定myBootstrapTable。如前一篇文章所述，$root可以理解为初始化。为了简单起见，所有的列都是直接用th写的。

1.3.激活ko的绑定。

页面加载后，开始ko绑定：

//Initialize $(function () {//1，初始化tableInit表。init()；//2.注册添加、删除和修改事件operate . operateInit()；});//初始化表vartable init={ init : function(){//绑定表的viewmodel this . myviewmodel=newko . bootstraptableviewmodel({ URL 3360 '/department/)。GetDepartment '，//请求后台的URL(*)method : ' get '，//请求方法(*)toolbar: '#toolbar '，//哪个容器用于工具按钮？查询参数：函数(参数){return {limit:param。极限，偏移量：param。}，//传递参数(*)pagination: true，//是否显示分页(*)端分页3360' server '，//分页模式：客户端客户端分页，服务器分页(*))page number : 1，///初始化并加载第一页。默认页面页面大小： 10，//每页记录行数(*)页面列表： [10，25，50，100]，//每页可选行数(*)；ko . applybindings(this . myviewmodel，document . getelementbyid(' TB _ dept '))；}};代码说明：页面加载后，调用上面封装的bootstrapTableViewModel对象合并传递的参数，最后激活绑定，激活this.myViewModel作为绑定的ViewModel。代码调试显示，当执行ko . applybindings(this . myviewmodel，document . getelementbyid(' TB _ dept ')时；在这句话中，自定义绑定将生效，程序将进入ko . binding handlers . mybootstrapTable对象的init方法来初始化bootstraptable。这里需要解释一下：

Init :函数(element，valueaccessor，allbindingaccessor，view model){//其中oParam是绑定的view model varoview model=value accessor()；var $ele=$(元素)。bootstrapTable(oview model . params)；//添加bootstrapTable方法oview model . bootstrapTable=function(){ return $ ele . bootstrapTable . apply($ ele，arguments)到viewmodel}}在上面提到的init方法中，通过第二个参数valueAccessor，我们得到了当前绑定的viewmodel，也就是我们上面的this.myViewModel对象，博主认为这有助于你理解自定义绑定的逻辑。基本上，它一直执行到var $ ele=$ (element)。引导表(oviewmodel。参数)；在这句话中，我们的表单初始化完成了。后台对应的方法博主随便定义了一个集合。为了完整起见，它仍然发布在这里：

部门控制器

2.按钮操作。

上述bootstrapTable的初始化完成了我们自定义数据绑定的使用。下面的按钮操作让我们体验到使用监控属性的“酷”。

2.1.查看页面。

首先，在视图页面上定义我们的添加、删除和更改按钮。

div id=' toolbar ' class=' BTN-group ' Button id=' BTN _ add ' type=' Button ' class=' BTN BTN BTN-default ' Span class=' glyphicon glyphicon-plus ' aria-hidden=' true '/Span add/Button Button id=' BTN _ edit ' type=' Button ' class=' btnbtn-default ' Span class=' glyphicon glyphicon-pencicon ' aria-hidden=' true '/Span modify/Button id=' BTN _ delete ' type=' Button ' class=' BTN '当然，一般来说，这里可能会使用部分视图，您的项目中可能会有一个Edit.cshtml，但是在这里，博主将所有这些都放在一个页面上，因为这不是文本的重点。

div class=' modal fade ' id=' myModal ' tabindex='-1 '角色=' dialog ' aria-labelledby=' myModalLabel ' div class=' modal-dialog '角色=' document ' div class=' modal-content ' div class=' modal-header ' button type=' button ' class=' Close ' data-misse=' modal ' aria-label=' Close ' span aria-hidden=' true '/span/button H4 class=' modal-title ' id=' ' myModalLabel '操作/H4/div class=' modal-body ' div class=' form-group '标签为=' txt _ department name '部门名称/labelinput type=' text ' name=' txt _ department name ' data-bind=' value : name ' class=' form-control ' id=' txt _ department name ' placeholder='部门名称/divdiv class='form-group '标签为='txt_departmentlevel '部门级别/labelinput type=' text ' name=' txt _ department level ' data-bind=' value : level class=' form-control ' id=' txt _ department level '占位符='部门级别/divdiv class='form-group '标签为='txt_des '描述/labelinput type=' text ' name=' txt _ des ' data-bind=' value : des ' class=' form-control ' id=' txt _ des ' placeholder='描述/div/div class=' modal-footer '按钮类型=' button ' class=' BTN BTN-默认'数据-misse=' modal ' span class=' glyphicon glyphicon-remove ' aria-hidden=' true '/span关闭/button button type=' button ' id=' BTN _ submit ' class=' BTN BTN-primary ' data-misse=' modal ' span class=' glyphicon glyphicon-软盘aria-hidden='true'/span保存/button/div/div/div/2.2、JS初始化按钮操作

//操作var oper={//初始化按钮事件operating einit :函数(){这个。operation eadd()；这个。operation update()；这个。operatedelete()；这个部门型号={ id : ko。天文台()、名称： ko .可观测量()、级别： ko .可观测量()、Des: ko .可观测量()、创建时间： ko。天文台()}；},//新增operating eadd :函数(){$('#btn_add ').on('click '，function () {$('#myModal ')).模态()。打开('显示。bs。' modal '，function(){ var oEmptyModel={ id : ko。天文台()、名称： ko .可观测量()、级别： ko .可观测量()、Des: ko .可观测量()、创建时间： ko。天文台()}；ko . utils . extend(operation .DepartmentModel，oEmptyModel)；ko.applyBindings(操作部门模型，文档。getelementbyid(' my modal ')；操作。opera save()；}).on('hidden.bs.modal '，function(){ ko。清理节点(文档。getelementbyid(' my modal '))；});});},//编辑operationupdate :函数(){$('#btn_edit ').on('click '，function () {$('#myModal ')).模态()。打开('显示。bs。' modal '，function(){ var arrselectedData=table init。我的视图模型。getselections()；if(！操作。operatecheck(arrselectedData)){ return；}//将选中该行数据有数据模型通过绘图组件转换为viewmodelko。utils。延伸(操作).部门模型，ko。映射。from js(arrselectedData[0])；ko.applyBindings(操作部门模型，文档。getelementbyid(' my modal ')；操作。opera save()；}).on('hidden.bs.modal '，function () {//关闭弹出框的时候清除绑定（这个清空包括清空绑定和清空注册事件)ko。清理节点(文档。getelementbyid(' my modal ')；});});},//删除操作删除：函数(){$('#btn_delete ').on('click '，function(){ var arrselectedData=table init。我的视图模型。getselections()；$.Ajax({ URL : '/Department/Delete '，类型： 'post '，内容类型： ' application/JSON '，数据： JSON。stringify(arrselectedData)，成功：函数（数据，状态){alert(状态);//tableinit。我的视图模型。刷新()；}});});},//保存数据operateSave:函数(){$('#btn_submit ').on('click '，function () {//取到当前的viewmodelvar oViewModel=operate .DepartmentModel//将视图模型转换为数据模型var odatammodel=ko。奥维尤模型；var funcName=oDataModel.id？更新":"添加；$.Ajax({ URL : '/Department/' funcName，type: 'post '，data: oDataModel，success : funcName(数据，状态){alert(状态);tableinit。我的视图模型。刷新()；}});});},//数据校验operatecheck :函数(arr){ if(arr。长度=0){ alert('请至少选择一行数据');返回false}if (arr.length 1) {alert('只能编辑一行数据');返回false}返回真实}}代码释疑：说说这里的执行逻辑，首先在$(function(){})方法里面调用操作。operateInit()；在operateInit()方法里面注册页面上面按钮的点击事件，同时也定义这个。部门模型作为我们新增编辑的视图模型，这个视图模型里面定义了和页面元素对应的监控属性。还记得上面隐藏的弹出框里面的一些数据绑定吗，没错，里面对应的价值值就是和这里的监控属性对应，这样设置绑定之后，js里面所有的导致这个。部门模型里面监控的变化，都会触发界面上面这些绑定标签的价值值变化，反之，界面上面的所有标签的价值值的变化，也势必会引起它的监控属性值的变化，此之所谓双向绑定。下面具体看看双向绑定的执行。

2.3、新增操作

$('#btn_add ')。on('click '，function () {$('#myModal ')。模态()。on(' showed . bs . modal '，function(){ var oEmptyModel={ id : ko . observatory()、Name: ko.observable()、Level: ko.observable()、Des: ko.observable()、createtime : ko . observatory()}；ko.utils.extend(operate。DepartmentModel，oEmptyModel)；ko.applyBindings(操作。DepartmentModel，document . getelementbyid(' my modal ')；operate . operatesave()；}).on('hidden.bs.modal '，function(){ ko . clean node(document . getelementbyid(' my modal ')))；});});当我们的界面触发新的操作时，首先会弹出上面提到的隐藏模式框。当显示模态框时，首先定义一个空的viewmodel，然后调用ko . utils . extend(oper . department model，oemptymodel)；在这句话中，全局操作。DepartmentModel将被空视图模型覆盖。ko.utils.extend()的功能类似于$。jquery中的extend()根据后面的对象组合前面的对象。在组合之后，使用一个新的视图模型来激活绑定。激活后，注册保存按钮的点击事件。添加后，会弹出模式框。由于viewmodel中的监控属性都是空的，相应的接口元素的值也会被清空，所以我们在添加时可以看到这一点：

当弹出框关闭时，我们通过closed事件执行ko . clean node(document . getelementbyid(' my modal '))。在这句话中，这一点非常重要，因为对于同一个dom，ko只能绑定一次。如果需要再次绑定，需要先清除绑定，cleanNode()方法不仅会清除绑定，还会清除dom中注册的事件。使用时请注意！

2.4、编辑操作。

$('#btn_edit ')。on('click '，function () {$('#myModal ')。模态()。on(' showed . bs . modal '，function(){ var arrselectedData=tableinit . myviewmodel . getselections()；if(！operate . operatecheck(arrselectedData)){ return；}//将该行选中的数据Model转换为view Model ko . utils . extend(operate . department Model，ko。mapping . from js(arrselecteddata[0])，通过映射组件；ko.applyBindings(操作。DepartmentModel，document . getelementbyid(' my modal ')；operate . operatesave()；}).on ('hidden.bs.modal '，function(){//关闭弹出框时清除绑定(此清除包括清除绑定和清除注册事件)ko . clean node(document . getelementbyid(' my modal '))；});});当我们触发编辑操作时，界面仍然会弹出。在弹出框中的弹出事件中，我们得到当前选中的行，然后验证是否选中了一行。最好使用短语ko . mapping . from js(arrselecteddata[0])将普通的Json对象转换为具有监控属性的viewmodel。如前一篇文章所述，这个方法需要js文件敲除. mapping-latest.js的支持，转换后，通过ko.utils.extend()方法更新viewmodel，然后激活绑定。视图模型已被当前选定行的数据更新，因此获得了以下结果：

2.5、保存操作。

添加编辑弹出框后，修改相关信息后点击【保存】，会触发保存事件。

$ ('# BTN _提交')。on ('click '，function(){//获取当前视图模型varoview model=oper . department model；//将Viewmodel转换为数据模型varo data model=ko . tojs(oviewmodel)；var funcName=oDataModel.id？更新“:”添加；$.Ajax({ URL : '/Department/' funcName，type: 'post '，data: oDataModel，success: function(数据，状态){alert(状态)；tableinit . myviewmodel . refresh()；}});});当save事件被触发时，我们首先得到页面绑定的viewmodel，也就是operate。DepartmentModel，然后使用ko.tojs()方法将具有监视属性的viewmodel转换为具有纯数据的Json对象。这个方法内置在ko中，不需要其他JS支持。获取json对象后，发送ajax请求来添加或编辑数据。这样很好的体现了双向绑定，界面上所有文本框的值改变后，操作的改变。DepartmentModel也将被触发。

2.6、删除操作。

删除没什么好说的，和ko关系不大。

三.摘要

通过上述简单的添加、删除和修改操作，介绍了Xiako和bootstrapTable的联合使用。Ko可以把你从DOM中解放出来，专注于viewmodel。在整个js代码中，几乎看不到像jquery的val()、text()这样的操作来获取值和给接口dom赋值。看起来干净清爽吗？~ ~当然，这可能只是ko的一些基本用法。毕竟博主才学了3天ko，还有更高级的用法需要探索。一段时间后，他们会和你分享一些高级用法。如果你觉得这篇文章可以帮助你理解ko的原理和用法，不妨推荐一下。边肖在这里心存感激！

以上就是边肖介绍的结合BootstrapTable和KnockoutJS实现函数[2]的增删改检的全部内容，希望对大家有所帮助！