![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Jquery
霸道流氓气质
每一个优秀的人,都有一段沉默的时光,(项目合作请留言)是那段时光,不抱怨不诉苦,最后渡过了这段感动自己的日子。
展开
-
Jquery中使用JsonP加载本地json文件解决跨域问题
场景jquery中直接请求本地json文件时会提示跨域问题。Jsonp(JSON with Padding)是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。为什么我们从不同的域(网站)访问数据需要一个特殊的技术( JSONP )呢?这是因为同源策略。同源策略,它是由 Netscape 提出的一个著名的安全策略,现在所有支持 JavaScript 的浏览器都会使用这个策略。注:博客:BADAO_LIUMANG_QIZHI的博客_..原创 2022-02-12 17:16:29 · 3868 阅读 · 3 评论 -
Jquery中使用table2excel插件实现将Html的table导出为Excel(附示例代码和资源下载)
场景jquery-table2excel是一款可以将HTML表格的内容导出到微软Excel电子表格中的jQuery插件。效果在Html中有一个表格点击导出按钮将其导出后注:博客:https://blog.csdn.net/badao_liumang_qizhi关注公众号霸道的程序猿获取编程相关电子书、教程推送与免费下载。实现首先下载jquery和jquery.table2excel的js文件,下载方式见文末。新建一个文件夹...原创 2020-07-07 11:36:25 · 2528 阅读 · 0 评论 -
DataTables鼠标停留高亮行并且鼠标点击二倍高亮行
场景DataTables的行,实现鼠标悬浮时高亮显示此行(即改变此行背景颜色)并且鼠标点击时二倍高亮显示此行(即再次改变此行颜色)。查看官方示例代码:http://www.datatables.club/example/api/highlight.htmlhtml<table id="example" class="row-border hover order-colu...原创 2019-06-28 17:23:56 · 1462 阅读 · 0 评论 -
Jquery中设置表格的悬浮和选中时行的背景颜色
场景效果要求鼠标放在一行上此行背景颜色单倍高亮,点击一行时双倍高亮。实现html代码<div class="ibox-content" id="orderDetailsDiv" th:fragment="orderDetailsDiv"> <div class="table-responsive"> &l...原创 2019-07-02 09:41:44 · 1104 阅读 · 0 评论 -
Jquery中使用select2插件实现ajax实时请求数据
场景效果select2相关select2官网:https://select2.org/实现引入select2页面中需要引入select.full.min.js和select2.min.css以及jauery。相关资源下载:https://download.csdn.net/download/badao_liumang_qizhi/11258768引入方式...原创 2019-06-26 09:59:23 · 1372 阅读 · 0 评论 -
Jquery中使用Validate插件使表单验证更加简单
场景效果介绍jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求。该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言。官方网站:https://jqueryval...原创 2019-06-04 17:30:56 · 335 阅读 · 0 评论 -
Jquery中使用SweetAlert使弹窗更漂亮
场景一个漂亮的、响应性强、可定制的、可访问的JAVASCRIPT弹出框的替代。效果SweetAlert官网:https://sweetalert.bootcss.com/Github:https://github.com/t4t5/sweetalertSweetAlert2:https://sweetalert2.github.io/实现引入资源文件...原创 2019-06-04 16:47:37 · 980 阅读 · 0 评论 -
Jquery控制select实现dataTables数据联动刷新
场景效果实现html页面代码页面使用的是thymeleaf模板。下拉框代码:<div class="form-group row col-md-6"> <label class="col-sm-2 col-form-label">退货发起方</label>...原创 2019-06-20 15:40:26 · 879 阅读 · 0 评论 -
Jquery中获取选中的select的值
场景Jquery中获取页面select选中的值。实现页面代码:<div class="form-group"> <label class="col-form-label" for="IsOpened">是否启用</label> <...原创 2019-06-04 15:18:42 · 2882 阅读 · 0 评论 -
DataTables中提示:DataTables warning: table id=example - Cannot reinitialise DataTable.
场景在页面中有一个下拉框select,在select的change事件中,每此要根据选择的值的不同进而在dataTables中显示不一样的值。错误提示如图:错误代码如下:$(document).ready(function() { //选择退货方后退货目的地绑定联动 $("#businessInitiator").bind("change", functi...原创 2019-06-20 13:50:19 · 4505 阅读 · 0 评论 -
Jquery中绑定select的change事件自动填充input的value值
场景实现效果如图:实现html代码这里使用的是thymelaf模板下拉框select代码:<select class="form-control" name="businessInitiator" id="businessInitiator"> <opt...原创 2019-06-20 10:53:01 · 1154 阅读 · 0 评论 -
SpringBoot+MyBatisPlus+DataTables实现退货管理的添加和编辑时控制checkbox的回显选中
场景SpringBoot+My BatisPlus+DataTables实现企业车间退货管理(学习企业级开发思想):https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/93190690在上面实现退货管理的基础上,详解编辑时的逻辑控制和编辑时的回显checkbox选中。效果实现实体类的扩展类新增IsSelec...原创 2019-06-24 11:38:55 · 557 阅读 · 0 评论 -
DataTables中设置checkbox回显选中
场景在进行编辑时DataTables中第一列的checkbox回显默认选中。效果实现dataTables赋值代码columns: [ { data: 'id' , "orderable" : false}, { data: 'goodsLocationNumber' ...原创 2019-06-24 13:14:37 · 1754 阅读 · 0 评论 -
DataTables中给某列添加样式
场景某天领导提出要求:表头文字居中,序号、系统自动编码、有规则约束的编码、码表关联信息显示样式居中,金额、数量等右对齐,其他文字信息左对齐。在DataTables中如何给每列添加样式。实现columns: [ { data: 'id',className :'badao_Center'}, { data: 'purchaseCode',cla...原创 2019-06-28 14:17:18 · 1958 阅读 · 0 评论 -
Jquery中获取表单提交时不确认个数元素的个数与值的方法
场景前端向SSM后台进行提交时会提交多个对象,所以提交的是一个对象的List。所以页面上的names属性也是不确定的就比如这样:<input type="text" name="bookInfoList[0].mobile" data-tip=" " data-valid="isNonEmpty||isMobile" data-error=" || " class="require...原创 2019-08-06 16:13:45 · 450 阅读 · 0 评论 -
Jquery中验证数组中是否有重复元素
场景在进行前端校验时获取输入框的值存到数组中,然后校验是否有重复的值。实现var mobileArray = new Array();for(var i=0;i<mobileCount;i++){mobileArray[i] = $("[name='bookInfoList["+i+"].mobile']").val()}if((new Set(mobileA...原创 2019-08-06 16:02:38 · 3246 阅读 · 0 评论 -
Jquery中实现表单提交前的校验
场景为了安全,通常要进行前端校验和后端校验。前端校验一般在表单提交前实现。实现form表单元素添加onsubmit事件<form id="book" action="${ctx}/frontPage/passFlight/GJbookPayValidate" class="plug_form" method="post" onsubmit="return checkM...原创 2019-08-06 15:58:16 · 2235 阅读 · 0 评论 -
Jquery中表单序列化提交到后台是怎样进行URL解码查看参数
场景前端提交表单时提交的data数据为form表单序列化后的数据。数据已经经过编码无法查看数据的准确性。比如:var data = $(this).serialize();console.log(data);$.ajax({async : true,cache : false,type : 'POST',url : acti...原创 2019-08-08 14:43:53 · 331 阅读 · 0 评论 -
Jquery中实现表单提交到SSM后台前进行post请求实现数据的校验
场景表单中有两个输入框input在提交这个表单前需要对两个输入框进行校验。即点击提交按钮时会经过校验的方法,此方法会post方式提交到后台,在请求后台成功后的回调方法中会对js变量进行赋值,进而决定是否提交此表单。实现html代码1.form元素的的action属性为验证通过后提交的url。2.onsubmit属性为返回一个验证方法的值,如果此方法的返回值为true则提交此...原创 2019-07-16 15:00:12 · 635 阅读 · 0 评论 -
Jquery中进行post请求时同步与异步的区别(从实例入手学习)
场景表单中有两个输入框input在提交这个表单前需要对两个输入框进行校验。即点击提交按钮时会经过校验的方法,此方法会post方式提交到后台,在请求后台成功后的回调方法中会对js变量进行赋值,进而决定是否提交此表单。$.post默认是异步提交,所谓异步提交就是在请求发出去之后,不管结果是否返回,都会执行后面的代码。所以呀想把返回的结果或者根据返回结果给js变量赋值,那么就要使用同...原创 2019-07-16 14:34:37 · 1193 阅读 · 0 评论 -
Jquery中使用ajax请求SSM后台时提示:org.springframework.http.converter.HttpMessageNotReadableException: Could no
场景Jquery中使用ajax向SSM后台请求数据时提示:org.springframework.http.converter.HttpMessageNotReadableException: Could not read JSON: Stream closed实现出现这种错误是因为前段请求参数和后端接受参数不对应导致。前端: $.ajax({ ...原创 2019-07-15 16:50:46 · 1266 阅读 · 0 评论 -
DataTables怎样取消黑白行
场景DataTables中隔一行颜色不一样。如下:实现这是DataTables自带的样式属性。找到tables所在的页面<table id="wmsReceiveOrder_table_id" class="table table-striped table-bordered hover" style="width:100%">...原创 2019-06-28 17:29:34 · 365 阅读 · 0 评论 -
JsTree中提示:Cannot read property 'core' of underfined
场景Jstree的树形结构正好好运行,给数据添加了禁用状态后,就提示:在仔细比对代码没错订单情况下,猜测是数据原因。实现因为添加了是否禁用状态,首次进入页面时默认加载启用的数据,但是启用的数据中可能会有pid(即父节点i)被禁用的场景。就会出现如下这种:查询返回的数据中pid属性在id中不存在。解决:将数据库中禁用的数据先启用,首次访问时默认查询全部数据。最...原创 2019-06-05 17:25:35 · 878 阅读 · 0 评论 -
SpringBoot+SweeAlert实现alert提示与前后端数据交互
场景效果点击某条记录,点击禁用按钮,会提示确定。点击确认后,后将当前记录的id传递到后台,后台将其状态改变,从而实现前后端交互。实现SweetAlert2官方文档:https://sweetalert2.github.io/将相关资源进行下载如果没法下载资源可以从这里下载:https://download.csdn.net/download...原创 2019-06-05 14:07:25 · 1664 阅读 · 0 评论 -
SpringBoot+jquery实现post提交表单并添加隐藏域属性完成编辑功能
场景如下页面编辑时:在选择归属机构时会出现树形结构,所以在提交时需要额外提交一些信息,可以在form中使用input的隐藏域进行存值。实现html代码<div class="modal inmodal" id="orgAddModel" tabindex="-1" role="dialog" aria-hidden="true"> <d...原创 2019-06-05 13:35:48 · 2107 阅读 · 0 评论 -
Jquery中使用ajax传json参数并从SpringBoot后台Controller返回消息
场景前端通过ajax提交json格式的数据,后台接受到实现具体的业务后返回给前端消息提示。实现html页面代码<button id="printBtn" class="btn btn-info " type="button"><i class="fa fa-trash-o"></i> 打印</button>调用js部分代码...原创 2019-03-21 15:48:37 · 3764 阅读 · 2 评论 -
Jquery中发送ajax请求示例代码
场景jquey中实现发送ajax请求。实现function printCode(id){ debugger $.ajax({ type: 'POST', url: "", cache: false, //禁用缓存 data: JSON.stringify({"TableName":"wms_receiv...原创 2019-03-21 10:28:06 · 551 阅读 · 0 评论 -
Jquery中 实现气泡消息提示
效果实现jsp页面代码<dd class="fl rel ml_05em text_12em"> 接货确认 <span id="orderComfirmRed" class="abs pl_05em pr_05em mt_05em top_0...原创 2019-02-26 10:26:09 · 1507 阅读 · 0 评论 -
Jquery中怎样判断是否有网络
场景在jquery中实现页面一加载完之后根据是否有网实现某些元素的显示与隐藏。实现 $(function(){ if(window.navigator.onLine){ $("#ALL").css("display","inline-block"); }else{ $("#noALL").css("display","inline.原创 2019-02-26 09:24:43 · 1035 阅读 · 0 评论 -
Jquery tmpl模板中if条件有多个时的写法
场景jquery tmpl正常if-else用法{{if barNumber==null}} 是 {{else}} 否 {{/if}}但是如果 想表示当barNumber为空或者为0时显示为是,即想表示两个...原创 2019-02-14 13:38:51 · 3646 阅读 · 0 评论 -
jsp中通过多种方式实现面包屑导航
效果实现jsp页面代码当前位置:<a href="${ctx}/jsp/front/readOrder.jsp">待合单</a> > <a onclick="goBack()" class='pointer' >查询</a> > <原创 2019-02-25 10:21:08 · 1147 阅读 · 0 评论 -
Jquery怎样返回上一页
场景Jquery怎样返回当前页的上一页实现history.back(-1)会返回当前页的上一页并重新加载页面history.go(-1)会返回当前页的上一页,保留原有数据举例当前位置:<a href="${ctx}/jsp/front/readOrder.jsp">待合单</a> > <a ...原创 2019-02-22 14:50:36 · 3146 阅读 · 0 评论 -
Input中实现对身份证的验证
身份证校验15位的纯数字或者18位的纯数字或者17位的纯数字+最后一位为X或x正则表达式/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/实现input为text,不要为number<input type="text" id="idCode" class="fr c_gray_777" required name="idCode"...原创 2018-12-21 10:39:36 · 5948 阅读 · 0 评论 -
Jquery实现点击页面发送弹幕效果
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title> Jquery实现点击弹幕特效 </title> <m原创 2018-10-15 17:25:30 · 520 阅读 · 0 评论 -
Datatables表格数据初始化时回调函数中修改要显示的值
场景Datables初始化表数据后,返回的status状态值为1,2,3现在要根据返回值的状态显示相应的中文。实现{ data: 'status', render: function (data, type, full, meta ) { if(data.trim()=="1"){...原创 2019-03-26 10:51:40 · 793 阅读 · 0 评论 -
Datatables修改每页显示的条数
场景修改Datatables默认显示的条数实现在表格数据初始化时添加如下"pageLength": 5, "lengthMenu": [ 5,10, 25, 50, 75, 100 ],完整示例:function dataTableInit(){ return $('#wmsReceiveOrder_table_id').DataTab...原创 2019-03-26 10:58:09 · 7093 阅读 · 1 评论 -
使用Jquery获取thymeleaf中checkbox的值
场景使用thymeleaf模板,需要在列表展示中添加多选框,实现勾选后能获取到勾选的数据的属性。实现thymeleaf页面代码<button id="printBtn" class="btn btn-info mb_1em" type="button" onclick="return printDetails()"><i class="fa fa...原创 2019-03-23 13:38:08 · 3657 阅读 · 0 评论 -
SpringBoot+JsTree实现在编辑时能选择树形结构并获取选中的ID
场景SpringBoot+Jquery+jsTree实现页面树型结构:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/90897251效果实现前提已经搭建完jsTree的引入之后,能正常显示树形结构以及详情明细的情况V下,实现点击编辑也能选择树形结构并能更改。点击编辑显示弹窗在同一个页面设置...原创 2019-06-05 11:35:36 · 884 阅读 · 0 评论 -
SpringBoot+Jquery+jsTree实现页面树型结构
场景效果jstree官网https://www.jstree.com/实现引用CSS样式使用cdn或者将其下载<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" /><li...原创 2019-06-05 09:58:55 · 1525 阅读 · 0 评论 -
DataTables提示:DataTables warning: table id=queueInfo_table - Requested unknown parameter 'type' for r
场景如图:实现依据提示可知第一行第五列的type参数为空或不存在。其官方解释为:https://datatables.net/manual/tech-notes/4所以找到这个表的type属性赋值的代码。 columns: [ {data: 'id'}, {data: 'code'},...原创 2019-05-23 13:51:03 · 794 阅读 · 0 评论