若依集成前端组件

2020-09-19

字数统计: 638字 | 阅读时长≈ 2分

序言

优秀的后台框架若依，有兴趣的小伙伴可以了解一下。若依官网，若依为我们提供了很多有用的组件，在开发过程中会需要使用到。文档地址，记录一下使用中的点。

1、下拉搜索select2

1.1 引入样式和js

1 2	<th:block th:include="include :: select2-css" /> <th:block th:include="include :: select2-js" />

这个组件简单好用，但是有一个小点需要注意，当你在搜索栏中使用select2时，点击”重置”按钮，下拉框中显示的内容不会变化（重置功能没毛病，只是下拉框的内容没变）
解决办法：

1
2
3

function select2_reset() {
    $(".m-b").val(null).trigger('change');
}

注意：需要在”重置”按钮的点击事件里加上这个方法，多个方法分号隔开

1 2	<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset(); select2_reset();"> <i class="fa fa-refresh"></i> 重置</a>

2、搜索自动补全插件bootstrap-typeahead

2.1 引入js

1	<th:block th:include="include :: bootstrap-typeahead-js" />

这个组件被我同时吐槽说每次点击了提示的选项还需要去点击”搜索”按钮才能实现搜索功能，多此一举，所以记录一下点击完选项自动搜索的实现方式：

$.get(ctx + "自己的接口", function(data){
	$("#typeahead-demo-3").typeahead({
		source: data.value,
		//选择项之后的事件，item是当前选中的选项
		afterSelect: function (item) {
			搜索方法；
		}
	});
},'json');

3、表单验证

jquery-validate的应该是大家都熟知的插件，若依已经定义好了一些常见的验证方法，在static/ajax.libs/validate/jquery.validate.extend.js里面。当然，你也可以仿造着自定义一些验证方法：

//校验出生日期
jQuery.validator.addMethod("isBirth",function(value,element){
	var birth = /^(19|20)\d{2}-(1[0-2]|0?[1-9])-(0?[1-9]|[1-2][0-9]|3[0-1])$/;
	return this.optional(element) || (birth).test(value);
},"出生日期格式示例2000-01-01");

然后和默认的方法一样使用即可。

4、时间插件bootstrap-datetimepicker和laydate

这个在代码生成里都有，也算是若依使用最多的组件了，记录一下bootstrap-datetimepicker改变可选日期试图：

$("input[name='startTime1']").datetimepicker({
	format: 'hh:ii',
	startView: 'day',
	maxView: 'day',
	minView: 'hour',
	minuteStep: 5,
	pickerPosition: "bottom-left",
	title: '请选择时间',
	autoclose: true
});

本文作者： tenyears
本文链接： https://tenyears94.gitee.io/2020/09/19/若依集成前端组件/
版权声明： 本博客所有文章转载请注明出处！