Initial project files: BESCMS full source
This commit is contained in:
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,733 @@
|
||||
/**
|
||||
* jQuery photoClip v1.8.0
|
||||
* 依赖插件
|
||||
* - iscroll-zoom.js
|
||||
* - hammer.js
|
||||
* - lrz.all.bundle.js
|
||||
*
|
||||
* @author 白俊杰 625603381@qq.com 2014/07/31
|
||||
* https://github.com/baijunjie/jQuery-photoClip
|
||||
*
|
||||
* @brief 支持手势的裁图插件
|
||||
* 在移动设备上双指捏合为缩放，双指旋转可根据旋转方向每次旋转90度
|
||||
* 在PC设备上鼠标滚轮为缩放，每次双击则顺时针旋转90度
|
||||
* @option_param {array} size 截取框的宽和高组成的数组。默认值为[260,260]
|
||||
* @option_param {array} outputSize 输出图像的宽和高组成的数组。默认值为[0,0]，表示输出图像原始大小
|
||||
* //@option_param {string} outputType 指定输出图片的类型，可选 "jpg" 和 "png" 两种种类型，默认为 "jpg"
|
||||
* @option_param {string} file 上传图片的<input type="file">控件的选择器或者DOM对象
|
||||
* @option_param {string} view 显示截取后图像的容器的选择器或者DOM对象
|
||||
* @option_param {string} ok 确认截图按钮的选择器或者DOM对象
|
||||
* @option_param {function} loadStart 开始加载的回调函数。this指向 fileReader 对象，并将正在加载的 file 对象作为参数传入
|
||||
* @option_param {function} loadComplete 加载完成的回调函数。this指向图片对象，并将图片地址作为参数传入
|
||||
* @option_param {function} loadError 加载失败的回调函数。this指向 fileReader 对象，并将错误事件的 event 对象作为参数传入
|
||||
* @option_param {function} clipFinish 裁剪完成的回调函数。this指向原图片对象，会将裁剪出的图像数据DataURL作为参数传入
|
||||
*/
|
||||
|
||||
(function(root, factory) {
|
||||
"use strict";
|
||||
|
||||
if (typeof define === "function" && define.amd) {
|
||||
define(["jquery", "iscroll-zoom", "hammer", "lrz"], factory);
|
||||
} else if (typeof exports === "object") {
|
||||
module.exports = factory(require("jquery"), require("iscroll-zoom"), require("hammer"), require("lrz"));
|
||||
} else {
|
||||
root.bjj = root.bjj || {};
|
||||
root.bjj.PhotoClip = factory(root.jQuery, root.IScroll, root.Hammer, root.lrz);
|
||||
}
|
||||
|
||||
}(this, function($, IScroll, Hammer, lrz) {
|
||||
"use strict";
|
||||
|
||||
var defaultOption = {
|
||||
size: [260, 260],
|
||||
outputSize: [0, 0],
|
||||
//outputType: "jpg",
|
||||
file: "",
|
||||
view: "",
|
||||
ok: "",
|
||||
loadStart: function() {},
|
||||
loadComplete: function() {},
|
||||
loadError: function() {},
|
||||
clipFinish: function() {}
|
||||
}
|
||||
|
||||
function PhotoClip(container, option) {
|
||||
if (!window.FileReader) {
|
||||
dr_tips(0, "您的浏览器不支持 HTML5 的 FileReader API， 因此无法初始化图片裁剪插件，请更换最新的浏览器！");
|
||||
return;
|
||||
}
|
||||
|
||||
var opt = $.extend({}, defaultOption, option);
|
||||
var returnValue = photoClip(container, opt);
|
||||
|
||||
this.destroy = returnValue.destroy;
|
||||
}
|
||||
|
||||
function photoClip(container, option) {
|
||||
var size = option.size,
|
||||
outputSize = option.outputSize,
|
||||
file = option.file,
|
||||
view = option.view,
|
||||
ok = option.ok,
|
||||
//outputType = option.outputType || "image/jpeg",
|
||||
outputType = "image/jpeg",
|
||||
loadStart = option.loadStart,
|
||||
loadComplete = option.loadComplete,
|
||||
loadError = option.loadError,
|
||||
clipFinish = option.clipFinish;
|
||||
|
||||
if (!isArray(size)) {
|
||||
size = [260, 260];
|
||||
}
|
||||
|
||||
if (!isArray(outputSize)) {
|
||||
outputSize = [0, 0];
|
||||
}
|
||||
|
||||
var clipWidth = size[0] || 260,
|
||||
clipHeight = size[1] || 260,
|
||||
outputWidth = Math.max(outputSize[0], 0),
|
||||
outputHeight = Math.max(outputSize[1], 0);
|
||||
|
||||
/*if (outputType === "jpg") {
|
||||
outputType = "image/jpeg";
|
||||
} else if (outputType === "png") {
|
||||
outputType = "image/png";
|
||||
}*/
|
||||
|
||||
var $file = $(file);
|
||||
if (!$file.length) return;
|
||||
|
||||
var $img,
|
||||
imgWidth, imgHeight, //图片当前的宽高
|
||||
imgLoaded; //图片是否已经加载完成
|
||||
|
||||
$file.attr("accept", "image/*");
|
||||
$file.on("change", function() {
|
||||
if (!this.files.length) return;
|
||||
var files = this.files[0];
|
||||
if (!/image\/\w+/.test(files.type)) {
|
||||
dr_tips(0, "图片格式不正确，请选择正确格式的图片文件！");
|
||||
return false;
|
||||
} else {
|
||||
var fileReader = new FileReader();
|
||||
fileReader.onprogress = function(e) {
|
||||
//console.log((e.loaded / e.total * 100).toFixed() + "%");
|
||||
};
|
||||
|
||||
fileReader.onload = function(e) {
|
||||
//console.log(typeof lrz);
|
||||
|
||||
lrz(files)
|
||||
.then(function (rst) {
|
||||
// 处理成功会执行
|
||||
createImg(rst.base64);
|
||||
})
|
||||
.catch(function (err) {
|
||||
// 处理失败会执行
|
||||
dr_tips(0, "图片处理失败");
|
||||
loadError.call(this, err);
|
||||
});
|
||||
};
|
||||
fileReader.onerror = function(e) {
|
||||
dr_tips(0, "图片加载失败");
|
||||
loadError.call(this, e);
|
||||
};
|
||||
fileReader.readAsDataURL(files); // 读取文件内容
|
||||
|
||||
loadStart.call(fileReader, files);
|
||||
}
|
||||
});
|
||||
|
||||
$file.click(function() {
|
||||
this.value = "";
|
||||
});
|
||||
|
||||
var $container, // 容器，包含裁剪视图层和遮罩层
|
||||
$clipView, // 裁剪视图层，包含移动层
|
||||
$moveLayer, // 移动层，包含旋转层
|
||||
$rotateLayer, // 旋转层
|
||||
$view, // 最终截图后呈现的视图容器
|
||||
canvas, // 图片裁剪用到的画布
|
||||
hammerManager,
|
||||
myScroll, // 图片的scroll对象，包含图片的位置与缩放信息
|
||||
containerWidth,
|
||||
containerHeight;
|
||||
|
||||
init();
|
||||
initScroll();
|
||||
initEvent();
|
||||
initClip();
|
||||
|
||||
var $ok = $(ok);
|
||||
if ($ok.length) {
|
||||
$ok.click(function() {
|
||||
clipImg();
|
||||
});
|
||||
}
|
||||
|
||||
var $win = $(window);
|
||||
resize();
|
||||
$win.resize(resize);
|
||||
|
||||
var atRotation, // 是否正在旋转中
|
||||
curX, // 旋转层的当前X坐标
|
||||
curY, // 旋转层的当前Y坐标
|
||||
curAngle; // 旋转层的当前角度
|
||||
|
||||
function imgLoad() {
|
||||
imgLoaded = true;
|
||||
|
||||
$rotateLayer.append(this);
|
||||
|
||||
hideAction.call(this, $img, function() {
|
||||
imgWidth = this.naturalWidth;
|
||||
imgHeight = this.naturalHeight;
|
||||
});
|
||||
|
||||
hideAction($moveLayer, function() {
|
||||
resetScroll();
|
||||
});
|
||||
|
||||
|
||||
loadComplete.call(this, this.src);
|
||||
}
|
||||
|
||||
function initScroll() {
|
||||
var options = {
|
||||
zoom: true,
|
||||
scrollX: true,
|
||||
scrollY: true,
|
||||
freeScroll: true,
|
||||
mouseWheel: true,
|
||||
wheelAction: "zoom"
|
||||
}
|
||||
myScroll = new IScroll($clipView[0], options);
|
||||
}
|
||||
function resetScroll() {
|
||||
curX = 0;
|
||||
curY = 0;
|
||||
curAngle = 0;
|
||||
|
||||
$rotateLayer.css({
|
||||
"width": imgWidth,
|
||||
"height": imgHeight
|
||||
});
|
||||
setTransform($rotateLayer, curX, curY, curAngle);
|
||||
|
||||
calculateScale(imgWidth, imgHeight);
|
||||
myScroll.zoom(myScroll.options.zoomStart);
|
||||
refreshScroll(imgWidth, imgHeight);
|
||||
|
||||
var posX = (clipWidth - imgWidth * myScroll.options.zoomStart) * .5,
|
||||
posY = (clipHeight - imgHeight * myScroll.options.zoomStart) * .5;
|
||||
myScroll.scrollTo(posX, posY);
|
||||
}
|
||||
function refreshScroll(width, height) {
|
||||
$moveLayer.css({
|
||||
"width": width,
|
||||
"height": height
|
||||
});
|
||||
// 在移动设备上，尤其是Android设备，当为一个元素重置了宽高时
|
||||
// 该元素的offsetWidth/offsetHeight、clientWidth/clientHeight等属性并不会立即更新，导致相关的js程序出现错误
|
||||
// iscroll 在刷新方法中正是使用了 offsetWidth/offsetHeight 来获取scroller元素($moveLayer)的宽高
|
||||
// 因此需要手动将元素重新添加进文档，迫使浏览器强制更新元素的宽高
|
||||
$clipView.append($moveLayer);
|
||||
myScroll.refresh();
|
||||
}
|
||||
|
||||
function initEvent() {
|
||||
var is_mobile = !!navigator.userAgent.match(/mobile/i);
|
||||
|
||||
if (is_mobile) {
|
||||
hammerManager = new Hammer($moveLayer[0]);
|
||||
hammerManager.add(new Hammer.Rotate());
|
||||
|
||||
var rotation, rotateDirection;
|
||||
hammerManager.on("rotatemove", function(e) {
|
||||
if (atRotation) return;
|
||||
rotation = e.rotation;
|
||||
if (rotation > 180) {
|
||||
rotation -= 360;
|
||||
} else if (rotation < -180) {
|
||||
rotation += 360 ;
|
||||
}
|
||||
rotateDirection = rotation > 0 ? 1 : rotation < 0 ? -1 : 0;
|
||||
});
|
||||
hammerManager.on("rotateend", function(e) {
|
||||
if (atRotation) return;
|
||||
|
||||
if (Math.abs(rotation) > 30) {
|
||||
if (rotateDirection == 1) {
|
||||
// 顺时针
|
||||
rotateCW(e.center);
|
||||
} else if (rotateDirection == -1) {
|
||||
// 逆时针
|
||||
rotateCCW(e.center);
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
$moveLayer.on("dblclick", function(e) {
|
||||
rotateCW({
|
||||
x: e.clientX,
|
||||
y: e.clientY
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
function rotateCW(point) {
|
||||
rotateBy(90, point);
|
||||
}
|
||||
function rotateCCW(point) {
|
||||
rotateBy(-90, point);
|
||||
}
|
||||
function rotateBy(angle, point) {
|
||||
if (atRotation) return;
|
||||
atRotation = true;
|
||||
|
||||
var loacl;
|
||||
if (!point) {
|
||||
loacl = loaclToLoacl($moveLayer, $clipView, clipWidth * .5, clipHeight * .5);
|
||||
} else {
|
||||
loacl = globalToLoacl($moveLayer, point.x, point.y);
|
||||
}
|
||||
var origin = calculateOrigin(curAngle, loacl), // 旋转中使用的参考点坐标
|
||||
originX = origin.x,
|
||||
originY = origin.y,
|
||||
|
||||
// 旋转层以零位为参考点旋转到新角度后的位置，与以当前计算的参考点“从零度”旋转到新角度后的位置，之间的左上角偏移量
|
||||
offsetX = 0, offsetY = 0,
|
||||
// 移动层当前的位置（即旋转层旋转前的位置），与旋转层以当前计算的参考点从当前角度旋转到新角度后的位置，之间的左上角偏移量
|
||||
parentOffsetX = 0, parentOffsetY = 0,
|
||||
|
||||
newAngle = curAngle + angle,
|
||||
|
||||
curImgWidth, // 移动层的当前宽度
|
||||
curImgHeight; // 移动层的当前高度
|
||||
|
||||
|
||||
if (newAngle == 90 || newAngle == -270)
|
||||
{
|
||||
offsetX = originX + originY;
|
||||
offsetY = originY - originX;
|
||||
|
||||
if (newAngle > curAngle) {
|
||||
parentOffsetX = imgHeight - originX - originY;
|
||||
parentOffsetY = originX - originY;
|
||||
} else if (newAngle < curAngle) {
|
||||
parentOffsetX = (imgHeight - originY) - (imgWidth - originX);
|
||||
parentOffsetY = originX + originY - imgHeight;
|
||||
}
|
||||
|
||||
curImgWidth = imgHeight;
|
||||
curImgHeight = imgWidth;
|
||||
}
|
||||
else if (newAngle == 180 || newAngle == -180)
|
||||
{
|
||||
offsetX = originX * 2;
|
||||
offsetY = originY * 2;
|
||||
|
||||
if (newAngle > curAngle) {
|
||||
parentOffsetX = (imgWidth - originX) - (imgHeight - originY);
|
||||
parentOffsetY = imgHeight - (originX + originY);
|
||||
} else if (newAngle < curAngle) {
|
||||
parentOffsetX = imgWidth - (originX + originY);
|
||||
parentOffsetY = (imgHeight - originY) - (imgWidth - originX);
|
||||
}
|
||||
|
||||
curImgWidth = imgWidth;
|
||||
curImgHeight = imgHeight;
|
||||
}
|
||||
else if (newAngle == 270 || newAngle == -90)
|
||||
{
|
||||
offsetX = originX - originY;
|
||||
offsetY = originX + originY;
|
||||
|
||||
if (newAngle > curAngle) {
|
||||
parentOffsetX = originX + originY - imgWidth;
|
||||
parentOffsetY = (imgWidth - originX) - (imgHeight - originY);
|
||||
} else if (newAngle < curAngle) {
|
||||
parentOffsetX = originY - originX;
|
||||
parentOffsetY = imgWidth - originX - originY;
|
||||
}
|
||||
|
||||
curImgWidth = imgHeight;
|
||||
curImgHeight = imgWidth;
|
||||
}
|
||||
else if (newAngle == 0 || newAngle == 360 || newAngle == -360)
|
||||
{
|
||||
offsetX = 0;
|
||||
offsetY = 0;
|
||||
|
||||
if (newAngle > curAngle) {
|
||||
parentOffsetX = originX - originY;
|
||||
parentOffsetY = originX + originY - imgWidth;
|
||||
} else if (newAngle < curAngle) {
|
||||
parentOffsetX = originX + originY - imgHeight;
|
||||
parentOffsetY = originY - originX;
|
||||
}
|
||||
|
||||
curImgWidth = imgWidth;
|
||||
curImgHeight = imgHeight;
|
||||
}
|
||||
|
||||
// 将触摸点设为旋转时的参考点
|
||||
// 改变参考点的同时，要计算坐标的偏移，从而保证图片位置不发生变化
|
||||
if (curAngle == 0) {
|
||||
curX = 0;
|
||||
curY = 0;
|
||||
} else if (curAngle == 90 || curAngle == -270) {
|
||||
curX -= originX + originY;
|
||||
curY -= originY - originX;
|
||||
} else if (curAngle == 180 || curAngle == -180) {
|
||||
curX -= originX * 2;
|
||||
curY -= originY * 2;
|
||||
} else if (curAngle == 270 || curAngle == -90) {
|
||||
curX -= originX - originY;
|
||||
curY -= originX + originY;
|
||||
}
|
||||
curX = curX.toFixed(2) - 0;
|
||||
curY = curY.toFixed(2) - 0;
|
||||
setTransform($rotateLayer, curX, curY, curAngle, originX, originY);
|
||||
|
||||
// 开始旋转
|
||||
setTransition($rotateLayer, curX, curY, newAngle, 200, function() {
|
||||
atRotation = false;
|
||||
curAngle = newAngle % 360;
|
||||
// 旋转完成后将参考点设回零位
|
||||
// 同时加上偏移，保证图片位置看上去没有变化
|
||||
// 这里要另外要加上父容器（移动层）零位与自身之间的偏移量
|
||||
curX += offsetX + parentOffsetX;
|
||||
curY += offsetY + parentOffsetY;
|
||||
curX = curX.toFixed(2) - 0;
|
||||
curY = curY.toFixed(2) - 0;
|
||||
setTransform($rotateLayer, curX, curY, curAngle);
|
||||
// 相应的父容器（移动层）要减去与旋转层之间的偏移量
|
||||
// 这样看上去就好像图片没有移动
|
||||
myScroll.scrollTo(
|
||||
myScroll.x - parentOffsetX * myScroll.scale,
|
||||
myScroll.y - parentOffsetY * myScroll.scale
|
||||
);
|
||||
calculateScale(curImgWidth, curImgHeight);
|
||||
if (myScroll.scale < myScroll.options.zoomMin) {
|
||||
myScroll.zoom(myScroll.options.zoomMin);
|
||||
}
|
||||
|
||||
refreshScroll(curImgWidth, curImgHeight);
|
||||
});
|
||||
}
|
||||
|
||||
function initClip() {
|
||||
canvas = document.createElement("canvas");
|
||||
}
|
||||
function clipImg() {
|
||||
if (!imgLoaded) {
|
||||
dr_tips(0, "当前没有图片可以裁剪!");
|
||||
return;
|
||||
}
|
||||
var local = loaclToLoacl($moveLayer, $clipView);
|
||||
var scale = myScroll.scale;
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.save();
|
||||
|
||||
if (!outputWidth || !outputHeight) {
|
||||
canvas.width = clipWidth / scale;
|
||||
canvas.height = clipHeight / scale;
|
||||
} else {
|
||||
canvas.width = outputWidth;
|
||||
canvas.height = outputHeight;
|
||||
ctx.scale(outputWidth / clipWidth * scale, outputHeight / clipHeight * scale);
|
||||
}
|
||||
|
||||
ctx.translate(curX - local.x / scale, curY - local.y / scale);
|
||||
ctx.rotate(curAngle * Math.PI / 180);
|
||||
|
||||
ctx.drawImage($img[0], 0, 0);
|
||||
ctx.restore();
|
||||
|
||||
var dataURL = canvas.toDataURL(outputType, 1);
|
||||
$view.css("background-image", "url("+ dataURL +")");
|
||||
clipFinish.call($img[0], dataURL);
|
||||
}
|
||||
|
||||
|
||||
function resize() {
|
||||
hideAction($container, function() {
|
||||
containerWidth = $container.width();
|
||||
containerHeight = $container.height();
|
||||
});
|
||||
}
|
||||
function loaclToLoacl($layerOne, $layerTwo, x, y) { // 计算$layerTwo上的x、y坐标在$layerOne上的坐标
|
||||
x = x || 0;
|
||||
y = y || 0;
|
||||
var layerOneOffset, layerTwoOffset;
|
||||
hideAction($layerOne, function() {
|
||||
layerOneOffset = $layerOne.offset();
|
||||
});
|
||||
hideAction($layerTwo, function() {
|
||||
layerTwoOffset = $layerTwo.offset();
|
||||
});
|
||||
return {
|
||||
x: layerTwoOffset.left - layerOneOffset.left + x,
|
||||
y: layerTwoOffset.top - layerOneOffset.top + y
|
||||
};
|
||||
}
|
||||
function globalToLoacl($layer, x, y) { // 计算相对于窗口的x、y坐标在$layer上的坐标
|
||||
x = x || 0;
|
||||
y = y || 0;
|
||||
var layerOffset;
|
||||
hideAction($layer, function() {
|
||||
layerOffset = $layer.offset();
|
||||
});
|
||||
return {
|
||||
x: x + $win.scrollLeft() - layerOffset.left,
|
||||
y: y + $win.scrollTop() - layerOffset.top
|
||||
};
|
||||
}
|
||||
function hideAction(jq, func) {
|
||||
var $hide = $();
|
||||
$.each(jq, function(i, n){
|
||||
var $n = $(n);
|
||||
var $hidden = $n.parents().addBack().filter(":hidden");
|
||||
var $none;
|
||||
for (var i = 0; i < $hidden.length; i++) {
|
||||
if (!$n.is(":hidden")) break;
|
||||
$none = $hidden.eq(i);
|
||||
if ($none.css("display") == "none") $hide = $hide.add($none.show());
|
||||
}
|
||||
});
|
||||
if (typeof(func) == "function") func.call(this);
|
||||
$hide.hide();
|
||||
}
|
||||
function calculateOrigin(curAngle, point) {
|
||||
var scale = myScroll.scale;
|
||||
var origin = {};
|
||||
if (curAngle == 0) {
|
||||
origin.x = point.x / scale;
|
||||
origin.y = point.y / scale;
|
||||
} else if (curAngle == 90 || curAngle == -270) {
|
||||
origin.x = point.y / scale;
|
||||
origin.y = imgHeight - point.x / scale;
|
||||
} else if (curAngle == 180 || curAngle == -180) {
|
||||
origin.x = imgWidth - point.x / scale;
|
||||
origin.y = imgHeight - point.y / scale;
|
||||
} else if (curAngle == 270 || curAngle == -90) {
|
||||
origin.x = imgWidth - point.y / scale;
|
||||
origin.y = point.x / scale;
|
||||
}
|
||||
return origin;
|
||||
}
|
||||
function getScale(w1, h1, w2, h2) {
|
||||
var sx = w1 / w2;
|
||||
var sy = h1 / h2;
|
||||
return sx > sy ? sx : sy;
|
||||
}
|
||||
function calculateScale(width, height) {
|
||||
myScroll.options.zoomMin = getScale(clipWidth, clipHeight, width, height);
|
||||
myScroll.options.zoomMax = Math.max(1, myScroll.options.zoomMin);
|
||||
myScroll.options.zoomStart = Math.min(myScroll.options.zoomMax, getScale(containerWidth, containerHeight, width, height));
|
||||
}
|
||||
|
||||
function clearImg() {
|
||||
if ($img && $img.length) {
|
||||
// 删除旧的图片以释放内存，防止IOS设备的webview崩溃
|
||||
$img.remove();
|
||||
delete $img[0];
|
||||
}
|
||||
}
|
||||
|
||||
function createImg(src) {
|
||||
clearImg();
|
||||
$img = $("<img>").css({
|
||||
"user-select": "none",
|
||||
"pointer-events": "none"
|
||||
});
|
||||
$img.on('load', imgLoad);
|
||||
$img.attr("src", src); // 设置图片base64值
|
||||
}
|
||||
|
||||
function setTransform($obj, x, y, angle, originX, originY) {
|
||||
originX = originX || 0;
|
||||
originY = originY || 0;
|
||||
var style = {};
|
||||
style[prefix + "transform"] = "translateZ(0) translate(" + x + "px," + y + "px) rotate(" + angle + "deg)";
|
||||
style[prefix + "transform-origin"] = originX + "px " + originY + "px";
|
||||
$obj.css(style);
|
||||
}
|
||||
function setTransition($obj, x, y, angle, dur, fn) {
|
||||
// 这里需要先读取之前设置好的transform样式，强制浏览器将该样式值渲染到元素
|
||||
// 否则浏览器可能出于性能考虑，将暂缓样式渲染，等到之后所有样式设置完成后再统一渲染
|
||||
// 这样就会导致之前设置的位移也被应用到动画中
|
||||
$obj.css(prefix + "transform");
|
||||
$obj.css(prefix + "transition", prefix + "transform " + dur + "ms");
|
||||
$obj.one(transitionEnd, function() {
|
||||
$obj.css(prefix + "transition", "");
|
||||
fn.call(this);
|
||||
});
|
||||
$obj.css(prefix + "transform", "translateZ(0) translate(" + x + "px," + y + "px) rotate(" + angle + "deg)");
|
||||
}
|
||||
|
||||
// 判断一个对象是否为数组
|
||||
function isArray(obj) {
|
||||
return Object.prototype.toString.call(obj) === "[object Array]";
|
||||
}
|
||||
|
||||
function init() {
|
||||
// 初始化容器
|
||||
$container = $(container).css({
|
||||
"user-select": "none",
|
||||
"overflow": "hidden"
|
||||
});
|
||||
if ($container.css("position") == "static") $container.css("position", "relative");
|
||||
|
||||
// 创建裁剪视图层
|
||||
$clipView = $("<div class='photo-clip-view'>").css({
|
||||
"position": "absolute",
|
||||
"left": "50%",
|
||||
"top": "50%",
|
||||
"width": clipWidth,
|
||||
"height": clipHeight,
|
||||
"margin-left": -clipWidth/2,
|
||||
"margin-top": -clipHeight/2
|
||||
}).appendTo($container);
|
||||
|
||||
$moveLayer = $("<div class='photo-clip-moveLayer'>").appendTo($clipView);
|
||||
|
||||
$rotateLayer = $("<div class='photo-clip-rotateLayer'>").appendTo($moveLayer);
|
||||
|
||||
// 创建遮罩
|
||||
var $mask = $("<div class='photo-clip-mask'>").css({
|
||||
"position": "absolute",
|
||||
"left": 0,
|
||||
"top": 0,
|
||||
"width": "100%",
|
||||
"height": "100%",
|
||||
"pointer-events": "none"
|
||||
}).appendTo($container);
|
||||
var $mask_left = $("<div class='photo-clip-mask-left'>").css({
|
||||
"position": "absolute",
|
||||
"left": 0,
|
||||
"right": "50%",
|
||||
"top": "50%",
|
||||
"bottom": "50%",
|
||||
"width": "auto",
|
||||
"height": clipHeight,
|
||||
"margin-right": clipWidth/2,
|
||||
"margin-top": -clipHeight/2,
|
||||
"margin-bottom": -clipHeight/2,
|
||||
"background-color": "rgba(0,0,0,.5)"
|
||||
}).appendTo($mask);
|
||||
var $mask_right = $("<div class='photo-clip-mask-right'>").css({
|
||||
"position": "absolute",
|
||||
"left": "50%",
|
||||
"right": 0,
|
||||
"top": "50%",
|
||||
"bottom": "50%",
|
||||
"margin-left": clipWidth/2,
|
||||
"margin-top": -clipHeight/2,
|
||||
"margin-bottom": -clipHeight/2,
|
||||
"background-color": "rgba(0,0,0,.5)"
|
||||
}).appendTo($mask);
|
||||
var $mask_top = $("<div class='photo-clip-mask-top'>").css({
|
||||
"position": "absolute",
|
||||
"left": 0,
|
||||
"right": 0,
|
||||
"top": 0,
|
||||
"bottom": "50%",
|
||||
"margin-bottom": clipHeight/2,
|
||||
"background-color": "rgba(0,0,0,.5)"
|
||||
}).appendTo($mask);
|
||||
var $mask_bottom = $("<div class='photo-clip-mask-bottom'>").css({
|
||||
"position": "absolute",
|
||||
"left": 0,
|
||||
"right": 0,
|
||||
"top": "50%",
|
||||
"bottom": 0,
|
||||
"margin-top": clipHeight/2,
|
||||
"background-color": "rgba(0,0,0,.5)"
|
||||
}).appendTo($mask);
|
||||
// 创建截取区域
|
||||
var $clip_area = $("<div class='photo-clip-area'>").css({
|
||||
"border": "1px dashed #ddd",
|
||||
"position": "absolute",
|
||||
"left": "50%",
|
||||
"top": "50%",
|
||||
"width": clipWidth,
|
||||
"height": clipHeight,
|
||||
"margin-left": -clipWidth/2 - 1,
|
||||
"margin-top": -clipHeight/2 - 1
|
||||
}).appendTo($mask);
|
||||
|
||||
// 初始化视图容器
|
||||
$view = $(view);
|
||||
if ($view.length) {
|
||||
$view.css({
|
||||
"background-color": "#666",
|
||||
"background-repeat": "no-repeat",
|
||||
"background-position": "center",
|
||||
"background-size": "contain"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function destroy() {
|
||||
$file.off("change");
|
||||
$file = null;
|
||||
|
||||
if (hammerManager) {
|
||||
hammerManager.off("rotatemove");
|
||||
hammerManager.off("rotateend");
|
||||
hammerManager = null;
|
||||
} else {
|
||||
$moveLayer.off("dblclick");
|
||||
}
|
||||
|
||||
myScroll.destroy();
|
||||
myScroll = null;
|
||||
|
||||
$container.empty();
|
||||
$container = null;
|
||||
$clipView = null;
|
||||
$moveLayer = null;
|
||||
$rotateLayer = null;
|
||||
|
||||
$view.css({
|
||||
"background-color": "",
|
||||
"background-repeat": "",
|
||||
"background-position": "",
|
||||
"background-size": ""
|
||||
});
|
||||
$view = null;
|
||||
}
|
||||
|
||||
return {
|
||||
destroy: destroy
|
||||
};
|
||||
}
|
||||
|
||||
var prefix = '',
|
||||
transitionEnd;
|
||||
|
||||
(function() {
|
||||
|
||||
var eventPrefix,
|
||||
vendors = { Webkit: 'webkit', Moz: '', O: 'o' },
|
||||
testEl = document.documentElement,
|
||||
normalizeEvent = function(name) { return eventPrefix ? eventPrefix + name : name.toLowerCase() };
|
||||
|
||||
for (var i in vendors) {
|
||||
if (testEl.style[i + 'TransitionProperty'] !== undefined) {
|
||||
prefix = '-' + i.toLowerCase() + '-';
|
||||
eventPrefix = vendors[i];
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
transitionEnd = normalizeEvent('TransitionEnd');
|
||||
|
||||
})();
|
||||
|
||||
return PhotoClip;
|
||||
}));
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+19
File diff suppressed because one or more lines are too long
@@ -0,0 +1,38 @@
|
||||
(function($) {
|
||||
$.fn.extend({
|
||||
insertContent: function(myValue, t) {
|
||||
var $t = $(this)[0];
|
||||
if (document.selection) { //ie
|
||||
this.focus();
|
||||
var sel = document.selection.createRange();
|
||||
sel.text = myValue;
|
||||
this.focus();
|
||||
sel.moveStart('character', -l);
|
||||
var wee = sel.text.length;
|
||||
if (arguments.length == 2) {
|
||||
var l = $t.value.length;
|
||||
sel.moveEnd("character", wee + t);
|
||||
t <= 0 ? sel.moveStart("character", wee - 2 * t - myValue.length) : sel.moveStart("character", wee - t - myValue.length);
|
||||
sel.select();
|
||||
}
|
||||
} else if ($t.selectionStart || $t.selectionStart == '0') {
|
||||
var startPos = $t.selectionStart;
|
||||
var endPos = $t.selectionEnd;
|
||||
var scrollTop = $t.scrollTop;
|
||||
$t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length);
|
||||
this.focus();
|
||||
$t.selectionStart = startPos + myValue.length;
|
||||
$t.selectionEnd = startPos + myValue.length;
|
||||
$t.scrollTop = scrollTop;
|
||||
if (arguments.length == 2) {
|
||||
$t.setSelectionRange(startPos - t, $t.selectionEnd + t);
|
||||
this.focus();
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.value += myValue;
|
||||
this.focus();
|
||||
}
|
||||
}
|
||||
})
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,296 @@
|
||||
/**
|
||||
* $.ld
|
||||
* @extends jquery.1.4.2
|
||||
* @fileOverview 创建一组联动选择框
|
||||
* @author 明河共影
|
||||
* @email mohaiguyan12@126.com
|
||||
* @site wwww.36ria.com
|
||||
* @version 0.2
|
||||
* @date 2010-08-18
|
||||
* Copyright (c) 2010-2010 明河共影
|
||||
* @example
|
||||
* $(".ld-select").ld();
|
||||
*/
|
||||
(function($){
|
||||
$.fn.ld = function(options){
|
||||
var opts;
|
||||
var DATA_NAME = "ld";
|
||||
//返回API
|
||||
if(typeof options == 'string'){
|
||||
if(options == 'api'){
|
||||
return $(this).data(DATA_NAME);
|
||||
}
|
||||
}
|
||||
else{
|
||||
var options = options || {};
|
||||
//覆盖参数
|
||||
opts = $.extend(true, {}, $.fn.ld.defaults, options);
|
||||
}
|
||||
if($(this).length > 0){
|
||||
var ld = new yijs.Ld(opts);
|
||||
ld.$applyTo = $(this);
|
||||
ld.render();
|
||||
$(this).data(DATA_NAME,ld);
|
||||
}
|
||||
return $(this);
|
||||
}
|
||||
var yijs = yijs || {};
|
||||
yijs.Ld = function(options){
|
||||
//参数
|
||||
this.options = options;
|
||||
//起作用的对象
|
||||
this.$applyTo = this.options.applyTo && $(this.options.applyTo) || null;
|
||||
//缓存前缀
|
||||
this.cachePrefix = "data_";
|
||||
//写入到选择框的option的样式名
|
||||
this.OPTIONS_CLASS = "ld-option";
|
||||
//缓存，为一个对象字面量。
|
||||
this.cache = {};
|
||||
}
|
||||
yijs.Ld.prototype = {
|
||||
/**
|
||||
* 运行
|
||||
* @return {Object} this
|
||||
*/
|
||||
render: function(){
|
||||
var _that = this;
|
||||
var _opts = this.options;
|
||||
if (this.$applyTo != null && this.size() > 0) {
|
||||
_opts.style != null && this.css(_opts.style);
|
||||
//加载默认数据，向第一个选择框填充数据
|
||||
this.load(_opts.defaultLoadSelectIndex,_opts.defaultParentId);
|
||||
_opts.texts.length > 0 && this.selected(_opts.texts);
|
||||
//给每个选择框绑定change事件
|
||||
this.$applyTo.each(function(i){
|
||||
// i < _that.size()-1 &&
|
||||
$(this).bind(_opts.drevent+".ld",{target:_that,index:i},_that.onchange);
|
||||
})
|
||||
}
|
||||
return this;
|
||||
},
|
||||
texts : function(ts){
|
||||
var that = this;
|
||||
var $select = this.$applyTo;
|
||||
var _arr = [];
|
||||
var txt = null;
|
||||
var $options;
|
||||
$select.each(function(){
|
||||
txt = $(this).children('.'+that.OPTIONS_CLASS+':selected').text();
|
||||
_arr.push(txt);
|
||||
})
|
||||
return _arr;
|
||||
},
|
||||
/**
|
||||
* 获取联动选择框的数量
|
||||
* @return {Number} 选择框的数量
|
||||
*/
|
||||
size : function(){
|
||||
return this.$applyTo.length;
|
||||
},
|
||||
/**
|
||||
* 设置选择框的样式
|
||||
* @param {Object} style 样式
|
||||
* @return {Object} this
|
||||
*/
|
||||
css : function(style){
|
||||
style && this.$applyTo.css(style);
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* 读取数据，并写入到选择框
|
||||
* @param {Number} selectIndex 选择框数组的索引值
|
||||
* @param {String} parent_id 父级id
|
||||
*/
|
||||
load : function(selectIndex,parent_id,callback){
|
||||
var _that = this;
|
||||
//清理index以下的选择框的选项
|
||||
for(var i = selectIndex ; i< _that.size();i++){
|
||||
_that.removeOptions(i);
|
||||
}
|
||||
//存在缓存数据,直接使用缓存数据生成选择框的子项；不存在，则请求数据
|
||||
if(_that.cache[parent_id]){
|
||||
_that._create(_that.cache[parent_id],selectIndex);
|
||||
_that.$applyTo.eq(selectIndex).trigger("afterLoad");
|
||||
if(callback) callback.call(this);
|
||||
}else{
|
||||
var _ajaxOptions = this.options.ajaxOptions;
|
||||
var _d = _ajaxOptions.data;
|
||||
var _parentIdField = this.options.field['parent_id'];
|
||||
_d[_parentIdField] = parent_id;
|
||||
//传递给后台的参数
|
||||
_ajaxOptions.data = _d;
|
||||
//ajax获取数据成功后的回调函数
|
||||
_ajaxOptions.success = function(res){
|
||||
//console.log(res);
|
||||
var ops = res.data;
|
||||
//遍历数据，获取html字符串
|
||||
if (ops.length > 0) { //本菜单有内容才显示，否者隐藏(dayrui添加)
|
||||
_that.$applyTo.eq(selectIndex).show();
|
||||
} else {
|
||||
_that.$applyTo.eq(selectIndex).hide();
|
||||
// 说明已经选择到尾部了
|
||||
var html = res.html;
|
||||
if (html.length > 0) {
|
||||
$('#'+_that.options.inputId).html(html);
|
||||
//console.log('#'+_that.options.inputId+'_select');
|
||||
}
|
||||
}
|
||||
var _h = _that._getOptionsHtml(ops);
|
||||
_that._create(_h,selectIndex);
|
||||
_that.cache[parent_id] = _h;
|
||||
_that.$applyTo.eq(selectIndex).trigger("afterLoad.ld");
|
||||
if(callback) callback.call(this);
|
||||
}
|
||||
$.ajax(_ajaxOptions);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 删除指定index索引值的选择框下的选择项
|
||||
* @param {Number} index 选择框的索引值
|
||||
* @return {Object} this
|
||||
*/
|
||||
removeOptions : function(index){
|
||||
this.$applyTo.eq(index).children("."+this.OPTIONS_CLASS).remove();
|
||||
return this;
|
||||
},
|
||||
selected : function(t,completeCallBack){
|
||||
var _that = this;
|
||||
if(t && typeof t == "object" && t.length > 0){
|
||||
var $select = this.$applyTo;
|
||||
_load(_that.options.defaultLoadSelectIndex,_that.options.defaultParentId);
|
||||
}
|
||||
/**
|
||||
* 递归获取选择框数据
|
||||
* @param {Number} selectIndex 选择框的索引值
|
||||
* @param {Number} parent_id id
|
||||
*/
|
||||
function _load(selectIndex,parent_id){
|
||||
_that.load(selectIndex,parent_id,function(){
|
||||
var id = _selected(selectIndex,t[selectIndex]);
|
||||
selectIndex ++;
|
||||
if(selectIndex > _that.size()-1) {
|
||||
if(completeCallBack) completeCallBack.call(this);
|
||||
return;
|
||||
}
|
||||
_load(selectIndex,id);
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 选中包含指定文本的选择项
|
||||
* @param {Number} index 选择框的索引值
|
||||
* @param {String} text 选择框的value值 (dayrui修改为按id匹配)
|
||||
* @return {Number} 该选择框的value值
|
||||
*/
|
||||
function _selected(index,text){
|
||||
var id = 0;
|
||||
_that.$applyTo.eq(index).children().each(function(){
|
||||
if(text != undefined && text.toString() == $(this).val()){
|
||||
$(this).attr("selected",true);
|
||||
id = $(this).val();
|
||||
return;
|
||||
}
|
||||
})
|
||||
return id;
|
||||
}
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
* 选择框的值改变后触发的事件
|
||||
* @param {Object} e 事件
|
||||
*/
|
||||
onchange : function(e){
|
||||
//实例化后的对象引用
|
||||
var _that = e.data.target;
|
||||
//选择框的索引值
|
||||
var index = e.data.index;
|
||||
//目标选择框
|
||||
var $target = $(e.target);
|
||||
var _parentId = $target.val();
|
||||
var _i = index+1;
|
||||
_that.load(_i,_parentId);
|
||||
},
|
||||
/**
|
||||
* 将数据源（json或xml）转成html
|
||||
* @param {Object} data
|
||||
* @return {String} html代码字符串
|
||||
*/
|
||||
_getOptionsHtml : function(data){
|
||||
var _that = this;
|
||||
var ajaxOptions = this.options.ajaxOptions;
|
||||
var dataType = ajaxOptions.dataType;
|
||||
var field = this.options.field;
|
||||
var _h = "";
|
||||
_h = _getOptions(data,dataType,field).join("");;
|
||||
/**
|
||||
* 获取选择框项html代码数组
|
||||
* @param {Object | Array} data 数据
|
||||
* @param {String} dataType 数据类型
|
||||
* @param {Object} field 字段
|
||||
* @return {Array} aStr
|
||||
*/
|
||||
function _getOptions(data,dataType,field){
|
||||
var optionClass = _that.OPTIONS_CLASS;
|
||||
var aStr = [];
|
||||
var id,name;
|
||||
if (dataType == "json") {
|
||||
$.each(data,function(i){
|
||||
id = data[i][field.region_id];
|
||||
name = data[i][field.region_name];
|
||||
var _option = "<option value='"+id+"' class='"+optionClass+"'>"+name+"</option>";
|
||||
aStr.push(_option);
|
||||
})
|
||||
}else if(dataType == "xml"){
|
||||
$(data).children().children().each(function(){
|
||||
id = $(this).find(field.region_id).text();
|
||||
name = $(this).find(field.region_name).text();
|
||||
var _option = "<option value='"+id+"' class='"+optionClass+"'>"+name+"</option>";
|
||||
aStr.push(_option);
|
||||
})
|
||||
}
|
||||
return aStr;
|
||||
}
|
||||
return _h;
|
||||
},
|
||||
/**
|
||||
* 向选择框添加html
|
||||
* @param {String} _h html代码
|
||||
* @param {Number} index 选择框的索引值
|
||||
*/
|
||||
_create : function(_h,index){
|
||||
var _that = this;
|
||||
this.removeOptions(index);
|
||||
this.$applyTo.eq(index).append(_h);
|
||||
}
|
||||
}
|
||||
$.fn.ld.defaults = {
|
||||
/**选择框对象数组*/
|
||||
selects : null,
|
||||
drevent : 'change',
|
||||
/**ajax配置*/
|
||||
ajaxOptions : {
|
||||
url : null,
|
||||
type : 'get',
|
||||
data : {},
|
||||
dataType : 'json',
|
||||
success : function(){},
|
||||
beforeSend : function(){}
|
||||
},
|
||||
/**默认父级id*/
|
||||
defaultParentId : 0,
|
||||
/**默认读取数据的选择框*/
|
||||
defaultLoadSelectIndex : 0,
|
||||
/**默认选择框中的选中项*/
|
||||
texts : [],
|
||||
/**选择框的样式*/
|
||||
style : null,
|
||||
inputId : null,
|
||||
/**选择框值改变时的回调函数*/
|
||||
change : function(){},
|
||||
field : {
|
||||
region_id : "region_id",
|
||||
region_name : "region_name",
|
||||
parent_id : "parent_id"
|
||||
}
|
||||
|
||||
}
|
||||
})(jQuery);
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 701 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
@@ -0,0 +1 @@
|
||||
/* 自定义js文件 */
|
||||
@@ -0,0 +1,306 @@
|
||||
function dr_sku_add_group() {
|
||||
var id = parseInt($("#dr_sku_result .fc-sku-group:last").attr("did"));
|
||||
if (id == NaN || id == 'NaN' || isNaN(id)) {
|
||||
id = 0;
|
||||
} else {
|
||||
id++;
|
||||
}
|
||||
id = dr_sku_get_id(id);
|
||||
var html = tpl_group;
|
||||
html = html.replace(/\{id\}/g, id);
|
||||
html = html.replace(/\{name\}/g, "属性名称_"+(id+1));
|
||||
html = html.replace(/\{value\}/g, "");
|
||||
$("#dr_sku_result").append(html);
|
||||
}
|
||||
function dr_sku_get_id(id) {
|
||||
if ($('#dr_sku_group_'+id).length) {
|
||||
id = parseInt(id) + 1;
|
||||
return dr_sku_get_id(id);
|
||||
}
|
||||
return id;
|
||||
}
|
||||
/** 取下一组规格值的 iid：在当前属性组内取 max(did/行 id 后缀)+1，并避开已占用的 DOM id */
|
||||
function dr_sku_get_next_value_iid(id) {
|
||||
var maxIid = -1;
|
||||
var prefix = "dr_sku_value_" + id + "_";
|
||||
var $values = $("#dr_sku_group_"+id).find(".fc-sku-group-body").first().find(".fc-sku-group-value");
|
||||
$values.each(function () {
|
||||
var $el = $(this);
|
||||
var d = parseInt($el.attr("did"), 10);
|
||||
if (!isNaN(d) && d > maxIid) {
|
||||
maxIid = d;
|
||||
}
|
||||
var eid = $el.attr("id") || "";
|
||||
if (eid.indexOf(prefix) === 0) {
|
||||
var suf = parseInt(eid.slice(prefix.length), 10);
|
||||
if (!isNaN(suf) && suf > maxIid) {
|
||||
maxIid = suf;
|
||||
}
|
||||
}
|
||||
});
|
||||
var next = maxIid + 1;
|
||||
while ($("#dr_sku_group_"+id+" #"+prefix+next).length) {
|
||||
next++;
|
||||
}
|
||||
return next;
|
||||
}
|
||||
function dr_sku_del_group(id) {
|
||||
$("#dr_sku_group_"+id).remove();
|
||||
step.Creat_Table();
|
||||
}
|
||||
function dr_sku_del_value(id, iid) {
|
||||
$("#dr_sku_group_"+id+" #dr_sku_value_"+id+"_"+iid).remove();
|
||||
step.Creat_Table();
|
||||
}
|
||||
function dr_sku_init() {
|
||||
step.Creat_Table();
|
||||
}
|
||||
function dr_sku_edit_group(id) {
|
||||
var name = $("#dr_sku_group_"+id+" .fc-sku-group-name .fc-sku-group-name-input").html();
|
||||
$("#dr_sku_group_"+id+" .fc-sku-group-name .fc-sku-group-name-input").html('<input type="text" value="'+name+'" onblur="dr_sku_save_group('+id+')" class="name form-control">');
|
||||
$("#dr_sku_group_"+id+" .fc-sku-group-name .edit").hide();
|
||||
$("#dr_sku_group_"+id+" .fc-sku-group-name .save").show();
|
||||
}
|
||||
function dr_sku_save_group(id) {
|
||||
var name = $("#dr_sku_group_"+id+" .fc-sku-group-name .fc-sku-group-name-input .name").val();
|
||||
$("#dr_sku_group_"+id+" .fc-sku-group-name .fc-sku-group-name-input").html(name);
|
||||
$("#dr_sku_group_"+id+" .fc-sku-group-name .edit").show();
|
||||
$("#dr_sku_group_"+id+" .fc-sku-group-name .save").hide();
|
||||
$("#dr_sku_group_text_"+id).val(name);
|
||||
|
||||
step.Creat_Table();
|
||||
}
|
||||
function dr_sku_add_value(id) {
|
||||
var html = tpl_value;
|
||||
|
||||
var iid = dr_sku_get_next_value_iid(id);
|
||||
|
||||
html = html.replace(/\{id\}/g, id);
|
||||
html = html.replace(/\{iid\}/g, iid);
|
||||
html = html.replace(/\{name\}/g, "值_"+(iid+1));
|
||||
$("#dr_sku_group_"+id).find(".fc-sku-group-body").first().append(html);
|
||||
step.Creat_Table();
|
||||
}
|
||||
|
||||
function dr_select_sku_price() {
|
||||
$('.fc-sku-select-price .fc-sku-value').click(function () {
|
||||
$(this).parent('.fc-sku-select-price').find('.fc-sku-value').removeClass('red');
|
||||
$(this).addClass('red');
|
||||
dr_get_sku_price();
|
||||
});
|
||||
}
|
||||
|
||||
function dr_get_sku_price() {
|
||||
var oname = new Array();
|
||||
$('.fc-sku-select-price').each(function () {
|
||||
oname.push($(this).find('.red').attr('fvalue'));
|
||||
});
|
||||
var k = oname.join("_");
|
||||
$('#dr_sku_value').val(k);
|
||||
$('#dr_sku_price').html($('#dr_sku_price_'+k).val());
|
||||
$('#dr_sku_quantity').html($('#dr_sku_quantity_'+k).val());
|
||||
$('#dr_sku_sn').html($('#dr_sku_sn_'+k).val());
|
||||
|
||||
}
|
||||
|
||||
|
||||
var myArraymin=function(array) {
|
||||
return Float.min.apply(Float,array);
|
||||
}
|
||||
|
||||
var step = {
|
||||
//SKU信息组合
|
||||
Creat_Table: function () {
|
||||
step.hebingFunction();
|
||||
var $skuRoot = $("#dr_sku_result");
|
||||
var SKUObj = $skuRoot.length ? $skuRoot.find(".fc-sku-group") : $(".fc-sku-group");
|
||||
//var skuCount = SKUObj.length;//
|
||||
var arrayName = new Array(); //名称组数
|
||||
var arrayTile = new Array(); //标题组数
|
||||
var arrayInfor = new Array(); //盛放每组选中的CheckBox值的对象
|
||||
var arrayColumn = new Array(); //指定列，用来合并哪些列
|
||||
var bCheck = true;//是否全选
|
||||
$.each(SKUObj, function () {
|
||||
var columnIndex = $(this).attr('did');
|
||||
var $body = $(this).find(".fc-sku-group-body").first();
|
||||
if (!$body.length) {
|
||||
return;
|
||||
}
|
||||
arrayColumn.push(columnIndex);
|
||||
arrayTile.push($(this).find(".fc-sku-group-name-input").html());
|
||||
var order = new Array();
|
||||
var order_name = new Array();
|
||||
$body.find(".fc-sku-value-name-input").each(function () {
|
||||
order.push($(this).val());
|
||||
order_name.push($(this).attr("fname"));
|
||||
});
|
||||
|
||||
arrayInfor.push(order);
|
||||
arrayName.push(order_name);
|
||||
|
||||
if (order.join() == "") {
|
||||
bCheck = false;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
//console.log(arrayTile);
|
||||
//开始创建Table表
|
||||
if (bCheck == true) {
|
||||
var RowsCount = 0;
|
||||
$("#dr_sku_table").html("");
|
||||
var table = $("<table class=\"fc-sku-table table table-striped table-bordered \"></table>");
|
||||
table.appendTo($("#dr_sku_table"));
|
||||
var thead = $("<thead></thead>");
|
||||
thead.appendTo(table);
|
||||
var trHead = $("<tr></tr>");
|
||||
trHead.appendTo(thead);
|
||||
//创建表头
|
||||
|
||||
$.each(arrayTile, function (index, item) {
|
||||
var td = $("<th>" + item + "</th>");
|
||||
td.appendTo(trHead);
|
||||
});
|
||||
var itemColumHead = $(sku_field_name);
|
||||
itemColumHead.appendTo(trHead);
|
||||
|
||||
var tbody = $("<tbody></tbody>");
|
||||
tbody.appendTo(table);
|
||||
|
||||
////生成组合
|
||||
var zuheDate = step.doExchange(arrayInfor);
|
||||
var zuheDate2 = step.doExchange(arrayName);
|
||||
if (zuheDate != 'undefined' && zuheDate != undefined && zuheDate.length > 0) {
|
||||
//创建行
|
||||
$.each(zuheDate, function (index, item) {
|
||||
var td_array = item.split(",");
|
||||
var tr = $("<tr></tr>");
|
||||
var oname = zuheDate2[index].replace(/,/g, "_");
|
||||
|
||||
tr.appendTo(tbody);
|
||||
$.each(td_array, function (i, values) {
|
||||
var td = $("<td>" + values + "</td>");
|
||||
td.appendTo(tr);
|
||||
});
|
||||
for(var key in sku_field_id){
|
||||
var ovalue = arrayValue[oname+"_"+sku_field_id[key]];
|
||||
if (ovalue == undefined) {
|
||||
ovalue = '';
|
||||
}
|
||||
if (sku_field_id[key] == 'image') {
|
||||
// 图片模式
|
||||
var oimg = '';
|
||||
var is_show_img = 'display:none';
|
||||
if (ovalue && ovalue != 0) {
|
||||
oimg = arrayValue[oname+"_"+sku_field_id[key]+"_url"]
|
||||
is_show_img = 'display:block';
|
||||
}
|
||||
var td = $("<td ><label><input class=\"form-control2 form-control-file\" type=\"hidden\" name=\"data["+field_name+"][value]["+oname+"]["+sku_field_id[key]+"]\" value=\""+ovalue+"\" ><input class=\"form-control3 form-control-link form-control-preview\" type=\"hidden\" value=\""+oimg+"\" ><a href=\"javascript:;\" onclick=\"dr_ftable_myfileinput(this, '"+sku_image_url+"')\" class=\"ftable-fileinput pull-left btn green btn-sm\">上传</a><a href=\"javascript:;\" onclick=\"dr_ftable_myshow(this)\" style=\""+is_show_img+"\" class=\"ftable-show pull-left btn blue btn-sm\">预览</a><a href=\"javascript:;\" onclick=\"dr_ftable_mydelete(this)\" style=\""+is_show_img+"\" class=\"ftable-delete pull-left btn red btn-sm\">删除</a> </label></td>");
|
||||
} else {
|
||||
var td = $("<td ><input type=\"text\" name=\"data["+field_name+"][value]["+oname+"]["+sku_field_id[key]+"]\" value=\""+ovalue+"\" class=\"input-sm form-control\"></td>");
|
||||
}
|
||||
td.appendTo(tr);
|
||||
}
|
||||
});
|
||||
}
|
||||
//结束创建Table表
|
||||
arrayColumn.pop();//删除数组中最后一项
|
||||
//合并单元格
|
||||
$(table).mergeCell({
|
||||
// 目前只有cols这么一个配置项, 用数组表示列的索引,从0开始
|
||||
cols: arrayColumn
|
||||
});
|
||||
}
|
||||
},//合并行
|
||||
hebingFunction: function () {
|
||||
$.fn.mergeCell = function (options) {
|
||||
return this.each(function () {
|
||||
var cols = options.cols;
|
||||
for (var i = cols.length - 1; cols[i] != undefined; i--) {
|
||||
// fixbug console调试
|
||||
// console.debug(cols[i]);
|
||||
mergeCell($(this), cols[i]);
|
||||
}
|
||||
dispose($(this));
|
||||
});
|
||||
};
|
||||
// 如果对javascript的closure和scope概念比较清楚, 这是个插件内部使用的private方法
|
||||
function mergeCell($table, colIndex) {
|
||||
$table.data('col-content', ''); // 存放单元格内容
|
||||
$table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1
|
||||
$table.data('col-td', $()); // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象
|
||||
$table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用
|
||||
// 我们对每一行数据进行"扫面"处理 关键是定位col-td, 和其对应的rowspan
|
||||
$('tbody tr', $table).each(function (index) {
|
||||
// td:eq中的colIndex即列索引
|
||||
var $td = $('td:eq(' + colIndex + ')', this);
|
||||
// 取出单元格的当前内容
|
||||
var currentContent = $td.html();
|
||||
// 第一次时走此分支
|
||||
if ($table.data('col-content') == '') {
|
||||
$table.data('col-content', currentContent);
|
||||
$table.data('col-td', $td);
|
||||
} else {
|
||||
// 上一行与当前行内容相同
|
||||
if ($table.data('col-content') == currentContent) {
|
||||
// 上一行与当前行内容相同则col-rowspan累加, 保存新值
|
||||
var rowspan = $table.data('col-rowspan') + 1;
|
||||
$table.data('col-rowspan', rowspan);
|
||||
// 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响
|
||||
$td.hide();
|
||||
// 最后一行的情况比较特殊一点
|
||||
// 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan
|
||||
if (++index == $table.data('trNum'))
|
||||
$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
|
||||
} else { // 上一行与当前行内容不同
|
||||
// col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理
|
||||
if ($table.data('col-rowspan') != 1) {
|
||||
$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
|
||||
}
|
||||
// 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan
|
||||
$table.data('col-td', $td);
|
||||
$table.data('col-content', $td.html());
|
||||
$table.data('col-rowspan', 1);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
// 同样是个private函数 清理内存之用
|
||||
function dispose($table) {
|
||||
$table.removeData();
|
||||
}
|
||||
},
|
||||
//组合数组
|
||||
doExchange: function (doubleArrays) {
|
||||
var len = doubleArrays.length;
|
||||
if (len >= 2) {
|
||||
var arr1 = doubleArrays[0];
|
||||
var arr2 = doubleArrays[1];
|
||||
var len1 = doubleArrays[0].length;
|
||||
var len2 = doubleArrays[1].length;
|
||||
var newlen = len1 * len2;
|
||||
var temp = new Array(newlen);
|
||||
var index = 0;
|
||||
for (var i = 0; i < len1; i++) {
|
||||
for (var j = 0; j < len2; j++) {
|
||||
temp[index] = arr1[i] + "," + arr2[j];
|
||||
index++;
|
||||
}
|
||||
}
|
||||
var newArray = new Array(len - 1);
|
||||
newArray[0] = temp;
|
||||
if (len > 2) {
|
||||
var _count = 1;
|
||||
for (var i = 2; i < len; i++) {
|
||||
newArray[_count] = doubleArrays[i];
|
||||
_count++;
|
||||
}
|
||||
}
|
||||
//console.log(newArray);
|
||||
return step.doExchange(newArray);
|
||||
}
|
||||
else {
|
||||
return doubleArrays[0];
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user