•this.queryCondition = ko.mapping.fromJS(data.queryCondition)：这一句的作用是将后台传过来的查询条件，从JSON数据转换成监控属性。只有执行了这一句，属性和页面元素才能双向监控。
•self.bootstrapTable.refresh()：这一句的含义是刷新表格数据，它实际上是调用的bootstrapTable的refresh方法，只不过博主在knockout.bootstraptable.js文件里面对它进行了简单封装。
•dialog.load(data.urls.edit, null, function () { })：在新增和编辑的时候使用了jQuery的load()方法，这个方法的作用是请求这个url的页面元素，并执行url对应页面的js代码。此方法在动态引用js文件并执行js文件里面代码这方面功能很强大。
最后附上后台GetDepartment()方法对应的代码
[HttpGet] public JsonResult GetDepartment(int limit, int offset, string name, string des) { var lstRes = DepartmentModel.GetData(); if (!string.IsNullOrEmpty(name)) { lstRes = lstRes.Where(x => x.Name.Contains(name)).ToList(); } if (!string.IsNullOrEmpty(des)) { lstRes = lstRes.Where(x => x.Des.Contains(des)).ToList(); } lstRes.ForEach(x=> { x.strCreatetime = x.Createtime.ToString("yyyy-MM-dd HH:mm:ss"); }); var oRes = new { rows = lstRes.Skip(offset).Take(limit).ToList(), total = lstRes.Count }; return Json(oRes, JsonRequestBehavior.AllowGet); }
至此，查询页面的查询、清空功能即可实现。
你是否还有一个疑问：如果我们需要自定义bootstrapTable的事件怎么办？不能通过后台的viewmodel传过来吧？
确实，从后台是无法传递js事件方法的，所以需要我们在前端自定义事件的处理方法，比如我们可以这样：
<script type="text/javascript"> $(function(){ var data = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)); data.tableParams.onLoadSuccess = function(data){ alert("加载成功事件"); }; ko.bindingViewModel(data, document.getElementById("div_index")); }); </script>
二、第二个viewmodel搞定编辑
上面的一个viewmodel搞定了查询和删除的功能，但是新增和编辑还需要另一个viewmodel的支持。下面来看看编辑的封装实现。
1、ActionResult的实现
通过上面查询的代码我们可以知道，当用户点击新增和编辑的时候，会请求另一个View视图→/Department/Edit。下面来看看Edit视图的实现
public ActionResult Edit(Department model) { var oResModel = new { editModel = model, urls = new { submit = model.id == 0 ? "/Department/Add" : "/Department/Update" } }; return View(oResModel); }
代码释疑：上述代码很简单，就是向视图页面返回一个viewmodel，包含编辑的实体和提交的url。通过这个实体主键是否存在来判断当前提交是新增实体还是编辑实体。
2、cshtml代码
Edit.cshtml代码如下：
<form> <div role="document"> <div> <div> <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4>操作</h4> </div> <div> <div> <label for="txt_departmentname">部门名称</label> <input type="text" data-bind="value:editModel.Name" placeholder="部门名称"> </div> <div> <label for="txt_departmentlevel">部门级别</label> <input type="text" data-bind="value:editModel.Level" placeholder="部门级别"> </div> <div> <label for="txt_des">描述</label> <input type="text" data-bind="value:editModel.Des" placeholder="描述"> </div> </div> <div> <button type="button" data-dismiss="modal"><span aria-hidden="true"></span>关闭</button> <button type="submit"><span aria-hidden="true"></span>保存</button> </div> </div> </div> </form> <link href="https://www.jb51.net/~/Content/bootstrapValidator/css/bootstrapValidator.css" /> <script src="https://www.jb51.net/~/Content/bootstrapValidator/js/bootstrapValidator.js"></script> <script src="https://www.jb51.net/~/scripts/extensions/knockout.edit.js"></script> <script type="text/javascript"> $(function () { var editData = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)); ko.bindingEditViewModel(editData, {}); }); </script>
代码释疑：由于我们加了验证组件bootstrapValidator，所以需要引用相关js和css。knockout.edit.js这个文件主要封装了编辑页面的属性和事件绑定。重点来看看这个js的实现代码。
3、js封装
knockout.edit.js代码：