若依框架文档开发手册----开发中常用功能模块（上）:https://developer.aliyun.com/article/1418616
全局
找到 ry-ui.js 将这几个属性设置为false即可
表格初始化完成后执行的回调
其实就是BootstarpTable的回调函数 网上有很多介绍 这里直接放怎么使用就不介绍了
onLoadSuccess: function (data) { }
用法:
<script th:inline="javascript"> $(function () { var options = { url: prefix + "/list", createUrl: prefix + "/add", updateUrl: prefix + "/edit/{id}", removeUrl: prefix + "/remove", exportUrl: prefix + "/export", modalName: "车辆信息", fixedColumns: true, // 是否启用冻结列（左侧） fixedNumber: 7, // 列冻结的个数（左侧） rightFixedColumns: false, // 是否启用冻结列（右侧） rightFixedNumber: 1, columns: [{ checkbox: true }, { field: 'id', title: '车辆编号', visible: false }, ], onLoadSuccess: function (data) { console.log("页面初始化完成后会调用一次本方法"); }, }; $.table.init(options); }); </script>
表格固定左|右列后,滚动条被覆盖的bug以及解决
找到bootstrap-table-fixed-columns.js 的224行 heigth属性值减13就好了
更改后:
this.$fixedBody.css({ width: this.$fixedHeader.width(), height: height-13, top: top + 1 }).show();
其他
JS循环
添加个链接这个博主写的很详细
validator
1、动态校验提示信息
来源:
$.validator.addMethod('PD_password', function (value, element) { var len = value.length; if(len<6){ $(element).data('error-msg','长度不能少于6位'); return false; } if(len>15){ $(element).data('error-msg','长度不能大于15位'); return false; } return true; }, function(params, element) { return $(element).data('error-msg'); });
2、清空提示信息
$("#form-consignor-add").validate().resetForm();
3、单独校验指定输入框
// 某个表单里的指定行 $("#form-xxx").validate().element($("#xxx"))
4、validate使用tooltip提示错误信息
$("#form-add").validate({ rules: { }, // 下边这些是重要的 unhighlight: function (element, errorClass, validClass) { //验证通过 $(element).tooltip('destroy').removeClass(errorClass); }, errorPlacement: function (error, element) { if ($(element).next("div").hasClass("tooltip")) { $(element).attr("data-original-title", $(error).text()).tooltip("show"); } else { $(element).attr("title", $(error).text()).tooltip("show"); } }, });
放大图片
有时候为了页面美观显示的图片比较小 只能看到缩略图 但是在某些情况下又想看到放大后的图片 这时候就需要图片放大功能了 layui的就不介绍了 这里介绍两种其他的
- 放大镜方法图片(鼠标悬浮在缩略图上就可以放大)
- 弹出层放大图片(点击弹出遮罩层,放大图片)
放大镜放大:
使用 jQuery Zoom Plugin插件
github: github.com/elevateweb/…
Html
<img id="zoom_01" src='images/small/image1.png' data-zoom-image="images/large/image1.jpg"/> <!-- src 指向的是缩略图 data-zoom-image指向的是大图 (可以指向同一个图片 设置当前img的宽高缩小显示图片 当鼠标悬浮就会显示未缩小的图片了)-->
JQuery
有六种显示效果 根据需要选择 推荐第一种 如果需要可以访问文档看它的其他属性
$('#zoom_01').elevateZoom({});//默认效果 $('#zoom_01').elevateZoom({ //内置镜头 zoomType: "inner",//类型：内置镜头 cursor: "crosshair", //光标：十字 zoomWindowFadeIn: 500,//镜头窗口淡入速度 zoomWindowFadeOut: 750 //镜头窗口淡出速度 }); $("#zoom_01").elevateZoom({ //镜头聚焦 zoomType: "lens",//类型：透镜效果 lensShape: "round", //透镜形状：圆形 lensSize: 200 //透镜尺寸：长和宽：200px }); $("#zoom_01").elevateZoom({ //淡入/淡出设置 zoomWindowFadeIn: 500,//镜头窗口淡入速度 zoomWindowFadeOut: 500,//镜头窗口淡出速度 lensFadeIn: 500,//透镜淡入速度 lensFadeOut: 500//透镜淡出速度 }); $("#zoom_01").elevateZoom({ //动画 easing: true //是否开启动画效果 }); $("#zoom_01").elevateZoom({ //鼠标滚动 scrollZoom: true //是否开启鼠标滚动 });
弹出层放大:
这个就是弹出一个遮罩层 显示图片 没什么好说的直接是上代码吧
缩略图位置:
注意class为:pimg 下边会用到 <img src='images/image1.png' class="pimg"/>
在html最下边 添加下边这一段代码(遮罩层)
注意:z-index:2; 为遮罩层显示的高度如果想显示在最上层直接将2改为9999就行了
<div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;"> <div id="innerdiv" style="position:absolute;"> <img id="bigimg" style="border:5px solid #fff;" src="" /> </div> </div>
JS:
<script> $(function(){ $(".pimg").click(function(){ var _this = $(this);//将当前的pimg元素作为_this传入函数 imgShow("#outerdiv", "#innerdiv", "#bigimg", _this); }); }); function imgShow(outerdiv, innerdiv, bigimg, _this){ var src = _this.attr("src");//获取当前点击的pimg元素中的src属性 $(bigimg).attr("src", src);//设置#bigimg元素的src属性 /*获取当前点击图片的真实大小，并显示弹出层及大图*/ $("<img/>").attr("src", src).load(function(){ var windowW = $(window).width();//获取当前窗口宽度 var windowH = $(window).height();//获取当前窗口高度 var realWidth = this.width;//获取图片真实宽度 var realHeight = this.height;//获取图片真实高度 var imgWidth, imgHeight; var scale = 0.8;//缩放尺寸，当图片真实宽度和高度大于窗口宽度和高度时进行缩放 if(realHeight>windowH*scale) {//判断图片高度 imgHeight = windowH*scale;//如大于窗口高度，图片高度进行缩放 imgWidth = imgHeight/realHeight*realWidth;//等比例缩放宽度 if(imgWidth>windowW*scale) {//如宽度扔大于窗口宽度 imgWidth = windowW*scale;//再对宽度进行缩放 } } else if(realWidth>windowW*scale) {//如图片高度合适，判断图片宽度 imgWidth = windowW*scale;//如大于窗口宽度，图片宽度进行缩放 imgHeight = imgWidth/realWidth*realHeight;//等比例缩放高度 } else {//如果图片真实高度和宽度都符合要求，高宽不变 imgWidth = realWidth; imgHeight = realHeight; } $(bigimg).css("width",imgWidth);//以最终的宽度对图片缩放 var w = (windowW-imgWidth)/2;//计算图片与窗口左边距 var h = (windowH-imgHeight)/2;//计算图片与窗口上边距 $(innerdiv).css({"top":h, "left":w});//设置#innerdiv的top和left属性 $(outerdiv).fadeIn("fast");//淡入显示#outerdiv及.pimg }); $(outerdiv).click(function(){//再次点击淡出消失弹出层 $(this).fadeOut("fast"); }); } </script>
新建标签页
若依已经对创建新的标签页已经进行封装 JS方法为: createMenuItem()
1、 $.modal.openTab()
现在 在ry-ui.js里已经又对新建菜单页(createMenuItem)进行了封装
// 方式1 打开新的选项卡 function dept() { var url = ctx + "system/dept"; $.modal.openTab("部门管理", url); } // 方式2 选卡页同一页签打开 function dept() { var url = ctx + "system/dept"; $.modal.parentTab("部门管理", url); } // 方式3 html创建 <a class="menuItem" href="/system/dept">部门管理</a>
2、createMenultem
// 要打开的地址 var url=prefix+"/details?userId="+userId; // 调用createMenuItem()方法 1参:要打开的地址 ,2参:标签页名称 createMenuItem(url, "用户详情");
注意:
- 如果提示调用 createMenuItem of undefined 那就记得引入 common.js 生成的代码里默认会引入
- 提示random of undefined 就引入ry-ui.js
<script th:src="@{/ruoyi/js/common.js?v=3.2.0}"></script> <script th:src="@{/ruoyi/js/ry-ui.js?v=3.2.0}"></script>
方法源代码:
源代码就不贴出来了 贴出来也没什么意义 位置:
common.js --> createMenuItem(dataUrl, menuName)
关闭标签页
// 源代码在index.js里 $('.tabCloseCurrent').on('click', function () { $('.page-tabs-content').find('.active i').trigger("click"); }); // common.js增加了一个 closeItem方法 function closes() { // 关闭当前页 closeItem(); // 关闭指定Item页, 123为指定的选项卡Id closeItem(123); }
输入框锁定
这个相信大家都会 还是再写一下吧 这段话是从网站上直接复制过来的
disabled 属性规定应该禁用 input 元素，被禁用的 input 元素，不可编辑，不可复制，不可选择，不能接收焦点,后台也不会接收到传值。设置后文字的颜色会变成灰色。disabled 属性无法与
//disabled 属性无法与 <input type="hidden">一起使用。 示例：<input type="text" disabled="disabled" />
readonly 属性规定输入字段为只读可复制，但是，用户可以使用Tab键切换到该字段，可选择,可以接收焦点，还可以选中或拷贝其文本。后台会接收到传值. readonly 属性可以防止用户对值进行修改。
// readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。 示例：<input type="text" readonly="readonly">
readonly unselectable="on" 该属性跟disable类似，input 元素，不可编辑，不可复制，不可选择，不能接收焦点，设置后文字的颜色也会变成灰色，但是后台可以接收到传值。
示例：<input type="text" readonly unselectable="on" >
弹出某页面
弹窗
// 弹出添加用户积分日志页面 function open_account_log(userId) { // 1. 调用方法弹出 $.modal.open("用户积分修改", '/system/accountDetailsLog/add'); // 2. 指定弹窗宽高(后两个参数分别为宽,高) $.modal.open("用户积分修改", '/system/accountDetailsLog/add','80','120'); }
JS校验空值
function isEmpty(obj){ if(typeof obj == "undefined" || obj == null || obj == ""){ return true; }else{ return false; } }
JS绑定input事件
js绑定input事件而不是使用改变值的change事件
可以实现输入值后就做某些操作 而不是在输入完然后失去焦点再进行触发
// 输入框自动去空格 其中propertychange 是对ie9以下浏览器的支持 $(".form-control").bind("input propertychange", function () { $(this).val($(this).val().replace(/\s*/g, "")); } );
自定义AJAX
这里是使用解绑按钮来进行示例
解绑操作不需要弹窗 如果直接调用封装好的修改的方法或者操作成功处理操作成功的方法会关闭弹窗刷新父级页面 导致全局刷新 这样写就可以 既可以向后台执行想要执行的操作 也可以弹出消息提醒 又不导致全局刷新 只刷新Table表格
// 上传文件 function sendFile(file, obj) { var data = new FormData(); data.append("file", file); $.ajax({ type: "POST", url: ctx + "common/upload", data: data, cache: false, contentType: false, processData: false, dataType: 'json', success: function (result) { if (result.code == web_status.SUCCESS) { $(obj).summernote('editor.insertImage', result.url, result.fileName); } else { $.modal.alertError(result.msg); } }, error: function (error) { $.modal.alertWarning("图片上传失败。"); } }); }
添加Class元素
.abc{ background: red; } test div var div = document.getElementById('d1'); div.classlist.add("abc"); //添加 div.classlist.remove("abc"); //删除
操作结果提示
// 需要引入 ry-ui.js文件 content为提示文字 <script th:src="@{/ruoyi/js/ry-ui.js?v=3.2.0}"></script> // 错误 $.modal.msg(content, modal_status.FAIL); // 成功 $.modal.msg(content, modal_status.SUCCESS);
回显选中图片
如果需要放大回显图片可以看
前端 --> 其他 --> 放大图片
回显浏览器选中的图片
如果在选择文件的时候,只想显示图片文件可以这样写
<input type="file" accept="image/*">
HTML示例:
<div class="form-group"> <label class="col-sm-3 control-label">主图：</label> <div class="col-sm-8"> <input id="file" name="mainImageA" class="filepath" onchange="changepic(this)" type="file"><br> <img src="" id="show" width="200"> </div> </div>
JS:
function changepic(obj) { var reads = new FileReader(); f = document.getElementById('file').files[0]; reads.readAsDataURL(f); reads.onload = function (e) { document.getElementById('show').src = this.result; }; }
JS创建集合对象
// js中创建集合 var list=[]; // js中创建cs对象 var cs = { id=1, name='admin', password01='admin' } //保存对象 list.push( cs );
显示隐藏HTML
隐藏html代码块 分为两种方式隐藏
- style="visibility: hidden;" (隐藏但是位置会占用)
- style="display: none;" (隐藏并且位置会释放)
<span id='vip_user_input'> hello</span>
// visibility: none document.getElementById("id").style.visibility="hidden";//隐藏 document.getElementById("id").style.visibility="visible";//显示 // display: none var userType =2; if (userType == 2) { //获取要显示的div对象 document.getElementById('id').style.display = "block"; //显示 } else { document.getElementById('id').style.display = "none"; // 隐藏 }
Js版本
$("#id").hide();// 隐藏 $("#id").show();// 显示
页面加载完成执行
页面加载完成执行有两种加载时机
- 页面所有资源加载完成后执行 (包括图片或者其他资源)
- 页面的Dom结构在家完成就开始执行
//1 资源加载完成才执行 (图片资源等等) window.onload = function() { }; //2 Dom加载完成就执行 $(document).ready(function() { }); //2.1 简写 $(function() { });
若依框架文档开发手册----开发中常用功能模块(下)：https://developer.aliyun.com/article/1418655
