前台
文章平均质量分 56
书剑零落
快乐的小码奴
展开
-
bootstrap-table 表头和内容对不齐解决办法
偶然机会学习bootstrap,表格利用bootstrap-table实现,使用bootstrap-table过程中,发现了一个非常棘手的问题,在ie浏览器中,表格的表头和内容对不齐,特别是列比较多且有分页时候最明显。相信很多同学,也遇到过这样的问题,下面提供解决办法。查看了所有百度、博客相关文章,都没有解决。经过一周的研究,终于通过修改源码解决了。 打开bootstrap-table.js 找到 BootstrapTable.prototype.resetView方法,找到如下代码if转载 2022-05-31 14:39:14 · 1825 阅读 · 2 评论 -
纯CSS实现左右拖拽改变布局大小
这篇文章主要介绍了纯CSS实现左右拖拽改变布局大小,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。webkit浏览器下滚动条可以自定义,其中resize区域大小就是scrollbar的大小,于是,我们可以将整个拉伸区域变成和容器一样高。实现原理CSS中有一个resize属性,如果一个元素的overflow属转载 2022-04-15 16:55:01 · 2864 阅读 · 0 评论 -
左侧固定右侧宽度自适应的布局方式
最近这段时间一直在面试,在自己的经历上、做的项目上扯得天花乱坠。谁曾想那天一个面试官突然问了我如何实现一个左侧宽度固定、右侧自适应的布局,一下自给我搞蒙了,因此特地来整理一下废话不多说,简单的列举三种方法方法一:左侧盒子浮动,右侧盒子使用margin-left实现方法二:左侧盒子浮动,触发右侧盒子BFC的方式实现方法三:使用flex布局实现直接上代码: <style> div { box-sizi...转载 2022-04-15 16:13:18 · 541 阅读 · 0 评论 -
table2Excel边框,自定义列宽,行高,文件名
参考资料:table2Excel:https://github.com/JackGit/table2excel.jsexceljs:https://github.com/guyonroche/exceljs#interfacefunction exportTables() { // 获取sheetName 数组 var sname = []; $(".checkListTable").each(function() { sname.pu...转载 2021-06-28 10:43:20 · 1125 阅读 · 0 评论 -
webpack-dev-server使用方法
webpack-dev-server使用方法首先来回顾以下webpack的内容首先,我们来看看基本的webpack.config.js的写法const path=require('path')//这个配置文件,其实就是一个JS文件,通过Node中的模块操作,向外暴露了一个配置对象module.exports={ //在配置文件中需要手动指定入口和出口 entry:path.join(__dirname,'./src/main.js'),//入口,表示要使用webpack打包哪个文件转载 2021-02-03 14:43:43 · 2236 阅读 · 0 评论 -
tableExport.js导出table到excel(可指定行、列)
1,需要导入两个js文件,一个tableExport.js,另一个是jquery.base64.js,前一个文件是导出数据和核心类库,后一个是为了避免导出中文时乱码的js文件,如果你导出的数据没有中文,可以不适用它。说明:只能对table标签进行操作2,导入以上两个js后,为下载按钮绑定事件,如下代码是最简单的导出配置//文件导出--------------------------$("#btnExport").click(function(){ $("table[class!=t...原创 2021-01-28 14:44:11 · 4377 阅读 · 1 评论 -
前端下载文件成功后执行回调的方法
在项目中经常会有下载文件的需求,大多数时候我都是一个a标签或者window.location.href = "";一行代码搞定,但是最近有一个文件下载需求,因为下载的文件有点大,所以速度确实慢,基本以10m+才能下载下来,所以做了一个进度条,然后问题来了,怎么可以监听文件是否下载完成,然后取消掉进度条。。。开始折腾了半天的jquery,整不成,决定用原生ajax写,其中也自己整理了几种方法,特...转载 2020-02-28 13:55:51 · 7576 阅读 · 0 评论 -
搭建vue开发环境的步骤
相信很多人在刚开始学习vue这个框架的时候,最开始搭建开发环境的时候,都会遇到一些大大小小的坑,我之前学习angular的时候搭建过一次,过了一个月后再搭建第二次的时候,竟然有一些混乱,所以今天想整理出来;vue现如今在前端中,是前端工程师比较常用的框架之一,他和angular有一些相似之处,所以用过angular的伙伴们,再来学习vue应该不会感觉太难;一:在搭建vue的开发环境之前,一...转载 2020-02-25 12:07:01 · 133 阅读 · 0 评论 -
jquery-table2excel导出excel时名称设置方法
用jquery-table2excel,进行导出excel jquery-table2excel是一款可以将HTML表格的内容导出到微软Excel电子表格中的jQuery插件。该插件可以根据你的需要导出表格中的内容,不需要的行可以不导出。 它文件体积小,使用非常方便。 1、写好前端的按钮,还需要一个table(要导出的内容存放处)。 <input type="button" ...转载 2020-01-13 16:05:10 · 1418 阅读 · 1 评论 -
select2 清空选中值(支持IE)
$(selObj[i]).val([]).trigger('change'); //清空已选中值$(selObj[i]).select2("enable", false);//不准许编辑原创 2019-12-23 16:28:22 · 390 阅读 · 0 评论 -
监听中文输入法compositionstart 、 compositionend
场景:监听文本输入框输入后,大于2个字符时自动检索,排除中文输入一半就进行检索问题,导致检索不准确。脚本: $(function () { //用户查询 var cpLock = true; $('#txtUserQuery').off().on({ compositionstart: function () {//...原创 2019-11-30 12:34:15 · 674 阅读 · 0 评论 -
JS中文本框中只准许输入正确的整数、负数,保留2位小数
//校验扣分值输入是否正确 function formatNumber(obj) { obj.value = obj.value.replace(/[^\d+.-]/g, ""); //清除"数字"、"."、"+"、"-"号以外的字符 obj.value = obj.value.replace(/^\./g, ""); //验证第一个字符是.字 ...原创 2019-11-28 20:23:57 · 1093 阅读 · 0 评论 -
web两个iframe之间互相调用方法
假如有两个iframe在同一个页面上,一个id为if1,另一个为if2。想要在if1中调用if2中的方法,只需在if1中添加如下代码:window.parent.document.getElementById('if2').contentWindow.需要调用的方法;例:1、main.html<!DOCTYPE HTML><html><head>...转载 2019-10-15 10:53:41 · 1344 阅读 · 0 评论 -
JS 弹出的DIV框中KeyUp被执行多次
问题:在一个dialog中的文本输入框定义keyup事件,第一次正常,关闭该dialog后,再打开dialog,按键后keyup事件被执行两次,关闭再打开事件被执行3次,依次类推解决办法:在dialog绑定keyup事件之前,先清除下之前绑定的keyup事件 $("#selector").unbind('keyup'); $("#selector")...原创 2018-08-22 13:21:58 · 1930 阅读 · 0 评论 -
layui应用
官网:https://www.layui.com/demo/树形下拉选择框,带检索功能:https://wujiawei0926.gitee.io/treeselect/转载 2019-06-24 16:44:52 · 304 阅读 · 0 评论 -
解决ajax请求filter重定向失败
在新项目写了一个filter,能拦截jsp,.action的请求,但是ajax的请求可以拦截不能实现重写向登录页面。这是一个bug呀!参考以上引用的方法,解决了。ajax重定向的问题。默认ajax是不支持重定向的,因为ajax本身就是局部刷新,不重新加载页面的。如果需要用到重定向可以通过以下方法:第一步:filter[java]view plaincopy...转载 2017-11-17 15:21:27 · 1599 阅读 · 0 评论 -
Ajax在IE上做轮询时setInterval方法只执行一次
因为视频播放要写一个异步验证是否有异地登录,所以用了setInterval()方法来周期调用后台的isLogin接口。有趣的是谷歌会周期调用接口,而IE只会调用一次。IE浏览器下使用GET发送请求时,如果两次请求的地址和参数相同,在不刷新页面的情况下,浏览器会缓存第一次请求的内容,服务端更新后浏览器仍然显示第一次的内容。如在当前页面用户登录,在未登陆的情况下,服务器返回的用户信息为空,点击...转载 2018-07-23 14:55:57 · 453 阅读 · 1 评论 -
表格插件:GridManager
一、GridManager 可快速、灵活的对table标签进行实例化。使用简单快捷, 功能强大,原生js实现, 不依赖任何框架;二、特点:宽度调整:支持用户对表格的列宽度可进行拖拽式调整 位置调整:支持用户对表格的列位置进行拖拽式调整 可视化调整:支持用户对表格的列进行显示与隐藏切换 排序功能:支持表格单项排序或组合排序 分页功能:表格ajax分页,包含选择每页显示总条数和跳转至指...原创 2019-06-25 11:24:56 · 2649 阅读 · 1 评论 -
layer关闭按钮回调方法end的使用
一、使用场景:在页面中用layer弹出页面后,希望关闭layer的时候可以刷新页面,可以使用end函数实现;二、layer调用脚本:layer.open({ type: 2, maxmin: false, fix: false, title: "添加数据-" + currYear, ...原创 2019-05-29 17:54:49 · 18056 阅读 · 2 评论 -
Bootstrap Switch 开关控件
一、需要实现效果:二、使用方法:html代码:<input type="checkbox" name="smsenable" id="smsenable" />JS代码:$(function(){ $('[name="smsenable"]').bootstrapSwitch({ onText:"OFF", of...原创 2019-06-25 11:18:00 · 4806 阅读 · 0 评论 -
EasyUI tabs click监听
一、业务场景:切换tab页面的时候,判断是否有进入新tab页,弹出确认框给用于确认或者取消;二、js脚本//监听click事件$(function () { var tabs = $('#tabs').tabs().tabs('tabs'); for (var i = 0; i < tabs.length; i++) { ...原创 2019-07-18 15:58:49 · 2722 阅读 · 0 评论 -
echarts图形导出到excel
一、情景:本人刚接触echarts不久,之前有一个小功能需要实现:将echarts生成的图形导出到excel中,百度了好久。由于本人是新手,所有百度上的获取图形的base64编码的有些方法是没有理解,同事有个大神写了一个js,各种方法获取编码,然后用使用虚拟表单提交,直接一脸懵逼,耽误好长时间才解决。后来为了完成任务,直接套用这个大神的方法,根本不理解。后来回头研究了一下,这里总结一下自己的实现过...转载 2019-08-13 15:37:21 · 6276 阅读 · 1 评论 -
【解决】SELECT标签中OPTION的显隐控制(兼容IE)
问题描述:在有些功能切换的时候,select标签中的某些option是要被隐藏的。但通过设置option的样式为 display:none根本无法隐藏option标签。解决方案:1、首先设置option的display:none的方案肯定是不可行了;2、某网友提出的两种方案:1.在option标签上面加上disabled="disabled"属性,表示不可用,这种方案只是让opt...转载 2019-08-20 16:42:04 · 993 阅读 · 0 评论 -
js实现svg图形转存为图片供下载、导出、打印
我们知道canvas画布可以很方便的js原生支持转为图片格式并下载,但是svg矢量图形则并没有这方面原生的支持。研究过HighChart的svg图形的图片下载机制,其实现原理大体是浏览器端收集SVG代码信息,并发送到到服务器端,由后端程序转换成图片格式后,以流的形式反射给浏览器端下载。最近在项目中有需求将一个非HighChart的SVG地图转存为图片并下载的功能。本希望模拟HighChar...转载 2019-08-28 16:03:08 · 2849 阅读 · 2 评论 -
select3:带树级的搜索下拉框插件
效果展示功能介绍select3.js实现以下功能,且调用方便快捷。完善select2不支持tree的缺陷 理论上支持N层级的树状下拉框 本地搜索 支持数据回显选中 主JS压缩后只有8kbgitHubhttps://github.com/baukh789/select3demo演示select3格简易渲染->查看演示生成示例HtmlJav...转载 2019-06-24 16:35:01 · 3066 阅读 · 0 评论 -
JQuery之DataTables强大的表格解决方案
1、DataTables的默认配置$(document).ready(function() {$(‘#example’).dataTable();} );示例:http://www.guoxk.com/html/DataTables/Zero-configuration.html2、DataTables的一些基础属性配置“bPaginate”: true, //翻页功能“...转载 2019-06-06 16:59:47 · 1095 阅读 · 0 评论 -
HTML 清除js、css缓存办法
一、解决问题:当服务器端的js或者css被修改后,如何让客户端在不清除缓存的情况下,自动请求最新的文件;二、解决办法:1、在需要调用修改的文件的页面中在文件名后添加版本号标识:<script type="text/javascript" src="~/Scripts/TimeControl/timeControl.js?v=1.2.0"></script>...原创 2018-11-29 09:20:03 · 7955 阅读 · 0 评论 -
IE下复选框多次快速点击复选框状态出现紊乱情况
复选框点击事件:<input type="checkbox" id="chk_2109_0" name="SFWSJ" kfdm="2109" onclick="setBNRJFProcess(this,2109);" >在IE下连续多次点击,setBNRJFProcess方法中获取的复选框的状态和实际操作的不符合;应将click改成change事件:<原创 2018-10-10 11:23:26 · 934 阅读 · 0 评论 -
控制HTML元素的显示与隐藏——display和visibility
</head><body><div>display:元素的位置不被占用</div><div id="div1" style="display:block;">DIV 1</div><div id="div2" style="display:no转载 2018-10-10 11:19:51 · 5159 阅读 · 0 评论 -
jQuery Mobile
jQuery Mobile是一个基于jQuery Core的触摸友好UI框架,适用于所有流行的移动,平板电脑和桌面平台。官网:http://jquerymobile.com/V1.4.5http://demos.jquerymobile.com/1.4.5/intro/学习网站:http://www.runoob.com/jquerymobile/jquerymobile-tu...原创 2018-09-04 16:31:50 · 705 阅读 · 0 评论 -
jQuery Iframe 父页面监听子页面的鼠标点击事件
一、父页面加入iframe:<body><iframe id="ifrmReport" src="/ReportForm/ZKZProblemSummaryPartial" name="ifrmReport" scrolling="no" frameborder="0"></iframe></body原创 2018-08-27 18:49:03 · 11271 阅读 · 1 评论 -
B/S常用弹出框插件总结
一、artdialog v6强大的模态对话框v6版api网址:http://www.51xuediannao.com/mbdemo.php二、jquery layer弹出层插件//layer是layUI库的成员http://www.51xuediannao.com/js/jquery_layer.htmlhttp://layer.layui.com/三、jquery弹出下拉菜单...原创 2018-08-07 15:07:09 · 470 阅读 · 0 评论 -
select 下拉多选
一、使用multiple-select.js和multiple-select.css实现HTML代码:<select id='checkedLevel' style="width:120px;height:28px;" multiple="multiple"> <option value="1">选项1</option> &l...原创 2018-08-02 10:34:30 · 9986 阅读 · 0 评论 -
Html局部打印
一、直接利用JS技术实现打印HTML表格通常在浏览网页的时候,网页上总是出现一些和内容无关的内容,在打印的时候,要是把整个网页都打印下来,总会有些不方便。。。所以在有需要打印的网页上稍微设置一下打印页是很有必要的。。。首先在head里面加入下面一段js代码:<scriptlanguage="javascript">function preview(oper){ ...原创 2018-07-26 15:44:43 · 7508 阅读 · 0 评论 -
html中将table数据直接导入到excel中
方法一、通过<a>标签(可定义文件名称):<a id="dlink" style="display:none;"></a><input type="button" onclick="tableToExcel2('tableMainList', '质控计划统计结果')" value="Export to Excel&q原创 2018-07-26 14:29:31 · 5971 阅读 · 1 评论 -
Easyui combobox的onChange事件、回显
一、回显 var ZGCSZSKDM = '@Html.Raw(Model.ZGCSZSKDM)'; var YYFXZSKDM = '@Html.Raw(Model.YYFXZSKDM)'; console.log('ZGCSZSKDM:' + ZGCSZSKDM); console.log('YYFXZSKDM:' + YYFXZSKDM...原创 2018-07-02 13:20:36 · 5867 阅读 · 0 评论 -
CSS中!important的用法及作用
定义及语法 !important,作用是提高指定样式规则的应用优先权(优先级)。语法格式{ cssRule !important },即写在定义的最后面,例如:box{color:red !important;}。 在CSS中,通过对某一样式声明! important ,可以更改默认的CSS样式优先级规则,使该条样式属性声明具有最高优先级。浏览器识别 ie7及ie7+,fire...转载 2018-11-29 12:59:19 · 5027 阅读 · 0 评论 -
Easyui tree多级树节点增加悬浮提示
一、使用情景:给Easyui tree的多级节点添加悬浮提示;二、Easyui tree 加载方法:使用ajax请求数据进行赋值加载:$.ajax({ url: "/Common/GetJcbdflAndJcbdTreeJsonInfoByBddm/", type: "post", data: ...原创 2018-12-07 17:28:23 · 1233 阅读 · 0 评论 -
layer点击×号关闭弹版回调函cancel数使用
一、使用场景:使用弹版中新增的临时数据,希望在关闭弹版的时候,自动删除二、js中使用实例:var _index = top.layer.open({ type: 2, maxmin: false, fix: false, title: "添加数据-" + currYear, ...原创 2019-05-30 13:38:19 · 1325 阅读 · 0 评论 -
Easyui combotree 获取选中节点的值的方法
一、初始设备类型下拉列表//初始设备类型下拉列表$("#deviceType").combotree({ panelHeight : 180, editable : false, idField : 'id', treeField : 'name', parentField: 'pid', url: "/dev/devType/queryD...转载 2019-04-17 13:02:07 · 4499 阅读 · 0 评论