前言：之前博主分享过knockoutJS和BootstrapTable的一些基础用法，都是写基础应用，根本谈不上封装，仅仅是避免了html控件的取值和赋值，远远没有将MVVM的精妙展现出来。最近项目打算正式将ko用起来，于是乎对ko和bootstraptable做了一些封装，在此分享出来供园友们参考。封装思路参考博客园大神萧秦，如果园友们有更好的方法，欢迎讨论。
KnockoutJS系列文章：
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
一、第一个viewmodel搞定查询
demo的实现还是延续上次的部门管理功能。以下展开通过数据流向来说明。
1、后台向View返回viewmodel的实现
public ActionResult Index() { var model = new { tableParams = new { url = "/Department/GetDepartment", //pageSize = 2, }, urls = new { delete = "/Department/Delete", edit = "/Department/Edit", add = "/Department/Edit", }, queryCondition = new { name = "", des = "" } }; return View(model); }
代码释疑：这里返回的model包含三个选项
•tableParams：页面表格初始化参数。由于js里面定义了默认参数，所以这里设置的参数是页面特定的初始化参数。
•urls：包含增删改请求的url路径。
•queryCondition：页面的查询条件。
2、cshtml页面代码
Index.cshtml页面代码如下：
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta content="width=device-width" /> <title>Index</title> <link href="https://www.jb51.net/~/Content/bootstrap/css/bootstrap.min.css" /> <link href="https://www.jb51.net/~/Content/bootstrap-table/bootstrap-table.min.css" /> <script src="https://www.jb51.net/~/scripts/jquery-1.9.1.min.js"></script> <script src="https://www.jb51.net/~/Content/bootstrap/js/bootstrap.min.js"></script> <script src="https://www.jb51.net/~/Content/bootstrap-table/bootstrap-table.min.js"></script> <script src="https://www.jb51.net/~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script> <script src="https://www.jb51.net/~/scripts/knockout/knockout-3.4.0.min.js"></script> <script src="https://www.jb51.net/~/scripts/knockout/extensions/knockout.mapping-latest.js"></script> <script src="https://www.jb51.net/~/scripts/extensions/knockout.index.js"></script> <script src="https://www.jb51.net/~/scripts/extensions/knockout.bootstraptable.js"></script><script type="text/javascript"> $(function(){ var data = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)); ko.bindingViewModel(data, document.getElementById("div_index")); }); </script> </head> <body> <div> <div> <div>查询条件</div> <div> <form> <div> <label>部门名称</label> <div> <input type="text" data-bind="value:queryCondition.name"> </div> <label>部门描述</label> <div> <input type="text" data-bind="value:queryCondition.des"> </div> <div> <button type="button"data-bind="click:clearClick">清空</button> <button type="button"data-bind="click:queryClick">查询</button> </div> </div> </form> </div> </div> <div> <button data-bind="click:addClick" type="button"> <span aria-hidden="true"></span>新增 </button> <button data-bind="click:editClick" type="button"> <span aria-hidden="true"></span>修改 </button> <button data-bind="click:deleteClick" type="button"> <span aria-hidden="true"></span>删除 </button> </div> <table data-bind="bootstrapTable:bootstrapTable"> <thead> <tr> <th data-checkbox="true"></th> <th data-field="Name">部门名称</th> <th data-field="Level">部门级别</th> <th data-field="Des">描述</th> <th data-field="strCreatetime">创建时间</th> </tr> </thead> </table> </div> </body> </html>
代码释疑：和上篇一样，需要引用JQuery、bootstrap、bootstraptable、knockout等相关文件。这里重点说明下两个文件：
•knockout.index.js：封装了查询页面相关的属性和事件绑定。
•knockout.bootstraptable.js：封装了bootstrapTable的初始化和自定义knockout绑定的方法。
以上所有的页面交互都封装在了公共js里面，这样就不用在页面上面写大量的DOM元素取赋值、事件的绑定等重复代码，需要在本页面写的js只有以上两句，是不是很easy。
3、JS封装
重点来看看上面的说的两个js文件knockout.bootstraptable.js和knockout.index.js。
（1）knockout.bootstraptable.js