表格列表的開發-bootstrap-table 插件的封裝，簡化我們複雜的代碼邏輯

首先貼頁面給大家看看效果

按照我封裝的方式處理完就很簡單了。

直接貼代碼了

<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<script type="text/javascript" src="${ctx}/static/fht_ams/public/bootstrap-table-object.js"></script>
<script type="text/javascript" src="${ctx}/static/fht_ams/public/modalutils.js"></script>

<div id="custom-toolbar" class="form-inline" style="line-height: 55px;">
    <div class="layui-inline">
        <div class="export btn-group">
            <shiro:hasPermission name="companyProduct:create">
                <button class="layui-btn" type="button" onclick="companyProduct.addCompanyProduct()">錄入</button>
            </shiro:hasPermission>
        </div>
    </div>
</div>
<div id="tablecontainer">
    <!--使用 search, showColumns, showRefresh, showToggle 屬性來顯示基本的工具欄。-->
    <table id="thisTable" data-height="210"
           data-toolbar="#custom-toolbar"
           data-showColumns="true"
           data-showRefresh="true"
           data-showExport="true">
        <thead>
        <tr>
            <%-- <th data-field="vehicleId" data-align="center">未檢索</th>--%>
        </tr>
        </thead>

    </table>
</div>
<script>
    <%--將後臺數據保存--%>
    var url = '${url}';

    //崗位實例
    var companyProduct = {
        id: "thisTable",   //表格id
        seItem: null,     //選中的條目
        table: null,
        layerIndex: -1
    };


    companyProduct.operateCompanyProduct = function (value , row) {
        var operatorHtml = '<div class="layui-table-cell laytable-cell-1-0-10">';

        <shiro:hasPermission name="companyProduct:update">

        operatorHtml += '<a class="layui-btn layui-btn-xs" title="修改公司產品" onclick="companyProduct.updateCompanyProduct(\''+row.id+'\')">修改</a>';

        </shiro:hasPermission>


        <shiro:hasPermission name="companyProduct:delete">

        operatorHtml += '<a class="layui-btn layui-btn-danger layui-btn-xs" title="刪除公司產品" onclick="companyProduct.deleteCompanyProduct(\''+row.id+'\')">刪除</a>';

        </shiro:hasPermission>

        operatorHtml += '</div>';

        return operatorHtml;
    };

</script>
<%--設定js--%>
<script src="${ctx}/static/fht_ams/${moduleCode}/${moduleCode}.js"></script>

companyProduct.addCompanyProduct = function () {
    var modal = new modal_dialog( '/sys/companyProduct/authc_json/openCompanyProductPage' , 'add' , '新增公司產品信息' , ['確認提交'] ,  ['700px', '480px']);
    modal.init({
        yes: function (index) { // 確定的代碼邏輯
            if (checkForm()){
                $.ajax({
                    url: ctx + '/sys/companyProduct/authc_json/save',
                    data:$('#companyProductForm').serializeArray() ,
                    dataType:'json',
                    success:function (data) {
                        if(data.resultCode == 0 ) {
                            showSuccessMsgAtBottom(data.resultMessage) ;
                            $('#thisTable').bootstrapTable("refresh");
                            layer.close(index) ;
                        } else {
                            showErrorMsgAtBottom(data.resultMessage) ;
                        }
                    }
                });
            }
        }
    });
};

companyProduct.updateCompanyProduct = function (id) {
    var modal = new modal_dialog( '/sys/companyProduct/authc_json/openCompanyProductPage?id='+id , 'add' , '修改公司產品信息' , ['確認提交'] ,  ['700px', '480px']);
    modal.init({
        yes: function (index) { // 確定的代碼邏輯
            if (checkForm()){
                $.ajax({
                    url: ctx + '/sys/companyProduct/authc_json/update?id='+id,
                    data:$('#companyProductForm').serializeArray() ,
                    dataType:'json',
                    success:function (data) {
                        if(data.resultCode == 0 ) {
                            showSuccessMsgAtBottom(data.resultMessage) ;
                            $('#thisTable').bootstrapTable("refresh");
                            layer.close(index) ;
                        } else {
                            showErrorMsgAtBottom(data.resultMessage) ;
                        }
                    }
                });
            }
        }
    });
};

companyProduct.deleteCompanyProduct = function (id) {
    new modal_dialog('/sys/companyProduct/authc_json/delete?id='+id , 'delete' , '刪除公司產品信息' ,['確定','取消']).init();
};


companyProduct.initColumn = function () {
    return [{field: '_index',title: "序號",align: "center",valign: "middle",sortable: "true",formatter: function (value, row, index) {return index + 1;}},
        {field: "productName",  title: "產品名稱",align: "center",valign: "middle",sortable: "true"},
        {field: "productPrice",  title: "產品價格",align: "center",valign: "middle",sortable: "true"},
        {field: "",title: "操作欄",align: "center",valign: "middle",sortable: "true",formatter:companyProduct.operateCompanyProduct}
    ] ;
} ;

companyProduct.getQueryParams_collectAll = function (params) {
    return {
        search : '' ,
        likeSearch : $('#tablecontainer .search input').val(),
        offset: params.offset,
        limit: params.limit,
        order: 'desc',
        sort: 'id'
    };
} ;

//初始化項目7
$(function () {
    //顯示列表
    var defaultColunms = companyProduct.initColumn();
    var table = new BSTable(companyProduct.id, url, defaultColunms);
    table.setQueryParams(companyProduct.getQueryParams_collectAll);
    table.setSearch(false) ;
    table.init();
    companyProduct.table = table ;

});

 js 只需要指定列、分頁的參數、以及初始化一下表格，列表數據會自動加載。你都不需要寫其他多餘的代碼。

彈框也給你們封裝好了，有新增的、修改的、刪除的、只要按照我的模板套用就可以了，是不是很簡單呢。如果有想要源碼的私信我就行了