go+bootstrapTable

最新推荐文章于 2024-08-23 09:33:29 发布

三生有幸遇见你°

最新推荐文章于 2024-08-23 09:33:29 发布

阅读量428

点赞数

本文链接：https://blog.csdn.net/w15562397578/article/details/104498877

版权

<body>
<div>
    <table id="item_table"
           data-show-refresh="true"
           data-show-columns="true"
           data-show-export="true"
           data-search="true"
           data-page-size="100"
           data-filter-control="true"
           data-query-params="queryParams"
           data-toolbar=".toolbar">
        <thead>
        <tr>   
            <th data-field="action"
                data-align="center"
                data-formatter="actionFormatter"
                data-events="actionEvents"
                data-sortable="false"> &nbsp[&nbsp&nbsp操作&nbsp&nbsp]&nbsp
            </th>
            <th data-field="status" data-filter-control="select" data-formatter="statusFormatter">状态</th>
            <th data-field="theme"  data-filter-control="input">主题</th>
            <th data-field="task"  data-filter-control="input">任务详情</th>
            <th data-field="responsible"  data-filter-control="select" data-extend-label="name">责任人</th>
            <th data-field="releasedate"  data-filter-control="popdate">下达日期</th>
            <th data-field="result"  data-filter-control="input">完成结果</th>
            <th data-field="completedate"  data-filter-control="popdate">预计完成日期</th>
            <th data-field="actualdate"  data-filter-control="popdate">实际完成日期</th>
            <th data-field="remark"  data-filter-control="input">备注</th>
        </tr>
        </thead>
    </table>
</div>


<script>
    var $table = $("#item_table");
    $(function () {
        $table.bootstrapTable({
            url: "/***/**/**", //路由路径地址
            method: "post",
            sidePagination: "server",
            pagination: true,//设置成true会在底部显示分页条，默认false
            height: getTableHeight(),
            fixedColumns: true,
            fixedNumber: 1,
            pageSize:10//当前页显示的条数
        });
        $("#add_item").on("click", function () {
            top.showTopModal({url: "/***/**/**"", refreshContent: refreshContent});
        });
        $(window).resize(function () {
            $table.bootstrapTable('resetView', {
                height: getTableHeight()
            });
        });
    });
    function refreshContent(options) {
        top.hideTopModal();
        $table.bootstrapTable("refresh")
    }
    function queryParams(params) {
        return params
    }
    function statusFormatter(value, row) {//状态栏显示内容  data-formatter="statusFormatter"
        if (value == "已下达") {
            return '<span class="label label-primary">已下达</span>'
        }
        if (value == "进行中"){
            return '<span class="label label-info">进行中</span>'
        }
        if (value == "已完成") {
            return '<span class="label label-success">已完成</span>'
        }
    }
    function actionFormatter(value, row) {//操作栏显示内容  data-formatter="actionFormatter"
        if (row.status != "已完成") {
            str = '<a class="update label label-warning" href="javascript:" title="更改" style="margin-right: 5px;">更改</a>'+
                  '<a class="remove label label-danger" href="javascript:" title="删除" style="margin-right: 5px;">删除</a>'
        }else{
            str = '<a class="remove text-primary" href="javascript:" title="" style="margin-right: 5px;"></a>'
        }
        return str
    }
    window.actionEvents = {
        'click .update': function (e, value, row) {
            top.showTopModal({url: "路由路径地址", refreshContent: refreshContent});
        }
    }
</script>
</body>