BootstrapTable KnockoutJS结合实现了添加、删除和检查的解决方案(3)两个视图模型实现了添加、删除和检查

时间：2021-09-08 来源：互联网编辑：宝哥软件园浏览：次

前言：博主之前分享过一些knockoutJS和BootstrapTable的基本用法，都是写基础应用，根本不打包，只避免html控件的取值和赋值，远没有展现MVVM的精妙。最近项目打算正式使用ko，所以ko和bootstraptable在这里打包分享，供园区朋友参考。请参考博客公园大神小秦。如果公园的朋友有更好的方法，欢迎讨论。

KnockoutJS系列文章：

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

将BootstrapTable和KnockoutJS结合起来，实现添加、删除、修改、检查的功能[2]

首先，第一个视图模型获取查询

演示的实现延续了上一个部门管理功能。下面的扩展用数据流来解释。

1.后台返回视图模型的实现进行查看

public action result Index(){ var model=new { tableParams=new { URL='/Department/GetDepartment '，//pageSize=2，}，URL=new { Delete='/Department/Delete '，edit='/Department/Edit '，add='/Department/Edit '，}，queryCondition=new{name=' '，des=' ' }；返回视图(模型)；}代码解释：这里返回的模型包含三个选项

tableParams:页表初始化参数。由于默认参数是在js中定义的，这里设置的参数是特定于页面的初始化参数。

url:包含添加、删除和修改请求的URL路径。

查询条件：页面的查询条件。

2.cshtml页面代码

Index.cshtml页面的代码如下：

@ { Layout=null}！DOCTYPE Html Html towneta name=' viewport ' Content=' width=device-width '/title index/title link href=' ~/Content/bootstrap/CSS/bootstrap。量滴CSS ' rel='样式表/link href=' ~/Content/引导表/引导表。量滴CSS ' rel='样式表'/脚本src=' http : ~/scripts/jquery-1。9 .1 .量滴js /脚本src=' http : ~/脚本脚本原始（牛顿英尺JSON。jsonconvert。serialize object(Model))；ko.bindingViewModel(数据、文档。GetElementBYID(' div _ index ')；});/script/head dydiv id=' div _ index ' class=' panel-body ' style=' padd :0 px；'溢出-x :隐藏；'div class=' panel panel-default ' div class=' panel-heading '查询条件/div class=' panel-body ' form id=' formSearch ' class=' form-horizontal ' div class=' form-group ' label class=' control-label col-xs-1 '部门名称/labeldiv class='col-xs-3 '输入类型='text' class='form-control '数据-bind=' value : query condition。name/' div label class=' control-label col-xs-1 '部门描述/labeldiv class='col-xs-3 '输入类型='text' class='form-control '数据-bind=' value : query condition。des '/div div class=' col-xs-4 '样式='向右文本对齐3360；'按钮类型=' button ' data-bind=' click : clear click ' class=' BTN '清空/button button type=' button ' data-bind=' click : query cyclik ' class=' BTN BTN-primary '查询/button/div/div/form/div/div id=' toolbar ' class=' BTN-group ' button data-bind=' click : addclick ' type=' button ' class=' BTN BTN ' span class=' glyphicon glyphicon-plus ' aria-hidden=' true '/span新增/button按钮数据-绑定=点击：编辑点击' type=' button ' class=' BTN BTN-default ' span class=' glyphicon glyphicon-pencil ' aria-hidden=' true '/span修改/button button data-bind=' click : delete click ' type=' button ' class=' BTN BTN-default ' span class=' glyphicon glyphicon-remove ' aria-hidden=' true '/span删除/button/divtable数据-bind=' bootstraptable : bootstraptable ' t rth数据-复选框=' true '/th数据-字段='名称'部门名称/th数据字段='级别'部门级别/th数据字段='Des '描述/th数据字段='strCreatetime '创建时间/th/tr/thead/table/div/body/html代码释疑：和上篇一样，需要引用JQuery、引导、可引导、淘汰等相关文件。这里重点说明下两个文件：

淘汰赛。index.js:封装了查询页面相关的属性和事件绑定。

淘汰赛。bootstraptable.js:封装了bootstrapTable的初始化和自定义迷人的绑定的方法。

以上所有的页面交互都封装在了公共射流研究…里面，这样就不用在页面上面写大量的数字正射影像图元素取赋值、事件的绑定等重复代码，需要在本页面写的射流研究…只有以上两句，是不是很简单。

3、JS封装

重点来看看上面的说的两个射流研究…文件淘汰赛。bootstraptable.js和淘汰赛。索引。js。

(1)淘汰赛。bootstraptable.js

（函数($) {//向击倒里面新增一个bootstrapTableViewModel方法柯。bootstraptableviewmodel=函数(选项){ var那=这是。default={ toolbar : ' # toolbar '，//工具按钮用哪个容器查询参数：函数(参数){ return { limit : param。极限，偏移量：参数。偏移量}；},//传递参数(*)分页： true，//是否显示分页(*)侧分页："服务器",//分页方式：客户端客户端分页服务器服务端分页(*)页码： 1,//初始化加载第一页，默认第一页pageSize: 10，//每页的记录行数(*)页面列表： [10,25,50,100],//可供选择的每页的行数(*)method: 'get '，search: true，//是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大严格搜索：为真，显示列3360为真，//是否显示所有的列cache:false，showRefresh: true，//是否显示刷新按钮minimumCountColumns: 2，//最少允许的列数单击选择：真，//是否启用点击选中行showToggle: true，}；this.params=$ .extend({}，this.default，options | | { })；//得到选中的记录这个。getSelections=function(){ var arrRes=that。bootstraptable(' getSelections ')返回arrRes};//刷新这个。refresh=function(){即。bootstraptable(' refresh ')；};};//添加击倒自定义绑定柯。绑定处理程序。bootstraptable={ init :函数(元素，valueAccessor，allBindingsAccessor，viewModel) {//这里的oParam就是绑定的viewmodelvar oview model=value存取器()；var $ele=$(元素)。bootstrapTable(oview模型。参数)；//给视图模型添加bootstrapTable方法奥维尤模型。bootstraptable=function(){ return $ ele。bootstraptable。apply($ ele，arguments)；}}，更新：函数(元素，valueAccessor，allBindingsAccessor，view model){ } }；})(jQuery)；代码释疑：上面代码主要做了两件事

1.自定义了bootstrapTable初始化的视图模型。

添加击倒自定义绑定。

如果园友不理解自定义绑定的使用，可以看看博主的前两篇博文（一)和（二),有详细介绍。

(2)淘汰赛

(函数($){ ko。BindingViewMoDEL=function(data，BineElement){ var self=this；这个。querycondition=ko。映射。fromjs(数据。query condition)；这个。defaultqueryparams={ query params 3360 function(param){ var params=self。querycondition参数。极限=参数。限制；参数。偏移量=参数。偏移；返回参数；}};var tableParams=$ .extend({}，this.defaultQueryParams，data。table params | | { })；这个。bootstraptable=new ko。bootstraptableviewmodel(Tableparams)；//清空事件this.clearClick=function () {$ .每个(self.queryCondition，function (key，value) {//只有监控属性才清空if(值类型)=' function '){ this(')；//值("");}});自我。bootstraptable。刷新()；};//查询事件这个。querylick=function(){ self。bootstraptable。刷新()；};//新增事件这个。addclick=function(){ var dialog=$(' div class=' modal fade ' id=' myModal ' tabindex='-1 ' role=' dialog ' aria-labelledby=' myModalLabel '/div ')；dialog.load(data.urls.edit，null，function(){ })；$(“正文”).追加（对话框);dialog.modal().on('hidden.bs.modal '，function () {//关闭弹出框的时候清除绑定（这个清空包括清空绑定和清空注册事件)ko。清理节点(文档。getelementbyid(' formEdit ')；对话。移除()；自我。bootstraptable。刷新()；});};//编辑事件这个。edit click=function(){ var arrselectedData=self。bootstraptable。getselections()；if(arrselecteddata。长度=0 | | arrselecteddata。长度1){ alert('每次只能编辑一行');返回；} var dialog=$(' div class=' modal fade ' id=' myModal ' tabindex='-1 '角色=' dialog ' aria-labelledby=' myModalLabel '/div ')；dialog.load(data.urls.edit，arrselectedData[0]，function(){ })；$(“正文”).追加（对话框);dialog.modal().on('hidden.bs.modal '，function () {//关闭弹出框的时候清除绑定（这个清空包括清空绑定和清空注册事件)ko。清理节点(文档。getelementbyid(' formEdit ')；对话。移除()；自我。bootstraptable。刷新()；});};//删除事件这个。delete click=function(){ var arrselectedData=self。bootstraptable。getselections()；if(！arrselectedData | | arrselectedData。长度=0){ alert('请至少选择一行');返回；}$.ajax({url: data.urls.delete，type: 'post '，内容类型： ' application/JSON '，数据： JSON。stringify(arrselectedData)，success:函数(数据，状态){ alert(状态)；自我。bootstraptable。刷新()；}});};ko.applyBindings(self，BineElement)；};})(jQuery)；代码释疑：这个射流研究…主要封装了页面元素的属性和事件绑定，需要说明的几个地方

这个。查询条件=ko。映射。fromjs(数据。查询条件):这一句的作用是将后台传过来的查询条件，从JSON数据转换成监控属性。只有执行了这一句，属性和页面元素才能双向监控。

self.bootstrapTable.refresh():这一句的含义是刷新表格数据，它实际上是调用的bootstrapTable的恢复精神方法，只不过博主在淘汰赛。bootstraptable.js文件里面对它进行了简单封装。

dialog.load(data.urls.edit，null，function () { }):在新增和编辑的时候使用了jQuery的负载()方法，这个方法的作用是请求这个全球资源定位器(统一资源定位符)的页面元素，并执行全球资源定位器(统一资源定位符)对应页面的射流研究…代码。此方法在动态引用射流研究…文件并执行射流研究…文件里面代码这方面功能很强大。

最后附上后台GetDepartment()方法对应的代码

公共JsonResult GetDepartment(int limit，int offset，string name，string des){ var lstRes=department model .GetData()；if(！字符串IsNullOrEmpty(name)){ lstRes=lstRes .其中(x=x.Name.Contains(name)).to list()；}if(！字符串IsNullOrEmpty(des)){ lstRes=lstRes .其中(x=x.Des.Contains(des)).to list()；}lstRes .ForEach(x={ x . strcreate time=x . create time。tostring(' yyyy-MM-DD hh :MM 3360s ')；});var oRes=new{rows=lstRes .跳过（偏移)。采取（限制)。ToList()，total=lstRes .计数};返回Json(oRes，JsonRequestBehavior .允许get)；} 至此，查询页面的查询、清空功能即可实现。

你是否还有一个疑问：如果我们需要自定义bootstrapTable的事件怎么办？不能通过后台的视图模型传过来吧？

确实，从后台是无法传递射流研究…事件方法的，所以需要我们在前端自定义事件的处理方法，比如我们可以这样：

脚本类型=' text/JAVAScript ' $(function(){ var data=@ Html .原始（牛顿英尺JSON。jsonconvert。serialize object(Model))；数据。tableparams。OnLoadSuccess=函数（数据){alert('加载成功事件');};ko.bindingViewModel(数据、文档。GetElementBYID(' div _ index ')；});/script二、第二个视图模型搞定编辑

上面的一个视图模型搞定了查询和删除的功能，但是新增和编辑还需要另一个视图模型的支持。下面来看看编辑的封装实现。

1、行动结果的实现

通过上面查询的代码我们可以知道，当用户点击新增和编辑的时候，会请求另一个视角视图/部门/编辑。下面来看看编辑视图的实现

公众行动结果编辑(部门模型){ var ores model=new { Edit model=model，urls=new { submit=model.id==0？/Department/Add ' : '/Department/Update ' } }；返回视图(OreMoDEL)；} 代码释疑：上述代码很简单，就是向视图页面返回一个视图模型，包含编辑的实体和提交的url。通过这个实体主键是否存在来判断当前提交是新增实体还是编辑实体。

2、cshtml代码

Edit.cshtml代码如下：

表单id=' FOrmEdIt ' div class=' modal-dialog '角色=' document ' div class=' modal-content ' div class=' modal-header ' button type=' button ' class=' Close ' data-discover=' 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 “部门名称”部门名称/label输入类型=' text ' name=' txt _ department name ' data-bind=' value :编辑模型. Name' class='form-control '占位符='部门名称/divdiv class='form-group '标签为='txt_departmentlevel '部门级别/label输入类型=' text ' name=' txt _ department level ' data-bind=' value :编辑模型.Level' class='form-control '占位符='部门级别/divdiv class='form-group '标签为='txt_des '描述/label输入类型=' text ' name=' txt _ des ' data-bind=' value :编辑模型.Des' class='表单控件'占位符='描述/div/div div class=' modal-footer ' button type=' button ' class=' BTNBTN-default ' data-misse=' modal ' span class=' glyphicon-remove ' aria-hidden=' true '/span关闭/button button type=' submit ' class=' BTN BTN-primary ' span=' glyphicon-glyphicon-软盘aria-hidden='true'/span保存/button/div/div/form link href=' ~/Content/bootstrapValidator/CSS/bootstrapValidator。CSS ' rel='样式表'/脚本src=' http : ~/Content/bootstrapValidator/js/bootstrapValidator。js /脚本src=' http : ~/脚本/扩展/淘汰赛。编辑。js /脚本脚本类型=' text/JavaScript ' $(function(){ var editData=@ Httle原始（牛顿英尺JSON。jsonconvert。serialize object(Model))；柯。bindingeditviewmodel(editData，{ })；});/script代码释疑：由于我们加了验证组件bootstrapValidator，所以需要引用相关射流研究…和css。淘汰赛。编辑. js这个文件主要封装了编辑页面的属性和事件绑定。重点来看看这个射流研究…的实现代码。

3、js封装

淘汰赛。编辑. js代码：

(函数($){ ko。bindingeditviewmodel=函数(数据，validatorFields) {var那={ };那个。编辑模型=ko。映射。fromjs(数据。编辑模型)；that.default={message: '验证不通过、fields: { }、submitHandler:函数（验证器、表单、提交按钮)。东条(那个。编辑模型)；$.ajax({url: data.urls.submit，type: 'post '，内容类型： ' application/JSON '，数据： JSON。stringify(arrselectedData)，success:函数(数据，状态){ alert(状态)；}});$('#myModal ').情态(“隐藏”)；}};参数=美元.extend({}，即. default，{ field s 3360 validatorFields } | | { })；$('#formEdit ').bootstrapValidator(即。参数)；ko.applyBindings(即文件。getelementbyid(' formEdit ')；};})(jQuery)；代码释疑：这个射流研究…主要封装了编辑模型的属性和提交的事件绑定。由于用到了bootstrapValidator验证组件，所以需要表单提交。其实公共射流研究…里面是不应该出现页面编号的，比如上面的"表单编辑"和"我的模式",可以将此作为参数传过来，这点有待优化。参数验证字段表示验证组件的验证字段，如果表单不需要验证，则传一个空的Json或者不传都行。上文我们没有做字段验证，其实一般来说，基础表都会有一个或者几个非空字段，比如我们可以加上部门名称的非空验证。在Edit.cshtml页面的代码改成这样：

表单id=' FOrmEdIt ' div class=' modal-dialog '角色=' document ' div class=' modal-content ' div class=' modal-header ' button type=' button ' class=' Close ' data-discover=' 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 “部门名称”部门名称/labelinput type=' text ' Name=' Name ' data-bind=' value :编辑模型. Name' class='form-control '占位符='部门名称/divdiv class='form-group '标签为='txt_departmentlevel '部门级别/labelinput type=' text ' name=' Level ' data-bind=' value :编辑模型.Level' class='form-control '占位符='部门级别/divdiv class='form-group '标签为='txt_des '描述/labelinput type=' text ' name=' Des ' data-bind=' value :编辑模型.Des' class='表单控件'占位符='描述/div/div div class=' modal-footer ' button type=' button ' class=' BTNBTN-default ' data-misse=' modal ' span class=' glyphicon-remove ' aria-hidden=' true '/span关闭/button button type=' submit ' class=' BTN BTN-primary ' span=' glyphicon-glyphicon-软盘aria-hidden='true'/span保存/button/div/div/form link href=' ~/Content/bootstrapValidator/CSS/bootstrapValidator。CSS ' rel='样式表'/脚本src=' http : ~/Content/bootstrapValidator/js/bootstrapValidator。js /脚本src=' http : ~/脚本/扩展/淘汰赛。编辑。js /脚本脚本类型=' text/JavaScript ' $(function(){ var editData=@ Httle原始（牛顿英尺JSON。jsonconvert。serialize object(Model))；柯。bindingeditviewmodel(editData，{ name : { validator 3360 { note mpt : { message : })名称不能为空!'}}}});});/script那么就会在提交的时候自动进行验证：

注意：验证属性名字对应的是投入标签的名字属性，所以要做验证，这个名字属性必须设置正确。

最好附上增删改的后台方法：

公共JsonResult Add(部门oData){部门模型.添加(oData)；返回Json(new { }，JsonRequestBehavior .允许get)；}[httpset]public JsonResult Update(Department oData){ Department model .更新(oData)；返回Json(new { }，JsonRequestBehavior .允许get)；}[httpset]public JsonResult Delete(列出部门oData){部门模型.删除(oData)；返回Json(new { }，JsonRequestBehavior .允许get)；} 至此，我们整个页面的增删改查效果就好了，简单看下效果：