使用BootStrap Table封装js 时 detailView detailFormatter的问题
问题描述
使用BootStrap Table封装js 时 detailView detailFormatter时不可用
问题出现的环境背景及自己尝试过哪些方法
使用默认的方法是没问题的:
$('#tableCompany').bootstrapTable({
height: 650,
detailView: true,
detailFormatter: function (index, row) {
return '<div class="form-group has-success"><label class="col-sm-2 control-label">备注:</label><label class="col-sm-4">' + row.Remark + '</label><label class="col-sm-2 control-label">登记日期:</label><label class="col-sm-4">' + timeFormatter(row.LogTime) + '</label></div></br>';
},
columns: [
],
});
用下述封装过的js就有问题:
var tableList = { id:"listTable"};
$(function () {
var defaultColunms = tableList.initColumn();
var config = {
detailView: true,
detailFormatter: function (index, row) {
return '<div class="form-group has-success"><label class="col-sm-2 control-label">备注:</label><label class="col-sm-4">' + row.Remark + '</label><label class="col-sm-2 control-label">登记日期:</label><label class="col-sm-4">' + timeFormatter(row.LogTime) + '</label></div></br>';
}}
var table = new BSTable(tableList.id, "/Company/GetJsonData", defaultColunms,config );
tableList.table = table.init();
});
tableList.initColumn = function () {
return []}
相关代码
// 请把代码文本粘贴到下方(请勿用图片代替代码)
封装js :
(function () {
var BSTable = function (bstableId, url, columns, extendConfig) {
this.btInstance = null;//jquery和BootStrapTable绑定的对象
this.bstableId = bstableId;
this.url = url;
this.method = "get";
this.paginationType = "server";//默认分页方式是服务器分页,可选项"client"
this.toolbarId = bstableId + "Toolbar";
this.columns = columns;
this.height = 690;//默认表格高度690
this.data = {};
this.queryParams = {}; // 向后台传递的自定义参数
this.extendConfig = extendConfig;
};
BSTable.prototype = {
/**
* 初始化bootstrap table
*/
init: function () {
var tableId = this.bstableId;
var qParams = this.queryParams;
var defaultConfig = {
contentType: "application/json",
url: this.url, //请求地址
method: this.method, //ajax方式,post还是get
ajaxOptions: { //ajax请求的附带参数
data: this.data
},
toolbar: "#" + this.toolbarId,//顶部工具条
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true
pagination: true, //是否显示分页(*)
sortable: true, //是否启用排序
sortOrder: "asc", //排序方式
pageNumber: 1, //初始化加载第一页,默认第一页
pageSize: 15, //每页的记录行数(*)
pageList: [15, 30, 50, 100], //可供选择的每页的行数(*)
queryParamsType: 'limit', //默认值为 'limit' ,在默认情况下 传给服务端的参数为:offset,limit,sort
queryParams: function (params) {
var temp = {
rows: params.limit,
page: (params.offset) / params.limit + 1,
sidx: params.sort,
sord: params.order,
keywords: params.search
};
return $.extend(temp, qParams);
}, // 向后台传递的自定义参数
sidePagination: this.paginationType, //分页方式:client客户端分页,server服务端分页(*)
search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端
strictSearch: false, //设置为 true启用 全匹配搜索,否则为模糊搜索
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
searchOnEnterKey: false, //设置为 true时,按回车触发搜索方法,否则自动触发搜索方法
columns: this.columns, //列数组
height: this.height,
icons: {
refresh: 'glyphicon-repeat',
toggle: 'glyphicon-list-alt',
columns: 'glyphicon-list'
},
iconSize: 'outline'
};
var bsTableConfig = {};
if (typeof this.extendConfig == "object") {
bsTableConfig = $.extend(defaultConfig, this.extendConfig);
}
else {
bsTableConfig = defaultConfig;
}
console.log(bsTableConfig);
this.btInstance =
$('#' + tableId).bootstrapTable(bsTableConfig);
return this;
},
/**
* 向后台传递的自定义参数,此处传递的变量的值不可变
* 如果值一直在变化中,需要在refresh中通过url参数传递
* @param param
*/
setQueryParams: function (param) {
this.queryParams = param;
},
/**
* 设置分页方式:server 或者 client
*/
setPaginationType: function (type) {
this.paginationType = type;
},
/**
* 设置ajax post请求时候附带的参数
*/
set: function (key, value) {
if (typeof key == "object") {
for (var i in key) {
if (typeof i == "function")
continue;
this.data[i] = key[i];
}
} else {
this.data[key] = (typeof value == "undefined") ? $("#" + key).val() : value;
}
return this;
},
/**
* 设置ajax post请求时候附带的参数
*/
setData: function (data) {
this.data = data;
return this;
},
/**
* 清空ajax post请求参数
*/
clear: function () {
this.data = {};
return this;
},
/**
* 刷新 bootstrap 表格
* Refresh the remote server data,
* you can set {silent: true} to refresh the data silently,
* and set {url: newUrl} to change the url.
* To supply query params specific to this request, set {query: {foo: 'bar'}}
*/
refresh: function (parms) {
if (typeof parms != "undefined") {
this.btInstance.bootstrapTable('refresh', parms);
} else {
this.btInstance.bootstrapTable('refresh');
}
},
/**
* 获取选中行数据
*/
getSelections: function () {
return this.btInstance.bootstrapTable('getSelections');
}
};
window.BSTable = BSTable;
}());
你期待的结果是什么?实际看到的错误信息又是什么?
期待的结果:
用封装js显示的结果:
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论