[发明专利]一种基于iziModal左右层显示选中数据的方法

说明书

本发明涉及WEB技术领域，特别涉及一种基于iziModal左右层显示选中数据的方法。本发明方法步骤是：1、在页面中定义两个bootstrapTable标签；2、初始化页面时，左侧的bootstrapTable表格加载数据，而右侧的bootstrapTable表格则为空；3、双击左侧表格行时删除当前列表数据行，并将当前列表数据行插入右侧表格中；4、删除右侧表格行时，将数据插入到左侧的表格中；本发明解决了在iziModal中，选中bootstrapTable中的数据时实时在右侧数据列表中展示，并删除左侧数据列表的选中数据，提供了一种实时、方便的操作列表数据的iziModal弹出层。

技术领域

本发明涉WEB技术领域，特别涉及一种基于iziModal左右层显示选中数据的方法。

背景技术

iziModal是一款时尚炫酷的jquery模态窗口插件。该模态窗口插件提供基本的打开模态窗口动画特效，并且可以调用iframe内容，Ajax加载，制作alert效果，加载超大内容等。

Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能。

但是，目前面临的主要问题有：在以往的iziModla弹出层和bootstrapTable一起开发中，每选中bootstrapTable一行或多行数据时都需要保存然后在数据列表中查看，下次再去选择数据时，已近选择的数据还是在待选择的数据列表中，这样对用户的体验很不友好。

发明内容

本发明解决了在iziModal中，选中bootstrapTable中的数据时实时在右侧数据列表中展示，并删除左侧数据列表的选中数据，提供了一种实时、方便的操作列表数据的iziModal弹出层。

本发明解决上述技术问题的技术方案是：

所述的方法包含以下几个步骤：

步骤一、在页面中定义两个bootstrapTable标签;

步骤二、初始化页面时，左侧的bootstrapTable表格加载数据，而右侧的bootstrapTable表格则为空；

步骤三、 双击左侧表格行时删除当前列表数据行，并将当前列表数据行插入右侧表格中；

步骤四、删除右侧表格行时，将数据插入到左侧的表格中。

所述的步骤一中，在页面中定义需要的标签，如：定义左侧展示全部数据的bootstrapTable表格(#table1)，定义右侧展示已选中数据的bootstrapTable表格(#table2)。

所述的步骤二中，初始化页面时，左侧的bootstrapTable表格加载数据，而右侧的bootstrapTable表格则为空。

所述的步骤三中，双击左侧表格行时删除当前列表数据行，并将当前列表数据行插入右侧表格中，达到实时的将已选择的数据更可视化的展示。

所述的步骤四中，删除右侧表格数据行时，将行数据插入到左侧的表格中。

本发明的有益效果：解决的技术问题在于提供一种基于iziModal左右层显示选中数据的方法，解决了在iziModal中，选中bootstrapTable中的数据时实时在右侧数据列表中展示，并删除左侧数据列表的选中数据，提供了一种实时、方便的操作列表数据的iziModal弹出层。

附图说明

下面结合附图对本发明进一步说明：

图1为本发明的方法流程图。

具体实施方式