熟悉公司业务springboot和dataTable和validate在项目中的应用(1)

application.properties    配置文件

spring.profiles.active=dev    还加载哪些配置文件

spring.datasource.type=com.alibaba.druid.pool.DruidDataSource    配置数据源

server.port=8888    tomcat的端口号

logging.path=target/logs    log日志

增删改查的命名标准方式

//        /xxx   GET 首页 index()  index.html
//        /xxx/list POST 列表 list() ajax
//        /xxx/new  GET  到新建页 _new() _new.html
//        /xxx  POST   保存新增 create() ajax
//        /xxx/{id}/edit    到编辑页 edit() edit.html
//        /xxx/{id}  PUT     更新  update() ajax
//        /xxx/{id} DELETE 删除  delete() ajax
//        /xxx/{id} GET  显示   show()   show.html

//        /xxx/yyy  GET  到yyy业务    yyy()/toYyy() yyy.html
//        /xxx/{id}/yyy  GET  到yyy业务  yyy()/toYyy() yyy.html
//        /xxx/yyy POST/PUT  yyy业务的提交  yyy() ajax
//        /xxx/{id}/yyy POST/PUT yyy业务的提交  yyy() ajax

dadaTable

1.dataTable的表格的标题栏跟随页面滚动

var fixedHeaderOffset = 0;
if (App.getViewPort().width < App.getResponsiveBreakpoint('md')) {
    if ($('.page-header').hasClass('page-header-fixed-mobile')) {
        fixedHeaderOffset = $('.page-header').outerHeight(true);
    }
} else if ($('.page-header').hasClass('navbar-fixed-top')) {
    fixedHeaderOffset = $('.page-header').outerHeight(true);
} else if ($('body').hasClass('page-header-fixed')) {
    fixedHeaderOffset = 64; // admin 5 fixed height
}

var table = $('#dataTable').DataTable({
    processing: true,
    serverSide: true,
    stateSave: true,

是否显示搜索和筛选功能

filter: true,

发送ajax请求

ajax: {
    dataType: 'json',
    type: 'post',
    url: '/wx/weixin/list',
    data: {
        filter_EQB_real: function () {
            return $("select[name='filter_EQB_real']").val();
        }
    }
},

语言和其他

language: Amaz.dataTableLang,
fixedHeader: {
    header: true,
    headerOffset: fixedHeaderOffset
}

表格的结构

dom: "<'row'<'col-md-10 col-sm-12 text-left'f><'col-md-2 col-sm-12'l>r>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",

右上角的每页显示多少条的菜单,每页的默认显示条数,排序的方式

lengthMenu: [[10, 20, 30], [10, 20, 30]],
pageLength: 10,
pagingType: "bootstrap_full_number",
order: [[0, "desc"]],

表格的种要显示的数据

columns: [{
    data: "id",
    visible: false
}, {
    data: "accountName"
}, {
    data: "status",
    width: 60
}, {
    data: "real",
    render: function (data) {
        return data == false ? "否" : "是";
    },

}, {
    data: "envName",
    render: function (data, type, obj) {
        if (data != undefined && data != null && data != '') {
            return '<a class="btn btn-outline blue fun-edit-env"  data-toggle="modal">' + data + '</a>'
        } else {
            return '<a class="btn btn-outline yellow fun-edit-env" data-toggle="modal"><i class="fa fa-plane"></i></a>'
        }
    },
    sortable: false,
    width: 60
}, {
    data: function (obj) {
        var html = '<a href="/wx/weixin/' + obj.id + '/edit" class="btn btn-xs blue"><i class="fa fa-edit"></i></a> ';
        return html;
    },
    sortable: false,
    width: 60,
    class: "text-center"
}]

美化下拉框

$('#dataTable_length select').selectpicker();

搜索

$('#dataTable_filter').html($('.portlet-body .hide').html());
$('.portlet-body .hide').html("");
$("#dataTable_filter .fun-search").on('click', function () {
    table.draw();
});

add,新增

$("#add").click(function () {
    window.location.href = '/wx/process/new';
});

删除

$('body').on('click', '.fun-del', function () {
    var id = $(this).attr('data-id');
    bootbox.confirm("确定要删除数据?", function (result) {
        if (result) {
            $.post('/robot/part/' + id, {_method: 'delete'}, function () {
                table.draw();
            });
        }
    });
});

只要涉及到form的都要用validate

 validForm = function () {
        var form = $('#dataForm');
        if (form.length == 0) {
            return;
        }
        form.validate({
            errorElement: 'span',
            errorClass: 'help-block help-block-error',
            focusInvalid: false,
            ignore: "",
            rules: {},
            errorPlacement: function (error, element) {
                error.insertAfter(element);
            },

            highlight: function (element) {
                $(element).closest('.form-group').addClass('has-error');
            },

            unhighlight: function (element) {
                $(element).closest('.form-group').removeClass('has-error');
            },

            success: function (label) {
                label.closest('.form-group').removeClass('has-error').addClass('has-success');
            },
            submitHandler: function (form) {
                $(form).find(".form-actions button").hide();
                $.ajax({
                    url: form.action,
                    type: "POST",
                    data: $(form).serialize(),
                    error: function (request) {
                        bootbox.alert("Connection error");
                        $(form).find(".form-actions button").show();
                    },
                    success: function (data) {
                        if (data == "create") {
                            bootbox.confirm("提交成功,继续新增吗？", function (result) {
                                if (result) {
                                    Amaz.setRedirect("/robot/part/new");
                                } else {
                                    Amaz.setRedirect("/robot/part");
                                }
                            });
                        } else if (data == "update") {
                            bootbox.alert("修改成功");
                        } else {
                            bootbox.alert(data);
                        }
                        $(form).find(".form-actions button").show();
                    }
                });
            }
        });
        $(".form-actions button.default").click(function () {
            history.go(-1);
        });
    };
//生成wifi弹出消息设置
createWifiMessage = function () {
    var message = $("input[name='message']").val();
    if (message != undefined && message != null && message != ""){
        bootbox.alert(message);
    }
}