(function ($) { //向ko里面新增一个bootstrapTableViewModel方法 ko.bootstrapTableViewModel = function (options) { var that = this; this.default = { 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], //可供选择的每页的行数（*） method: 'get', 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"); }; }; //添加ko自定义绑定 ko.bindingHandlers.bootstrapTable = { 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, valueAccessor, allBindingsAccessor, viewModel) { } }; })(jQuery);
代码释疑：上面代码主要做了两件事
1.自定义了bootstrapTable初始化的ViewModel。
2.
添加ko自定义绑定。
如果园友不理解自定义绑定的使用，可以看看博主的前两篇博文（一）和（二），有详细介绍。
（2）knockout.index.js
(function ($) { ko.bindingViewModel = function (data, bindElement) { var self = this; this.queryCondition = ko.mapping.fromJS(data.queryCondition); this.defaultQueryParams = { queryParams: function (param) { var params = self.queryCondition; params.limit = param.limit; params.offset = param.offset; return params; } }; var tableParams = $.extend({}, this.defaultQueryParams, data.tableParams || {}); this.bootstrapTable = new ko.bootstrapTableViewModel(tableParams); //清空事件 this.clearClick = function () { $.each(self.queryCondition, function (key, value) { //只有监控属性才清空 if (typeof (value) == "function") { this(''); //value(''); } }); self.bootstrapTable.refresh(); }; //查询事件 this.queryClick = function () { self.bootstrapTable.refresh(); }; //新增事件 this.addClick = function () { var dialog = $('<div tabindex="-1" role="dialog" aria-labelledby="myModalLabel"></div>'); dialog.load(data.urls.edit, null, function () { }); $("body").append(dialog); dialog.modal().on('hidden.bs.modal', function () { //关闭弹出框的时候清除绑定(这个清空包括清空绑定和清空注册事件) ko.cleanNode(document.getElementById("formEdit")); dialog.remove(); self.bootstrapTable.refresh(); }); }; //编辑事件 this.editClick = function () { var arrselectedData = self.bootstrapTable.getSelections(); if (arrselectedData.length <= 0 || arrselectedData.length > 1) { alert("每次只能编辑一行"); return; } var dialog = $('<div tabindex="-1" role="dialog" aria-labelledby="myModalLabel"></div>'); dialog.load(data.urls.edit, arrselectedData[0], function () { }); $("body").append(dialog); dialog.modal().on('hidden.bs.modal', function () { //关闭弹出框的时候清除绑定(这个清空包括清空绑定和清空注册事件) ko.cleanNode(document.getElementById("formEdit")); dialog.remove(); self.bootstrapTable.refresh(); }); }; //删除事件 this.deleteClick = function () { var arrselectedData = self.bootstrapTable.getSelections(); if (!arrselectedData||arrselectedData.length<=0) { alert("请至少选择一行"); return; } $.ajax({ url: data.urls.delete, type: "post", contentType: 'application/json', data: JSON.stringify(arrselectedData), success: function (data, status) { alert(status); self.bootstrapTable.refresh(); } }); }; ko.applyBindings(self, bindElement); }; })(jQuery);
代码释疑：这个js主要封装了页面元素的属性和事件绑定，需要说明的几个地方