js 动态添加html 页签 -完善版

目录

一、情形：

二、处理：

三、实现：

四、总结：

---

一、情形：

   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 输入框 ，保持和页签联动。增删改 按钮变成 图标。

最后 后的页面 是这样：