页面Ns后，自动刷新功能实现

范范

在做后台管理的时候，碰见了一个时间，就是需要对页面数据，进行审核处理，但是不想一直点击页面进行刷新，就想着写一个页面自动刷新功能。

但不是审核人员，这不需要进行刷新，就做了按钮，勾选了，页面30s后自动刷新当前页面数据，不勾选，就不处理。

因此的，我这边就处理了一个，如下的效果：
页面加载后的效果：


勾选刷新后的效果：


这样的话，在时间到0的时候，就会刷新下面的列表数据，然后审核人员，可以及时的看到需要审核的内容，进行审核

范范

页面html处理：

[HTML] 纯文本查看 复制代码

<td>
                        <div class="form-control-wrap w-col" id="seach" >
                            <a href="javascript:;" class="btn btn-primary" id="btnSearch">搜索</a>
                            <a href="javascript:;" class="btn btn-success" id="CancelDelete">全部取消删除</a>
                            <a href="javascript:;" class="btn btn-success" id="btnApproveBatch">批量审核</a>
                            <label for="chkAutoRefresh" class="form-check" data-scheck>
                                <input type="checkbox" name="chkAutoRefresh" id="chkAutoRefresh" value="0">
                                <span class="check-icons">
                                </span>
                                <span>自动刷新</span>
                            </label>
                        </div>
                    </td>

此处很简单，就是处理了下页面的单选框显示，以及数据

范范

下面就是重点喽，实现自动刷新的js

[JavaScript] 纯文本查看 复制代码

<script>
    var timerAutoRefresh;
    var autoRefreshCounter;
    function setAutoRefresh() {
        var $chkAutoRefresh = $( '#chkAutoRefresh' );
        if ( $chkAutoRefresh[ 0 ].checked ) {
            resetAutoRefreshCounter();
            timerAutoRefresh = setInterval( autoRefreshHandle, 1000 );
        } else {
            clearInterval( timerAutoRefresh );
            $chkAutoRefresh.nextAll( 'span:last' ).text( '自动刷新' );
        }
    }
    var autoRefreshCounter;
    function autoRefreshHandle() {
        if ( 1 > autoRefreshCounter ) {
            resetAutoRefreshCounter();
            --自动刷新事件，此处为ajax事件，获取刷新的列表内容
            pagerOption.pageCallback( pagerOption.currentIndex );
        } else {
            $( '#chkAutoRefresh' ).nextAll( 'span:last' ).text( autoRefreshCounter + ' 秒后自动刷新' );
            autoRefreshCounter--;
        }
    }
    function resetAutoRefreshCounter() {
        autoRefreshCounter = 30;
    }
</script>

其实很简单的，就是需要逻辑理清就可以实现

范范

  赶快看看，能帮到你不

站长苏飞

我只是路过打酱油的。

范范