layui中table页保存后刷新页面后跳到当保存页面

超、凢脫俗 2023-07-11 15:28 23阅读 0赞

1、核心思想利用layui组件sessionStore监听存储来实现

2、场景复现：

A页面点击编辑按钮跳转到B页面，如下图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM1MTMxNzg_size_16_color_FFFFFF_t_70][]

图1- A页面

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM1MTMxNzg_size_16_color_FFFFFF_t_70 1][]

图2-B页面

3、B页面内逻辑代码

1）监听table，记录lay-table到session

①html代码

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this" lay-id="0">基本情况</li>
            <li lay-id="1">经济发展与提质增效</li>
            <li lay-id="2">生态环境</li>
            <li lay-id="3">社会保障</li>
            <li lay-id="4">民生领域</li>
            <li lay-id="5">公职人员</li>
            <li lay-id="6">考核数据和舆情信息</li>
            <li lay-id="7">重大事项约束</li>
            <li lay-id="8">乡村振兴</li>
            <li lay-id="9">教育事业</li>
        </ul>
        <div class="layui-tab-content">
            
            <div class="layui-tab-item layui-show">
                
                <div class="content" id="jbqk" style="page-break-after:always;width: 100%;">
                </div>
            </div>
        </div>
    </div>

②JS代码

//监听div获取table当前打开的tabIndex放入缓存
    element.on('tab(docDemoTabBrief)',function (data) {
        tabIndex = data.index;
        sessionStorage.setItem("tabIndex",tabIndex);
    });
    //信息编辑保存后，页面切换到当前页
    if (sessionStorage.getItem("tabIndex")!=null && sessionStorage.getItem("tabIndex")!=''){
        element.tabChange('docDemoTabBrief', sessionStorage.getItem("tabIndex"));
        element.init();
    }

4、因为操作session记录的原因，所以清除A页面内的session以达到不会返回A页面再去访问B页面的时候影响B页面的浏览。所以A页面的js需要清除一下JS：

//清除放入缓存中的tabIndex
    sessionStorage.setItem("tabIndex","");

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM1MTMxNzg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200306164758751.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM1MTMxNzg=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM1MTMxNzg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200306164822166.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM1MTMxNzg=,size_16,color_FFFFFF,t_70