框架封装了bootstrap table,实际为调用bootstrap中刷新表格方法实现动态加载表头效果
页面方法:
//-------------搜索查询
//使用生成代码功能生成后页面自带的搜索并刷新表格方法
function searchGrid() {
//$('#gridTable').ysTable('search');//生成的默认方法
//修改后的方法,方法格式为:(传入参数可根据需要自由添加)
//$('#gridTable').ysTable('在分装的JS脚本中的方法名称',传入参数);
$('#gridTable').ysTable('searchOnSetColumns',setHeader(Header,HeaderTypeDict));
resetToolbarStatus();
}
脚本方法:
$.fn.ysTable = function (option, param) {//页面调用方法处
//如果是调用方法
if (typeof option == 'string') {
//调用$.fn.ysTable.methods处
return $.fn.ysTable.methods[option](this, param);
}
//如果是初始化组件
var _option = $.extend({}, $.fn.ysTable.defaults, option || {});
var target = $(this);
target.bootstrapTable(_option);
return target;
};
$.fn.ysTable.methods = {
search: function (target) {//框架默认搜索方法
// 从第一页开始
target.bootstrapTable('refresh', { pageNumber: 1 });
},
searchOnSetColumns: function (target, param) {//添加的动态修改表头搜索方法,参数对照上面方法中return $.fn.ysTable.methods[option](this, param);处,根据需要自由修改
console.log("进入方法searchOnSetColumns")
console.log("target", target)
console.log("param", param)
//调用refreshOptions方法修改实现修改表头效果
target.bootstrapTable('refreshOptions', { columns: param, pageNumber: 1 });
},
getPagination: function (target, params) {
var pagination = {
pageSize: params.limit, //页面大小
pageIndex: (params.offset / params.limit) + 1, //页码
sort: params.sort, //排序列名
sortType: params.order //排位命令(desc,asc)
};
return pagination;
}
};
数据加载思路:
将动态的表头保存在数据字典中,数据表构建使用存入数据中列数最多的表作为构建数据表的基础,数据表的数据列数与导入数据中列数最多的表格一致,统一导入表格中数据的数据列显示顺序(如1列为一级检索,2列为次级检索以此类推),导入数据时将表格中数据按照数据列1、2、3...的顺序将数据入库,添加数据类型字段以区分数据内容,如表格数据列较多可使用通过导入数据的表头动态生成字典的方法动态生成字典内容。
获取数据时按照字典表排序默认加载排序为第一的类型的数据,同时在加载页面表头时获取对应的字典内容(表头)调用JS脚本动态加载数据表表头(字典内容在页面初始加载时保存在缓存中,使用时直接调用缓存内容),切换数据类别搜索时重新调用动态加载JS脚本,通过参数控制实现表头的动态切换加载