目录
一、情形:
7月份写的那版多页签切换列表是基于 button 标签 ,而且当前操作的永远都是同一个页签,通过点击事件刷新数据显示的。图示如下:
这就产生了几个问题:
1. 页签和对应页面的关联不够明显 ;
2. 当前页面数据没保存就点击下一个页签,当前页面数据丢失;
3、同时没法存在多个空的页签;
发现问题之后,第一时间脑袋想起以前面试过得问题:已经写完的代码你会去经常测试改进吗?虽然当时回答的是 会。可是实际上我从未主动去改进自己的代码,都是出了问题才去改。既然现在发现了,那就改吧。着重处理 发现的3个问题。
二、处理:
1、当前之重就是 处理 多个页面切换的问题,因为是后台传来数据,前台动态生成多个页面以及对应的表格。要处理每个页面的增删改查,就是要让各个页面和对应表格的id 不重复,众id就用随机数+当前时间 唯一生成。
2、页签的拼接 不能用写死<ui> </ui>在里面拼接li,我试过 ,li 会拼在 </ul> 后而不是 <ul>里 ,这让我很郁闷,于是上网找了个组件,把组件拼接代码 粘出来,放在js文件里,引入当前页面,需要拼接的时候调用就行,代码如下:
$.fn.addTabs = function (options) {
//判断是否已存在指定ID的tab
/*if ($("#" + options.id).length > 0) {
throw "当前ID的Tab已存在.";
}*/
var snumber=options.sheetNumber;
//构建li元素
var li = $("<li />", {
"class":"confli",
"id": options.id + "_li",
});
//构建a元素
var a = $("<a />", {
"data-toggle":"tab",
"href": "#" + options.id,
"aria-expanded":"true",
"text": options.title,
"click": function (e) {
// e.preventDefault();
$(this).tab("show");
},
});
//合并li和a元素
li.append(a);
var ul = $(this);
//合并ul和li元素
ul.append(li);
//添加完成显示当前li
$(li).tab("show");
//构建div内容元素
var div = $("<div />", {
"id": options.id,
"class": "tab-pane fade in active",
});
//兼容纯文本和html片段
typeof options.content == "string" ? div.append(options.content) : div.html(options.content);
//var container = $(".tab-content");
var container = $("#tab-content");
container.append(div);
//添加完成后显示div
$(div).siblings().removeClass("active");
}
3、拼接 每个页面要有: li页签 ,div , a 标签
li 里 拼接 a标签 -->跳转到对应的div ,展示对应的handsontable 表格。
div 还有 对应的 增 删 改 按钮,方法只写一个,只要传值对应的id 就好。
4、页签的名字 改成 input 输入框 ,保持和页签联动。增删改 按钮变成 图标。
最后 后的页面 是这样: