Bootstrap-table使用记录（转）

HTML代码

/*index.cshtml*/

@section styles{
    <style>
        .main {
            margin-top:20px;
        }

        .modal-body .form-group .form-control {
            display:inline-block;
        }
        .modal-body .form-group .tips {
            color:red;
        }
    </style>
}

<div class="main">
    <div id="toolbar" class="btn-group">
        <button id="addProductBtn" type="button" class="btn btn-default" onclick="showAddModal()">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增产品
        </button>
    </div>

    <table id="table"></table>
</div>

<div class="modal fade" id="productModal" tabindex="-1" role="dialog" aria-labelledby="productModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="productModalLabel"></h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="prodId" class="col-md-2">编号：</label>
                    <input type="text" class="form-control" id="prodId" disabled>
                </div>
                <div class="form-group">
                    <label for="prodName" class="col-md-2">名称：</label>
                    <input type="text" class="form-control" id="prodName">
                    <span class="tips" >(最多20个字)</span>
                </div>
                <div class="form-group">
                    <label for="prodTecParam" class="col-md-2">技术参数：</label>
                    <textarea rows=" class="form-control" id="prodTecParam"></textarea>
                    <span class="tips" >(最多150个字)</span>
                </div>
                <div class="form-group">
                    <label for="prodType" class="col-md-2">类型：</label>
                    <select class="form-control" id="prodType">
                        <option value=">普通产品</option>
                        <option value=">明星产品</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="modalSubmitBtn" type="button" class="btn btn-primary">{{modalBtn}}</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

@section scripts{
    <script type="text/javascript" src="~/Scripts/bootstrap-table.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap-table-zh-CN.js"></script>
    <script type="text/javascript" src="~/Scripts/common.js"></script>
    <script type="text/javascript" src="~/Views/Home/index.js"></script>
}

JS代码

/*index.js*/

$(document).ready(function () {
    var $table = $('#table');
    ;    //技术参数默认折叠显示长度

    $table.bootstrapTable({
        locale: 'zh-CN',
        url: '/product/getList',
        method: 'post',
        contentType: 'application/json',
        dataType: "json",
        toolbar: '#toolbar',                //工具按钮用哪个容器
        pagination: true,
        search: true,
        showRefresh: true,
        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页
        singleSelect: true,                 //单行选择
        pageNumber: ,                      //初始化加载第一页，默认第一页
        pageSize: ,                       //每页的记录行数
        pageList: [, , ],
        queryParams: function (params) {    //请求参数
            var temp = {
                pageSize: params.limit,                      //页面大小
                pageNo: ,    //页码
                search: $('.search input').val()
            };

            return temp;
        },
        responseHandler: function (res) {
            return {
                pageSize: res.pageSize,
                pageNumber: res.pageNo,
                total: res.total,
                rows: res.rows
            };
        },
        columns: [
            {
                title: '产品编号',
                field: 'id'
            },
            {
                title: '产品名称',
                width: ,
                field: 'name'
            },
            {
                title: '技术参数',
                field: 'tecParam',
                width: ,
                formatter: tecParamFormatter,
                events: {
                    "click .toggle": toggleText
                }
            },
            {
                title: '类型',
                field: 'type',
                formatter: typeFormatter
            },
            {
                title: '操作',
                formatter: operateFormatter,
                events: {
                    "click .mod": showUpdateModal,
                    "click .delete": deleteProduct
                }
            }
        ]
    });

    function tecParamFormatter(value, row, index) {
        ) {
            , textLength) + '...</span>&nbsp;<a class="toggle" href="javascript:void(0)">展开</a>';
        }
        return value;
    }

    function toggleText(e, value, row, index) {
        if (value == null) {
            return false;
        }

        var $tecParam = $(this).prev(".tec-param"),
            $toggle = $(this);

        ) { //折叠
            $tecParam.text(value.substr(, textLength) + "...");
            $toggle.text("展开");
        }
         && $tecParam.text().length <= textLength + ) {   //展开
            $tecParam.text(value);
            $toggle.text("折叠");
        }
    }

    function typeFormatter(value, row, index) {
        var type = "";
        ")
            type = "普通产品";
        ")
            type = "明星产品";
        return type;
    };

    function operateFormatter (value, row, index) {
        return '<a class="mod btn btn-info" href="javascript:void(0)">修改</a> '
            + '<a class="delete btn btn-danger" href="javascript:void(0)">删除</a>';
    };

    function showUpdateModal (e, value, row, index) {
        $("#productModalLabel").text("更新产品信息");
        $("#modalSubmitBtn").text("更新");

        $("#prodId").val(row.id);
        $("#prodId").attr("disabled", true);    //禁止修改id
        $("#prodName").val(row.name);
        $("#prodTecParam").val(row.tecParam);
        )
            $("#prodType").find('option[value="1001"]').attr("selected", true);
        )
            $("#prodType").find('option[value="1002"]').attr("selected", true);

        $("#modalSubmitBtn").unbind();
        $("#modalSubmitBtn").on("click", updateProduct);

        $("#productModal").modal("show");
    };

    function deleteProduct (e, value, row, index) {
        var product = {
            id: row.id
        };
        if (product.id === null || product.id === "") {
            return false;
        }

        Common.confirm({
            message: "确认删除该产品？",
            operate: function (result) {
                if (result) {
                    $.ajax({
                        type: "post",
                        url: "/product/delete",
                        contentType: "application/json",
                        data: JSON.stringify(product),
                        success: function (data) {
                            if (data !== null) {
                                if (data.result) {
                                    $("#table").bootstrapTable("refresh", { silent: true });
                                    tipsAlert('alert-success', '提示', '删除成功！');
                                }
                                else {
                                    tipsAlert('alert-warning', '提示', '删除失败！');
                                }
                            }
                        },
                        error: function (err) {
                            tipsAlert('alert-danger', '警告', '服务器异常，请稍后再试！');
                            console.log("error：", err.statusText);
                        }
                    });

                    return true;
                }
                else {
                    return false;
                }
            }
        });
    };

    var $search = $table.data('bootstrap.table').$toolbar.find('.search input');
    $search.attr('placeholder', '请输入编号、产品名称、技术参数搜索');
    $search.css(');

    $(".model .form-group input").on("click", function(){
        $(this).next(".tips").text("");
    });
});

var showAddModal = function () {
    $("#productModalLabel").text("新增产品");
    $("#modalSubmitBtn").text("新增");

    $("#prodId").val('');
    $("#prodName").val('');
    $("#prodTecParam").val('');

    $("#modalSubmitBtn").unbind();
    $("#modalSubmitBtn").on("click", addProduct);

    $("#productModal").modal("show");
};

var addProduct = function () {
    var product = {
        name: $("#prodName").val(),
        tecParam: $("#prodTecParam").val(),
        type: $("#prodType").val()
    };
    if (product.name == null || product.name == "") {
        $("#prodName").next(".tips").text("产品名称不能为空！");
        return false;
    }
    ) {
        $("#prodName").next(".tips").text("最多20个字!");
        return false;
    }
    ) {
        $("#prodTecParam").next(".tips").text("最多150个字!");
        return false;
    }

    $.ajax({
        type: "post",
        url: "/product/add",
        contentType: "application/json",
        data: JSON.stringify(product),
        success: function (data) {
            if (data !== null) {
                if (data.result) {
                    $("#table").bootstrapTable("refresh", { silent: true });
                    $("#productModal").modal('hide');
                    $("#prodId").val('');
                    $("#prodName").val('');
                    $("#prodTecParam").val('');
                    tipsAlert('alert-success', '提示', '新增成功！');
                }
                else {
                    tipsAlert('alert-warning', '提示', '新增失败！');
                }
            }
        },
        error: function (err) {
            tipsAlert('alert-danger', '警告', '服务器异常，请稍后再试！');
            console.log("error：", err.statusText);
        }
    });
};

var updateProduct = function () {
    var product = {
        id: $("#prodId").val(),
        name: $("#prodName").val(),
        tecParam: $("#prodTecParam").val(),
        type: $("#prodType").val()
    };
    if (product.name == null || product.name == "") {
        $("#prodName").next(".tips").text("产品名称不能为空！");
        return false;
    }
    ) {
        $("#prodName").next(".tips").text("最多20个字!");
        return false;
    }
    ) {
        $("#prodTecParam").next(".tips").text("最多150个字!");
        return false;
    }

    $.ajax({
        type: "post",
        url: "/product/update",
        contentType: "application/json",
        data: JSON.stringify(product),
        success: function (data) {
            if (data !== null) {
                if (data.result) {
                    $("#table").bootstrapTable("refresh", { silent: true });
                    $("#productModal").modal('hide');
                    $("#prodId").val('');
                    $("#prodName").val('');
                    $("#prodTecParam").val('');
                    tipsAlert('alert-success', '提示', '修改成功！');
                }
                else {
                    tipsAlert('alert-warning', '提示', '修改失败！');
                }
            }
        },
        error: function (err) {
            tipsAlert('alert-danger', '警告', '服务器异常，请稍后再试！');
            console.log("error：", err.statusText);
        }
    });
};