bootstrap之增删改查

后台使用spring boot和spring cloud等。前端使用bootstrap框架进行基本操作，项目采用前后端分离。

1、查询

<!-- HTML中代码  此中是简写-->

<script src="....js"></script>

<div class="table-responsive">
    <table id="ttCompanyDemoDataTable" class="table">
    </table>
</div>

//对应以上HTML的js中的代码
 $('#ttCompanyDemoDataTable').bootstrapTable({
        silent: true,
        sidePagination: "server",
        queryParamsType: '', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort -----> 设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumber
        search: true, //搜索框
        formatSearch: function () {
            return '道路名称,区域名称';
        },
        striped: true, //是否显示行间隔色
        showRefresh: true, //刷新按钮
        minimumCountColumns: 2, //最少允许的列数
        clickToSelect: true, //点击选中
        singleSelect: true,
        pagination: true, //分页
        pageNumber: 1, //初始化加载第一页，默认第一页
        pageSize: 20, //每页的记录行数（*）
        pageList: [20, 50, 100, 200],  //可供选择的每页的行数（*）
        paginationLoop: false, //循环翻页
        sortable: false, //是否启用排序
        escape: true, //html字符转义
        toolbar: '#toolbar',
        columns: [
            {field: 'state', checkbox: true},
            {field: 'userName', title: '用户名', sortable: false, align: 'left'},
            {field: 'userPassword', title: '密码', sortable: false, align: 'left'},
            {field: 'userRealname', title: '真实姓名', sortable: false, align: 'left'},
            {
                field: 'dataEnable', title: '数据状态', sortable: false, align: 'left',
                formatter: function (value) {
                    if (value) {
                        if (value == 1) {
                            return '有效';
                        } else if (value == -1) {
                            return '无效';
                        } else {
                            return '未知';
                        }
                    }
                }
            }

        ],
        ajax: function (params) {
            //定义条件
            var pageSize=params.data.pageSize;
            var pageNumber=params.data.pageNumber;
            var dataEnable=$('#dataEnableSelect').val();
            var searchText=params.data.searchText;
            //发起请求
            $.ajax({
                url: EW_API_BASE_PATH + '/udp/api/service/ttCompanyDemo/list', <!--后端控制台路径 -->
                type: 'POST',
                async: true,
                //contentType: "application/json;charset=utf-8",
                dataType: "json",
                //data: JSON.stringify(params.data),
                data: {dataEnable:dataEnable,searchText:searchText,pageSize:pageSize,pageNumber:pageNumber},
                headers: {
                    'companyUserToken': getToken(),
                    'rmsServiceCode': 'WHJT_SERVICE_TtCompanyDemo_list'  <!-- 接口路径 -->
                },
                success: function (data) {
                    params.success(data.result);
                }
            });
        }
    });

2、新增

  <a id="addTtCompanyDemoBtn" class="waves-effect waves-button" href="javascript:;">
            <i class="zmdi zmdi-plus"></i>
            新增
      </a>
//新增按钮
    $('#addTtCompanyDemoBtn').click(function () {
        //弹框
        $.confirm({
            title: '新增',
            content: 'url:/whjt-ui/module/whjt/xtgl/ttCompanyDemo/add.html',
            closeIcon: true,
            boxWidth: '300px',
            useBootstrap: false,
            buttons: {
                save: {
                    text: '保存',
                    btnClass: 'waves-effect waves-button',
                    action: function () {
                        //拼装对象
                        var dataForm=$('#dataForm').serialize();
                        var userName=$('#userName').val();
                        var userPassword=$('#userPassword').val();
                        var userRealname=$('#userRealname').val();
                        //定义返回值
                        var rv = false;
                        //数据校验
                        if(userName==''||userName==null) {
                            $('#userName').focus();
                            showToastr({
                                "positionClass": "toast-top-center",
                            }, "warning", "提醒", "请输入用户名");
                            return rv;
                        }
                        if(userPassword==''||userPassword==null) {
                            $('#userPassword').focus();
                            showToastr({
                                "positionClass": "toast-top-center",
                            }, "warning", "提醒", "请输入密码");
                            return rv;
                        }
                         if(userRealname==''||userRealname==null){
                             $('#userRealname').focus();
                             showToastr({
                                 "positionClass": "toast-top-center",
                             },"warning","提醒","请输入真实姓名");
                             return rv;

                        } else{
                        //发起请求
                        $.ajax({
                            url: EW_API_BASE_PATH + '/udp/api/service/ttCompanyDemo/save',
                            type: 'POST',
                            async: false,
                            //contentType: "application/json;charset=utf-8",
                           // dataType: "json",  //Ajax无返回值时，设置dataType会报错
                            headers: {
                                'companyUserToken': getToken(),
                                'rmsServiceCode': 'WHJT_SERVICE_TtCompanyDemo_save'
                            },
                            data: dataForm,
                            success: function () {
                                rv = true;
                                $('#ttCompanyDemoDataTable').bootstrapTable('refresh');
                            }
                        });
                        //返回
                        return rv;
                       }

                    }
                }
            }
        });
    });
add.html代码部分

<div id="addTtCompanyDemoDiv">
    <form id="dataForm">
        <div class="form-group">
            <label class="form-label" for="userName">用户名:</label>
            <input id="userName" name="userName" type="text" class="form-control" placeholder="请填写用户名"/>
        </div>
        <div class="form-group">
            <label class="form-label" for="userPassword">密码:</label>
            <input id="userPassword" name="userPassword" type="text" class="form-control" placeholder="请填写密码"/>
        </div>
        <div class="form-group">
            <label class="form-label" for="userRealname">真实姓名:</label>
            <input id="userRealname" name="userRealname" type="text" class="form-control" placeholder="请填写真实姓名"/>
        </div>

        <input type="hidden" id="dataEnable" name="dataEnable" value="1">
    </form>
</div>