fullCalendar 刷新方法 1.6.3 版本
$('#calendar').fullCalendar('refetchEvents', function (event) {
return true;
});
js 数字转大写非中文
function rp(n) {
var cnum = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
var s = '';
n = '' + n; // 数字转为字版符串
for (var i = 0; i < n.length; i++) {
s += cnum[parseInt(n.charAt(i))];
}
return s;
}
like CONCAT('%',#{bannerName},'%') //mybatis的模糊查询
new SimpleDateFormat("yyyy-MM-dd").format(date); //date转string
remove(\''+row.id+ '\',\''+row.cardNumber+ '\') formatter传入多个参数
layer tips 属性
layer.tips(新加的内容,'选择节点',{time: 0, area: ['20%', '20%'], skin: 'layui-layer-rim', tips: [3, '#ffffff'], closeBtn: false});
time:为0时tips窗口不会消失
area:窗口大小设置
skin:官方的皮肤
tips:2 tips（默认）层的私有参数。支持上右下左四个方向，通过1-4进行方向设定。如tips: 3则表示在元素的下面出现。有时你还可能会定义一些颜色
closeBtn:右上脚的关闭按钮
示例：
layer.tips(‘老人暂无水浸数据’, ‘#bgWater’,{time: 3000,tipsMore: true,tips:[1, ‘#5BC0DE’]});
layer load方法 --加载视图
声明一个全局变量 【父窗口】
var ii='';
//弹出一个loading层
ii = layer.load();
//关闭方法
function closeLoad() {
layer.close(ii);
}
//调用父窗口方法 --关闭加载层
window.parent.closeLoad();
Jqery Trees属性
- 获取正在选中的树的id
$('#jstree').on('changed.jstree',function(e,data) {//当前选中节点的id
console.log(data.instance.get_node(data.selected[0]).id);
});
- 单选父子不级联
$('#jsTree').jstree({
'core': {
'data': tree,
"multiple": false//单选
},
"plugins": ["checkbox"],
"checkbox": {
"keep_selected_style": false,//是否默认选中
"three_state": false//父子级别级联选择
}
});
前端类型的样式优化属性
- table表格中对列与列之间，行与行之间的控制
/*控制tr之间的间距*/
border-spacing:0px 4px;
/*需要用border-collapse & border-spacing联合控制td的间距；*/
border-collapse:separate;
border-spacing:20px;
- 设定表格内容过多不换行
white-space: nowrap;
- 内容过多进行省略显示
- 给tabel添加样式
style="table-layout:fixed" - 给td添加样式
- 给tabel添加样式
"overflow": "hidden",
"text-overflow": "ellipsis",
"white-space": "nowrap"
- 设置div圆角
border-radius:5px 5px 0 0;
border-radius:5px !important; //设置优先级
- 设置单选框距离
<label class="radio-inline">
- 图片设置跟随容器自适应大小
.noone .someone{
/*设置图片自生硬*/
background-size:contain,cover;
width:100%;
height: auto;
}
- JQery选中事件详情
8.1 select选中事件
alert($("#sel option:selected").text());//方法一：获取select标签选中的option中的文本。
alert($("#sel").find("option:selected").text());//方法二：获取select标签选中的option中的文本。
alert($("#sel option:selected").val());//方法一：获取select标签选中的option中的value的值。
alert($("#sel").find("option:selected").val());//方法二：获取select标签选中的option中的value的值。
//------------------------------帅气的分割线，，下面有重点--------------------------------
//当option是这样的：<option>cc</option>。即没有value属性的时候。自然也就没有value值。
//这时候jquery就很纠结：写了段代码让我拿value的值，可是找到的option中根本没有value属性。
//算了，把option中 的文本拿出来给你吧。
//所以当选中<option>cc</option>这个option的时候，你会发现上边四个alert出来的值是一样的。都是option中的文本。
//想要拿到option中的value的值，首先option得有value属性啊！！！
8.2 select 默认显示
<option style="display: none;" value="">请选择</option>
8.2.1 select可搜索功能
$("#userId").chosen({
no_results_text: "没有找到结果！",//搜索无结果时显示的提示
search_contains:true, //关键字模糊搜索，设置为false，则只从开头开始匹配
allow_single_deselect:true, //是否允许取消选择
width:"100%"
});
8.3 二级ul li元素动态加载click事件
$(".clstwo ul").on("click", "li", function(e){
//方法区
});
8.4 ul il 样式tab切换
---样式
.timebtn li {
padding: 1px 8px;
border: 1px solid #ccc;
float: left;
list-style: none;
}
.timebtn .activeli {
background-color: #00A3FF;
color: #fff;
}
---------------------------------------------------------------------------------
<div class="ibox-tools">
<ul class="timebtn" id="orderNum">
<li class="activeli">周</li>
<li>月</li>
<li>年</li>
</ul>
</div>
//li点击事件
$("#order").on("click","li",function(){
if($(this).hasClass("activeli")){
return;
}else{
$("#order").find("li").removeClass("activeli");
$(this).addClass("activeli");
}
});
- Jqery validate无法校验select
ignore:":hidden:not(select)",
5.3 JQery Validate 对身份证及手机号的验证
var icon = "<i class='fa fa-times-circle'></i> ";
$.validator.addMethod("checkCardNo", function (value, element, params) {
var cardNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
return this.optional(element) || (cardNo.test(value));
}, icon + "请输入正确的身份证号码！");
$.validator.addMethod("checkPhone", function (value, element, params) {
var phone = /^1[3456789]\d{9}$/;
return this.optional(element) || (phone.test(value));
}, icon + "请输入正确的手机号码！");
使用后台验证
remote: {
url: "/live/validateByCard", //后台处理程序
type: "post", //数据发送方式
dataType: "json", //接受数据格式
data: { //要传递的数据
cardNo:function () {
return $("#oldCardNo").val()
}
}
}
后台处理方法 注意 返回的参数必须是true或者false
@ResponseBody
@PostMapping("/validateByCard")
public String validateByCard(String cardNo) {
List<UserBasicInfoDO> list = userBasicInfoService.list(new QueryWrapper<UserBasicInfoDO>().eq("card_no", cardNo).eq("del_flag", "0"));
if (list.size()>0){
return "false";
}
return "true";
}
Jqery实现点击图片显示方法图片,再次点击进行恢复原样式
- 添加style样式
/*全屏显示大图*/
.opacityBottom{
width: 100%;
height: 100%;
position: fixed;
background:rgba(0,0,0,0.8);
z-index:1000;
top: 0;
left: 0
}
.none-scroll{
overflow: hidden;
height: 80%;
}
.bigImg{
width:80%;
height: 80%;
left:10%; //可注释
top:10%; //可注释
position:fixed;
z-index: 10001;
}
添加
- 添加点击事件 给指定图片添加 imgClick(this)事件
【2019年8月21日20:09:56】 添加淡入淡出 进行视觉短暂优化
【2019年8月26日11:54:53】 添加动态缩放图片方式
function imgClick(i) {
var imgsrc = $(i).attr('src');
var opacityBottom = '<div id="opacityBottom" style="display: none"><img title="缩放" class="bigImg" src="'+ imgsrc +'" ></div>';
$(document.body).append(opacityBottom);
toBigImg();//变大函数
// 方法中可以通过设置top，left等参数来指定图片初始参数；--使用e-smart-zoom-jquery.js 使图片可放大
//实现此样式,需要引入e-smart-zoom-jquery.js及jquery
// $(".bigImg").smartZoom({
// 'left': '0px',
// 'top':'2px'
// })
}
function toBigImg(){
$("#opacityBottom").fadeIn();
$("#opacityBottom").fadeIn("slow");
$("#opacityBottom").fadeIn(5000);
$("#opacityBottom").addClass("opacityBottom");
$("#opacityBottom").show();
$("html,body").addClass("none-scroll");//下层不可滑动
$(".bigImg").addClass("bigImg");
/*隐藏*/
$("#opacityBottom").bind("click",clickToSmallImg);
$(".bigImg").bind("click",clickToSmallImg);
var imgHeight = $(".bigImg").prop("height");
function clickToSmallImg() {
$("html,body").removeClass("none-scroll");
$("#opacityBottom").remove();
}
}
2019年8月26日10:36:43 -> 优化 增加title及光标样式
‘img title=“查看大图” οnclick=“imgClick(this)” src="http://49.4.82.173:10000’+value+’" style=“cursor: pointer; width: 100px;height: 50px;” ';
添加使用富文本编辑器并可以回显
- 创建div
<div class="form-group">
<label class="col-sm-3 control-label">内容：</label>
<div class="col-sm-8">
<input id="content" name="content" th:value="${introduce.content}" class="form-control" type="hidden">
<div class="ibox-content no-padding">
<div id="content_sn" class="summernote"></div>
</div>
</div>
</div>
- 给div创建文本编辑器
$().ready(function() {
$('.summernote').summernote({
height : '220px',//宽度
lang : 'zh-CN',//语言
callbacks: {//图片上传事件
onImageUpload: function(files, editor, $editable) {
sendFile(files);
}
}
});
var text = $("#content").val();
$("#content_sn").summernote('code',text);
validateRule();
});
- 在更新的时候给对象属性赋值
var content_sn = $("#content_sn").summernote('code');
$("#content").val(content_sn);
- sendFile(files);事件
//编辑器新增的ajax上传图片函数
function sendFile(files, editor, $editable) {
var size = files[0].size;
if((size / 1024 / 1024) > 2) {
alert("图片大小不能超过2M...");
return false;
}
var formData = new FormData();
formData.append("file", files[0]);
$.ajax({
data : formData,
type : "POST",
url : "/system/versionUpgrade/uploadFile", // 图片上传出来的url，返回的是图片上传后的路径，完整路径需http://ip:端口
cache : false,
contentType : false,
processData : false,
dataType : "json",
success: function(data) {//data是返回的hash,key之类的值，key是定义的文件名
console.log(data.imgSrc);
$('.summernote').summernote('insertImage',"http://49.4.82.173:10003"+data.imgSrc);
},
error:function(){
alert("上传失败");
}
});
}
- Thymeleaf 进行日期格式化
<span th:text="${#dates.format(billingForm.startTime,'yyyy-MM-dd HH:mm:ss')}">4564546</span>
6.1 thymeleaf 代码提示
<html xmlns:th="http://www.thymeleaf.org">
6.2 js使用thymeleaf的模板
th:inline=“javascript”
6.2 thymeleaf进行循环遍历
th:each属性用于迭代循环，
语法：th:each="obj,iterStat:${objList}"
迭代对象可以是Java.util.List,java.util.Map,数组等;
iterStat称作状态变量，属性有：
index:当前迭代对象的index（从0开始计算）
count: 当前迭代对象的index(从1开始计算)
size:被迭代对象的大小
current:当前迭代变量
even/odd:布尔值，当前循环是否是偶数/奇数（从0开始计算）
first:布尔值，当前循环是否是第一个
last:布尔值，当前循环是否是最后一个
-------------------------------------
数组循环：
<div th:each="arrayS:${arrays}">
<div th:text="${arrayS}"></div>
</div>
------------------------------------
Map循环：
<div th:each="mapS:${map}">
<div th:text="${mapS}"></div>
</div>
</li>
- 使用datetimepicker插件进行显示到时分秒
$('#startTime,#endTime').datetimepicker({
format: 'yyyy-mm-dd hh:ii:00',
autoclose: true,
language: 'zh-CN',
minuteStep: 10
});
- select回显
<select οnchange="getChilds(this.value)" class="form-control select2" id="catId" name="catId">
<option value=""> -- 请选择 -- </option>
<option th:selected="${goods.catId eq c.id}" th:each="c:${categoryList}" th:value="${c.id}" th:text="${c.name}" value="1">蔬菜</option>
</select>
8.1 刷新之后数据擦除
$('#searchState')[0].selectedIndex=0;
$('#searchSex')[0].selectedIndex=0;
- 使用SpringBoot datetimepicker插件 只选择到年月日
$("#datepickero").datetimepicker({
language: 'zh-CN',
weekStart: 0,
todayBtn: true,
autoclose: true,
todayHighlight: true,
startView: 2,
minView: 2,
forceParse: 0,
//初始化时设置时间格式即可
format:'yyyy-mm-dd',
clearBtn:true
});
9.1 只选择时分秒
$('.form-time').datetimepicker({
format:"hh:ii:00",
language:"zh-CN",
todayBtn:true,
minuteStep: 1,//分钟间隔1分钟
autoclose: 1,//选择后自动关闭
minView: 0,
startView: 1
});
10.1 Echarts 图表的自适应
//Echart的自适应 ->window.onresize事件会在窗口或框架被调整大小时发生。
window.onresize = function () {
myChart1.resize(); //resize方法是监听包含canvas的div的元素的变化的，
//根据其变化改变自身大小
}
java 类型的快捷开发
日期类型的格式化
- 后台传入前台格式化
@JsonFormat(pattern="yyyy-MM-dd HH:mm:ss",timezone = "GMT+8")
private Date time;
- 前台传入后台时候
@DateTimeFormat(pattern=”yyyy-MM-dd HH:mm:ss”) 【这个是可以和上面的注解一块儿使用的】
194
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
