JeeSite 通过模板添加列表状态筛选

在 JeeSite 流程表单中，列表中可以通过流程状态来筛选不同状态的流程（审批）信息。

现在的业务时，需要添加一个选项卡式的筛选功能。

创建模板文件 web/src/main/resources/views/include/status_switch.html

<ul class="nav nav-tabs">
    <li class="active" data-tag=""><a href="javascript:;">全部</a></li>
    <li data-tag="9"><a href="javascript:;">草稿</a></li>
    <li data-tag="4"><a href="javascript:;">审批中</a></li>
    <li data-tag="0"><a href="javascript:;">已完成</a></li>
    <li data-tag="1"><a href="javascript:;">已退回</a></li>

</ul>

<script>

    const switchStatusField = "${statusField}";
    const switchSearchForm = "${searchForm}";
    const switchSearchFormEle = $("#"+switchSearchForm+" [name="+switchStatusField+"]");

    setTimeout(function(){
        if (switchSearchFormEle.length === 0) {
            $("#"+switchSearchForm).append('<input type="hidden" id="'+switchStatusField+'" name="'+switchStatusField+'" value="">');
            console.log('statusEle:',switchSearchFormEle.length);
        }
    },500);

    //页签切换
    $(".nav-tabs li").click(function () {
        $(".nav-tabs li").removeClass("active");
        $(this).addClass("active");
        $("#"+switchSearchForm+" [name="+switchStatusField+"]").val($(this).data("tag"));
        $("#"+switchSearchForm+" [type='submit']").click();
    });
</script>

列表模板

<div class="main-content">

下方添加：

<% include('/include/status_switch.html', {searchForm: 'searchForm', statusField: 'status'}){} %>

即可。

之后，你需要删除列表模板中，status 筛选（因为，引入的模板文件会重新创建一个 status 隐藏域）。

相关文章：