BootstrapTable+KnockoutJS实现增删改查解决方案（三）：两个Viewmodel搞定增删改查

 

前言：之前博主分享过knockoutJS和BootstrapTable的一些基础用法，都是写基础应用，根本谈不上封装，仅仅是避免了html控件的取值和赋值，远远没有将MVVM的精妙展现出来。最近项目打算正式将ko用起来，于是乎对ko和bootstraptable做了一些封装，在此分享出来供园友们参考。封装思路参考博客园大神萧秦，如果园友们有更好的方法，欢迎讨论。

KnockoutJS系列文章：

本文原创地址：http://www.cnblogs.com/landeanfen/p/5656307.html

一、第一个viewmodel搞定查询

demo的实现还是延续上次的部门管理功能。以下展开通过数据流向来说明。

1、后台向View返回viewmodel的实现

  1.         public ActionResult Index()
  2.         {
  3.             var model = new
  4.             {
  5.                 tableParams = new
  6.                 {
  7.                     url = "/Department/GetDepartment",
  8.                     //pageSize = 2,
  9.                 },
  10.                 urls = new
  11.                 {
  12.                     delete = "/Department/Delete",
  13.                     edit = "/Department/Edit",
  14.                     add = "/Department/Edit",
  15.                 },
  16.                 queryCondition = new
  17.                 {
  18.                     name = "",
  19.                     des = ""
  20.                 }
  21.             };
  22.             return View(model);
  23.         }

代码释疑：这里返回的model包含三个选项

  • tableParams：页面表格初始化参数。由于js里面定义了默认参数，所以这里设置的参数是页面特定的初始化参数。
  • urls：包含增删改请求的url路径。
  • queryCondition：页面的查询条件。

2、cshtml页面代码

Index.cshtml页面代码如下：

  1. @{
  2.     Layout = null;
  3. }
  4.  
  5. <!DOCTYPE html>
  6. <html>
  7. <head>
  8.     <meta name="viewport" content="width=device-width" />
  9.     <title>Index</title>
  10.  
  11.     <link href="~/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
  12.     <link href="~/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
  13.  
  14.     <script src="~/scripts/jquery-1.9.1.min.js"></script>
  15.     <script src="~/Content/bootstrap/js/bootstrap.min.js"></script>
  16.     <script src="~/Content/bootstrap-table/bootstrap-table.min.js"></script>
  17.     <script src="~/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
  18.  
  19.     <script src="~/scripts/knockout/knockout-3.4.0.min.js"></script>
  20.     <script src="~/scripts/knockout/extensions/knockout.mapping-latest.js"></script>
  21.     <script src="~/scripts/extensions/knockout.index.js"></script>
  22.     <script src="~/scripts/extensions/knockout.bootstraptable.js"></script><script type="text/javascript">
  23.         $(function(){
  24.             var data = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));
  25.             ko.bindingViewModel(data, document.getElementById("div_index"));
  26.         });
  27.  
  28.     </script>
  29. </head>
  30. <body>
  31.     <div id="div_index" class="panel-body" style="padding:0px;overflow-x:hidden;">
  32.         <div class="panel panel-default">
  33.             <div class="panel-heading">查询条件</div>
  34.             <div class="panel-body">
  35.                 <form id="formSearch" class="form-horizontal">
  36.                     <div class="form-group">
  37.                         <label class="control-label col-xs-1">部门名称</label>
  38.                         <div class="col-xs-3">
  39.                             <input type="text" class="form-control" data-bind="value:queryCondition.name">
  40.                         </div>
  41.                         <label class="control-label col-xs-1">部门描述</label>
  42.                         <div class="col-xs-3">
  43.                             <input type="text" class="form-control" data-bind="value:queryCondition.des">
  44.                         </div>
  45.                         <div class="col-xs-4" style="text-align:right;">
  46.                             <button type="button"data-bind="click:clearClick" class="btn">清空</button>
  47.                             <button type="button"data-bind="click:queryClick" class="btn btn-primary">查询</button>
  48.                         </div>
  49.                     </div>
  50.                 </form>
  51.             </div>
  52.         </div>
  53.         <div id="toolbar" class="btn-group">
  54.             <button data-bind="click:addClick" type="button" class="btn btn-default">
  55.                 <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
  56.             </button>
  57.             <button data-bind="click:editClick" type="button" class="btn btn-default">
  58.                 <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
  59.             </button>
  60.             <button data-bind="click:deleteClick" type="button" class="btn btn-default">
  61.                 <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
  62.             </button>
  63.         </div>
  64.         <table data-bind="bootstrapTable:bootstrapTable">
  65.             <thead>
  66.                 <tr>
  67.                     <th data-checkbox="true"></th>
  68.                     <th data-field="Name">部门名称</th>
  69.                     <th data-field="Level">部门级别</th>
  70.                     <th data-field="Des">描述</th>
  71.                     <th data-field="strCreatetime">创建时间</th>
  72.                 </tr>
  73.             </thead>
  74.         </table>
  75.     </div>
  76.  
  77. </body>
  78. </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

  1. (function ($) {
  2.     //向ko里面新增一个bootstrapTableViewModel方法
  3.     ko.bootstrapTableViewModel = function (options) {
  4.         var that = this;
  5.  
  6.         this.default = {
  7.             toolbar: '#toolbar',                //工具按钮用哪个容器
  8.             queryParams: function (param) {
  9.                 return { limit: param.limit, offset: param.offset };
  10.             },//传递参数（*）
  11.             pagination: true,                   //是否显示分页（*）
  12.             sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
  13.             pageNumber: 1,                      //初始化加载第一页，默认第一页
  14.             pageSize: 10,                       //每页的记录行数（*）
  15.             pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
  16.             method: 'get',
  17.             search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
  18.             strictSearch: true,
  19.             showColumns: true,                  //是否显示所有的列
  20.             cache:false,
  21.             showRefresh: true,                  //是否显示刷新按钮
  22.             minimumCountColumns: 2,             //最少允许的列数
  23.             clickToSelect: true,                //是否启用点击选中行
  24.             showToggle: true,
  25.         };
  26.         this.params = $.extend({}, this.default, options || {});
  27.  
  28.         //得到选中的记录
  29.         this.getSelections = function () {
  30.             var arrRes = that.bootstrapTable("getSelections")
  31.             return arrRes;
  32.         };
  33.  
  34.         //刷新
  35.         this.refresh = function () {
  36.             that.bootstrapTable("refresh");
  37.         };
  38.  
  39.     };
  40.  
  41.     //添加ko自定义绑定
  42.     ko.bindingHandlers.bootstrapTable = {
  43.         init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
  44.             //这里的oParam就是绑定的viewmodel
  45.             var oViewModel = valueAccessor();
  46.             var $ele = $(element).bootstrapTable(oViewModel.params);
  47.             //给viewmodel添加bootstrapTable方法
  48.             oViewModel.bootstrapTable = function () {
  49.                 return $ele.bootstrapTable.apply($ele, arguments);
  50.             }
  51.         },
  52.  
  53.         update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
  54.  
  55.         }
  56.     };
  57. })(jQuery);

代码释疑：上面代码主要做了两件事

  1. 自定义了bootstrapTable初始化的ViewModel。

  2. 添加ko自定义绑定。

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

（2）knockout.index.js

  1. (function ($) {
  2.     ko.bindingViewModel = function (data, bindElement) {
  3.  
  4.         var self = this;
  5.  
  6.         this.queryCondition = ko.mapping.fromJS(data.queryCondition);
  7.         this.defaultQueryParams = {
  8.             queryParams: function (param) {
  9.                 var params = self.queryCondition;
  10.                 params.limit = param.limit;
  11.                 params.offset = param.offset;
  12.                 return params;
  13.             }
  14.         };
  15.  
  16.         var tableParams = $.extend({}, this.defaultQueryParams, data.tableParams || {});
  17.         this.bootstrapTable = new ko.bootstrapTableViewModel(tableParams);
  18.  
  19.         //清空事件
  20.         this.clearClick = function () {
  21.             $.each(self.queryCondition, function (key, value) {
  22.                 //只有监控属性才清空
  23.                 if (typeof (value) == "function") {
  24.                     this(''); //value('');
  25.                 }
  26.             });
  27.             self.bootstrapTable.refresh();
  28.         };
  29.  
  30.         //查询事件
  31.         this.queryClick = function () {
  32.             self.bootstrapTable.refresh();
  33.         };
  34.  
  35.         //新增事件
  36.         this.addClick = function () {
  37.             var dialog = $('<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"></div>');
  38.             dialog.load(data.urls.edit, null, function () { });
  39.  
  40.             $("body").append(dialog);
  41.             dialog.modal().on('hidden.bs.modal', function () {
  42.                 //关闭弹出框的时候清除绑定(这个清空包括清空绑定和清空注册事件)
  43.                 ko.cleanNode(document.getElementById("formEdit"));
  44.                 dialog.remove();
  45.                 self.bootstrapTable.refresh();
  46.             });
  47.         };
  48.  
  49.         //编辑事件
  50.         this.editClick = function () {
  51.             var arrselectedData = self.bootstrapTable.getSelections();
  52.             if (arrselectedData.length <= 0 || arrselectedData.length > 1) {
  53.                 alert("每次只能编辑一行");
  54.                 return;
  55.             }
  56.             var dialog = $('<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"></div>');
  57.             dialog.load(data.urls.edit, arrselectedData[0], function () { });
  58.  
  59.             $("body").append(dialog);
  60.             dialog.modal().on('hidden.bs.modal', function () {
  61.                 //关闭弹出框的时候清除绑定(这个清空包括清空绑定和清空注册事件)
  62.                 ko.cleanNode(document.getElementById("formEdit"));
  63.                 dialog.remove();
  64.                 self.bootstrapTable.refresh();
  65.             });
  66.         };
  67.  
  68.         //删除事件
  69.         this.deleteClick = function () {
  70.             var arrselectedData = self.bootstrapTable.getSelections();
  71.             if (!arrselectedData||arrselectedData.length<=0) {
  72.                 alert("请至少选择一行");
  73.                 return;
  74.             }
  75.             $.ajax({
  76.                 url: data.urls.delete,
  77.                 type: "post",
  78.                 contentType: 'application/json',
  79.                 data: JSON.stringify(arrselectedData),
  80.                 success: function (data, status) {
  81.                     alert(status);
  82.                     self.bootstrapTable.refresh();
  83.                 }
  84.             });
  85.         };
  86.  
  87.         ko.applyBindings(self, bindElement);
  88.     };
  89. })(jQuery);

代码释疑：这个js主要封装了页面元素的属性和事件绑定，需要说明的几个地方

  • 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()方法对应的代码

  1.         [HttpGet]
  2.         public JsonResult GetDepartment(int limit, int offset, string name, string des)
  3.         {
  4.             var lstRes = DepartmentModel.GetData();
  5.             if (!string.IsNullOrEmpty(name))
  6.             {
  7.                 lstRes = lstRes.Where(x => x.Name.Contains(name)).ToList();
  8.             }
  9.             if (!string.IsNullOrEmpty(des))
  10.             {
  11.                 lstRes = lstRes.Where(x => x.Des.Contains(des)).ToList();
  12.             }
  13.             lstRes.ForEach(x=> {
  14.                 x.strCreatetime = x.Createtime.ToString("yyyy-MM-dd HH:mm:ss");
  15.             });
  16.             var oRes = new
  17.             {
  18.                 rows = lstRes.Skip(offset).Take(limit).ToList(),
  19.                 total = lstRes.Count
  20.             };
  21.             return Json(oRes, JsonRequestBehavior.AllowGet);
  22.         }

至此，查询页面的查询、清空功能即可实现。

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

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

  1. <script type="text/javascript">
  2.         $(function(){
  3.             var data = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));
  4.             data.tableParams.onLoadSuccess = function(data){
    　　　　　　　　　　alert("加载成功事件");
    　　　　　　　};
  5.             ko.bindingViewModel(data, document.getElementById("div_index"));
  6.         });
  7.  
  8.     </script>

二、第二个viewmodel搞定编辑

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

1、ActionResult的实现

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

  1. 　　　　public ActionResult Edit(Department model)
  2.         {
  3.             var oResModel = new
  4.             {
  5.                 editModel = model,
  6.                 urls = new
  7.                 {
  8.                     submit = model.id == 0 ? "/Department/Add" : "/Department/Update"
  9.                 }
  10.             };
  11.             return View(oResModel);
  12.         }

代码释疑：上述代码很简单，就是向视图页面返回一个viewmodel，包含编辑的实体和提交的url。通过这个实体主键是否存在来判断当前提交是新增实体还是编辑实体。

2、cshtml代码

Edit.cshtml代码如下：

  1. <form id="formEdit">
  2.     <div class="modal-dialog" role="document">
  3.         <div class="modal-content">
  4.             <div class="modal-header">
  5.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  6.                 <h4 class="modal-title" id="myModalLabel">操作</h4>
  7.             </div>
  8.             <div class="modal-body">
  9.                 <div class="form-group">
  10.                     <label for="txt_departmentname">部门名称</label>
  11.                     <input type="text" name="txt_departmentname" data-bind="value:editModel.Name" class="form-control" placeholder="部门名称">
  12.                 </div>
  13.                 <div class="form-group">
  14.                     <label for="txt_departmentlevel">部门级别</label>
  15.                     <input type="text" name="txt_departmentlevel" data-bind="value:editModel.Level" class="form-control" placeholder="部门级别">
  16.                 </div>
  17.                 <div class="form-group">
  18.                     <label for="txt_des">描述</label>
  19.                     <input type="text" name="txt_des" data-bind="value:editModel.Des" class="form-control" placeholder="描述">
  20.                 </div>
  21.             </div>
  22.             <div class="modal-footer">
  23.                 <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
  24.                 <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
  25.             </div>
  26.         </div>
  27.     </div>
  28. </form>
  29. <link href="~/Content/bootstrapValidator/css/bootstrapValidator.css" rel="stylesheet" />
  30. <script src="~/Content/bootstrapValidator/js/bootstrapValidator.js"></script>
  31. <script src="~/scripts/extensions/knockout.edit.js"></script>
  32. <script type="text/javascript">
  33.     $(function () {
  34. 　　　　 var editData = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));
  35.         ko.bindingEditViewModel(editData, {});
  36.     });
  37. </script>

代码释疑：由于我们加了验证组件bootstrapValidator，所以需要引用相关js和css。knockout.edit.js这个文件主要封装了编辑页面的属性和事件绑定。重点来看看这个js的实现代码。

3、js封装

knockout.edit.js代码：

  1. (function ($) {
  2.     ko.bindingEditViewModel = function (data, validatorFields) {
  3.  
  4.         var that = {};
  5.  
  6.         that.editModel = ko.mapping.fromJS(data.editModel);
  7.  
  8.         that.default = {
  9.             message: '验证不通过',
  10.             fields: { },
  11.             submitHandler: function (validator, form, submitButton) {
  12.                 var arrselectedData = ko.toJS(that.editModel);
  13.                 $.ajax({
  14.                     url: data.urls.submit,
  15.                     type: "post",
  16.                     contentType: 'application/json',
  17.                     data: JSON.stringify(arrselectedData),
  18.                     success: function (data, status) {
  19.                         alert(status);
  20.                     }
  21.                 });
  22.                 $("#myModal").modal("hide");
  23.             }
  24.         };
  25.         that.params = $.extend({}, that.default, {fields: validatorFields} || {});
  26.         $('#formEdit').bootstrapValidator(that.params);
  27.         ko.applyBindings(that, document.getElementById("formEdit"));
  28.     };
  29.  
  30. })(jQuery);

代码释疑：这个js主要封装了编辑模型的属性和提交的事件绑定。由于用到了bootstrapValidator验证组件，所以需要表单提交。其实公共js里面是不应该出现页面id的，比如上面的“formEdit”和“myModal”，可以将此作为参数传过来，这点有待优化。参数validatorFields表示验证组件的验证字段，如果表单不需要验证，则传一个空的Json或者不传都行。上文我们没有做字段验证，其实一般来说，基础表都会有一个或者几个非空字段，比如我们可以加上部门名称的非空验证。在Edit.cshtml页面的代码改成这样：

  1. <form id="formEdit">
  2.     <div class="modal-dialog" role="document">
  3.         <div class="modal-content">
  4.             <div class="modal-header">
  5.                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  6.                 <h4 class="modal-title" id="myModalLabel">操作</h4>
  7.             </div>
  8.             <div class="modal-body">
  9.                 <div class="form-group">
  10.                     <label for="txt_departmentname">部门名称</label>
  11.                     <input type="text" name="Name" data-bind="value:editModel.Name" class="form-control" placeholder="部门名称">
  12.                 </div>
  13.                 <div class="form-group">
  14.                     <label for="txt_departmentlevel">部门级别</label>
  15.                     <input type="text" name="Level" data-bind="value:editModel.Level" class="form-control" placeholder="部门级别">
  16.                 </div>
  17.                 <div class="form-group">
  18.                     <label for="txt_des">描述</label>
  19.                     <input type="text" name="Des" data-bind="value:editModel.Des" class="form-control" placeholder="描述">
  20.                 </div>
  21.             </div>
  22.             <div class="modal-footer">
  23.                 <button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>关闭</button>
  24.                 <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>保存</button>
  25.             </div>
  26.         </div>
  27.     </div>
  28. </form>
  29. <link href="~/Content/bootstrapValidator/css/bootstrapValidator.css" rel="stylesheet" />
  30. <script src="~/Content/bootstrapValidator/js/bootstrapValidator.js"></script>
  31. <script src="~/scripts/extensions/knockout.edit.js"></script>
  32. <script type="text/javascript">
  33.     $(function () {
  34. 　　　　 var editData = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));
  35.         ko.bindingEditViewModel(editData, {
  36.             Name: {
  37.                 validators: {
  38.                     notEmpty: {
  39.                         message: '名称不能为空！'
  40.                     }
  41.                 }
  42.             }
  43.         });
  44.     });
  45.  
  46. </script>

那么就会在提交的时候自动进行验证：

注意：验证属性Name对应的是input标签的name属性，所以要做验证，这个name属性必须设置正确。

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

  1.         [HttpPost]
  2.         public JsonResult Add(Department oData)
  3.         {
  4.             DepartmentModel.Add(oData);
  5.             return Json(new { }, JsonRequestBehavior.AllowGet);
  6.         }
  7.  
  8.         [HttpPost]
  9.         public JsonResult Update(Department oData)
  10.         {
  11.             DepartmentModel.Update(oData);
  12.             return Json(new { }, JsonRequestBehavior.AllowGet);
  13.         }
  14.  
  15.         [HttpPost]
  16.         public JsonResult Delete(List<Department> oData)
  17.         {
  18.             DepartmentModel.Delete(oData);
  19.             return Json(new { }, JsonRequestBehavior.AllowGet);
  20.         }

至此，我们整个页面的增删改查效果就OK了，简单看下效果：

三、总结

以上简单封装了bootstrapTable+ko的增删改查业务，只是一个最初级的封装。如果你需要将这些运用都你的项目中，可能还需要一些简单的优化措施，比如：

1、如果单纯是一个页面的viewmodel，是否可以不用从后台的ActionResult里面返回，直接写在View页面里面感觉更好，省去了序列化和参数传递的问题。这点有待优化。

2、公共js里面不应该出现页面元素的id，可以通过参数将页面元素传递进来。

3、新增和编辑事件方法里面弹出框的部分有很多重复代码，这部分的最好做法是将弹出框封装成一个单独的组件去调用，可以减少大部分的js代码。

4、如果查询条件以及编辑的属性里面存在select下拉框元素，可能还需要封装下拉框的datasourse等属性，这一部分是非常常见的，等博主整理好demo后将这块加进去。

可能你要说，对于单表的增删改查，实际项目中能有多少。确实，项目中大部分的业务是跨表的，但是，如果根据你的业务去建立对应的viewmodel，那么上述封装还是能起到一定简化代码的作用。还是那句话，你的需求决定了你的封装思路。如果你觉得本文能够帮到你，可以打赏博主，也可以推荐下，博主一定继续努力！

欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利

BootstrapTable+KnockoutJS的更多相关文章

  1. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（一）

    前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...

  2. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（四）：自定义T4模板快速生成页面

    前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...

  3. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（三）：两个Viewmodel搞定增删改查

    前言:之前博主分享过knockoutJS和BootstrapTable的一些基础用法,都是写基础应用,根本谈不上封装,仅仅是避免了html控件的取值和赋值,远远没有将MVVM的精妙展现出来.最近项目打 ...

  4. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（二）

    前言:上篇 JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案(一) 介绍了下knockout.js的一些基础用法,由于篇幅的关系,所以只能分成两篇,望见谅!昨天就 ...

  5. BootstrapTable+KnockoutJS实现增删改查解决方案

    BootstrapTable+KnockoutJS实现增删改查解决方案 前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一 ...

  6. BootstrapTable与KnockoutJS相结合实现增删改查功能

    http://www.jb51.net/article/83910.htm KnockoutJS是一个JavaScript实现的MVVM框架.通过本文给大家介绍BootstrapTable与Knock ...

  7. JS组件系列——KnockoutJS用法

    前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...

  8. 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 6 - 业务逻辑

    Part 3: 设计逻辑层:核心开发 如前所述,我们的解决方案如下所示: 下面我们讨论整个应用的结构,根据应用中不同组件的逻辑相关性,分离到不同的层中,层与层之间的通讯通过或者不通过限制.分层属于架构 ...

  9. 翻译：使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 4 - 验证

    验证: 快要完成我们程序的界面部分了.剩下的事情就是在用户点击 "保存" 的时候管理验证问题了.验证是主要需求,今天就是最无知的应用也不会忽视它.通过正确的验证,用户可以知道应该输 ...

随机推荐

  1. 关于在storyboard拖按钮控件,手动设置代码不成功的问题

    首先,在 storyboard 中拖拽一个按钮控件.设置好约束条件

  2. SQL Server表和字段说明的增加和更新

    1. 增加字段说明 EXEC sp_addextendedproperty     'MS_Description',     'some description',     'user',      ...

  3. 对于windows窗口的标题菜单栏的操作——删除/禁用 最小最大话和关闭

    HWND hand = FindWindow(NULL, "计算器"); int nStyle = GetWindowLong(hand, GWL_STYLE);nStyle &a ...

  4. Android setOnTouchListener识别滑动手势

    setOnTouchListener(new OnTouchListener() { private float startX, startY, offsetX, offsetY; @Override ...

  5. placeholder 兼容 IE

    placeholder 是 html5 的新属性,仅支持 html5 的浏览器才支持 placeholder,目前最新的 FF.Chrome.Safari.Opera 以及 IE10 都支持,IE6- ...

  6. scrapy中运行爬虫时出现twisted critical unhandled error错误

    1. 试试这条命令: twisted critical unhandled error on scrapy tutorial python python27\scripts\pywin32_posti ...

  7. 《转》精巧好用的DelayQueue

    该文章转自:http://www.cnblogs.com/jobs/archive/2007/04/27/730255.html 我们谈一下实际的场景吧.我们在开发中,有如下场景 a) 关闭空闲连接. ...

  8. Oracle EBS-SQL (GL-5):从发票追溯到接收

    SELECT destination_type_code, distribution_line_number, line_type, amount,vat_code, tax_code_id, tax ...

  9. [LeetCode][Python]Longest Substring Without Repeating Characters

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com'https://oj.leetcode.com/problems/longest ...

  10. opencv 中cvZero（）的使用

    cvZero(CvArr* ar); // 是让矩阵的值都为0,有初始化的作用, Eg:   IplImage img=cvCreateImage(cvSize(640,480),IPL_DEPTH_ ...