通常 在处理前后端交互时候 都会采用ajax提交方式
但是 如果大量的采用ajax，每次都要传入参数 ，请求url，错误处理........ 这样子代码看上去非常的臃肿 ， 因此 我们 可以通过封装 的 形式 封装成一个模板
比如 我现在 有一个这样常见的 业务场景 点击左侧菜单栏 ，右侧呈现 相应的数据展现及操作区域 并显示数据列表
通常的做法 是 点击菜单 根据菜单URL 返回一个 主页面 出现在右侧区域 ， 然后 通过ajax请求 返回 数据 并 渲染 表格
这时候 我们 可以封装一个 表格模板 例如 请求路径，参数，底部分页栏
使用
$.fn.bootstrapTableEx = function(opt) {
var defaults = {
url : '',
dataField : "rows",
method : 'post',
dataType : 'json',
selectItemName : 'id',
clickToSelect : true,
pagination : true,
smartDisplay : false,
pageSize : 10,
pageList : [ 10, 20, 30, 40, 50 ],
paginationPreText : '上一页',
paginationNextText : '下一页',
sidePagination : 'server',
queryParamsType : null,
columns : []
}
var option = $.extend({}, defaults, opt); opt就是在基础模板上扩展自己的 参数 然后和基础模板 合并
$(this).bootstrapTable(option);
}
//使用模板
$('#dataGrid').bootstrapTableEx({
url : '../user/api/getAllUsersApi?_' + $.now(),
height : $(window).height() - 54,
queryParams : function(params) {
params.loginname = vm.keyword;
return params;
}
这就是基础bootstrap模板 在具体展示列表数据时 传入参数比如（Url,queryParams........）
var option = $.extend({}, defaults, opt); 这就是 jquery扩展组件 语法 了 返回 一个合并后的 对象 然后 交给 bootstrapTable渲染
这时 我们就创建 一个 通用的列表模板
