前端笔记1

最新推荐文章于 2024-01-27 00:14:05 发布

liukun003

最新推荐文章于 2024-01-27 00:14:05 发布

阅读量90

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/a811567770/article/details/85246611

版权

1 上传：

$.ecp.cssImport([’/components/common/uploadify/uploadify.css’]);
$.ecp.jsImport([’/components/common/uploadify/jquery.uploadify.js’]);

	// 上传应用图标
	$('#uploadLogo').uploadify({
	    'uploader': '/ecp/image.cloud',
	    'buttonImage': '/developercenter/images/upload.png',
	    'preventCaching': true,
	    'queueID': "queueResource",
	    'formData': {
		    'dir': "appIcon/icon"
	    },
	    'fileTypeDesc': "文件",
	    'width': '89',
	    'height': '30',
	    'multi': false,
	    'fileTypeExts': '*.jpg;*.bmp;*.png;*.jpeg;',
	    'onUploadSuccess': function (file, data, response) {
	    	
		    // 清空文件队列
		    for ( var n in this.queueData.files) {
			    this.queueData.files[n] = {};
		    }
		    var filePath = data.replace(/\r\n/gi, "");
		    var fileName = file.name;
		    var size = file.size
		  
		    //验证图片尺寸
		    $("#imgshow").attr("src", filePath);
		    $("#imgshow").one("load",function(){
		    	var img = new Image();
		        img.src = $("#imgshow").attr("src");
	            var imgWidth = img.width;
	            var imgHeight = img.height;
	            if(imgWidth != 90 || imgHeight != 90){
	                $.messager.alert("操作提示","建议使用90*90尺寸图片!"); 
	                $("#imgshow").attr("src", '/developercenter/images/icon1_03.png');
	            }else{
	            	$("#imgshow").attr("src", filePath);
	            	$('input[name="appIcon"]').val(filePath);
	            }
	  
		    });
		    
	    },
	    'onSelect': function (file) {
		    this.addPostParam("file_name", encodeURI(file.name));// 改变文件名的编码
	    }
	});
	


function upload() {
	// 上传文件
	$('#uploadFile').uploadify({
		'uploader': '/ecp/upload.cloud',
		'width': 78,
		'height': 38,
		'buttonImage': '/libmanage/images/choice.png',
		'formData': {
			'dir': 'zjjr/attachment'
		},
		'preventCaching': true,
		'queueID': 'queueResource',
		'fileTypeDesc': '文件',
		'multi': true,
		'onUploadSuccess': function(file, data, response) {
			filePath = data.replace(/\r\n/gi, '');
			fileName = file.name;
			// 清空文件队列
		    for ( var n in this.queueData.files) {
			    this.queueData.files[n] = {};
		    }
			// 新增小图书影汇
			insertLibSynthesis(filePath,fileName);
		},
		'onSelect': function(file) {
			this.addPostParam('file_name', encodeURI(file.name));	//改变文件名的编码
		}
	});
}

//上传-获取附件名称和路径
function getFile(){
	var attachName = [];
	var attachUrl = [];
	var obj = {};
	
	$(".filePaths li").each(function(){
		var name = $(this).attr('data-name');
		var path = $(this).attr('data-path');
		
		attachName.push(name);
		attachUrl.push(path);
	});
	
	obj.attachName = attachName.join(',');
	obj.attachUrl = attachUrl.join(',');
	
	return obj;
}

//上传-获取附件名称和路径
        var file = getFile();
    	var attachName = '';
    	var attachUrl = '';
    	if(file != undefined){
    		attachName = file.attachName;
			attachUrl = file.attachUrl;
    	}

2检查浏览器是否安装的flash

 function flashChecker() {
	var hasFlash = 0; //是否安装了flash
	if (document.all) {
		var swf = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
		if (swf) {
			hasFlash = 1;
		}
	} else {
		if (navigator.plugins && navigator.plugins.length > 0) {
			var swf = navigator.plugins["Shockwave Flash"];
			if (swf) {
				hasFlash = 1;
			}
		}
	}
	return hasFlash;
}

// 检查浏览器是否安装的flash-之后上传
var hasFlash  = flashChecker();
	
	if(hasFlash != 1){
		$.messager.alert("提示","您的浏览器未安装flash，无法完成上传功能！"); 
	} else {/*上传*/}

3确认按钮

$.messager.confirm('确认','确定发布信息？',function(r) {
    if (r) { 
    	if(gid == undefined){
    		insertLibSynthesis(content,attachName,attachUrl);
    	}else{
    		// 新增小图书影汇
	    	updateLibSynthesis(gid, content,attachName,attachUrl);
    	}
    }
}, false);

4下载附件

$('.j_upload_cont p').click(function () {
	var attachUrl = $(this).attr('data-attachUrl');
	window.location.href = "/ecp/down.download?filePath="+attachUrl;
});

5重置按钮

$("#reset_btn").click(function(){
	$searchForm[0].reset();
});

6模板引擎格式

//html页面
	<script id="jsTpl" type="text/html">
	{{each data as list i}}
		{{if list.appClientType == 1 }}
				<div class="title"><h5>电脑端</h5></div>
		{{/if}}
	{{/each}}
	</script>

//js页面
	 $infoPreview.html(template('infoTpl', result));
	 $jsPreview.html(template('jsTpl', {data : result.appInfoDetailDTOList}));


//模板引擎——自定义函数示例 - 日期截取
	template.helper("formateDate", function (time) {
		if (time != "") {
			return $utils.getStringEllipsis(time,10,0);
		} else {
			return time;
		}
	});

7 UI window

当前页js:
$(".list_open").click(function(){
var index = $(this).parents(".appcent_list").index();
var appGid = result.data[index].gid;
var opt ={
url:"/dfmanage/html/appAccess/noPass.html",
title:“确认”,
params:appGid,
width:400,
height: 300,
callback:function(data){
operMark=data;
updateAppInfoTemporaryno(appGid,‘4’);
insertAppChangeLog(appGid,‘4’);
}
}
$utils.showUIWindow(opt);

});

跳转页面js:
var dialogWin,params;
dialogWin = win;
params = win.getOptions().params;

    $("#pass-yes").unbind("click").click(function(){
		operMark=$("#noPass_content").val();
		dialogWin.returnValue(operMark);//往直前网页传递参数  callback里面的 data就是operMark
	})

##8 页面跳转
window.location.href="/dfmanage/index.html";

##9 表单验证

html页面：

 <div class="content" style="min-height:200px;">

 <div class="cont-top">确认审核不通过？</div>
 <div class="cont-cen1">不通过原因：</div>
 <div class="cont-cen2"><textarea id="noPass_content"  datatype="*1-50" placeholder="不超过50个字符" ></textarea></div>
</div>
<div style="text-align:center"><a href="javascript:void(0)" class="btn btn_white" id="pass-no">取消</a> <a href="javascript:void(0)" class="btn btn_green" id="pass-yes">确认</a></div>

js页面:
$KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲mottoForm').Val\dots$ ("#noPass_content").val();
dialogWin.returnValue(operMark);
return false;
}
});

##10 分页插件和空白显示

html页面：

暂无应用

<!-- 分页插件  -->
<div id="pagination" class="pagination"></div>

js页面：
$.ecp.jsImport([’/dfmanage/js/common/jPager/jqueryPager.js’,’/components/common/template.js’]);
$.ecp.cssImport([’/dfmanage/js/common/jPager/pagination.css’]);

$(".srarch_empty").hide();
var $pagination = $('#pagination');

	if (result.totalPage > 1) {
		$pagination.Pager(result.totalRecord, {
		    currentPageIndex: currentPage,
		    pageSize: pageSize,
		    callback: function (pageIndex, pageSize, $panel) {
		    	findAppinfoList(parseInt(pageIndex),pageSize);
		    }
		});
	} else {
		//$pagination.empty();
	}
		   	      
  }else{
	  $(".srarch_empty").show();
	  $pagination.empty();
  }

##11 供应商选择

<div class="input_box">
	<label>供应商名称：</label>
	<span>
		<input type="text" id="orgGid" placeholder="请选择"/>
	</span>
</div>




	$('#orgGid').slidegroup({
		type: 0,		// 组件类型 0：机构 1：出版社 2：中图法分类 3：自定义分类
		height: 300, 	// 高
		data: {			// 逻辑相关参数
			orgType: '2,3',	// 机构类型 1图书馆（可不传） 2出版商 3渠道商 4书商
			isSupply: 1	// 是否供货 0 否 1 是
		},
		done: function(data) {
		}
	});

##12 提交时间

提交时间：

-

##13 导出表格数据地址：openPT-dfmanage-balance-orgInfoDetail-orgInfoDetailList.js
function checkExport(data) {
// 导出
$(’#export’).popgroup({
title: ‘导出数据’, // 标题
type: 1, // 组件类型 0：导入 1：导出 2：中图法分类选择
width: 450, // 宽度
height: 180, // 高度
data: { // 逻辑相关参数
beanId: ‘com.cloud.dfmanage.service.IEbookContractInfoService.exportContractInfoList(RequestParameterMap)’,
excelName: ‘合同管理’, // 导出存储文件夹名称–本地
ths: [ // 表头信息List
{thTitle: ‘供应商名称’, thWidth: 100, dataName: ‘supName’},
{thTitle: ‘合同周期’, thWidth: 100, dataName: ‘startDate’},
{thTitle: ‘合作方式’, thWidth: 200, dataName: ‘settleType’},
{thTitle: ‘合作金额’, thWidth: 200, dataName: ‘buyoutAmount’},
{thTitle: ‘分成比例’, thWidth: 100, dataName: ‘shareRate’},
{thTitle: ‘预付款金额’, thWidth: 100, dataName: ‘prepayAmount’},
{thTitle: ‘预付款使用方式’, thWidth: 100, dataName: ‘usageWays’},
{thTitle: ‘到期状态’, thWidth: 100, dataName: ‘expiresStatus’}
],
// 接口查询必传参数写在下面
orgGid: orgGid,

			// 接口查询筛选条件form
			form: '#searchForm'
			
		},
		done: function(data) {

		}
	});

}

##14 页面重载
window.location.reload();

##15 js和css引入
$.ecp.cssImport(["/components/common/kindeditor/themes/default/default.css", “/components/common/uploadify/uploadify.css”])
$.ecp.jsImport(["/components/common/kindeditor/kindeditor-all.js",
“/components/common/uploadify/jquery.uploadify.js”],function(){
editor = KindEditor.create(’#columnContent’,{resizeType:1,width:“670px”,height:“400px”});
uploadEvent();
});

##16 导出为excel
//导出预付款
function exportPrepay(data){
if(data.total != 0) {
$(’#exportBtn’).removeClass(‘btn_gray’);
// 导出
$(’#exportBtn’).popgroup({
title: ‘导出数据’, // 标题
type: 1, // 组件类型 0：导入 1：导出 2：中图法分类选择
width: 450, // 宽度
height: 180, // 高度
data: { // 逻辑相关参数
beanId: ‘com.cloud.dfmanage.service.ISupPrepayInfoService.exportPrepayInfoList(RequestParameterMap)’,
excelName: ‘exportPrepay’, // 导出存储文件夹名称–本地
ths: [
{thTitle: ‘预付款录入日期’, thWidth: 100, dataName: ‘createDate’},
{thTitle: ‘供应商名称’, thWidth: 100, dataName: ‘supName’},
{thTitle: ‘预付款金额’, thWidth: 100, dataName: ‘prepayAmount’},
{thTitle: ‘预付款使用方式’, thWidth: 200, dataName: ‘usageWaysCN’},
{thTitle: ‘预付款日期’, thWidth: 200, dataName: ‘prepayDate’},
{thTitle: ‘合同周期’, thWidth: 200, dataName: ‘contCycle’},
{thTitle: ‘结算方式’, thWidth: 200, dataName: ‘balanceWays’}
],
form: ‘#prepaySearchFrom’,

				filterNum: filterRecord 
			},
			done: function(data) {

			}
		});
	}else{
		$('#exportBtn').addClass('btn_gray').unbind("click");
	}

##17 搜索条件必选供应商 openPT-dfmanage-js-balance-prepay-prepayInfoList.js
//搜索
$("#prepaySearch").click(function(){
var dataObj = $u t i l s . s e r i a l i z e O b j e c t ($ ("#prepaySearchFrom"));
if(dataObj.supGid == “”){
$.messager.alert(‘提示’,‘请选择要查询的供应商信息！’);
return;
}else{
queryPrepayList(dataObj);
}
});

##18 批量上传 openPT–pubmanage–html–pubEbookGrounding–index.html

##19 地图引用三新管理后台–客户管理–图书馆管理–新增

##20 时间区间控件

// 引入时间组件
$.ecp.jsImport([’/components/common/daterangepicker/moment.js’,’/components/common/daterangepicker/daterangepicker.js’,’/components/common/bootstrap/js/bootstrap.min.js’]);
$.ecp.cssImport([’/components/common/daterangepicker/daterangepicker-bs3.css’]);

<input type="text" name="reservation" id="reservation" class="form-control" value="请选择时间区间" />

//时间控件
	$("#reservation").daterangepicker(null, function(start, end, label) {
		$("#sele_time>li").removeClass("current"); 
    });

##21 自定义分页大数据-平台统计分析-用户分组分析 /bigdata/html/platform/groupAnalysis/groupAnalysis.html
html页面:

js页面：
var tableHtml = '<tr><th>'+type+'</th><th>浏览量</th><th>访客数</th><th>访问次数</th><th>详情</th></tr>';
var totalRecord = groupAnalysisList.length;
    var startWith = (parseInt(currentPage)-1) * parseInt(pageSize);
    var endWith = parseInt(currentPage) * parseInt(pageSize);
    var objData = groupAnalysisList.slice(startWith,endWith);
    for(var i = 0; i<objData.length; i++){
        //IE8CSS样式兼容
        if(i%2 ==0){
            tableHtml += '<tr class="table-bgcolor">'
        }else{
            tableHtml += '<tr>'
        }

        tableHtml +='<td>'+objData[i].name +'</td>'+
            '<td>'+objData[i].pageviews+'</td>'+
            '<td>'+objData[i].numberOfVisits+'</td>'+
            '<td>'+objData[i].frequency+'</td>'+
            "<td><a href='javascript:void(0);' class='viewDetail' style='color: #0066FF;'data-name='"+objData[i].name+"'>查看</a></td>"+
            '</tr>';
    }
    $("#table").html(tableHtml);

    $("#pagination").Pager(totalRecord,{
        currentPageIndex:currentPage,
        pageSize:pageSize,
        pageList: [5, 10, 15, 20],
        callback:function(currentPage,pageSize){
            createTable(groupAnalysisList , currentPage , pageSize);
        }
    })

##22 面包屑导航 bigdata-huagong-clc.js