自制小autocomplete/tree/上传/下载/html转pdf/layer

/*
随手开发,留作笔记,后面优化
*/
//模糊查询
$(function () {/*
var a1 = new aotoFindData();
a1.init('#bigCustomerCompany', {url: '/ManageBase/GetCompany',key: ['Name'],staticStr: '支持汉字查询',fillKey: { 'type': 'CompanySearch', 'companyname': $('#bigCustomerCompany') },onpicked: function (that, item) {//item：当前点击的thisvar data = jQuery.parseJSON($(item).attr('data'));console.log(data.PK_Guid)}
});
*/
});
//正则匹配去掉特殊字符
function replaceStr(s) {var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]");var rs = "";for (var i = 0; i < s.length; i++) {rs = rs + s.substr(i, 1).replace(pattern, '');}return rs;
}function aotoFindData() {this.input = null;this.$swraper = null;this.pinjieUrls = '';this.settings = {type: 3,//3:不需要模糊查询，点击查询全部         1：点击默认展示，2：点击的时候不展示,url: 'http://admin.fanjiaxing.com/ManageBase/GetCompany.ashx?type=CompanySearch&companyname=',width: 'auto',key: 'auto',staticStr: '支持汉字搜索/拼音',fillKey: { 'aa': $('.aa').val(), 'bb': $('.bb').val() },// 实时传入的参数onpicked: function (that, item) {var data = jQuery.parseJSON($(item).attr('data'));//$('#aa').val(data.ChineseName);}};};/* 获取元素位置 */
aotoFindData.prototype.getPos = function (node) {var scrollx = document.documentElement.scrollLeft || document.body.scrollLeft,scrollt = document.documentElement.scrollTop || document.body.scrollTop;var pos = $(node).eq(0)[0].getBoundingClientRect();return { top: pos.top + scrollt, right: pos.right + scrollx, bottom: pos.bottom + scrollt, left: pos.left + scrollx }
},aotoFindData.prototype.stopPropagation = function (event) {event = event || window.event;event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;}aotoFindData.prototype.init = function (input, opt) {this.$swraper = $('<div class="auto-swraper"></div>');this.input = input;//var licalss = replaceStr(input);//this.calssLi = 'li' + licalss;if (opt) {$.extend(this.settings, opt);}this.inputEvent();}aotoFindData.prototype.inputEvent = function () {var that = this;$('body').on('click', this.input, function (e) {that.stopPropagation(e);that.$swraper.siblings('.auto-swraper').hide();if (!this.b) {that.createSwrap();this.b = true;}if (that.$swraper) {that.$swraper.show();}var left = that.getPos(that.input).left;var top = that.getPos(that.input).bottom;that.$swraper.css({ 'top': top, 'left': left });that.$swraper.find('.falid').show();that.$swraper.find('.item').remove();that.$swraper.find('.falid').html('加载中。。。');that.$swraper.find('.falid').css({ 'color': '#333' });that.ResetUrl($(this).val());that.pushData($(this).val());});$('body').on('keyup', this.input, function (e) {clearTimeout(this.stimer);var _this = this;that.ResetUrl($(_this).val());this.stimer = setTimeout(function () {that.pushData($(_this).val());}, 500);console.log(this.input)});$('body').on('keydown', this.input, function (e) {clearTimeout(this.stimer);});$('body').on('input propertychange', this.input, function (e) {//_this.inputKeyup(this, autoBackcall);});$(document).on('click', function () {if (that.$swraper) {that.$swraper.hide();}});
}aotoFindData.prototype.addDivEvent = function () {var that = this;if (that.$swraper) {that.$swraper[0].onclick = function (e) {that.stopPropagation(e);}}
}
aotoFindData.prototype.ResetUrl = function (value) {this.pinjieUrls = this.settings.url;if (/\?/.test(this.pinjieUrls)) { // 如果已经有参数了this.pinjieUrls = this.pinjieUrls + '&';} else { // 如果没有参数，那么就从第一个加this.pinjieUrls = this.pinjieUrls + '?';}if (this.settings.fillKey) {for (var key in this.settings.fillKey) {var values = this.settings.fillKey[key];if (typeof (values) == 'object') {values = values.val();}this.pinjieUrls += key + '=' + values + '&'}}this.pinjieUrls = this.pinjieUrls.substr(0, this.pinjieUrls.length - 1);
}aotoFindData.prototype.pushData = function (value) {var that = this;that.$swraper.find('.falid').show();that.$swraper.find('.falid').html('加载中');console.log(this.pinjieUrls)$.ajaxSetup({ cache: false });$.ajax({type: "GET",url: this.pinjieUrls,_FanjiaRepeatForgeryTokeExt: $('#_FanjiaRepeatForgeryTokeExt').val(),success: function (msg) {if (msg == '' || msg.length == 0) {return;}console.log(typeof (msg) === 'string')msg = jQuery.parseJSON(msg);if (!msg) {return;}if (msg == "" || msg.length == 0) {that.$swraper.find('.falid').show();that.$swraper.find('.item').remove();that.$swraper.find('.falid').html('未找到此项......');that.$swraper.find('.falid').css({ 'color': '#333' });return;}//msg = msg.replace(/'/g, '"');//把单引号替换成双引号//msg = jQuery.parseJSON(msg);that.$swraper.find('.item').remove();//that.$swraper.find('.falid').hide();//if (that.$swraper.find('.falid').length > 1) {//    that.$swraper.find('.falid').remove();//}that.$swraper.find('.falid').html(that.settings.staticStr);that.$swraper.find('.falid').css({ 'color': '#999' });$.each(msg, function (index, element) {var $item = $('<div class="item">s</div>');$item.attr('data', JSON.stringify(element));// $item.html(element.EnglishName + ' ' + element.Passport);if (that.settings.key != 'auto') {var strKey = '';$.each(that.settings.key, function (inde, ele) {if (typeof (ele) == "object") {if (inde == that.settings.key.length - 1) {strKey += ele.name + '' + element[ele.key];} else {strKey += ele.name + '' + element[ele.key] + ',  ';}} else {if (inde == that.settings.key.length - 1) {strKey += element[ele];} else {strKey += element[ele] + ',  ';}}});$item.html(strKey);}that.$swraper.append($item);$item[0].onclick = function () {that.$swraper.hide();$(that.input).val($(this).html());if (that.settings.onpicked) {that.settings.onpicked(that.input, this);}}});},error: function () {that.$swraper.find('.falid').show();that.$swraper.find('.item').remove();that.$swraper.find('.falid').html('数据加载失败');that.$swraper.find('.falid').css({ 'color': '#333' });}});}aotoFindData.prototype.createSwrap = function () {var $falid = $('<div class="falid">支持拼音汉字搜索</div>');var left = this.getPos(this.input).left;var top = this.getPos(this.input).bottom;var width = $(this.input).width() + parseInt($(this.input).css('padding-left')) + parseInt($(this.input).css('padding-right'));$falid.css({ 'color': '#333' });if (this.settings.width != 'auto') {width = this.settings.width;}this.$swraper.css({ 'position': 'absolute', 'top': top, 'left': left, 'z-index': '99999', 'width': width });if (!this.input.b) {this.$swraper.find('.falid').remove();this.$swraper.append($falid);this.input.b = true;}$('body').append(this.$swraper);this.addDivEvent();
}

tree

function fjTree() {this.treeParentDom = null;this.isfirst = true;this._isfirst = true;this.treeDeepNum = 0;this.set = {treeData: [],childName: 'ChildNode',treeitemName: 'Name',keyword:'',checkboxIsShow: false,develop:true, // 树默认展开callback: function () { }}
}fjTree.prototype.init = function (treeParentDom, opt) {this.treeParentDom = treeParentDom;if (opt) {$.extend(this.set, opt);}$(treeParentDom).html(this.htmltree(this.set.treeData));
}fjTree.prototype.htmltree = function (result, treeDeepnum) {//this.treeDeepNum++;var _treeDeepnum = treeDeepnum || 0;var style = ''var that = this;//if (!this.set.develop && !this._isfirst) { style = 'style="display:none"' }var firsttreebox = this._isfirst ? "firsttreebox" : "";this._isfirst = false;if (this.isfirst && !this.set.develop) {this.isfirst = false;}var $parentHtml = $('<div class="fj-tree-box ' + firsttreebox + ' " ' + style + '></div>');for (var i = 0; i < result.length; i++) {var item = result[i];var icon = '',arrowdown='';if (!item[this.set.childName] || item[this.set.childName] && !item[this.set.childName].length) { icon = "noarrow" }if (this.set.develop) { arrowdown = 'down' }var $treename = $('<div class="tree-name ' + icon + ' ' + arrowdown + '" ></div>'); // data="' + encodeURI(JSON.stringify(item)) + '"if (!this.set.checkboxIsShow) {that.arrolabelCheckBoxFn($treename[0], item);}var treeitemName = this.nameHtml(item, _treeDeepnum);$treename.append(treeitemName.$cssarrow)if (treeitemName.$label) { $treename.append(treeitemName.$label)}$parentHtml.append($treename)if (this.set.develop) {if (item[this.set.childName] != null && item[this.set.childName].length) {_treeDeepnum = _treeDeepnum + 1;var $child = this.htmltree(item[this.set.childName], _treeDeepnum);$parentHtml.append($child)}}_treeDeepnum = treeDeepnum}return $parentHtml
}
fjTree.prototype.nameHtml = function (data, num) {var Name = data[this.set.treeitemName];var that = this;if (this.set.keyword && Name.indexOf(this.set.keyword) == 0) {var re = new RegExp('('+this.set.keyword+')')Name = Name.replace(re, '<span style="color:#00a0e9">$1</span>')}if (this.set.checkboxIsShow) {var $cssarrow = $('<i class="cssarrow"></i>')var $label = $('<label class="label-checkbox"></label>');var $checkbox = $('<input type="checkbox" data-num="level_' + num + '" data-guid="' + data.PK_Guid+'"/> <span class="name">' + Name + '</span>')$label.append($checkbox)$cssarrow[0].onclick = function () {that.cssarrowFn(this);if (!that.set.develop && $(this).parents('.tree-name').eq(0).next('.fj-tree-box').length==0) {if (data[that.set.childName]) { $(this).parents('.tree-name').eq(0).after(that.htmltree(data[that.set.childName])) }}}$checkbox[0].onchange = function () {that.labelCheckBoxFn(this);var $parents = $(this).parents('.fj-tree-box');var b = $(this).prop('checked');if (!b) {$parents.each(function (index, ele) {$(ele).prev('.tree-name').eq(0).find('[type=checkbox]').prop('checked', false)})}if (that.set.callback) {that.set.callback(data, b)}}return { $cssarrow: $cssarrow, $label: $label}}var $cssarrow = $('<i class="cssarrow"></i><span class="name">' + Name + '</span>')return { $cssarrow: $cssarrow }
}
fjTree.prototype.cssarrowFn = function (that) {var $parent = $(that).parents('.tree-name').eq(0)$parent.toggleClass('down');$(this.treeParentDom).find('.tree-name').removeClass('active')$parent.addClass('active')$parent.next('.fj-tree-box').toggle();
}
fjTree.prototype.labelCheckBoxFn = function (that) {var $parent = $(that).parents('.tree-name').eq(0);$parent.next('.fj-tree-box').find('[type=checkbox]').prop('checked', $parent.find('[type=checkbox]').prop('checked') == true)
}fjTree.prototype.arrolabelCheckBoxFn = function ($dom, data) {var that = this$dom.onclick = function () {$(this).toggleClass('down');$(that.treeParentDom).find('.tree-name').removeClass('active')$(this).addClass('active')$(this).next('.fj-tree-box').toggle();if (!that.set.develop && $(this).next('.fj-tree-box').length == 0) {if (data[that.set.childName]) { $(this).after(that.htmltree(data[that.set.childName])) }}if (that.set.callback) {that.set.callback(data)}}
}document.write('<link href="/Script/fj-tree/fj-tree.css?v=20210729" rel="stylesheet" />');.fj-tree-box{padding-left:17px}
.fj-tree-box.firsttreebox{display:block;padding-left:16px}
.fj-tree-box .tree-name{position:relative;display:block;line-height:32px;font-size:14px;color:#333;cursor:pointer;white-space:nowrap;padding-left:10px}
.fj-tree-box .tree-name.active{background:#E6F7FF}
.cssarrow{display:inline-block;width:15px;height:32px;position:absolute;vertical-align:middle;left:-4px;top:50%;margin-top:-15px}
.cssarrow:before{content:'';border:5px solid transparent;border-left:6px solid #000;width:0;height:0;position:absolute;top:50%;margin-top:-6px;margin-left:3px;transition:.1s all;transform-origin:25% 50%;display:inline-block}
.fj-tree-box .tree-name.down .cssarrow:before{transform:rotate(90deg)}
.fj-tree-box .tree-name.noarrow .cssarrow{display:none}
.fj-tree-box .tree-name .label-checkbox{white-space:nowrap;text-overflow:ellipsis;word-break:break-all;max-width:215px;display:inline-block;vertical-align:middle;margin-left:5px}
.fj-tree-box .tree-name input[type=checkbox]{vertical-align:middle}
.fj-tree-box .tree-name .name{vertical-align:middle;padding-left:5px}

上传:

$("#uploadStaffEdit").change(function (e) {uploadImg(e.target, function (file) {UploadImageServer(file)})
});
function uploadImg(tag, callback) {var file = tag.files[0];var reader = new FileReader();// 此处判断上传的类型,或者在 <input type="file" value="选择文件上传" accept="..."/>中设置reader.readAsDataURL(file);if (callback) { callback(file) }reader.onload = function () {$('#img').attr('src', this.result)};
}
function UploadImageServer(file) {var formData = new FormData();// 对象formData.append("actionType", file);// 数组的方式: arr是参数数组;/*arr.forEach(function (item, index) {formData.append("List[" + index + "].CardType", item.CardType);formData.append("List[" + index + "].FormFile", item.File);});*/$.ajax({url: "/Manage/UpLoadExecl",type: 'POST',data: formData,async: false,cache: false,contentType: false,processData: false,success: function (data) { },error: function (data) {  }});
}

下载(网上搜关键字找的):

// 浏览器下载
window.downloadFile = function (sUrl) {//iOS devices do not support downloading. We have to inform user about this.if (/(iP)/g.test(navigator.userAgent)) {alert('Your device does not support files downloading. Please try again in desktop browser.');return false;}//If in Chrome or Safari - download via virtual link clickif (window.downloadFile.isChrome || window.downloadFile.isSafari) {//Creating new link node.var link = document.createElement('a');link.href = sUrl;if (link.download !== undefined) {//Set HTML5 download attribute. This will prevent file from opening if supported.var fileName = sUrl.substring(sUrl.lastIndexOf('/') + 1, sUrl.length);link.download = fileName;}//Dispatching click event.if (document.createEvent) {var e = document.createEvent('MouseEvents');e.initEvent('click', true, true);link.dispatchEvent(e);return true;}}// Force file download (whether supported by server).if (sUrl.indexOf('?') === -1) {sUrl += '?download';}window.open(sUrl, '_self');return true;
}window.downloadFile.isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
window.downloadFile.isSafari = navigator.userAgent.toLowerCase().indexOf('safari') > -1;// 调用
$('#downloadStaffEmpty').on('click', function () {downloadFile('/Images/excel/employee.xlsx');
})

html转pdf

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'// A4纸的宽高
const width = 794;
const height = 1123;
export const downloadPdf = (id, title) => {html2Canvas(document.querySelector(id), {allowTaint: true,width,height}).then(function (canvas) {let contentWidth = canvas.widthlet contentHeight = canvas.heightlet pageHeight = contentWidth / 592.28 * 841.89let leftHeight = contentHeightlet position = 0let imgWidth = 595.28let imgHeight = 592.28 / contentWidth * contentHeightlet pageData = canvas.toDataURL('image/jpeg', 1.0)let PDF = new JsPDF('', 'pt', 'a4')if (leftHeight < pageHeight) {PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)} else {while (leftHeight > 0) {PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)leftHeight -= pageHeightposition -= 841.89if (leftHeight > 0) {PDF.addPage()}}}PDF.save(title + '.pdf')})
}<div v-show="reimburseshow"><downloadreimburse class="downloadreimburse" />
</div>// downloadreimburse: 需要转成pdf的htmldownloadpdffn(){this.reimburseshow = true;this.$nextTick(() => {downloadPdf('.downloadreimburse', '报销单')this.reimburseshow = false;})
}

/*pageLayer.yanwu = function () {var html = '';pageLayer.layerToggle({obj1: '.ywdom',x: 0,data: html,left:253,right:43,overCallback: function (json) {var $layer = json.$Dom.find('.ul').css({height:120});var ywlayer = $(json.that).parents('td').find('[ywlayer]');if (ywlayer.html()) {$layer.html(ywlayer.html());return;}$layer.html('加载中...')setTimeout(function () {ywlayer.html('dddddasas');$layer.html(ywlayer.html());}, 1000)}});}pageLayer.yanwu()*/var pageLayer = {};
//tip的html拼接
pageLayer.html = function () {var pageLayerStr = '<div class="layer-many-ourboa">' +'<i class="arrow-icon top-arrow"></i>' +'<div class="ul-wrapper" style="position:relative;">' +'<div class="layer-many-load" style="position:absolute;top:0;left:0;bottom:0;right:0;background:rgba(255,255,255,0.6);color:#fff;display:none;">' +'<img src="/Images/loading_black.gif" style="position: absolute;top:50%;left:50%;margin:-49px 0 0 -54px "></div>' +'<div class="ul"></div>' +'</div>' +'</div>';return pageLayerStr;
}/*tip-layer*/
pageLayer.layerToggle = function (opt) {var json = {obj1: '.a',x: 0,y: 0,data: '加载中',overCallback: function (datas) { }}if (opt) { $.extend(json, opt); }$('body').on('mouseover', json.obj1, function (ev) {clearTimeout(this.hangsiTimer);if (this.hangsiTimer != null) {this.hangsiTimer = null;return;}var x = 0, y = 15;if (json.x) {x = json.x;}if (json.y) {y = json.y;}var $layerhtml = $(pageLayer.html()).clone();$(this).after($layerhtml);$layerhtml.find('.ul').html(json.data);var data = {that: this,key: $(this).val(),$Dom: $layerhtml}if (json.overCallback) {json.overCallback(data);}var left = $(this).offset().left - ($layerhtml.width() - $(json.obj1).width()) / 2;var top = $(this).offset().top - $(window).scrollTop();left = opt.left || left;var right = opt.right || 'auto'if (top + $layerhtml.height() + 40 > $(window).height()) {//上面显示console.log($layerhtml.height())$layerhtml.css({ "top": top - $layerhtml.height() + $(json.obj1).height() / 2 - y - 20 - 7, 'left': left + x - 5, 'right': right });$layerhtml.find('.arrow-icon').removeClass('top-arrow').addClass('down-arrow');} else {//下面显示$layerhtml.css({ "top": top + y + $(json.obj1).height() / 2 + 7 - 7, 'left': left + x - 5, 'right': right});$layerhtml.find('.arrow-icon').removeClass('down-arrow').addClass('top-arrow');}});$('body').on('mouseout', json.obj1, function (ev) {var that = this;this.hangsiTimer = setTimeout(function () {$(that).next('.layer-many-ourboa').remove();$(that).next('.layer-many-ourboa').remove();that.hangsiTimer = null;}, 100);});$('body').on('mouseover', json.obj1 + ' + .layer-many-ourboa', function () {if ($(document).height() > $(window).height()) {$('body').css({ 'overflow': 'hidden', 'padding-right': '17px' });}clearTimeout($(this).prev(json.obj1)[0].hangsiTimer);});$('body').on('mouseout', json.obj1 + ' + .layer-many-ourboa', function () {var that = this;$('body').css({ 'overflow': 'initial', 'padding-right': '0' });$(this).prev(json.obj1)[0].hangsiTimer = setTimeout(function () {if ($(that).prev(json.obj1)[0]) {$(that).prev(json.obj1)[0].hangsiTimer = null;}$(that).remove();}, 100);});
}$(window).scroll(function () {$('.layer-many-ourboa').remove();
});document.write('<link href="/Script/fjLayerTip/fjLayer.css" rel="stylesheet" />');.layer-many-ourboa {min-width: 168px; max-width: 480px; padding: 7px; line-height: 24px; background: #fff; position: fixed; border: 1px solid #d8d8d8; font-size: 12px; border-radius: 5px; z-index: 9999;box-shadow:2px 3px 5px rgba(0,0,0,.2); }
.layer-many-ourboa .top-arrow {display: block; position: absolute; top: -8px; left: 50%; margin-left: -9px; width: 18px; height: 9px; background: url(../Images/gather_icon.png) no-repeat -52px -227px; }
.layer-many-ourboa .down-arrow {display: block; position: absolute; bottom: -8px; left: 50%; margin-left: -9px; width: 18px; height: 9px; background: url(../Images/gather_icon.png) no-repeat -52px -238px; }
.layer-many-ourboa .ul {max-height: 230px; overflow-y: auto; }
.layer-many-ourboa li { line-height: 24px; }

自制小autocomplete/tree/上传/下载/html转pdf/layer相关推荐

微信小程序系列——上传下载图片以及图片的展示
一.上传 wxml: <button bindtap='upload'>上传文件</button> js: 首先在data里添加全局变量images data: {images ...
微信小程序上传接口php,微信小程序API 上传、下载
微信小程序API 上传.下载 wx.uploadFile(OBJECT) 将本地资源上传到开发者服务器.如页面通过 wx.chooseImage 等接口获取到一个本地资源的临时文件路径后,可通过此接口 ...
微信小程序开发之文件上传下载应用场景（附Demo源码）
微信小程序开发之文件上传下载应用场景(附Demo源码),Demo为小相册应用,源码在附件中,本示例需要腾讯云支持. http://www.henkuai.com/forum.php?mod=viewt ...
日常生活小技巧 -- SecureCRT上传和下载文件
如需转载请注明出处:https://juyou.blog.csdn.net/article/details/99563231 会用到Xshell 6或者SecureCRT(一般不用这个下载速度太慢)主 ...
超大文件上传下载以及秒传、提速和限速方案完整（包含前后端）
前言文件上传是一个老生常谈的话题了,在文件相对比较小的情况下,可以直接把文件转化为字节流上传到服务器,但在文件比较大的情况下,用普通的方式进行上传,这可不是一个好的办法,毕竟很少有人会忍受,当文件上 ...
Java中使用FTPClient上传下载
转自:http://blog.csdn.net/hbcui1984/article/details/2720204 在JAVA程序中,经常需要和FTP打交道,比如向FTP服务器上传文件.下载文件,本文 ...
Linux环境Shell脚本上传下载阿里云OSS文件
为什么80%的码农都做不了架构师?>>> Linux环境Shell脚本上传下载阿里云OSS文件背景工作中由于我们项目生成的日志文件比较重要,而本地磁盘空间有限存储不了多久, ...
Android开发中使用七牛云存储进行图片上传下载
Android开发中的图片存储本来就是比较耗时耗地的事情,而使用第三方的七牛云,便可以很好的解决这些后顾之忧,最近我也是在学习七牛的SDK,将使用过程在这记录下来,方便以后使用. 先说一下七牛云的存储 ...
JavaWeb实现文件上传下载功能实例解析
转:http://www.cnblogs.com/xdp-gacl/p/4200090.html JavaWeb实现文件上传下载功能实例解析在Web应用系统开发中,文件上传和下载功能是非常常用的功能 ...

自制小autocomplete/tree/上传/下载/html转pdf/layer

自制小autocomplete/tree/上传/下载/html转pdf/layer相关推荐

最新文章

热门文章