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

Bootstrap 前端之家
前端之家收集整理的这篇文章主要介绍了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,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标签启动绑定

Box="true"> 名称

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

1.3、激活ko的绑定

在页面加载完成之后，启动ko的绑定：

注册增删改事件 operate.operateInit(); }); //初始化表格 var tableInit = { Init: function () { //绑定table的viewmodel this.myviewmodel = new ko.bootstrapTableviewmodel({ url: '/Department/GetDepartment',//请求后台的URL（*） method: 'get',//请求方式（*） toolbar: '#toolbar',//工具按钮用哪个容器 queryParams: function (param) { return { limit: param.limit,offset: param.offset }; },//传递参数（*） pagination: true,//是否显示分页（*） sidePagination: "server",//分页方式：client客户端分页，server服务端分页（*） pageNumber: 1,//初始化加载第一页，默认第一页 pageSize: 10,//每页的记录行数（*） pageList: [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.bindingHandlers.myBootstrapTable 对象的init方法去初始化bootstrapTable。这里需要说明一点：

上文中的init方法，通过第二个参数valueAccessor，我们得到的是当前绑定的viewmodel，也就是我们上面的this.myviewmodel这个对象，博主觉得这一点有利于你理解自定义绑定的逻辑。基本上执行到 var $ele = $(element).bootstrapTable(oviewmodel.params); 这一句的时候，我们表格的初始化就完成了。后台对应的方法博主随便定义了一个集合，为了完整，这里还是贴出来：

DepartmentController

2、按钮操作

上面通过bootstrapTable的初始化完成了我们的自定义data-bind的使用。下面的按钮操作我们来体验一把使用监控属性的“爽歪歪”。

2.1、view页面

首先在view页面上面定义我们的增删改按钮

为了简便，博主使用了一个隐藏的弹出框用来包含新增和编辑的文本框。当然，一般情况下，可能这里用的是部分视图，你的项目里面可能会有一个Edit.cshtml，但这里博主将这些都放在一个页面上面，因为这不是文本的重点。

名称 名称">

2.2、JS初始化按钮操作

viewmodel.getSelections(); if (!operate.operateCheck(arrselectedData)) { return; } //将选中该行数据有数据Model通过Mapping组件转换为viewmodel ko.utils.extend(operate.DepartmentModel,ko.mapping.fromJS(arrselectedData[0])); ko.applyBindings(operate.DepartmentModel,function () { //关闭弹出框的时候清除绑定(这个清空包括清空绑定和清空注册事件) ko.cleanNode(document.getElementById("myModal")); }); }); },//删除 operateDelete: function () { $('#btn_delete').on("click",function () { var arrselectedData = tableInit.myviewmodel.getSelections(); $.ajax({ url: "/Department/Delete",type: "post",contentType: 'application/json',data: JSON.stringify(arrselectedData),success: function (data,status) { alert(status); //tableInit.myviewmodel.refresh(); } }); }); },//保存数据 operateSave: function () { $('#btn_submit').on("click",function () { //取到当前的viewmodel var oviewmodel = operate.DepartmentModel; //将viewmodel转换为数据model var oDataModel = ko.toJS(oviewmodel);var funcName = oDataModel.id?"Update":"Add"; $.ajax({ url: "/Department/"+funcName,data: oDataModel,status) { alert(status); tableInit.myviewmodel.refresh(); } }); }); },//数据校验 operateCheck:function(arr){ if (arr.length <= 0) { alert("请至少选择一行数据"); return false; } if (arr.length > 1) { alert("只能编辑一行数据"); return false; } return true; } }

代码释疑：说说这里的执行逻辑，首先在$(function(){})方法里面调用 operate.operateInit(); 。在operateInit()方法里面注册页面上面按钮的点击事件，同时也定义 this.DepartmentModel 作为我们新增编辑的viewmodel，这个viewmodel里面定义了和页面元素对应的监控属性。还记得上面隐藏的弹出框里面的一些data-bind吗，没错，里面对应的value值就是和这里的监控属性对应，这样设置绑定之后，js里面所有的导致 this.DepartmentModel 里面监控的变化，都会触发界面上面这些绑定标签的value值变化，反之，界面上面的所有标签的Value值的变化，也势必会引起它的监控属性值的变化，此之所谓双向绑定。下面具体看看双向绑定的执行。

2.3、新增操作

当我们界面触发新增操作的时候，首先会弹出上面说的隐藏模态框。在模态框显示的时候，首先定义一个空的viewmodel，然后调用 ko.utils.extend(operate.DepartmentModel,oEmptyModel); 这一句，将全局的operate.DepartmentModel被空的viewmodel覆盖。ko.utils.extend()这个方法的作用和jquery里面的$.extend()作用类似，都是根据后面对象合并前面对象，合并之后，使用新的viewmodel激活绑定。激活绑定之后，注册保存按钮的click事件。这样新增的时候，弹出模态框，由于viewmodel里面的监控属性都是空的，对应界面元素的value也会被清空，所以新增我们看到是这样：

当弹出框关闭后，我们通过关闭的事件，执行 ko.cleanNode(document.getElementById("myModal")); 这一句，这个很重要，因为对于同一个dom，ko只能绑定一次，如果需要再次绑定，需要先清空绑定，并且cleanNode()这个方法，它不仅会清空绑定，还是会dom里面注册的事件也会清空，使用的时候需要注意下！

2.4、编辑操作

关闭弹出框的时候清除绑定(这个清空包括清空绑定和清空注册事件) ko.cleanNode(document.getElementById("myModal")); }); });

当我们触发编辑操作的时候，界面还是弹出框。在弹出框的弹出事件里面，我们取到当前选中的行，然后校验是否选中了一行。最好通过 ko.mapping.fromJS(arrselectedData[0]) 这一句，将普通的Json对象转换为带有监控属性的viewmodel，上篇说过，这个方法需要 knockout.mapping-latest.js 这个js文件的支持。转换之后，还是通过ko.utils.extend()方法更新viewmodel，然后激活绑定。由于viewmodel被当前选中行的数据更新了，所以得到结果：

2.5、保存操作

在新增和编辑弹出框之后，修改相关信息后点击保存，就会触发保存事件。

viewmodel var oviewmodel = operate.DepartmentModel; //将viewmodel转换为数据model var oDataModel = ko.toJS(oviewmodel); var funcName = oDataModel.id?"Update":"Add"; $.ajax({ url: "/Department/"+funcName,status) { alert(status); tableInit.myviewmodel.refresh(); } }); });

当触发保存事件的时候，我们首先取到页面绑定的viewmodel，即operate.DepartmentModel，然后使用ko.toJS()方法将带有监控属性的viewmodel转换为纯数据的Json对象，这个方法是ko内置的，不需要其他js支持。得到json对象之后，发送ajax请求，去新增或者编辑数据。这样就很好地体现了双向绑定，界面上面所有文本框的value发生了变化之后，也会触发operate.DepartmentModel的变化。

2.6、删除操作

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

三、总结

以上通过一个简单的增删改查操作，介绍了下ko和bootstrapTable的联合使用。ko可以让你从DOM中解放出来，把关注点放在viewmodel上面。纵观整个js代码，几乎看不到jquery的val()、text()等对界面dom做取值和赋值的操作，是不是看着干净清爽，并且高大上了呢~~当然，这或许只是ko的一些比较基础的用法，毕竟博主学习ko才3天，更多高级用法还有待摸索，等过段时间用熟了，再将它的一些高级用法分享给大家。如果你觉得本文能够帮助你理解ko的原理以及它的一些用法，不妨推荐下，小编在此感激不尽！

以上所述是小编给大家介绍的BootstrapTable与KnockoutJS相结合实现增删改查功能【二】的全部内容，希望对大家有所帮助！

bootstrapbootstrapbootstraptable增删改查knockoutjsknockoutjsknockoutjs

猜你在找的Bootstrap相关文章

使用BootStrapValidator来完成前端输入验证
BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证，由于本插件完全基...
顶求网首页整体设计思路
顶求网首页是一个web2.0博客类的网站首页，在该网站中用户可以发表博客，也可以推荐图书给...
自己手写简约实用的Jquery tabs插件（基于bootstrap环境）
一直想改版网站首页的图书展示部分，以前的展示是使用BootStrap的传统的collapse,网页篇幅...
BootStrap中Affix控件的使用方法及如何保持布局的美观
在视窗足够大的时候是没有任何问题的，但是当拖动改变视窗的大小后会发现布局又变乱了，这...
针对BootStrap中tabs控件的美化和完善
BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是，它的样式比较单一，如何...
使用BootStrap制作用户登录UI
先看看劳动成果 布局 左右各一半（col-md-6） 左侧登录框占左侧一半的10/12 右侧是登录系统...
打造简单实用的Thinkphp分页样式(Bootstrap版本)
先吐槽一下ThinkPHP3.1版的分页样式，虽然看起来也很简单大方，但是所有的页码全是使用简单...
Bootstrap轮播（carousel）插件中图片变形的终极解决方案——使用jqthumb.js
在顶求网的首页中我使用了BootStrap的轮播（carousel）插件来展示文章中的图片。我在程序中...
移动开发中单页异步加载所有列表项
在做WEB开发的时候我们经常会遇到分页的处理，如果在PC上显示网页的话，使用传统的分页是可...
仿豆瓣分类标签的实现
为了和文章分类部分的样式进行区分，我决定自己动手写一个具有其他样式的分类标签集。刚好...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作