bootstrap-table简单应用

最新推荐文章于 2024-05-23 11:57:15 发布

LXChild

最新推荐文章于 2024-05-23 11:57:15 发布

阅读量1.1k

点赞数

分类专栏：前端组件

本文链接：https://blog.csdn.net/LXChild/article/details/77990778

版权

前端组件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>一线城市维护</title>
    <link href="${ctx}/static/css/bootstrap/bootstrap.css" rel="stylesheet"/>
    <link href="${ctx}/static/css/bootstrap/bootstrap-table.css" rel="stylesheet"/>
    <link href="${ctx}/static/fonts/font-awesome.css" rel="stylesheet"/>
</head>
<body>
<div class="container">
    <div id="toolbar" class="btn-group">
        <button id="btn-add" type="button" class="btn btn-default" data-toggle="modal">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
        </button>
        <button id="btn-edit" type="button" class="btn btn-default" data-toggle="modal">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
        </button>
        <button id="btn-delete" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除
        </button>
    </div>
    <table id="city-list-table"></table>
    <div id="city-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="edit-city"
         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 id="modal-title" class="modal-title">编辑</h4>
                </div>
                <div class="modal-body">
                    <input id="id-city-modal" name="id" type="hidden"/>
                    <div class="form-group">
                        <label for="name-city-modal">城市名称</label>
                        <input id="name-city-modal" name="cityName" class="form-control" style="margin-bottom: 13px"
                               type="text" placeholder="请输入城市名称" required="required"/>
                    </div>
                    <div class="form-group">
                        <label for="type-city-modal">城市等级</label>
                        <select id="type-city-modal" name="cityType" class="form-control"
                                style="margin-bottom: 13px"
                                readonly="readonly" disabled="disabled">
                            <option value="1">一线城市</option>
                            <option value="2">二线城市</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="organization-code-city-modal">组织编号</label>
                        <input id="organization-code-city-modal" name="organizationCode" class="form-control "
                               placeholder="请输入组织编号" required="required" style="margin-bottom: 13px"/>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="btn-city-confirm" class="btn btn-primary" onclick="addOrUpdate()">保存</button>
                    <button id="btn-city-cancel" class="btn" data-dismiss="modal">取消</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <div id="info-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="result"
         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">温馨提示</h4>
                </div>
                <div class="modal-body">
                    <h5 id="info-modal-message"></h5>
                </div>
                <div class="modal-footer">
                    <button id="btn-confirm" class="btn btn-primary">确定</button>
                    <button id="btn-cancel" class="btn" data-dismiss="modal">取消</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>
</body>
<script src="${ctx}/static/js/bootstrap/jquery-3.2.0.js"></script>
<script src="${ctx}/static/js/bootstrap/bootstrap.js"></script>
<script src="${ctx}/static/js/bootstrap/bootstrap-table.js"></script>
<script src="${ctx}/static/js/bootstrap/bootstrap-table-zh-CN.js"></script>
<script src="${ctx}/static/js/uc/city.js"></script>
</html>

/**
 * Created by LXChild on 24/04/2017.
 */
$(function () {
    //1.初始化Table
    var oTable = new TableInit();
    oTable.Init();

    //2.初始化Button的点击事件
    var oButtonInit = new ButtonInit();
    oButtonInit.Init();
});

var TableInit = function () {
    var oTableInit = {};
    //初始化Table
    oTableInit.Init = function () {
        $('#city-list-table').bootstrapTable({
            url: 'city/list', //请求后台的URL（*）
            method: 'GET', //请求方式（*）
            dataType: 'json',
            toolbar: '#toolbar', //工具按钮用哪个容器
            striped: true, //是否显示行间隔色
            cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true, //是否显示分页（*）
            sortable: false, //是否启用排序
            sortOrder: "asc", //排序方式
            queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1, //初始化加载第一页，默认第一页
            pageSize: 10, //每页的记录行数（*）
            pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
            search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,
            showColumns: true, //是否显示所有的列
            showRefresh: false, //是否显示刷新按钮
            minimumCountColumns: 2, //最少允许的列数
            clickToSelect: true, //是否启用点击选中行
            height: 600, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "id", //每一行的唯一标识，一般为主键列
            showToggle: false, //是否显示详细视图和列表视图的切换按钮
            cardView: false, //是否显示详细视图
            detailView: false, //是否显示父子表
            columns: [{
                radio: true
            }, {
                field: 'cityName',
                title: '城市名称'
            }, {
                field: 'cityType',
                title: '城市等级',
                formatter: oTableInit.cityTypeFormat
            }, {
                field: 'organizationCode',
                title: '机构代码'
            }, {
                title: "查看门店",
                formatter: oTableInit.operatorFormat
            }],
            //注册加载子表的事件。注意下这里的三个参数！
            onExpandRow: function (index, row, $detail) {
                // 初始化子表
                var oSubTableInit = new SubTableInit();
                oSubTableInit.Init(index, row, $detail);
            }
        });
    };

    //得到查询的参数
    oTableInit.queryParams = function (params) {
        var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            limit: params.limit, //页面大小
            offset: params.offset, //页码
            cityName: params.search
        };
        return temp;
    };

    oTableInit.cityTypeFormat = function (value, row, index) {
        if (value === 1) {
            return '一线城市';
        } else {
            return '二线城市';
        }
    };

    oTableInit.operatorFormat = function (value, row, index) {
        return '<a class="detail-icon" href="#"><i class="glyphicon glyphicon-plus icon-plus"></i></a>';
    };

    return oTableInit;
};

//初始化子表格
var SubTableInit = function () {
    var oTableInit = {};
    var organizationCode;
    oTableInit.Init = function (index, row, $detail) {
        organizationCode = row.organizationCode;
        var cur_table = $detail.html('<table></table>').find('table');
        $(cur_table).bootstrapTable({
            url: 'organization/list',
            method: 'GET',
            dataType: 'json',
            striped: true, //是否显示行间隔色
            cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true, //是否显示分页（*）
            sortable: false, //是否启用排序
            sortOrder: "asc", //排序方式
            sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1, //初始化加载第一页，默认第一页
            pageSize: 10,
            pageList: [10, 25],
            minimumCountColumns: 2, //最少允许的列数
            clickToSelect: true,
            uniqueId: "id",
            showToggle: false, //是否显示详细视图和列表视图的切换按钮
            cardView: false, //是否显示详细视图
            detailView: false,//父子表
            queryParams: oTableInit.queryParams,//传递参数（*）
            columns: [{
                field: 'name',
                title: '门店名称'
            }, {
                field: 'orgType',
                title: '机构类别',
                formatter: oTableInit.orgTypeFormat
            }, {
                field: 'code',
                title: '机构代码'
            }]
        });
    };
    //得到查询的参数
    oTableInit.queryParams = function (params) {
        if (organizationCode === "undefined" || organizationCode === null) {
            showInfoModal("系统异常，请联系管理员");
            return null;
        }
        var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            limit: params.limit, //页面大小
            offset: params.offset, //页码
            organizationCode: organizationCode
        };
        return temp;
    };

    oTableInit.orgTypeFormat = function (value, row, index) {
        if (value === "SHOP") {
            return "门店";
        }
        return value;
    };
    return oTableInit;
};

var infoModal = $("#info-modal");
var infoModalMessage = $("#info-modal-message");
var btnConfirm = $("#btn-confirm");
var btnCancel = $("#btn-cancel");

var cityTable = $('#city-list-table');

var ButtonInit = function () {
    var oInit = {};
    var postdata = {};

    oInit.Init = function () {
        var addBtn = $("#btn-add");
        var editBtn = $("#btn-edit");
        var deleteBtn = $("#btn-delete");
        //初始化页面上面的按钮事件
        editBtn.click(function (event) {
            event.preventDefault();//使a自带的方法失效，即无法调整到href中的URL(http://www.baidu.com)
            editBtn.removeAttr('data-target');
            var organizationCityDictionary = cityTable.bootstrapTable('getSelections')[0];
            // 如果尚未选择
            if (!isChosen(organizationCityDictionary)) {
                return;
            }

            $("#modal-title").html("编辑");
            editBtn.attr('data-target', "#city-modal");

            $("#id-city-modal").val(organizationCityDictionary.id);
            $("#name-city-modal").val(organizationCityDictionary.cityName);
            if (organizationCityDictionary.cityType === 1) {
                $("#type-city-modal").val(1);
            } else if (organizationCityDictionary.cityType === 2) {
                $("#type-city-modal").val(2);
            }
            $("#organization-code-city-modal").val(organizationCityDictionary.organizationCode);
        });
        addBtn.click(function (event) {
            addBtn.removeAttr('data-target');
            clearCityModal();
            $("#modal-title").html("添加");
            addBtn.attr('data-target', "#city-modal");
        });
        deleteBtn.click(function (event) {
            var organizationCityDictionary = cityTable.bootstrapTable('getSelections')[0];

            // 如果尚未选择
            if (!isChosen(organizationCityDictionary)) {
                return;
            }

            var options = cityTable.bootstrapTable('getOptions');
            showConfirmModal("是否要删除该城市：" + organizationCityDictionary.cityName);
            btnConfirm.click(function (event) {
                $.ajax({
                    type: "DELETE",
                    url: "city/" + organizationCityDictionary.id,
                    success: function (result) {
                        showInfoModal('删除成功');
                        $('#city-list-table').bootstrapTable('refresh', {silent: true, pageNumber: options.pageNumber});
                    },
                    error: function (result) {
                        showInfoModal('删除失败\n' + result.responseText);
                        $('#city-list-table').bootstrapTable('refresh', {silent: true});
                    }
                });
            });
        })
    };
    return oInit;
};


function addOrUpdate() {
    var id = $("#id-city-modal").val();
    var cityName = $("#name-city-modal").val();
    var cityType = $("#type-city-modal").val();
    var organizationCode = $("#organization-code-city-modal").val();

    if (isEmpty(cityName) || isEmpty(cityType) || isEmpty(organizationCode)) {
        showInfoModal('参数不能为空');
        return;
    }

    var options = cityTable.bootstrapTable('getOptions');
    // 如果未更新，则将页面导航到当前页
    var page = options.pageNumber;
    // 如果为新增城市，则将页面导航到最后一页
    if (id === "undefined" || id === null || id === "") {
        page = options.totalPages;
    }
    // 如果最后一页已经满了，就将页面设置到下一页
    if (options.totalRows % options.pageSize === 0) {
        page += 1;
    }

    $('#city-modal').modal('hide');

    $.ajax({
        type: "POST",
        url: "city",
        //提交的数据
        data: {id: id, cityName: cityName, cityType: cityType, organizationCode: organizationCode},
        success: function (result) {
            showInfoModal('保存成功');
            $('#city-list-table').bootstrapTable('refresh', {silent: true, pageNumber: page});
        },
        error: function (result) {
            showInfoModal('保存失败\n' + result.responseText);
            $('#city-list-table').bootstrapTable('refresh', {silent: true, pageNumber: page});
        }
    });
}

function isChosen(organizationCityDictionary) {
    if (typeof(organizationCityDictionary) === "undefined" || organizationCityDictionary === null) {
        showInfoModal("请先选择城市");
        return false;
    }
    return true;
}

function showInfoModal(message) {
    btnConfirm.hide();
    btnCancel.html("关闭");
    infoModalMessage.html(message);
    infoModal.modal('show');
}

function showConfirmModal(message) {
    btnConfirm.show();
    btnCancel.html("取消");
    infoModal.modal('show');
    infoModalMessage.html(message);
}

function isEmpty(param) {
    return param === 'undefined' || param === null || param === '';
}

function clearCityModal() {
    $("#id-city-modal").val('');
    $("#name-city-modal").val('');
    $("#organization-code-city-modal").val('');
}

LXChild

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap-table简单应用

<%@ page contentType="text/html;charset=UTF-8" language="java" %><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><c:set var="ctx" value="${pageContext.request.contextPath}"/><html><
复制链接

扫一扫