添加、修改、删除Tab项

总结:

对Tab进行操作,无非涉及到的数据以及显示的地方就以下几处:

数据:

       1. Tab_Vector

       2. Spc_Vector

       3. Spc_Tab_ComboBox

显示:

1. Tab_ListCtrl

2. Spc_ListCtrl

3. Spc_ListCtrl_Tab_ComboBox

4. Cfg_ListCtrl

 

详细过程:

1. 添加新Tab:    

1.1 方法:在Tab_ListCtrl的最后一行三列必须为空白,且均可编辑,编辑完后,点击“Add”按钮,校验符合即可实现添加。

1.2  校验:各个编辑框的值既不能为空,也不能超过以限定字符;同时必须,不能是已经有的Tabname

1.3  注: 每次只能编辑一行Tab项,先选中,在添加或修改或删除。

1.4  修改地方:

1> 新Tab加入已有的Tab_vector中;

2> Spc的Tab_ComboBox中添加新Tab项,SpcList中所有项为空(因为此时CfgList中无新Tab的对应项),包括tab属性项也为NULL。

2. 修改Tab:

2.2 不是最后一行Tab,均可修改;

2.3 现有方案:不能修改已有Tab项的name,只能修改中英文的disp;现有方法无需修改其他地方。

2.4 方法:修改中英文的disp内容,点击"Add"按钮,如上步中校验合格中即可添加(无需校验Tabname)。

2.5  新增功能:可修改Tab项的name,判断Tabname是否修改,若修改(必须记录之前的Tabname,作对比),则还需修改以下地方:

1> Tab_vector中用新Tabname替换旧Tabname;

2>修改Spc_Vector每个Tab为旧Tabname的Spc的Tab为新Tabname;

3> Spc的Tab_ComboBox中删除旧的Tab项,在此位置插入新Tabname;

4>点击此新Tabname的每一项时,相应Spc的Tab属性项为新Tabname;

5>显示变化:当前选中的Cfg项对应的Spc项的Tab属性对应改变为新Tabname;

3. 删除Tab:

3.1 不是最后一行Tab,均可删除;

3.2 提醒确定删除;

3.3 修改地方:

1>  Tab_vector中删除该Tab项结构体;   Tab_ListCtrl中删除此Tab的一行;

2>  Spc_Vector 中删除有关该Tab项的所有对应Spc项;

3>  Cfg_ListCtrl中关于此Tab的所有Cfg项均设置为红色;

4>  Spc的Tab_ComboBox中删除此Tab项;

5>  显示变化:Cfg_ListCtrl中选中所有,Tab_ListCtrl无选中项,Spc_ListCtrl显示第一行Cfg项的内容;

 

 

 

    

            

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以帮你实现这个功能。 首先,你需要在页面中引入layui库和jquery库: ```html <!-- 引入layui库 --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/css/layui.css"> <script src="https://cdn.bootcdn.net/ajax/libs/layui/2.5.6/layui.js"></script> <!-- 引入jquery库 --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> ``` 然后,你需要在页面中添加一个按钮和一个容器,用于存放选卡: ```html <button id="add-tab">新增选卡</button> <div class="layui-tab" lay-filter="tab-demo"> <ul class="layui-tab-title"> <li class="layui-this">选卡1</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show">内容1</div> </div> </div> ``` 接下来,你需要编写js代码来实现点击按钮动态添加删除卡的功能: ```javascript // 初始化选卡 layui.use('element', function(){ var element = layui.element; }); // 点击按钮新增选卡 $('#add-tab').click(function() { var title = '选卡' + ($('.layui-tab-title li').length + 1); // 新增选卡的标题 var content = '内容' + ($('.layui-tab-content .layui-tab-item').length + 1); // 新增选卡的内容 var tabTpl = '<li lay-id="{id}" class=""><a href="javascript:;">{title}</a></li>'; // 选卡模板 var contentTpl = '<div class="layui-tab-item">{content}</div>'; // 选卡内容模板 var id = new Date().getTime(); // 选卡的唯一标识 var tabHtml = tabTpl.replace(/{id}/g, id).replace(/{title}/g, title); // 替换选卡模板中的占位符 var contentHtml = contentTpl.replace(/{content}/g, content); // 替换选卡内容模板中的占位符 $('.layui-tab-title').append(tabHtml); // 添加卡 $('.layui-tab-content').append(contentHtml); // 添加卡内容 layui.use('element', function(){ var element = layui.element; element.tabAdd('tab-demo', { title: title, content: content, id: id }); }); }); // 点击选卡上的关闭按钮删除卡 $('body').on('click', '.layui-tab-title li i', function() { var id = $(this).parent().attr('lay-id'); // 获取选卡的唯一标识 layui.use('element', function(){ var element = layui.element; element.tabDelete('tab-demo', id); // 删除卡 }); }); ``` 以上代码中,我们使用了`layui.element`模块来实现选卡的添加删除。在新增选卡时,我们使用了模板字符串和正则表达式来替换占位符,生成选卡和选卡内容的html代码。在删除卡时,我们使用了事件委托的方式来绑定事件,以便于处理动态生成的选卡。 好了,以上就是实现点击按钮动态添加删除layui的Tab卡的代码了,你可以根据自己的需求进行修改
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值