熟悉公司业务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);
}
}