" }, edit); //重新创建第一行，值为原第一行的id _range.selectNodeContents(_el); //将光标重选中添加的内容 _range.collapse(true); //向右折叠光标选区，设置结束点和开始点相同地方 return { addLine: [_el.id] }; } /* 添加行 * * @param range 可选 * @returns {*} 返回id */ U.UF.E.key.addLine = function (range) { var _txtnode, //换行后的文本内容 _range = range || U.UF.E.getRangeAt(), //获得光标的位置 _startline = U.UF.E.getLineElement(_range.startContainer), //得到起始行的div _el = $$('div', { id: "e" + Guid.newGuid(), style: { cssText: _startline.style.cssText } }), //需要添加的新元素 _result = {} //添加行后会影响变化的值 ; //删除已经选中的内容 if (_range.startOffset != _range.endOffset && _range.startContainer.innerHTML !== "
") { _range.deleteContents(); } _range.setEnd(_startline, _startline.childNodes.length); //设置光标结束点的位置 _txt = _range.extractContents(); //剪切文本处理 if ($("img", _txt)[0]) { _txtnode = _txt; } //判断选取是否有内容，若有返回内容，反之添加一个br标签占位 else if (_txt.textContent.trim() === '') { //如果没有内容那么就添加一个br标签 _txtnode = $$('span', { style: { cssText: (_startline.lastChild && _startline.lastChild.style) ? _startline.lastChild.style.cssText : "" }, innerHTML: "
" }); } //设置内容 else { _txtnode = _txt; } //如果回车行的内容为""，且没有存在有效元素 那么就记录原有样式创建默认行 if (_startline.innerText == '' && !U.UF.E.validElement(_startline)) { var _clone = _txtnode.nodeName == "SPAN" ? _txtnode : U.selectEl('span', _txtnode)[0]; //获取可克隆样式元素 var _content = _clone ? U.selectEl(_clone).clone()[0] : $$('span', { innerHTML: "
" }); //创建内容 _content.innerHTML = "
"; //设置默认内容 U.selectEl(_content).appendTo(_startline); //追加 } _el.appendChild(_txtnode); //添加到创建的div里面 U.UF.E.insertAfter(_el, _startline); //添加到选中的div下面 _range.selectNodeContents(_el); //将光标重选中添加的内容 _range.collapse(true); //向右折叠光标选区，设置结束点和开始点相同地方 _result.addLine = [_el.id]; //添加新的行 _result.updateLine = [_startline.id]; //结束新的行 return _result; //返回添加的id }; /* 判断某个元素内是否存在有效元素（存在内容、存在图片等）,过滤无用元素（空span） * * @param el {element} 父级元素 * @returns {boole} 返回是否存在有效元素 */ U.UF.E.validElement = function (el) { var i, //定义循环变量 _children = el.children, //获取子级 _valid = false; //默认为没有有效元素 for (i = 0; i < _children.length; i++) { //循环处理 if (_children[i].nodeName == "BR") { continue; //BR标签默认不做处理 } else if (_children[i].nodeName == "IMG" || _children[i].innerText.length > 0 || ($('img', _children[i])[0] && _children[i].innerText.length == 0)) { //存在内容、存在图片则为有效元素 _valid = true; } else { //过滤无用标题 U.selectEl(_children[i]).remove(); i--; } } return _valid; //返回结果 } /* 在元素之后插入 * * @param newEl {element} 插入的元素 * @param targetEl {element} 插入比对位置的元素 * */ U.UF.E.insertAfter = function (newEl, targetEl) { //插入比对位置的元素的父级元素 var parentEl = targetEl.parentNode; //如果当前元素的父级元素的最后一个元素为插入比对位置的元素 if (parentEl.lastChild === targetEl) { //则使用appendChild直接添加到最后 parentEl.appendChild(newEl); } else { //否则则采用insertBefore 添加到插入比对位置的元素的上一个元素后 parentEl.insertBefore(newEl, targetEl.nextSibling); } //返回插入的元素 return newEl; }; /* 复制格式 * * 效果：把选区内的第一个或开始位置的字体样式复制，赋值到常量里 * */ U.UF.E.formatBrush = function (el, pattern) { el = el || U.selectEl('#U_MD_O_H_wordEditor')[0]; if (U.UF.E.formatBrush.callBack && U.UF.E.formatBrush.pattern) { U.UF.E.formatBrush.pattern = undefined; U.selectEl(el).bind('mouseup', U.UF.E.formatBrush.callBack); return; } var _style = pattern == false ? el.editor.recordRangeStyle : el.editor.brushStyle; var range = U.UF.E.getRangeAt(); //获取选区 var _start = range.startContainer; //选区开始位置 if (_start.nodeName == "DIV") { //如果选区开始节点是div的话，代表添加过样式之类的 if (!range.cloneContents().children[0]) { //如果光标不能存在元素 _style = { // 情况格式刷数据 "font-family": "", "font-size": "", "font-weight": "", "font-style": "", "text-decoration": "", "color": "", "background-color": "" }; pattern == false && (_style["text-align"] = "", _style["name"] = ""); return; } //获取选区内的第一个块状节点，的第一个文档节点 //_start = range.cloneContents().children[0].firstChild; } //循环常量brushstyle 刷子样式 var _value; _start = _start.nodeType == 1 ? _start : _start.parentElement; for (var name in _style) { //把相应的样式名字，内容，赋值给相应的常量值 if (name == "font-size") { _value = (parseFloat(_start.currentStyle[name]) * 72 / el.editor.dpi).toFixed(1) + "pt"; } else { _value = _start.currentStyle[name]; } _style[name] = _value; } if (pattern !== false) { //判断是否为默认记录样式处理 U.UF.E.formatBrush.pattern = pattern; if (pattern !== true) { U.selectEl(el).unbind("mouseup", U.UF.E.formatBrush.callBack); //是否单次取消 U.UF.E.formatBrush.callBack = function () { //设置鼠标起开处理 U.UF.E.fomatBrushNext(el); //设置样式 U.UF.E.formatBrush.pattern == undefined && U.selectEl(el).unbind("mouseup", U.UF.E.formatBrush.callBack); //是否单次取消 }; U.selectEl(el).bind('mouseup', U.UF.E.formatBrush.callBack); } } else { _style["text-align"] = U.UF.E.getLineElement(_start).currentStyle.textAlign; _style["name"] = U.UF.E.getLineElement(_start).getAttribute('name'); U.UF.C.isFunction(el.editor.styleState) && el.editor.styleState(el.editor.recordRangeStyle); } }; /* 粘贴复制的样式 * * 效果： 把常量复制到样式，粘贴到编辑器中 * */ U.UF.E.fomatBrushNext = function (el) { U.UF.E.setRangeStyle({ "cssText": '' }); //在赋值相应的样式 U.UF.E.setRangeStyle(el.editor.brushStyle); }; /* 附件功能 * * @param input {element} input文件域元素 * @param editor {element} 编辑器元素 */ U.UF.E.attachment = function (input, editor) { if (input.files.length) { //判断是否存在文件 var _range = U.UF.E.getRangeAt(); //获取光标处理 U.UF.UP.inputUpload([input], 'http://disk.1473.cn/USUpfile.ashx?typename=UseStudioEditor&UserId=FA92AAC5-4134-449F-9659-0DC12F4F68E9', function (r) { //调用统一上传处理 var _file, _filetype, _input = r.context[0]; var _imgtype = /.*(jpg|png|gif|jpeg|JPG|PNG|GIF|JPEG|bmp|BMP)$/; var _filearray = []; //记录上传图片的数组 if (Object.prototype.toString.call(r.value[0]) != "[object Array]") { //根据返回值类型判断是否多图上传 _filearray = [r.value]; //单图用数组则直接记录 } else { _filearray = r.value; //多图则直接替换即可 } var _el, _frag = $$('frag'); for (i = 0; i < _filearray.length; i++) { //循环评接拼接 _file = _input.files[i]; _filetype = _file.name.substring(_file.name.lastIndexOf('.') + 1, _file.name.length); //获取文件后缀名 if (_filetype.match(_imgtype)) {//图片类型处理 _el = $$("div", {}, _frag);; $$('span', { innerHTML: '
123
var box = U.selectEl("#box")[0];
box.onclick = function(){
U.UF.EL.addAttributes(box,{"pname":"pvalue","pname1":"pvalue1","pname2":"pvalue1"});//添加自定义属性
U.UF.EL.delAttributes(box,"pname");//删除自定义属性
*/
U.UF.EL.addAttributes = function (el, name, value) {
// 如果传入的参数为name, value
el.setAttribute(name, value) // 设置元素的自定义属性
}
/*
** 作用：删除自定义属性
** @param {array} el 获取元素
** @param {element} name 属性的名称
*/
U.UF.EL.delAttributes = function (el, name) {
// 判断属性是否具有传入的属性名
if (el.hasAttribute(name)) {
el.removeAttribute(name)// 删除该属性
}
}
/*
** 作用：获取元素所需要的样式
** @param {element} el 需要获取样式的元素
** @param {string} str 获取样式的属性值，如position：absolute，则传positon或者absolute
*/
U.UF.EL.getStyle = function (el, str) {
//判断是否拥有需要获取样式的元素，并且，该元素有style样式
if (el && el.style) {//如果满足两个两件，则进行下一步程序执行
var _str = U.UF.EL.styleConversion(str); //style样式转换 如 text-align => textAlign 或者相反的换
//判断元素是否需要的样式，并且获取的样式组为cssText
if (el.style[_str] || _str == "cssText") {//如果同时满足两个条件
return el.style[_str]; //返回获取需要的元素
} else {
//判断是否有需要的样式
if (el.currentStyle) {//如果有
return el.currentStyle[_str]; //返回样式值
} else {//如果没有
return ""; //获取js对应的的style值
}
}
return ""; //获取js对应的的style值
}
}
/*
**作用：用于指定的元素进行删除指定的class，如果class存在，那么class就删除，如果class不存则不处理
**参数一：el进行操作的对象
**参数二：str获取className的字符
*/
U.UF.EL.addClass = function (el, str) {
var _Reg = el.className.match(new RegExp("(\\s|^)" + str + "(\\s|$)")); // ( \\s|^ ) 判断前面是否有空格 （\\s | $ ）判断后面是否有空格
var _b = !!(_Reg); //两个感叹号为转换为布尔值 以方便做判断
if (!_b) {//判断元素存在指定的class
el.className += " " + str; //给指定的元素添加指定的class
}
}
/*
**作用：用于指定的元素进行删除指定的class，如果class存在，那么class就删除，如果class不存则不处理
**参数一：el1进行操作的对象
**参数二：el2获取className的字符
*/
U.UF.EL.removeClass = function (el, str) {
var _Reg = el.className.match(new RegExp("(\\s|^)" + str + "(\\s|$)")); // ( \\s|^ ) 判断前面是否有空格 （\\s | $ ）判断后面是否有空格
var _b = !!(_Reg); //两个感叹号为转换为布尔值 以方便做判断
if (_b) {//判断元素存在指定的class
el.className = el.className.replace(new RegExp("(\\s|^)" + str + "(\\s|$)"), " ").trim(); // replace方法是替换
}
}
/*
** 作用：用于判断是否有存在的class，如果有，则返回true，如果没有，则返回false
** @param {element} el
** @param {string} str
*/
U.UF.EL.isHasClass = function (el, str) {
//判断是否存在指定的classname，如果指定的classname没有出现，则该方法返回 -1。
if ((el.className).indexOf(str) > -1) {//如果出现了classname，则会出现比-1大的值
return true; //则返回true
}
return false;
}
/*
** 作用：style样式转换 如 text-align => textAlign 或者相反的换
** @param {element} el 进行操作的对象
** @param {string} str 确定循环的范围
*/
U.UF.EL.styleConversion = function (el, str) {
if (str) {//判断是否有确定循环的范围
str = [/[A-Z]/g, "-", 0, "toLowerCase"]; //转换的样式或者属性,如textAlign => text-align
}
else {//否则的话就进行下面的语句
str = [/-[a-z ]/g, "", 1, "toUpperCase"]; //转换的样式或者属性,如 text-align => textAlign
}
return el.replace(str[0], function (el2) {//利用正则表达式进行转换
return str[1] + el2.charAt(str[2])[str[3]](); //利用charAt方法返回指定位置的字符
});
}
/*
**作用：在指定的元素区域通过鼠标进行点击或者是鼠标的其他事件，这个时候我们就需要获取这个鼠标的位置在指定元素的相对位置。
**参数一：el 需要相对位置的元素
*/
U.UF.EL.getMousePosition = function (el) {
var _eltop = 0, _elleft = 0,
_mouseevent = event || window.event; //获取事件源
//如果是手机点击则获取touches[0]对象
if (_mouseevent.touches && _mouseevent.touches[0]) {
_mouseevent = _mouseevent.touches[0]; //如果是手机则获取touches[0]对象
}
//如果是pc则获取事件源
else {
_mouseevent = _mouseevent; //如果是pc则获取事件源
}
//获取鼠标的坐标对象
var _mousex = _mouseevent.clientX || 0, //获取鼠标的X坐标或者是手机点击的X坐标
_mousey = _mouseevent.clientY || 0; //获取鼠标的Y坐标或者是手机点击的Y坐标
//循环的找位置
while (el) {
_elleft += el.offsetLeft;
_eltop += el.offsetTop;
el = el.offsetParent;
}
//计算点击的相对位置
_elx = _mousex - _elleft, //获取鼠标点击的相对位置X坐标
_ely = _mousey - _eltop; //获取鼠标点击的相对位置的Y坐标
return { x: _elx, y: _ely }//返回鼠标的相对位置X和Y坐标
}
/*
** 右键菜单处理
** @param {array} 菜单数组 {"name":"","onclick":function(){}}
** @param {string} 定位到哪个元素
*/
U.UF.EL.rightMenu = function (arr, el, e) {
var i, _menu;
if ($("#U_UF_EL_rightmenu")[0]) {
U.selectEl("#U_UF_EL_rightmenu")[0].remove();
}
_menu = $$("div", { "style": { "position": "fixed", "width": "150px", "border": "1px solid #e4e4e4", "backgroundColor": "White", "left": "100px", "display": "none", "z-index": "999" }, "id": "U_UF_EL_rightmenu" }, U.selectEl(el)[0]);
for (i = 0; i < arr.length; i++) {
var _div = $$('div', { "style": { "height": "25px", "lineHeight": "25px", "textAlign": "center", "width": "100%", "cursor": "pointer", "padding": "5px 0", "border-bottom": "1px solid rgb(228,228,228)" }, "className": "rightlist" }, _menu);
U.selectEl(_div).addAttrArray(arr[i]);
}
U.selectEl(_menu)[0].style.display = "block";
U.UF.C.rightClickMenuLocation($(_menu)[0]);
e = e || window.event;
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; //分别兼容ie和chrome
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var x = e.pageX || (e.clientX + scrollX); //兼容火狐和其他浏览器
var y = e.pageY || (e.clientY + scrollY);
var _top = _menu.offsetHeight;
var _left = _menu.offsetWidth;
if (_top > y) {
_menu.style.top = y + "px";
}
if (_left > x) {
_menu.style.left = x + "px";
}
U.selectEl(_menu).bind('contextmenu', function (e) {
U.UF.EV.stopBubble(e); //阻止冒泡
});
}
;
;
///' + el.innerHTML + '
');
doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
if (navigator.userAgent.indexOf("MSIE") > 0) {
document.body.removeChild(iframe);
}
}
;
///| '); } aHTML.push(' |
kk为自定义属性
else if (U.UF.C.isString(obj[j]) && U.UF.EL.isCustomAttributes(this[i], j)) {
//由于低版本的浏览器会报错，这里用try catch
try {
this[i].setAttribute(j, obj[j]);
}
catch (e) {
}
}
try {
this[i][j] = obj[j];
}
catch (e) { }
}
}
}
return this;
},
/**
* 隐藏元素
*
* @param {string} classname
*/
hide: function (item) {
this.css({ "display": "none" }, item);
},
/**
* 显示元素
*
* @param {string} classname
*/
show: function (item) { //显示元素
this.css({ "display": "block" }, item);
},
/**
* 获取长度
*
*/
width: function () {
return U.UF.EL.getElementRealWidth(this[0]);
},
/**
* 获取长度
*
*/
height: function () {
return U.UF.EL.getElementRealHeight(this[0]);
},
/**
* 鼠标移入的时候触发，由于onmouseover会出发多次 这里做兼容
*
* @param {string} classname
*/
mouseenter: function (cb, item) { //enter事件
//设置移入函数
this.addAttrArray({
"onmouseover": function () {
U.UF.EV.stopBubbleMouseOutOrOver(this, cb); //判断用户移入的时候出发元素，进行判断元素是否移入
}
}, item);
return this;
},
/**
* 鼠标移出的时候触发，由于onmouseout会出发多次 这里做兼容
*
* @param {string} classname
*/
mouseleave: function (cb, item) { //leave事件
//设置移入函数
this.addAttrArray({
"onmouseout": function () {
U.UF.EV.stopBubbleMouseOutOrOver(this, cb); //判断用户移入的时候出发元素，进行判断元素是否移入
}
}, item);
return this;
},
/**
* 鼠标移出的时候触发，由于onmouseout会出发多次 这里做兼容
*
* @param {string} classname
*/
gt: function (item) { //索引大于的元素
var i = item, //item 基本没有用
_returnarr = [], //返回的数据
_elements = new U.select(); //由于重新筛选数据，那么需要新建一个选择器
//循环筛选元素
for (; i < this.length; i++) {
_returnarr.push(this[i]);
}
//循环添加到this里面
_elements.addElement(_returnarr);
return _elements;
},
/**
* 鼠标移出的时候触发，由于onmouseout会出发多次 这里做兼容
*
* @param {string} classname
*/
lt: function (item) {
var i = 0, //item 基本没有用
_returnarr = []; //返回的数据
//循环筛选元素
for (; i < item; i++) {
_returnarr.push(this[i]);
}
//循环添加到this里面
return new U.select(_returnarr); //由于重新筛选数据，那么需要新建一个选择器
},
/**
* 元素事件绑定
*
* @param {string} classname
*/
bind: function (obj, value, item) {
var j,
i, //选择第几个
_length, //长度
_isobject = U.UF.C.isObject(obj); //判断元素是否为对象
//如果是object，那么第二个参数就是item 所以这里的 value = item
if (_isobject) {
i = value || 0; //选择第几个
_length = value + 1 || this.length; //长度
//循环所有的元素添加至
for (; i < _length; i++) {
for (j in obj) {
U.UF.EV.addElementEvent(j, this[i], obj[j]); //添加事件绑定
//添加事件
U.select.EVENTS.push({
element: this[i], //绑定事件
event: j, //事件
fun: obj[j] //函数
});
}
}
}
//如果第一个参数是strig类型那么value需要有值，如果有值那么就是设置，否则是获取css
else if (value != null) {
i = item || 0; //选择第几个
_length = item + 1 || this.length; //长度
//循环的设置值
for (i; i < _length; i++) {
U.UF.EV.addElementEvent(obj, this[i], value); //添加事件绑定
//添加事件
U.select.EVENTS.push({
element: this[i], //绑定事件
event: obj, //事件
fun: value //函数
});
}
}
return this;
},
/**
* 元素解除事件绑定
*
* @param {string} classname
*/
unbind: function (obj, value, item) { //事件绑定取消
var j,
i, //选择第几个
k,
_length, //长度
_isobject = U.UF.C.isObject(obj); //判断元素是否为对象
//如果是object，那么第二个参数就是item 所以这里的 value = item
if (_isobject) {
i = value || 0; //选择第几个
_length = value + 1 || this.length; //长度
//循环所有的元素添加至
for (; i < _length; i++) {
for (j in obj) {
U.UF.EV.delElementEvent(j, this[i], obj[j]); //删除事件绑定
for (k = 0; k < U.select.EVENTS.length; k++) {
if (U.select.EVENTS[k].element == this[i] && U.select.EVENTS[k].event == j && U.select.EVENTS[k].fun == obj[j]) {
U.select.EVENTS.splice(k, 1);
k--;
}
}
}
}
}
//如果第一个参数是strig类型那么value需要有值，如果有值那么就是设置，否则是获取css
else if (obj != null) {
i = item || 0; //选择第几个
_length = item + 1 || this.length; //长度
//循环的设置值
for (i; i < _length; i++) {
for (k = 0; k < U.select.EVENTS.length; k++) {
if (U.select.EVENTS[k].element == this[i] &&
U.select.EVENTS[k].event == obj &&
(value == null || U.select.EVENTS[k].fun == value)) {
U.UF.EV.delElementEvent(obj, this[i], U.select.EVENTS[k].fun); //添加事件绑定
U.select.EVENTS.splice(k, 1);
k--;
}
}
}
}
//如果没有传key和value去移除，那么就移除元素所有绑定的事件
else {
i = item || 0; //选择第几个
_length = item + 1 || this.length; //长度
for (i; i < _length; i++) {
for (k = 0; k < U.select.EVENTS.length; k++) {
if (U.select.EVENTS[k].element == this[i]) {
U.UF.EV.delElementEvent(U.select.EVENTS[k].event, this[i], U.select.EVENTS[k].fun); //添加事件绑定
U.select.EVENTS.splice(k, 1);
k--;
}
}
}
}
return this;
}
}
//#endregion
;
///
replaceRnToBr: function () { return this.replace(/\r\n/g, "
"); //把\r\n 换成
}, //成页面换行替换成文本换行,把
换成\r\n replaceBrToRn: function () { return this.replace(/<(BR)[^<>]*>/ig, "\r\n"); // 把
换成\r\n }, removeP: function () { //去除P标签 return this.replace(/<(p)[^<>]*>/ig, ""); //把 去掉 }, removeBr: function () { //去除BR标签 return this.replace(/<(BR)[^<>]*>/ig, ""); //把
去掉 }, removeRn: function () { //去除\r\n标签 return this.replace(/\r\n/g, ""); //把\r\n 去掉 }, replaceBrAndBlank: function () { //把
转换为 \r\n并把空格" "转换为""，应用场景在哪里？ return this.replaceBrToRn().replace(/ /g, ''); }, //判断用户是否在div可编辑区域里面输入了内容。 isHtmlNull: function () { //移除
标签，移除P标签，去除所有空格。当用户发帖时需要判断用户是否输入了文字图片,可以用此函数判断用户是否输入了内容。在div可编辑时需要用此函数。 return this.removeBr().removeP().trim() != ""; // }, //把字符串中的< > 分别转换成 < > replaceLtAndGt: function () { return this.replace(/</g, "<").replace(/>/g, ">"); //所有< > 分别转换成 < > }, //把字符串中的 < >分别转换成< > replaceAngleBrackets: function () { //把字符串中的 < >分别转换成< > return this.replace(//g, ">"); //所有< > 分别转换成 < > }, //应用：从数据库取出的html代码会直接显示在页面中，为了让js,css等文字以文字的形式显示，而不是植入到页面中不显示，所以需要转义。 //HTML字符转化为ASCLL码.把字符串中的 < >分别转换成< > ,把"'"转换为"'",把"""转换为""",把 //注释：/&(?!#?[a-zA-Z0-9]+;)/g, "&"暂时不知道什么意思。 replaceHtmlSign: function () { return this.replace(/&(?!#?[a-zA-Z0-9]+;)/g, "&").replace(//g, ">").replace(/'/g, "'").replace(/"/g, """); }, replaceDoubleToAngleBrackets: function () { //html字符可输出 return this.replace(/\《/g, "<").replace(/\》/g, ">"); //所有《》转换为<> }, replaceAngleToDoubleBrackets: function () {//中文括号 return this.replace(/\/g, "》"); // 所有<>转换为《》 }, trim: String.prototype.trim || function (str) {//去除所有空格，用于发帖时标题内容是否为空的判断，创建文件夹时输入文件夹名时的判断。 return this.replace(/\ |\ |\s+|\n|\r|\t/g, str || ""); //去除空白符号、\t、\s、\r、\n }, lTrim: function () { //去除左边空格 return this.replace(/(^\s*)/g, ""); }, rTrim: function () { //去除右边边空格 return this.replace(/(\s*$)/g, ''); }, addPreSpace: function (n) { //字符串前面追加n个空格，用于IDE编辑器环境前面空四格 var i, k = ""; for (i = 0; i < n; i++) k += " "; return k + this; }, insertString: function (str, n) { //指定位置插入字符串 //调用substr截取字符串 加上插入的字符 再加上 把原字符串删除前UN个字符的字符串 var _pre = this.substr(0, n); var _back = this.substr(n, this.length); return _pre + str + _back; }, //指定位置插入省略号, 常见于文章标题过长、文件夹名称过长，在显示时后面的字符以省略号代替 addEllipsis: function (n) { //省略号 var _str = this.substrU(0, n); //调用SubstrU 截取字符串 if (_str != this) { _str = _str + "..."; } //当修改String的原型时,会把字符串string替换为object的str,所以需要用valueOf()方法转换为字符串的string. Object对象的格式类似 String {"asdasd"} return _str.valueOf(); //判断_str是否为原字符串 不是的话返回_str加上... }, //字符串转化成number toInt: function () { var _UTV = this.valueOf(), _UMS = _UTV.match(/^(-|\+)?\d+/g); return _UMS && _UMS.length == 1 ? Number(_UMS[0]) : _UTV; }, //把原字符串source换成目标字符串target replaceStr: function (source, target) { return this.replace(new RegExp(source, "gm"), target); //把原字符串source换成目标字符串target }, parseJSON: function () { //string 转 json对象 var _obj = null, _str = this; try { _obj = eval("0,(" + _str + ")"); } catch (e) { } return _obj == null ? _str.valueOf() : _obj; }, capitalizeFirstLetter: function () { //首字母大写 return this.replace(/\b(\w)|\s(\w)/g, function (UAE) { return UAE.toUpperCase(); }); }, //回车换行替换成换行 并返回按照\n拆分出的数组 SplitRN: function () { return this.replace(/\r\n/g, "\n").split("\n"); //把\r\n替换成\n 并且根据\n把字符串分成数组 }, //根据符号"<",">"把html字符串拆分成数组,适合于IDE编辑器 ////增加一个拆分html编码为字符串数组的操作，用于编辑器的换行，定义到主项目中 //拆分HTML编码，适合于编辑器，不止是拆分html编码，同时还需要把中间的文字提出出来，例如javascript代码，div中间的文字等。 // SplitAngleBrackets: function () { // var i, s, a = []; // for (i = 0; i < this.length; i++) { // if (this[i] == "<") { // s = i; // } // if (this[i] == ">") { // a.push(this.substring(s, i + 1)); // } // }; // return a; // }, //根据符号"<",">"把html字符串拆分成数组,适合于IDE编辑器 ////增加一个拆分html编码为字符串数组的操作，用于编辑器的换行，定义到主项目中 //拆分HTML编码，适合于编辑器，不止是拆分html编码，同时还需要把中间的文字提出出来，例如javascript代码，div中间的文字等。 SplitAngleBrackets: function () { return this.match(/(<(.[^>]*)>)|((|>)[^\<]*[^\<^\s])/g); }, //过滤html标签留下纯文本,不保留任何格式 htmlToText: function () { //过滤HTML标签留下纯文本 return String(this).replace(/(<(.[^>]*)>)/g, ""); }, //过滤html标签留下纯文本,但保留换行符号 htmlToTextRn: function () { return this.replace(/(<(.[^>]*)>)/g, function (str) { return (/(<\/(div|DIV|p|P)([|^>]*)>)|<(BR)[^<>]*>/ig.test(str)) ? "\r\n" : ""; }); }, //获取body里面的html getBodyHtml: function () { try { return /]*>([\s\S]*)<\/body>/.exec(String(this))[1].unEscapeQuotes();
}
catch (e) {
return "";
}
}
};
//#endregion
//#region 数字Number
U.UF.C.Number = {
//数字转换成货币的格式 100000 = 10,000
formatMoney: function () {
var _split; //
var _arr = [];
var _str = this.toString();
while (_str) { //循环拆分
_split = _str.length - 3;
//unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
_arr.unshift(_str.substr(_split < 0 ? 0 : _split));
_str = _str.substr(0, _split);
}
return _arr.join(",");
},
//数字前面补零
prefixInteger: function (n) {
return (this < 10 ? "0" + this : this).valueOf(); //小于10 补零
//Array(n)创建n位数组，join(0)以0作为分隔符,
return (Array(n).join(0) + this).slice(-n);
},
//把角度转换成弧度，
toRadians: function () { //返回圆弧率
return this * Math.PI / 180; //PI即圆周率，Math.PI/180*t是将t把角度转换成弧度.缺少应用场景
}
};
//#endregion
//#region 数组处理
/**
* 判断是否为数组，//ie10以下浏览器不支持Array.isArray。使用return Object.prototype.toString.call(arr) === "[object Array]";做兼容。U.UF.C.Array是为了添加Array的原型方法，而Array.isArray不是原型方法，所以没有放到U.UF.C.Array中。
*
* @param {array} 需要判断的类型
* @returns {bool} 返回真假
*/
//判断是否为数组
Array.isArray = Array.isArray || function (arr) {
return Object.prototype.toString.call(arr) === "[object Array]";
}
//数组初始化类
U.UF.C.Array = {
/**
* 判断有否有内容包含在该数组中的位置
*
* @param {string、number} 需要查找的值indexOf
* @returns {int} -1 >-1 -1 就是数组不存在 >-1就是位置
*/
indexOf: Array.prototype.indexOf || function (val, startpoint) {
var i = startpoint || 0,
j;
//循环数组，获取数组的值
for (; i < this.length; i++) {
//在数组中查找制定的值，如果值匹配数组中的其中一个，那么返回该数组所在的位置
if (this[i] == val) {
return i;
}
}
//如果没有找到制定的位置，那么就直接返回-1
return -1;
},
//对象object在数组中的位置
//参数：object 形如{"name":"张三"}
objIndexOf: function (obj) {
var i,
j,
_isfind;
for (i = 0; i < this.length; i++) {
_isfind = false; //默认没有找到位置。
//循环所有的obj里面的key和value，匹配所有的key和value都正确的，找到第一个匹配成功的位置
for (j in obj) {
//根据key匹配了指定的值，那么设置为true
if (this[i][j] == obj[j]) {
_isfind = true;
}
//如果根据key匹配指定的值错误，那么解决forin循环直接设置为false
else {
_isfind = false;
break;
}
}
//如果上面的obj判断全部正确，那么返回所在的位置，否则返回-1；
if (_isfind) {
return i;
}
}
//如果没有找到制定的位置，那么就直接返回-1
return -1;
},
/**
* 移除数组里相同的值, 类似[element,elment,elment,element]，或者[1,2,3,4,3,2]，或者["张三","李四","张三","","王五"]
*
* @param {string} 判断字段
* @param {string} 原数组
* @returns 删除的原元素本身
*/
unique: function () { //移除数组里相同的值
//将数组的值作为对象的属性，通过对象的属性值来判断数组是否重复，若该项不重复则给对象对应属性值赋为true,便于之后的判断，并将数据项加入结果集中
var result = [];
var obj = {};
for (var i = 0; i < this.length; i++) {
if (!obj[this[i]]) {
result.push(this[i]);
obj[this[i]] = true;
}
}
return result;
},
//以下几个函数是做浏览器兼容的，系统本身支持这些函数，但有些浏览器不支持，为了使所有浏览器都支持，则定义以下几个兼容函数。
//方法对数组的每个元素执行一次提供的函数。
//参数一：callback 为数组中每个元素执行的函数，该函数接收三个参数：currentValue(当前值) 数组中正在处理的当前元素。index(索引)数组中正在处理的当前元素的索引。arrayforEach()方法正在操作的数组。
//参数二：可选参数。当执行回调 函数时用作this的值(参考对象)。
forEach: Array.prototype.forEach || function (cb, thisArg) {//允许object和array使用
var i = 0;
var _length = this.length;
while (i < _length) {
cb.call(thisArg, this[i], i, this);
i++;
}
},
/**
* 测试数组的所有元素是否都通过了指定函数的测试。
*
* @param {function} 用来测试每个元素的函数。
* @param {Array} 执行 callback 时使用的 this 值。
* @returns {boolean}
*/
every: Array.prototype.every || function (cb, thisArg) {
// return this.forEach(cb, UTI, "every");
var i = 0, b;
var _length = this.length;
while (i < _length) {
b = cb.call(thisArg, this[i], i, this);
if (b == false) {
return b;
}
i++;
}
return true;
},
/**
* 方法测试数组中的某些元素是否通过由提供的函数实现的测试。
*
* @param {function} 用来测试每个元素的回调函数
* @param {Array} 执行 callback 函数时 使用的this 值。
* @returns {boolean}
*/
some: Array.prototype.some || function (cb, thisArg) {
var t = Object(this);
var _len = t.length;
for (var i = 0; i < _len; i++) {
if (i in t && cb.call(thisArg, t[i], i, t))
//为数组中的每一个元素执行一次 callback 函数,如果回调函数返回true的话，则some函数返回true。
return true;
}
return false;
},
/**
* 方法测试数组中的某些元素是否通过由提供的函数实现的测试。
*
* @param {function} 生成新数组元素的函数，使用三个参数：
currentValue callback 的第一个参数，数组中正在处理的当前元素。
@param {int} callback 的第二个参数，数组中正在处理的当前元素的索引。
@param {Array} callback 的第三个参数，map 方法被调用的数组。
* @param {Array} 执行 callback 函数时 使用的this 值。
* @returns {Array} 返回整合过后的新数组
*/
map: Array.prototype.map || function (cb, thisArg) {
/*var T, A, k;
// 将O赋值为调用map方法的数组.
var O = Object(this);
//将len赋值为数组O的长度.
var len = O.length;
//如果参数thisArg有值,则将T赋值为thisArg;否则T为undefined.
if (thisArg) {
T = thisArg;
}
//创建新数组A,长度为原数组O长度len
A = new Array(len);
//将k赋值为0
k = 0;
//当 k < len 时,执行循环.
while (k < len) {
var kValue, mappedValue;
//遍历O,k为原数组索引
if (k in O) {
//kValue为索引k对应的值.
kValue = O[k];
// 执行callback,this指向T,参数有三个.分别是kValue:值,k:索引,O:原数组.
mappedValue = callback.call(T, kValue, k, O);
// 返回值添加到新数组A中.
A[k] = mappedValue;
}
// k自增1
k++;
}
//返回新数组A
return A;*/
//定义自增量
var i = 0;
//定义数组长度
var _length = this.length;
//定义新的数组
var _arr = [];
//判断传入的cb必须是个'function',若不是返回类型错误提示
if (typeof cb != "function")
throw new TypeError();
//当i<_length时循环
while (i < _length) {
//判断索引是否为原数组的索引
if (i in this) {
// 执行callback,this指向thisArg,参数有三个.分别是this[i]:值,i:索引,this:原数组.
_arr.push(cb.call(thisArg, this[i], i, this));
}
//i+1
i++;
}
//返回出新的数组
return _arr;
},
/**
* 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
*
* @param {function} 用来测试数组的每个元素的函数。返回true表示保留该元素（通过测试），false则不保留。
* @param {Array} 可选。执行 callback 时的用于 this 的值。
* @returns {Array} 一个新的通过测试的元素的集合的数组
*/
filter: Array.prototype.filter || function (cb, thisArg) {
/*var t = Object(this);
var len = t.length;
var res = [];
for (var i = 0; i < len; i++) {
if (i in t) {
var val = t[i];
if (cb.call(thisArg, val, i, t))
//判断是否符合回调函数中的条件,如果符合则添加到新数组中
res.push(val);
}
}
return res;*/
//定义自增量
var i = 0;
//定义数组长度
var _length = this.length;
//定义新的数组
var _arr = [];
//判断传入的cb必须是个'function',若不是返回类型错误提示
if (typeof cb != "function")
throw new TypeError();
while (i < _length) {
//如果i是原数组的索引,执行call.参数有三个.分别是this[i]:值,i:索引,this:原数组.
if (i in this && cb.call(thisArg, this[i], i, this))
_arr.push(this[i]);
i++;
}
return _arr;
},
/* mdn中没有的Array方法
reject: function (cb, UTI) { //过滤真元素
return this.forEach(cb, UTI, "reject");
},
*/
/**
* 返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
*
* @param {function} 针对数组中的每个元素, 都会执行该回调函数, 执行时会自动传入下面三个参数:
element 当前元素。
index 当前元素的索引。
array 调用findIndex的数组。
* @param {Array} 可选。执行 callback 时的用于 this 的值。
* @returns {int} 用来判断是否满足测试函数中的第一个元素的值 没有返回-1
*/
findIndex: Array.prototype.findIndex || function (predicate) {
/*var o = Object(this);
var len = o.length;
var thisArg = arguments[1];
var k = 0;
while (k < len) {
var kValue = o[k];
if (predicate.call(thisArg, kValue, k, o)) {
//如果找到这个元素的话则返回k
return k;
}
k++;
}
//没有找到该元素则返回-1
return -1;*/
//定义自增量
var i = 0;
//定义数组长度
var _length = this.length;
//判断传入的cb必须是个'function',若不是返回类型错误提示
if (typeof predicate != "function")
throw new TypeError();
while (i < _length) {
//参数有三个.分别是this[i]:值,i:索引,this:原数组.
if (predicate(this[i], i, this))
//如果找到这个元素的话则返回i
return i;
i++;
}
return -1;
},
/**
* 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。
*
* @param {element} 被查找的元素。
* @param {int} 从此位置开始逆向查找。默认为数组的长度减 1，即整个数组都被查找。如果该值大于或等于数组的长度，则整个数组会被查找。如果为负值，将其视为从数组末尾向前的偏移。即使该值为负，数组仍然会被从后向前查找。如果该值为负时，其绝对值大于数组长度，则方法返回 -1，即数组不会被查找。
* @returns {int} 数组中最后一个元素的索引，如未找到返回-1
*/
lastIndexOf: Array.prototype.lastIndexOf || function (searchElement, fromIndex) {
var n, k,
t = Object(this),
len = t.length;
if (len === 0) {
//如果数组的长度为零的话直接返回-1
return -1;
}
n = len - 1;
if (arguments.length > 1) {
n = Number(arguments[1]);
if (n != n) {
n = 0;
}
else if (n != 0 && n != (1 / 0) && n != -(1 / 0)) {
n = (n > 0 || -1) * Math.floor(Math.abs(n));
}
}
for (k = n >= 0
? Math.min(n, len - 1)
: len - Math.abs(n); k >= 0; k--) {
if (k in t && t[k] === searchElement) {
// 如果有等于参数1 的元素,返回该元素
return k;
}
}
//如果上述查找没有符合条件的元素,返回-1
return -1;
//定义结束位置
/* var endLength = !isNaN(parseFloat(UTI)) && isFinite(UTI) ? UTI : 0;
//定义自减量
var i = this.length - 1;
while (i >= endLength) {
if (USE == this[i])//如果等于就返回i索引
return i;
i--;
}
//没符合条件，返回-1
return -1;*/
},
/* mdn Array方法中无此方法 */
/*
sample: function (UIE, UDE) { //获取一组随机数
UDE = UDE || this; var _USE = [], _UL = UDE.length; UIE = UIE || 1;
for (i = 0; (i < _UL && i < UDE.length); i++) { _USE.push(UDE[U.UF.Math.getRandom(_UL)]); }
},*/
/**
* 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。
*
* @param {int} 用来填充数组元素的值。
* @param {int} 起始索引，默认值为0。
* @param {int} 终止索引，默认值为 this.length。
* @returns {Array} 修改后的数组。
*/
fill: Array.prototype.fill || function (value) {
var O = Object(this);
//转换成无符号的整数
var _len = O.length;
var _start = arguments[1];
var _relativeStart = _start;
//判断start是否小于零,并将相应的值赋予变量
var k = _relativeStart < 0 ?
Math.max(_len + _relativeStart, 0) :
Math.min(_relativeStart, _len);
var _end = arguments[2];
var _relativeEnd = _end === undefined ?
_len : _end;
//判断end是否小于零,并将相应的值赋予变量
var _final = _relativeEnd < 0 ?
Math.max(_len + _relativeEnd, 0) :
Math.min(_relativeEnd, _len);
//对数组进行填充
while (k < _final) {
O[k] = value;
k++;
}
return O;
},
/**
* 浅复制数组的一部分到同一数组中的另一个位置，并返回它，而不修改其大小。
*
* @param {int} 0 为基底的索引，复制序列到该位置。如果是负数，target 将从末尾开始计算。
* @param {int} 0 为基底的索引，开始复制元素的起始位置。如果是负数，start 将从末尾开始计算。
* @param {int}0 为基底的索引，开始复制元素的结束位置。copyWithin 将会拷贝到该位置，但不包括 end 这个位置的元素。如果是负数， end 将从末尾开始计算。
* @returns {Array} 改变了的数组。
*/
copyWithin: Array.prototype.copyWithin || function (target, start, end) { //拷贝对象
var O = Object(this);
var _len = O.length;
//转换成无符号整数
var _relativeTarget = target;
//判断target是否小于0,并将判断之后的值赋予变量
var _to = _relativeTarget < 0 ?
Math.max(_len + _relativeTarget, 0) :
Math.min(_relativeTarget, _len);
//start转换成无符号整数
var _relativeStart = start;
//判断start是否小于0,并将判断之后的值赋予变量
var _from = _relativeStart < 0 ?
Math.max(_len + _relativeStart, 0) :
Math.min(_relativeStart, _len);
var end = arguments[2];
var _relativeEnd = end === undefined ? _len : end >> 0;
//判断end是否小于0,并将判断之后的值赋予变量
var _final = _relativeEnd < 0 ?
Math.max(_len + _relativeEnd, 0) :
Math.min(_relativeEnd, _len);
var _count = Math.min(_final - _from, _len - _to);
var _direction = 1;
if (_from < _to && _to < (_from + _count)) {
_direction = -1;
_from += _count - 1;
_to += _count - 1;
}
//循环进行数组操作
while (_count > 0) {
if (_from in O) {
O[_to] = O[_from];
} else {
delete O[_to];
}
_from += _direction;
_to += _direction;
_count--;
}
//返回复制过后的数组
return O;
},
/*该特性是非标准的，请尽量不要在生产环境中使用它！*/
//toSource: function () { return JSON.stringify(this); },
/* mdn Array方法中无此方法 */
//ArrayToString: function () { return JSON.stringify(this); }, //数组转换为字符串，在写api时获取后台返回的值时经常用到。
/* IE无法兼容此方法 */
/*keys: Array.prototype.keys || function () {
var _UME = function (UDE) { this.i = 0; this.e = UDE; }
_UME.prototype = {
next: function () { //迭代
return { value: this.i++, done: this.i >= this.e.length }
}
}
return new _UME(this);
},*/
/**
* 返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。
*
* @returns {object} 一个新的 Array 迭代器对象。
*/
/* IE无法兼容此方法 */
//entries: Array.prototype.entries || function () { }
//一维数组深拷贝是用concat()函数。
//多维数组深度拷贝函数
//重玩本关是一个难点，难度在于三维数组的拷贝，只复制地址，不复制值，这意味着通关后的数组再也回不到初始化时的数组，也就实现不了重玩本关的功能。
//javascrit数组数据类型提供了slice(0)和concat()函数实现数组的深拷贝，但只局限于一维数组，在二维，三维，四维中不起作用。
//为了解决此问题，特提供深度拷贝函数解决此问题。
//递归的适合于二维数组以上的所有维度的深拷贝。
deepCopy: function () {
var i,
_newarr = [];
for (i = 0; i < this.length; i++) {
if (Array.isArray(this[i])) {
//深拷贝
_newarr[i] = this[i].deepCopy(this[i]);
}
else {
_newarr[i] = this[i];
}
}
return _newarr;
}
};
//ArrayBuffer兼容处理，只有在h5文件上传用到
U.UF.S.ArrayBuffer = function () {
/**
* ArrayBuffer slice polyfill.
*
* @see https://github.com/ttaubert/node-arraybuffer-slice
*/
if (typeof ArrayBuffer !== 'undefined' && !ArrayBuffer.prototype.slice) {
(function () {
function clamp(val, length) {
val = (val | 0) || 0;
if (val < 0) {
return Math.max(val + length, 0);
}
return Math.min(val, length);
}
ArrayBuffer.prototype.slice = function (from, to) {
var length = this.byteLength,
begin = clamp(from, length),
end = length,
num,
target,
targetArray,
sourceArray;
if (to !== undefined) {
end = clamp(to, length);
}
if (begin > end) {
return new ArrayBuffer(0);
}
num = end - begin;
target = new ArrayBuffer(num);
targetArray = new Uint8Array(target);
sourceArray = new Uint8Array(this, begin, num);
targetArray.set(sourceArray);
return target;
};
})();
}
}
//#endregion
//#region Guid
/**
* 自定义Guid 类型
默认情况下我们给guid返回 空Guid
*/
window.Guid = U.UF.C.Guid = {
//生成Guid
newGuid: function () {
var _num, i, _guid = "";
for (i = 0; i < 32; i++) {
_guid += Math.floor(Math.random() * 16).toString(16); //随机0 - 16 的数字 转变为16进制的字符串
_num = Math.floor((i - 7) / 4); //计算 (i-7)除4
if (_num > -1 && _num < 4 && (i == (7 + 4 * _num))) { //会使guid中间加 "-" 形式为xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
_guid += "-";
}
}
return _guid;
},
//空Guid
emptyGuid: US.EMPTYGUID,
// 返回一串无 "-" 的Guid Dash翻译为破折号
guidNoDash: function () {
return Guid.newGuid().replace(/-/g, "");
},
//测试是不是正确的Guid 返回结果为 true 或 false
IsGuid: function (guid) {
return U.UF.S.Guid.test(guid);
}
}
//#endregion
;
///
" }, _tr); } } _tbody.appendChild(_frag); //修改 U.UF.E.table.load(_table); }; /** * 换行并返回该行的div 然后在该行下面创建空div(防止表格后无法聚焦) * return 创建表格的div(父节点) */ U.UF.E.table.createTablePel = function () { var _table = U.UF.E.table; //console.log(_table._range); var _range = U.UF.E.table._range, //获取光标 _div = U.UF.E.getLineElement(_range.startContainer); //获取光标所在行的div if (_div.textContent !== "") { //如果该行有内容 则新建一行div var _div = U.selectEl("#" + U.UF.E.key.addLine(_range).addLine)[0]; } // U.selectEl(_div).attr("contenteditable", "false"); //无内容的div(表格的父节点) 取消编辑效果 _div.style.cssText = "overflow-y:hidden;padding-bottom:5px;padding-right:7px;width:90%"; //_div的样式 U.UF.E.key.addLine(_range); //在表格的父节点下添加div 防止无法聚焦 _table.placeCaretAtEnd(_div); return _div; }; /** * 将表格的第一个tr里的所有列尺元素 添加 zindex为1 的样式 * tableEl 表格元素 */ U.UF.E.table.firstLinePeak = function (tableEl) { U.selectEl(tableEl).find(".U_UF_E_Table_peak").css("height", 0); //原来有列尺的元素高度清0 U.selectEl(tableEl).find(".U_UF_E_Table_peak").removeClass("U_UF_E_Table_peak"); //改变 删除所有列尺的zIndex为1的样式 var _height = tableEl.clientHeight; //获取表格的高 var _colRuleList = tableEl.querySelectorAll("tr")[0].querySelectorAll(".U_MD_O_W_Table_colRule"); //获取第一行的列尺 for (var i = 0, len = _colRuleList.length; i < len; i++) { var _colRule = _colRuleList[i]; _colRule.style.height = _height + "px"; //所有列尺的高等于表格的高 U.selectEl(_colRule).addClass("U_UF_E_Table_peak"); } }; /** * * @param table 防止选中事件时选中到表格外的元素而报错 */ U.UF.E.table.tableOver = function (table) { U.selectEl(table).bind('mouseover', function () { //判断鼠标是否在该table里 如果在 才可以选择区域 this.over = true; }); U.selectEl(table).bind('mouseout', function () { this.over = false; }); }; /** * * @param colrule 列尺(div) 添加左右拉伸事件 */ U.UF.E.table.colExpanding = function (colrule) { var _div = colrule; U.selectEl(_div).bind({ 'mousedown': function (e) { U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove(); //删除右键元素 U.UF.EV.stopBubble(e); //阻止冒泡 this.style.backgroundColor = "#8cb3e0"; //修改列尺(div)的颜色 var _table = U.UF.E.table; var _this = this; var _tdEl = this.parentNode; //获取td(每个列对应一个td父节点) var _tableEl = _table.parentSelect(this, "table"); //获取所在的table var _tableElWidth = _tableEl.clientWidth; //table当前的宽度 var _trList = _tableEl.querySelectorAll("tr"); //获取所有的tr var _tdElIndex = _table.index(_tdEl); //获取td在tr的索引位置(列) var _dis, //移动的距离 _disX; //移动后的位置 var _oMouseX = e.pageX; //获取鼠标按下时的X坐标 var _oX = parseInt(this.style.right); //获取当前Left坐标 var expandingMove = function (e) { //拖拽时移动用的函数 U.UF.EV.stopDefault(e); //取消默认拖拽 var _mouseX = e.pageX; //鼠标移动时的x坐标 _dis = _mouseX - _oMouseX; //移动的距离 _disX = _dis + _oX; //移动后的位置 U.selectEl(_this).css("right", -_disX + "px"); //同步当前的left }; var expandingUp = function () { //拖拽时松开用的函数 _this.style.backgroundColor = ""; //列尺颜色 变为空 var _child; for (var i = 0, len = _trList.length; i < len; i++) { var _colTdEl = U.selectEl("td", _trList[i])[_tdElIndex]; //列的td _trList[i].querySelectorAll("td") _colTdEl.style.width = _colTdEl.offsetWidth + _disX + "px"; //同步宽度 var _colRule = _colTdEl.querySelectorAll('.U_MD_O_W_Table_colRule'); //该td对应的列尺 U.selectEl(_colRule).css("right", "0px"); //同步当前的left _child = U.selectEl("div", _trList[i]); _child[_child.length - 1].style.marginTop = _trList[i].offsetHeight + "px"; } U.selectEl(document).unbind('mousemove', expandingMove); U.selectEl(document).unbind('mouseup', expandingUp); }; U.selectEl(document).bind('mousemove', expandingMove); U.selectEl(document).bind('mouseup', expandingUp) }, 'dblclick': function (e) { U.UF.EV.stopBubble(e); //阻止冒泡 }, //阻止td的双击 'mousemove': function (e) { U.UF.EV.stopBubble(e); //阻止冒泡 U.UF.EV.stopDefault(e); //取消默认拖拽 } }); }; /** * * @param rowrule 行尺(div) 添加上下拉伸事件 */ U.UF.E.table.rowExpanding = function (rowrule) { //高度扩张 var _div = rowrule; U.selectEl(_div).bind({ 'mousedown': function (e) { U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove(); //删除右键元素 this.style.backgroundColor = "#8cb3e0"; U.UF.EV.stopBubble(e); //阻止冒泡 var _oMouseY = e.pageY; //获取鼠标按下时的Y坐标 var _this = this; var _oY = parseInt(this.style.marginTop); //获取当前Top坐标 var _trEl = this.parentNode; //获取tr var expandingMove = function (e) { //拖拽时移动用的函数 U.UF.EV.stopDefault(e); //取消默认拖拽 var _mouseY = e.pageY; //鼠标移动时的Y坐标 var _dis = _mouseY - _oMouseY + _oY; //移动的距离 _dis = Math.max(30, _dis); //拉伸后的tr的高度不能小于30px _trEl.style.height = _dis + "px"; var clienHeight = _trEl.clientHeight; //tr的高度 会根据内容有个最小值 因此 这个tr最后的高度 才是最终值 _dis = Math.max(clienHeight, _dis); _trEl.style.height = _dis + "px"; U.selectEl(_this).css("margin-top", _dis + "px"); }; var expandingUp = function () { //拖拽时松开用的函数 var _table = U.UF.E.table; //简写命名空间 var _tableEl = _table.parentSelect(_this, "table"); //获取table元素 _table.firstLinePeak(_tableEl); //更新第一行的列尺高度 _this.style.backgroundColor = ""; U.selectEl(document).unbind('mousemove', expandingMove); U.selectEl(document).unbind('mouseup', expandingUp); }; U.selectEl(document).bind('mousemove', expandingMove); U.selectEl(document).bind('mouseup', expandingUp) }, 'mousemove': function (e) { U.UF.EV.stopBubble(e); //阻止冒泡 U.UF.EV.stopDefault(e); //取消默认拖拽 } }); }; /* * 添加文本框 并给文本框添加事件 * parent td元素(文本框父元素) * text 为文本 可要可不要 */ U.UF.E.table.createTextArea = function (parent, text) { var _textArea = $$("textarea", { className: "U_UF_E_Table_tdText", value: text || "", contenteditable: "true", inline: true }, parent); //添加textarea 并且将td的内容放入textarea U.selectEl(_textArea).bind('mousedown', function (e) { U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove(); //删除右键元素 //阻止冒泡 }); //阻止td的冒泡 (选中效果 和 聚焦效果) var autoHeight = function (el) { //表格自动适应高 el.nodeType === 1 ? "" : el = el.target; //el只能为textarea el.scrollHeight ? el.style.height = el.scrollHeight + "px" : ""; //此处为textarea的高度跟随文字输入的内容自动增高 var _rowRuleList = U.selectEl(".U_MD_O_W_Table_rowRule"); //获取所有行尺 for (var i = 0, len = _rowRuleList.length; i < len; i++) { var _trPel = _rowRuleList[i].parentNode; //每个行尺 对应一个 tr元素 _trPel.style.height = _trPel.clientHeight; //使每个tr的height 等于 clientHeight U.selectEl(_rowRuleList[i]).css("margin-top", _trPel.clientHeight + "px"); //同步margintop 的位置 } }; autoHeight(_textArea); //由于textarea输入自后td的高度会变化 因此所有行尺的位置重新定位 U.selectEl(_textArea).bind('keydown', autoHeight); //键盘监听 自动适应高 U.selectEl(_textArea).bind('keyup', autoHeight); //键盘监听 自动适应高 U.selectEl(_textArea).bind('blur', function () { var _textla = U.selectEl(".U_UF_E_Table_tdText"); var _tdEl = U.selectEl(".U_UF_E_Table_tdText")[0].parentNode; _tdEl.innerText = _textla[0].value; _textla.remove(); }); } /** * * @param td 添加鼠标拖拽效果的 td * 给td添加鼠标拖拽的选中效果 */ U.UF.E.table.dragCheckd = function (td) { var _tdEl = td; U.selectEl(_tdEl).bind('mousedown', function (e) { U.UF.EV.stopBubble(e); //阻止冒泡 U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove(); //删除右键元素 if (e.button != 2) { var _table = U.UF.E.table; //移除原本选中的效果 U.selectEl(".U_UF_E_Table_tdCheckd").removeClass("U_UF_E_Table_tdCheckd"); U.selectEl(".U_UF_E_Table_tdCurrent").removeClass("U_UF_E_Table_tdCurrent"); //给td添加聚焦样式 U.selectEl(this).addClass("U_UF_E_Table_tdCurrent"); var _start = this; //获取点击元素 var _startX = _table.index(_start); //记录x坐标轴 var _startY = _table.index(this.parentNode); //获取y坐标轴 var _checkFlag = true; //注意下面的_table.over是一个属性 防止选中区域在表格外面 var _tableEl = _table.parentSelect(this, "table"); //获取父节点table //拖拽时移动用的函数 var _drapMove = function (e) { var tagEl = e.path.filter(_filter)[0]; if (tagEl) { U.UF.EV.stopBubble(e); //阻止冒泡 if (!(_tableEl.over) || (tagEl === _start && _checkFlag)) return; //此处防止选中table外元素 与 鼠标必须选中两个td才会有选中效果 _checkFlag = false; //如果不同 则选中过两个元素 var _endX = _table.index(tagEl); //结束点的x坐标 var _endY = _table.index(tagEl.parentNode); //结束点的y坐标 U.selectEl(".U_UF_E_Table_tdCheckd").removeClass("U_UF_E_Table_tdCheckd"); _table.tdAddClass(tagEl.parentNode, _startX, _startY, _endX, _endY); //给开始点和结束点组成的矩形 添加选中的class } }; var _dragUp = function () { //拖拽时松开用的函数 U.selectEl(document).unbind('mousemove', _drapMove); U.selectEl(document).unbind('mouseup', _dragUp); _checkFlag = true; }; var _filter = function (el) { return el.nodeName && el.nodeName === "TD" } U.selectEl(document).bind('mousemove', _drapMove); U.selectEl(document).bind('mouseup', _dragUp); } }); }; /** * 添加右键 * tableEl 表格元素 */ U.UF.E.table.rightClick = function (tableEl) { var _table = U.UF.E.table; var leftAddCol = { innerHTML: '左侧添加列', onclick: function () { _table.addColumn("left"); U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove(); //删除右键元素 }, onmousedown: function (e) { U.UF.EV.stopBubble(e); //阻止冒泡 } }; var rightAddCol = { innerHTML: '右侧添加列', onclick: function () { _table.addColumn("right"); U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove(); //删除右键元素 }, onmousedown: function (e) { U.UF.EV.stopBubble(e); //阻止冒泡 } }; var upAddLine = { innerHTML: '向上添加行', onclick: function () { _table.addTr("up"); U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove(); //删除右键元素 }, onmousedown: function (e) { U.UF.EV.stopBubble(e); //阻止冒泡 } }; var downAddLine = { innerHTML: '向下添加行', onclick: function () { _table.addTr("down"); U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove(); //删除右键元素 }, onmousedown: function (e) { U.UF.EV.stopBubble(e); //阻止冒泡 } }; var removeCol = { innerHTML: '删除列', onclick: function () { _table.removeColumn(); U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove(); //删除右键元素 }, onmousedown: function (e) { U.UF.EV.stopBubble(e); //阻止冒泡 } }; var removeLine = { innerHTML: '删除行', onclick: function () { _table.removeTr(); U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove(); //删除右键元素 }, onmousedown: function (e) { U.UF.EV.stopBubble(e); //阻止冒泡 } }; var mergeCells = { innerHTML: '合并单元格', onclick: function () { _table.mergeCells(); U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove(); //删除右键元素 }, onmousedown: function (e) { U.UF.EV.stopBubble(e); //阻止冒泡 } }; var _arr = [leftAddCol, rightAddCol, upAddLine, downAddLine, removeCol, removeLine, mergeCells]; U.selectEl(tableEl).bind('contextmenu', function (e) { U.UF.EV.stopBubble(e); //阻止冒泡 U.UF.EV.stopDefault(); U.UF.EL.rightMenu(_arr, tableEl); U.selectEl("#U_UF_EL_rightmenu").bind('contextmenu', function (e) { //右键元素属于table 因此需要阻止冒泡 U.UF.EV.stopBubble(e); //阻止冒泡 }); }); U.selectEl(tableEl).bind('mousedown', function (e) { U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove(); //删除右键元素 }); }; /** * * @param direction 参数为 "left" 或 "right" * 左右侧添加列 */ U.UF.E.table.addColumn = function (direction) { var _table = U.UF.E.table; var tdList = U.selectEl(".U_UF_E_Table_tdCheckd"); if (!tdList[0]) { //如果没有 选中的td if ($(".U_UF_E_Table_tdCurrent")[0]) { //再判断 有无聚焦的 td tdList = U.selectEl(".U_UF_E_Table_tdCurrent"); } else { return; //如果没有 则直接返回 } } var _tdEl; if (direction === "left") { _tdEl = tdList[0]; } else if (direction === "right") { _tdEl = tdList[tdList.length - 1]; } _table.insertTd(_tdEl, direction); }; /** * * @param td td元素 * @param direction 供添加左右列用的api 参数为 "left" 或 "right" * 向每个tr的列(td) 前方或后方插入td */ U.UF.E.table.insertTd = function (td, direction) { var _table = U.UF.E.table; var _tdEl = td, _index = _table.index(_tdEl), //在tr中位于所有td的位置 _dir = direction; var _tableEl = _table.parentSelect(_tdEl, 'table'); var _trList = U.selectEl(_tableEl).find("tr"); var _tableElWidth = _tableEl.offsetWidth; //记住当前的宽度 for (var i = 0, len = _trList.length; i < len; i++) { //遍历每个tr的列(td) 在前方或后方插入td var _currentColumn = U.selectEl(_trList[i]).find("td")[_index]; //当前列 var _tdElClone = _tdEl.cloneNode(); //克隆td if (_dir === "left") { _table.Before(_currentColumn, _tdElClone); //在列的前面添加td } else if (_dir === "right") { _table.After(_currentColumn, _tdElClone); //在列的后面添加td } var _colRule = $$("div", { style: { position: "absolute", top: 0, left: "-7px", "margin-left": _tdElClone.style.width, cursor: "col-resize", width: "7px" }, className: "U_MD_O_W_Table_colRule", inline: true }, _tdElClone); //列尺 _table.colExpanding(_colRule); //添加左右拉伸事件 _table.createTextArea(_tdElClone); //添加文本框 _table.dragCheckd(_tdElClone); //td拖拽的选中事件 U.selectEl(_tdElClone).removeClass("U_UF_E_Table_tdCheckd"); //清楚添加后的列的选中的样式 U.selectEl(_tdElClone).removeClass("U_UF_E_Table_tdCurrent"); } _tableEl.style.width = _tableElWidth + _tdEl.offsetWidth + "px"; _table.firstLinePeak(_tableEl); //第一行tr的所有列尺添加zIndex为1 }; /** * * @param direction 参数为 "up" 或 "down" * 上下添加行 */ U.UF.E.table.addTr = function (direction) { var _table = U.UF.E.table; var tdList = U.selectEl(".U_UF_E_Table_tdCheckd"); if (!tdList[0]) { //如果没有 选中的td if ($(".U_UF_E_Table_tdCurrent")[0]) { //再判断 有无聚焦的 td tdList = U.selectEl(".U_UF_E_Table_tdCurrent"); } else { return; //如果没有 则直接返回 } } var _trEl, _trElClone; if (direction === "up") { _trEl = tdList[0].parentNode; _trElClone = _table.cloneTr(_trEl); //克隆tr 并给td 添加表格事件 _table.Before(_trEl, _trElClone); } else if (direction === "down") { _trEl = tdList[tdList.length - 1].parentNode; //向下插入行 _trElClone = _table.cloneTr(_trEl); //克隆tr 并给td 添加表格事件 _table.After(_trEl, _trElClone); } var _tableEl = _table.parentSelect(tdList[0], 'table'); _table.firstLinePeak(_tableEl); //将表格的第一个tr里的所有列尺元素 添加 zindex为1 的样式 }; /** * 删除行 */ U.UF.E.table.removeTr = function () { var _table = U.UF.E.table; var tdList = U.selectEl(".U_UF_E_Table_tdCheckd"); if (!tdList[0]) { //如果没有 选中的td if ($(".U_UF_E_Table_tdCurrent")[0]) { //再判断 有无聚焦的 td tdList = U.selectEl(".U_UF_E_Table_tdCurrent"); } else { return; //如果没有 则直接返回 } } var start = _table.index(tdList[0].parentNode); var end = _table.index(tdList[tdList.length - 1].parentNode); var _tableEl = _table.parentSelect(tdList[0], "table"); var _parentDiv = _table.parentSelect(_tableEl, "div"); var _trList = U.selectEl(_tableEl).find("tr"); for (var i = start; i <= end; i++) { _trList[i].remove(); } if (!(_tableEl.querySelectorAll("tr").length)) { _parentDiv.remove(); return } _table.firstLinePeak(_tableEl); //将表格的第一个tr里的所有列尺元素 添加 zindex为1 的样式 }; /** * * @param tr 需要克隆的tr * 克隆tr 并添加表格事件 */ U.UF.E.table.cloneTr = function (tr) { var _table = U.UF.E.table; var _trNodes = tr.cloneNode(true); //带子节点的tr var _trClone = tr.cloneNode(); //无子节点的tr var _cloneTd = U.selectEl(_trNodes).find("td"); for (var i = 0, len = _cloneTd.length; i < len; i++) { var _td = _cloneTd[i].cloneNode(); U.selectEl(_td).rmAttr("rowspan"); //删除跨行的属性 _trClone.appendChild(_td); var _colRule = $$("div", { style: { position: "absolute", top: 0, left: "-7px", "margin-left": _td.style.width, cursor: "col-resize", width: "7px" }, className: "U_MD_O_W_Table_colRule", inline: true }, _td); //列尺 _table.colExpanding(_colRule); //添加左右拉伸事件 //_table.tdDbClick(_td); //添加双击事件 _table.createTextArea(_td); _table.dragCheckd(_td); //td拖拽的选中事件 } var _rowRule = $$("div", { style: { position: "absolute", zIndex: "1", left: 0, "margin-top": "30px", cursor: "row-resize", height: "3px", width: "100%" }, className: "U_MD_O_W_Table_rowRule", inline: true }, _trClone); //行尺 _table.rowExpanding(_rowRule); //上下拉伸事件 U.selectEl(_trClone).find(".U_UF_E_Table_tdCheckd").removeClass("U_UF_E_Table_tdCheckd"); //删除所有选中表格和 聚焦表格的样式 U.selectEl(_trClone).find(".U_UF_E_Table_tdCurrent").removeClass("U_UF_E_Table_tdCurrent"); return _trClone; }; /** * 合并单元格功能 */ U.UF.E.table.mergeCells = function () { var _table = U.UF.E.table; var _tdList = U.selectEl(".U_UF_E_Table_tdCheckd"); if (_tdList.length <= 1) return; var _x1 = _table.index(_tdList[0]); //x坐标开始点 var _y1 = _table.index(_tdList[0].parentNode); //y坐标开始点 var _x2 = _table.index(_tdList[_tdList.length - 1]); //x坐标结束点 var _y2 = _table.index(_tdList[_tdList.length - 1].parentNode); //y坐标结束点 var _tableEl = _table.parentSelect(_tdList[0], "table"); //获取table元素 var _trList = _tableEl.querySelectorAll("tr"); //获取table里所有tr var _text = ""; //合并后的总内容 var allWidth = 0; //合并后的总宽度 for (var i = _y1; i <= _y2; i++) { /*该循环*/ var _trAllTd = _trList[i].querySelectorAll("td"); //获取选中表格的所在tr for (var j = _x1; j <= _x2; j++) { // 获取选中表格的 所在td var _tdEl = _trAllTd[j]; //获取每个选中的单元格 _text += _tdEl.innerText; //合并内容 if (i === _y1) { //只计算选中表格第一行 的总宽度 allWidth += _tdEl.offsetWidth; } if (i === _y1 && j === _x1) continue; //第一个td就跳过 其他的则display为 none U.selectEl(_tdEl).css("display", "none"); } } var _textNode = document.createTextNode(_text); //文字节点 _text为总内容 var _firstNode = _table.getFirstText(_tdList[0]); //获取被合并单元格的td所在的文字节点 _firstNode ? _firstNode.remove() : ""; //如果存在文字节点 则删除 _tdList[0].appendChild(_textNode); //然后将新创建的总文字节点 添加到该单元格里 _tdList[0].style.width = allWidth + "px"; //添加总宽度 var _col = U.selectEl(_tdList[0]).attr("colspan"); _col <= _x2 - _x1 + 1 ? U.selectEl(_tdList[0]).attr("colspan", _x2 - _x1 + 1) : ""; //跨的列数 U.selectEl(_tdList[0]).attr("rowspan", _y2 - _y1 + 1); //跨的行数 U.selectEl(_tdList[0].querySelector(".U_MD_O_W_Table_colRule")).css("margin-left", allWidth + 'px'); //更新 列尺的位置 _table.firstLinePeak(_tableEl); //将表格的第一个tr里的所有列尺元素 添加 zindex为1 的样式 }; /** * 删除列 */ U.UF.E.table.removeColumn = function () { var _table = U.UF.E.table var tdList = U.selectEl(".U_UF_E_Table_tdCheckd"); if (!tdList[0]) { //如果没有 选中的td if ($(".U_UF_E_Table_tdCurrent")[0]) { //再判断 有无聚焦的 td tdList = U.selectEl(".U_UF_E_Table_tdCurrent"); } else { return; //如果没有 则直接返回 } } var _start = _table.index(tdList[0]); //列的开始位置 var _end = _table.index(tdList[tdList.length - 1]); //列的结束位置 var _tableEl = _table.parentSelect(tdList[0], 'table'); var _trList = U.selectEl(_tableEl).find("tr"); var _widthSum = 0; //删除列的总宽 for (var i = 0, len = _trList.length; i < len; i++) { var _tdList = U.selectEl(_trList[i]).find("td"); for (var j = _start; j <= _end; j++) { i === 0 ? _widthSum += _tdList[j].offsetWidth : ""; //只计算第一行删除的列宽 _tdList[j].remove(); } } _tableEl.style.width = _tableEl.offsetWidth - _widthSum + "px"; var _tdLen = _tableEl.querySelectorAll("td").length; //获取当前列的长度 if (!_tdLen) { //如果table不存在td 则删除table和 table父节点(div) var _parentDiv = _table.parentSelect(_tableEl, "div"); _parentDiv.remove(); return } _table.firstLinePeak(_tableEl); //将表格的第一个tr里的所有列尺元素 添加 zindex为1 的样式 }; /** * 添加点击时的聚焦效果 并且若存在textarea元素 则删除并获取textarea的值给td */ U.UF.E.table.removeFocus = function () { //添加点击时的聚焦效果 并且若存在textarea元素 则删除并获取textarea的值给td U.selectEl(".U_UF_E_Table_tdCheckd").removeClass("U_UF_E_Table_tdCheckd"); U.selectEl(".U_UF_E_Table_tdCurrent").removeClass("U_UF_E_Table_tdCurrent"); return; var _textArea = U.selectEl(".U_UF_E_Table_tdText")[0], //如果存在textarea元素 则将其变为文本 _pel; _textArea ? _pel = _textArea.parentNode : ""; //如果textArea存在 先获取父节点td 然后将其变为文本 if (_pel) { var _textNode = document.createTextNode(_textArea.value); _pel.appendChild(_textNode); _textArea.remove(); } var _rowRuleList = U.selectEl(".U_MD_O_W_Table_rowRule"); //使div的margintop 及时更新 for (var i = 0, len = _rowRuleList.length; i < len; i++) { var _trEl = _rowRuleList[i].parentNode; _trEl.style.height = _trEl.clientHeight; U.selectEl(_rowRuleList[i]).css("margin-top", _trEl.clientHeight + "px"); } }; /** * * @param tr 获取所有tr用的(遍历所有tr) * @param x1 开始点x坐标 * @param y1 开始点y坐标 * @param x2 结束点x坐标 * @param y2 结束点y坐标 */ U.UF.E.table.tdAddClass = function (tr, x1, y1, x2, y2) { //获取首尾坐标轴 最后组成矩形 然后添加选中的class var _trList = tr.parentNode.querySelectorAll("tr"); var _x1 = Math.min(x1, x2); var _x2 = Math.max(x1, x2); var _y1 = Math.min(y1, y2); var _y2 = Math.max(y1, y2); for (var i = _y1; i <= _y2; i++) { var _tdList = _trList[i].querySelectorAll("td"); for (var j = _x1; j <= _x2; j++) { U.selectEl(_tdList[j]).addClass("U_UF_E_Table_tdCheckd"); } } } /** * * @param el 元素 * @returns {number} 返回当前元素在所有同类型元素 的第几个位置 */ U.UF.E.table.index = function (el) { var _el = el; var _name = _el.nodeName; //获取该元素的节点名 var _list = _el.parentNode.querySelectorAll(_name); //获取父节下的所有自己的节点 for (var i = 0, len = _list.length; i < len; i++) { if (_list[i] === _el) { return i; //返回在数组的索引 } } }; /** * 获取td的第一个文本元素 */ U.UF.E.table.getFirstText = function (td) { var _child = td.childNodes; for (var i = 0, len = _child.length; i < len; i++) { if (_child[i].nodeType === 3) { return _child[i]; } } return false; } /*获取指定标签的父节点*/ U.UF.E.table.parentSelect = function (el, type) { var _this = el; var type = type.toUpperCase(); if (_this.tagName === type) return _this; var parent = _this.parentNode; while (parent.tagName !== type) { parent = parent.parentNode; } return parent; }; /*在元素前面插入新元素*/ U.UF.E.table.Before = function (el, newEl) { var _this = el; var parentEl = _this.parentNode; parentEl.insertBefore(newEl, _this); }; /*在元素后面插入新元素*/ U.UF.E.table.After = function (el, newEl) { var _this = el; if (_this && _this.parentNode) { var parentEl = _this.parentNode; var child = parentEl.childNodes; var last = child[child.length - 1] || parentEl.lastChild; if (last === _this) { parentEl.appendChild(newEl); } else { parentEl.insertBefore(newEl, _this.nextSibling); } return newEl; } }; /** * 使光标聚焦在该元素后面 * @param el 需要文字聚焦的 元素节点 */ U.UF.E.table.placeCaretAtEnd = function (el) { //传入光标要去的节点对象 if (el.collapse) { //如果存在el.collapsed 则是range var range = el; range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); return; } if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { el.focus && el.focus(); var range = document.createRange(); range.selectNodeContents(el); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (typeof document.body.createTextRange != "undefined") { var textRange = document.body.createTextRange(); textRange.moveToElementText(el); textRange.collapse(false); textRange.select(); } }; /* 合并单元格使用bug: 1.选中表格时 如出现行和列对不齐时 除了删除列不会有问题以外 其他都会出问题 解决思路:由于合并单元格后 每行的td都对不齐了 因此需要修改选中td的接口 不准出现参差不齐的情况 2.在合并单元格的那一列用添加列 删除列会有bug 解决思路: 由于合并单元格时 有占用两列或两行的情况 因此需要在添加列删除列那里将占用两列以上的情况考虑进去 针对colspan属性做判断 3.在合并单元格的那一行除了 向上添加行功能 其他都会有bug 解决思路:由于跨行合并单元格 会使第第一行变成占2行或以上 其他行display为none 因此如果向下添加行则需要将display为none 消掉 主要也是需要针对rowspan属性做判断 */ ; ///
使用“扫一扫”即可将网页分享至朋友圈。" }, _codeBox); } else { _codeBox = U.selectEl('#wxfrom', parent)[0]; } U.selectEl(bindel).bind({ click: function () { U.UF.QR.generate("230", "235", "black", "#f4f4f4", href || window.location.href, _codeShowArea); _codeBox.style.display = ''; } }) return _codeBox; } /** * qq好友分享 * * @url {string} 分享的网页地址 * @title {string} 标题 * @pic {string} 图片绝对路径 * @desc {string} 分享介绍 * @summary {string} 分享内容 */ U.UF.OT.qqFriendShare = function (url, title, pic, desc, summary) { var _sharesinastring = 'https://connect.qq.com/widget/shareqq/index.html?url=' + encodeURIComponent(url || window.location.href) + '&title=' + encodeURIComponent(title || '这文件超棒的，分享给你看看！') + '&pic=' + pic || "" + '&desc=' + desc || "" + '&summary=' + summary || ""; window.open(_sharesinastring, 'newwindow', 'height=600,width=864,top=300,left=300'); } /** * 新浪微博分享 * * @url {string} 分享的网页地址 * @title {string} 标题 * @pic {string} 图片绝对路径 */ U.UF.OT.weiboShare = function (url, title, pic) { var _sharesinastring = 'http://v.t.sina.com.cn/share/share.php?url=' + encodeURIComponent(url || window.location.href) + '&title=' + encodeURIComponent(title || '这文件超棒的，分享给你看看！') + '&content=utf-8' + '&pic=' + pic || ""; window.open(_sharesinastring, 'newwindow', 'height=500,width=800,top=300,left=300'); } ;
replaceRnToBr: function () { return this.replace(/\r\n/g, "
"); //把\r\n 换成
}, //成页面换行替换成文本换行,把
换成\r\n replaceBrToRn: function () { return this.replace(/<(BR)[^<>]*>/ig, "\r\n"); // 把
换成\r\n }, removeP: function () { //去除P标签 return this.replace(/<(p)[^<>]*>/ig, ""); //把 去掉 }, removeBr: function () { //去除BR标签 return this.replace(/<(BR)[^<>]*>/ig, ""); //把
去掉 }, removeRn: function () { //去除\r\n标签 return this.replace(/\r\n/g, ""); //把\r\n 去掉 }, replaceBrAndBlank: function () { //把
转换为 \r\n并把空格" "转换为""，应用场景在哪里？ return this.replaceBrToRn().replace(/ /g, ''); }, //判断用户是否在div可编辑区域里面输入了内容。 isHtmlNull: function () { //移除
标签，移除P标签，去除所有空格。当用户发帖时需要判断用户是否输入了文字图片,可以用此函数判断用户是否输入了内容。在div可编辑时需要用此函数。 return this.removeBr().removeP().trim() != ""; // }, //把字符串中的< > 分别转换成 < > replaceLtAndGt: function () { return this.replace(/</g, "<").replace(/>/g, ">"); //所有< > 分别转换成 < > }, //把字符串中的 < >分别转换成< > replaceAngleBrackets: function () { //把字符串中的 < >分别转换成< > return this.replace(//g, ">"); //所有< > 分别转换成 < > }, //应用：从数据库取出的html代码会直接显示在页面中，为了让js,css等文字以文字的形式显示，而不是植入到页面中不显示，所以需要转义。 //HTML字符转化为ASCLL码.把字符串中的 < >分别转换成< > ,把"'"转换为"'",把"""转换为""",把 //注释：/&(?!#?[a-zA-Z0-9]+;)/g, "&"暂时不知道什么意思。 replaceHtmlSign: function () { return this.replace(/&(?!#?[a-zA-Z0-9]+;)/g, "&").replace(//g, ">").replace(/'/g, "'").replace(/"/g, """); }, replaceDoubleToAngleBrackets: function () { //html字符可输出 return this.replace(/\《/g, "<").replace(/\》/g, ">"); //所有《》转换为<> }, replaceAngleToDoubleBrackets: function () {//中文括号 return this.replace(/\/g, "》"); // 所有<>转换为《》 }, trim: String.prototype.trim || function (str) {//去除所有空格，用于发帖时标题内容是否为空的判断，创建文件夹时输入文件夹名时的判断。 return this.replace(/\ |\ |\s+|\n|\r|\t/g, str || ""); //去除空白符号、\t、\s、\r、\n }, lTrim: function () { //去除左边空格 return this.replace(/(^\s*)/g, ""); }, rTrim: function () { //去除右边边空格 return this.replace(/(\s*$)/g, ''); }, addPreSpace: function (n) { //字符串前面追加n个空格，用于IDE编辑器环境前面空四格 var i, k = ""; for (i = 0; i < n; i++) k += " "; return k + this; }, insertString: function (str, n) { //指定位置插入字符串 //调用substr截取字符串 加上插入的字符 再加上 把原字符串删除前UN个字符的字符串 var _pre = this.substr(0, n); var _back = this.substr(n, this.length); return _pre + str + _back; }, //指定位置插入省略号, 常见于文章标题过长、文件夹名称过长，在显示时后面的字符以省略号代替 addEllipsis: function (n) { //省略号 var _str = this.substrU(0, n); //调用SubstrU 截取字符串 if (_str != this) { _str = _str + "..."; } //当修改String的原型时,会把字符串string替换为object的str,所以需要用valueOf()方法转换为字符串的string. Object对象的格式类似 String {"asdasd"} return _str.valueOf(); //判断_str是否为原字符串 不是的话返回_str加上... }, //字符串转化成number toInt: function () { var _UTV = this.valueOf(), _UMS = _UTV.match(/^(-|\+)?\d+/g); return _UMS && _UMS.length == 1 ? Number(_UMS[0]) : _UTV; }, //把原字符串source换成目标字符串target replaceStr: function (source, target) { return this.replace(new RegExp(source, "gm"), target); //把原字符串source换成目标字符串target }, parseJSON: function () { //string 转 json对象 var _obj = null, _str = this; try { _obj = eval("0,(" + _str + ")"); } catch (e) { } return _obj == null ? _str.valueOf() : _obj; }, capitalizeFirstLetter: function () { //首字母大写 return this.replace(/\b(\w)|\s(\w)/g, function (UAE) { return UAE.toUpperCase(); }); }, //回车换行替换成换行 并返回按照\n拆分出的数组 SplitRN: function () { return this.replace(/\r\n/g, "\n").split("\n"); //把\r\n替换成\n 并且根据\n把字符串分成数组 }, //根据符号"<",">"把html字符串拆分成数组,适合于IDE编辑器 ////增加一个拆分html编码为字符串数组的操作，用于编辑器的换行，定义到主项目中 //拆分HTML编码，适合于编辑器，不止是拆分html编码，同时还需要把中间的文字提出出来，例如javascript代码，div中间的文字等。 // SplitAngleBrackets: function () { // var i, s, a = []; // for (i = 0; i < this.length; i++) { // if (this[i] == "<") { // s = i; // } // if (this[i] == ">") { // a.push(this.substring(s, i + 1)); // } // }; // return a; // }, //根据符号"<",">"把html字符串拆分成数组,适合于IDE编辑器 ////增加一个拆分html编码为字符串数组的操作，用于编辑器的换行，定义到主项目中 //拆分HTML编码，适合于编辑器，不止是拆分html编码，同时还需要把中间的文字提出出来，例如javascript代码，div中间的文字等。 SplitAngleBrackets: function () { return this.match(/(<(.[^>]*)>)|((|>)[^\<]*[^\<^\s])/g); }, //过滤html标签留下纯文本,不保留任何格式 htmlToText: function () { //过滤HTML标签留下纯文本 return String(this).replace(/(<(.[^>]*)>)/g, ""); }, //过滤html标签留下纯文本,但保留换行符号 htmlToTextRn: function () { return this.replace(/(<(.[^>]*)>)/g, function (str) { return (/(<\/(div|DIV|p|P)([|^>]*)>)|<(BR)[^<>]*>/ig.test(str)) ? "\r\n" : ""; }); }, //获取body里面的html getBodyHtml: function () { try { return /
" }, _tr); } } _tbody.appendChild(_frag); //修改 U.UF.E.table.load(_table); }; /** * 换行并返回该行的div 然后在该行下面创建空div(防止表格后无法聚焦) * return 创建表格的div(父节点) */ U.UF.E.table.createTablePel = function () { var _table = U.UF.E.table; //console.log(_table._range); var _range = U.UF.E.table._range, //获取光标 _div = U.UF.E.getLineElement(_range.startContainer); //获取光标所在行的div if (_div.textContent !== "") { //如果该行有内容 则新建一行div var _div = U.selectEl("#" + U.UF.E.key.addLine(_range).addLine)[0]; } // U.selectEl(_div).attr("contenteditable", "false"); //无内容的div(表格的父节点) 取消编辑效果 _div.style.cssText = "overflow-y:hidden;padding-bottom:5px;padding-right:7px;width:90%"; //_div的样式 U.UF.E.key.addLine(_range); //在表格的父节点下添加div 防止无法聚焦 _table.placeCaretAtEnd(_div); return _div; }; /** * 将表格的第一个tr里的所有列尺元素 添加 zindex为1 的样式 * tableEl 表格元素 */ U.UF.E.table.firstLinePeak = function (tableEl) { U.selectEl(tableEl).find(".U_UF_E_Table_peak").css("height", 0); //原来有列尺的元素高度清0 U.selectEl(tableEl).find(".U_UF_E_Table_peak").removeClass("U_UF_E_Table_peak"); //改变 删除所有列尺的zIndex为1的样式 var _height = tableEl.clientHeight; //获取表格的高 var _colRuleList = tableEl.querySelectorAll("tr")[0].querySelectorAll(".U_MD_O_W_Table_colRule"); //获取第一行的列尺 for (var i = 0, len = _colRuleList.length; i < len; i++) { var _colRule = _colRuleList[i]; _colRule.style.height = _height + "px"; //所有列尺的高等于表格的高 U.selectEl(_colRule).addClass("U_UF_E_Table_peak"); } }; /** * * @param table 防止选中事件时选中到表格外的元素而报错 */ U.UF.E.table.tableOver = function (table) { U.selectEl(table).bind('mouseover', function () { //判断鼠标是否在该table里 如果在 才可以选择区域 this.over = true; }); U.selectEl(table).bind('mouseout', function () { this.over = false; }); }; /** * * @param colrule 列尺(div) 添加左右拉伸事件 */ U.UF.E.table.colExpanding = function (colrule) { var _div = colrule; U.selectEl(_div).bind({ 'mousedown': function (e) { U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove(); //删除右键元素 U.UF.EV.stopBubble(e); //阻止冒泡 this.style.backgroundColor = "#8cb3e0"; //修改列尺(div)的颜色 var _table = U.UF.E.table; var _this = this; var _tdEl = this.parentNode; //获取td(每个列对应一个td父节点) var _tableEl = _table.parentSelect(this, "table"); //获取所在的table var _tableElWidth = _tableEl.clientWidth; //table当前的宽度 var _trList = _tableEl.querySelectorAll("tr"); //获取所有的tr var _tdElIndex = _table.index(_tdEl); //获取td在tr的索引位置(列) var _dis, //移动的距离 _disX; //移动后的位置 var _oMouseX = e.pageX; //获取鼠标按下时的X坐标 var _oX = parseInt(this.style.right); //获取当前Left坐标 var expandingMove = function (e) { //拖拽时移动用的函数 U.UF.EV.stopDefault(e); //取消默认拖拽 var _mouseX = e.pageX; //鼠标移动时的x坐标 _dis = _mouseX - _oMouseX; //移动的距离 _disX = _dis + _oX; //移动后的位置 U.selectEl(_this).css("right", -_disX + "px"); //同步当前的left }; var expandingUp = function () { //拖拽时松开用的函数 _this.style.backgroundColor = ""; //列尺颜色 变为空 var _child; for (var i = 0, len = _trList.length; i < len; i++) { var _colTdEl = U.selectEl("td", _trList[i])[_tdElIndex]; //列的td _trList[i].querySelectorAll("td") _colTdEl.style.width = _colTdEl.offsetWidth + _disX + "px"; //同步宽度 var _colRule = _colTdEl.querySelectorAll('.U_MD_O_W_Table_colRule'); //该td对应的列尺 U.selectEl(_colRule).css("right", "0px"); //同步当前的left _child = U.selectEl("div", _trList[i]); _child[_child.length - 1].style.marginTop = _trList[i].offsetHeight + "px"; } U.selectEl(document).unbind('mousemove', expandingMove); U.selectEl(document).unbind('mouseup', expandingUp); }; U.selectEl(document).bind('mousemove', expandingMove); U.selectEl(document).bind('mouseup', expandingUp) }, 'dblclick': function (e) { U.UF.EV.stopBubble(e); //阻止冒泡 }, //阻止td的双击 'mousemove': function (e) { U.UF.EV.stopBubble(e); //阻止冒泡 U.UF.EV.stopDefault(e); //取消默认拖拽 } }); }; /** * * @param rowrule 行尺(div) 添加上下拉伸事件 */ U.UF.E.table.rowExpanding = function (rowrule) { //高度扩张 var _div = rowrule; U.selectEl(_div).bind({ 'mousedown': function (e) { U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove(); //删除右键元素 this.style.backgroundColor = "#8cb3e0"; U.UF.EV.stopBubble(e); //阻止冒泡 var _oMouseY = e.pageY; //获取鼠标按下时的Y坐标 var _this = this; var _oY = parseInt(this.style.marginTop); //获取当前Top坐标 var _trEl = this.parentNode; //获取tr var expandingMove = function (e) { //拖拽时移动用的函数 U.UF.EV.stopDefault(e); //取消默认拖拽 var _mouseY = e.pageY; //鼠标移动时的Y坐标 var _dis = _mouseY - _oMouseY + _oY; //移动的距离 _dis = Math.max(30, _dis); //拉伸后的tr的高度不能小于30px _trEl.style.height = _dis + "px"; var clienHeight = _trEl.clientHeight; //tr的高度 会根据内容有个最小值 因此 这个tr最后的高度 才是最终值 _dis = Math.max(clienHeight, _dis); _trEl.style.height = _dis + "px"; U.selectEl(_this).css("margin-top", _dis + "px"); }; var expandingUp = function () { //拖拽时松开用的函数 var _table = U.UF.E.table; //简写命名空间 var _tableEl = _table.parentSelect(_this, "table"); //获取table元素 _table.firstLinePeak(_tableEl); //更新第一行的列尺高度 _this.style.backgroundColor = ""; U.selectEl(document).unbind('mousemove', expandingMove); U.selectEl(document).unbind('mouseup', expandingUp); }; U.selectEl(document).bind('mousemove', expandingMove); U.selectEl(document).bind('mouseup', expandingUp) }, 'mousemove': function (e) { U.UF.EV.stopBubble(e); //阻止冒泡 U.UF.EV.stopDefault(e); //取消默认拖拽 } }); }; /* * 添加文本框 并给文本框添加事件 * parent td元素(文本框父元素) * text 为文本 可要可不要 */ U.UF.E.table.createTextArea = function (parent, text) { var _textArea = $$("textarea", { className: "U_UF_E_Table_tdText", value: text || "", contenteditable: "true", inline: true }, parent); //添加textarea 并且将td的内容放入textarea U.selectEl(_textArea).bind('mousedown', function (e) { U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove(); //删除右键元素 //阻止冒泡 }); //阻止td的冒泡 (选中效果 和 聚焦效果) var autoHeight = function (el) { //表格自动适应高 el.nodeType === 1 ? "" : el = el.target; //el只能为textarea el.scrollHeight ? el.style.height = el.scrollHeight + "px" : ""; //此处为textarea的高度跟随文字输入的内容自动增高 var _rowRuleList = U.selectEl(".U_MD_O_W_Table_rowRule"); //获取所有行尺 for (var i = 0, len = _rowRuleList.length; i < len; i++) { var _trPel = _rowRuleList[i].parentNode; //每个行尺 对应一个 tr元素 _trPel.style.height = _trPel.clientHeight; //使每个tr的height 等于 clientHeight U.selectEl(_rowRuleList[i]).css("margin-top", _trPel.clientHeight + "px"); //同步margintop 的位置 } }; autoHeight(_textArea); //由于textarea输入自后td的高度会变化 因此所有行尺的位置重新定位 U.selectEl(_textArea).bind('keydown', autoHeight); //键盘监听 自动适应高 U.selectEl(_textArea).bind('keyup', autoHeight); //键盘监听 自动适应高 U.selectEl(_textArea).bind('blur', function () { var _textla = U.selectEl(".U_UF_E_Table_tdText"); var _tdEl = U.selectEl(".U_UF_E_Table_tdText")[0].parentNode; _tdEl.innerText = _textla[0].value; _textla.remove(); }); } /** * * @param td 添加鼠标拖拽效果的 td * 给td添加鼠标拖拽的选中效果 */ U.UF.E.table.dragCheckd = function (td) { var _tdEl = td; U.selectEl(_tdEl).bind('mousedown', function (e) { U.UF.EV.stopBubble(e); //阻止冒泡 U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove(); //删除右键元素 if (e.button != 2) { var _table = U.UF.E.table; //移除原本选中的效果 U.selectEl(".U_UF_E_Table_tdCheckd").removeClass("U_UF_E_Table_tdCheckd"); U.selectEl(".U_UF_E_Table_tdCurrent").removeClass("U_UF_E_Table_tdCurrent"); //给td添加聚焦样式 U.selectEl(this).addClass("U_UF_E_Table_tdCurrent"); var _start = this; //获取点击元素 var _startX = _table.index(_start); //记录x坐标轴 var _startY = _table.index(this.parentNode); //获取y坐标轴 var _checkFlag = true; //注意下面的_table.over是一个属性 防止选中区域在表格外面 var _tableEl = _table.parentSelect(this, "table"); //获取父节点table //拖拽时移动用的函数 var _drapMove = function (e) { var tagEl = e.path.filter(_filter)[0]; if (tagEl) { U.UF.EV.stopBubble(e); //阻止冒泡 if (!(_tableEl.over) || (tagEl === _start && _checkFlag)) return; //此处防止选中table外元素 与 鼠标必须选中两个td才会有选中效果 _checkFlag = false; //如果不同 则选中过两个元素 var _endX = _table.index(tagEl); //结束点的x坐标 var _endY = _table.index(tagEl.parentNode); //结束点的y坐标 U.selectEl(".U_UF_E_Table_tdCheckd").removeClass("U_UF_E_Table_tdCheckd"); _table.tdAddClass(tagEl.parentNode, _startX, _startY, _endX, _endY); //给开始点和结束点组成的矩形 添加选中的class } }; var _dragUp = function () { //拖拽时松开用的函数 U.selectEl(document).unbind('mousemove', _drapMove); U.selectEl(document).unbind('mouseup', _dragUp); _checkFlag = true; }; var _filter = function (el) { return el.nodeName && el.nodeName === "TD" } U.selectEl(document).bind('mousemove', _drapMove); U.selectEl(document).bind('mouseup', _dragUp); } }); }; /** * 添加右键 * tableEl 表格元素 */ U.UF.E.table.rightClick = function (tableEl) { var _table = U.UF.E.table; var leftAddCol = { innerHTML: '左侧添加列', onclick: function () { _table.addColumn("left"); U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove(); //删除右键元素 }, onmousedown: function (e) { U.UF.EV.stopBubble(e); //阻止冒泡 } }; var rightAddCol = { innerHTML: '右侧添加列', onclick: function () { _table.addColumn("right"); U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove(); //删除右键元素 }, onmousedown: function (e) { U.UF.EV.stopBubble(e); //阻止冒泡 } }; var upAddLine = { innerHTML: '向上添加行', onclick: function () { _table.addTr("up"); U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove(); //删除右键元素 }, onmousedown: function (e) { U.UF.EV.stopBubble(e); //阻止冒泡 } }; var downAddLine = { innerHTML: '向下添加行', onclick: function () { _table.addTr("down"); U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove(); //删除右键元素 }, onmousedown: function (e) { U.UF.EV.stopBubble(e); //阻止冒泡 } }; var removeCol = { innerHTML: '删除列', onclick: function () { _table.removeColumn(); U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove(); //删除右键元素 }, onmousedown: function (e) { U.UF.EV.stopBubble(e); //阻止冒泡 } }; var removeLine = { innerHTML: '删除行', onclick: function () { _table.removeTr(); U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove(); //删除右键元素 }, onmousedown: function (e) { U.UF.EV.stopBubble(e); //阻止冒泡 } }; var mergeCells = { innerHTML: '合并单元格', onclick: function () { _table.mergeCells(); U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove(); //删除右键元素 }, onmousedown: function (e) { U.UF.EV.stopBubble(e); //阻止冒泡 } }; var _arr = [leftAddCol, rightAddCol, upAddLine, downAddLine, removeCol, removeLine, mergeCells]; U.selectEl(tableEl).bind('contextmenu', function (e) { U.UF.EV.stopBubble(e); //阻止冒泡 U.UF.EV.stopDefault(); U.UF.EL.rightMenu(_arr, tableEl); U.selectEl("#U_UF_EL_rightmenu").bind('contextmenu', function (e) { //右键元素属于table 因此需要阻止冒泡 U.UF.EV.stopBubble(e); //阻止冒泡 }); }); U.selectEl(tableEl).bind('mousedown', function (e) { U.selectEl("#U_UF_EL_rightmenu")[0] && U.selectEl("#U_UF_EL_rightmenu")[0].remove(); //删除右键元素 }); }; /** * * @param direction 参数为 "left" 或 "right" * 左右侧添加列 */ U.UF.E.table.addColumn = function (direction) { var _table = U.UF.E.table; var tdList = U.selectEl(".U_UF_E_Table_tdCheckd"); if (!tdList[0]) { //如果没有 选中的td if ($(".U_UF_E_Table_tdCurrent")[0]) { //再判断 有无聚焦的 td tdList = U.selectEl(".U_UF_E_Table_tdCurrent"); } else { return; //如果没有 则直接返回 } } var _tdEl; if (direction === "left") { _tdEl = tdList[0]; } else if (direction === "right") { _tdEl = tdList[tdList.length - 1]; } _table.insertTd(_tdEl, direction); }; /** * * @param td td元素 * @param direction 供添加左右列用的api 参数为 "left" 或 "right" * 向每个tr的列(td) 前方或后方插入td */ U.UF.E.table.insertTd = function (td, direction) { var _table = U.UF.E.table; var _tdEl = td, _index = _table.index(_tdEl), //在tr中位于所有td的位置 _dir = direction; var _tableEl = _table.parentSelect(_tdEl, 'table'); var _trList = U.selectEl(_tableEl).find("tr"); var _tableElWidth = _tableEl.offsetWidth; //记住当前的宽度 for (var i = 0, len = _trList.length; i < len; i++) { //遍历每个tr的列(td) 在前方或后方插入td var _currentColumn = U.selectEl(_trList[i]).find("td")[_index]; //当前列 var _tdElClone = _tdEl.cloneNode(); //克隆td if (_dir === "left") { _table.Before(_currentColumn, _tdElClone); //在列的前面添加td } else if (_dir === "right") { _table.After(_currentColumn, _tdElClone); //在列的后面添加td } var _colRule = $$("div", { style: { position: "absolute", top: 0, left: "-7px", "margin-left": _tdElClone.style.width, cursor: "col-resize", width: "7px" }, className: "U_MD_O_W_Table_colRule", inline: true }, _tdElClone); //列尺 _table.colExpanding(_colRule); //添加左右拉伸事件 _table.createTextArea(_tdElClone); //添加文本框 _table.dragCheckd(_tdElClone); //td拖拽的选中事件 U.selectEl(_tdElClone).removeClass("U_UF_E_Table_tdCheckd"); //清楚添加后的列的选中的样式 U.selectEl(_tdElClone).removeClass("U_UF_E_Table_tdCurrent"); } _tableEl.style.width = _tableElWidth + _tdEl.offsetWidth + "px"; _table.firstLinePeak(_tableEl); //第一行tr的所有列尺添加zIndex为1 }; /** * * @param direction 参数为 "up" 或 "down" * 上下添加行 */ U.UF.E.table.addTr = function (direction) { var _table = U.UF.E.table; var tdList = U.selectEl(".U_UF_E_Table_tdCheckd"); if (!tdList[0]) { //如果没有 选中的td if ($(".U_UF_E_Table_tdCurrent")[0]) { //再判断 有无聚焦的 td tdList = U.selectEl(".U_UF_E_Table_tdCurrent"); } else { return; //如果没有 则直接返回 } } var _trEl, _trElClone; if (direction === "up") { _trEl = tdList[0].parentNode; _trElClone = _table.cloneTr(_trEl); //克隆tr 并给td 添加表格事件 _table.Before(_trEl, _trElClone); } else if (direction === "down") { _trEl = tdList[tdList.length - 1].parentNode; //向下插入行 _trElClone = _table.cloneTr(_trEl); //克隆tr 并给td 添加表格事件 _table.After(_trEl, _trElClone); } var _tableEl = _table.parentSelect(tdList[0], 'table'); _table.firstLinePeak(_tableEl); //将表格的第一个tr里的所有列尺元素 添加 zindex为1 的样式 }; /** * 删除行 */ U.UF.E.table.removeTr = function () { var _table = U.UF.E.table; var tdList = U.selectEl(".U_UF_E_Table_tdCheckd"); if (!tdList[0]) { //如果没有 选中的td if ($(".U_UF_E_Table_tdCurrent")[0]) { //再判断 有无聚焦的 td tdList = U.selectEl(".U_UF_E_Table_tdCurrent"); } else { return; //如果没有 则直接返回 } } var start = _table.index(tdList[0].parentNode); var end = _table.index(tdList[tdList.length - 1].parentNode); var _tableEl = _table.parentSelect(tdList[0], "table"); var _parentDiv = _table.parentSelect(_tableEl, "div"); var _trList = U.selectEl(_tableEl).find("tr"); for (var i = start; i <= end; i++) { _trList[i].remove(); } if (!(_tableEl.querySelectorAll("tr").length)) { _parentDiv.remove(); return } _table.firstLinePeak(_tableEl); //将表格的第一个tr里的所有列尺元素 添加 zindex为1 的样式 }; /** * * @param tr 需要克隆的tr * 克隆tr 并添加表格事件 */ U.UF.E.table.cloneTr = function (tr) { var _table = U.UF.E.table; var _trNodes = tr.cloneNode(true); //带子节点的tr var _trClone = tr.cloneNode(); //无子节点的tr var _cloneTd = U.selectEl(_trNodes).find("td"); for (var i = 0, len = _cloneTd.length; i < len; i++) { var _td = _cloneTd[i].cloneNode(); U.selectEl(_td).rmAttr("rowspan"); //删除跨行的属性 _trClone.appendChild(_td); var _colRule = $$("div", { style: { position: "absolute", top: 0, left: "-7px", "margin-left": _td.style.width, cursor: "col-resize", width: "7px" }, className: "U_MD_O_W_Table_colRule", inline: true }, _td); //列尺 _table.colExpanding(_colRule); //添加左右拉伸事件 //_table.tdDbClick(_td); //添加双击事件 _table.createTextArea(_td); _table.dragCheckd(_td); //td拖拽的选中事件 } var _rowRule = $$("div", { style: { position: "absolute", zIndex: "1", left: 0, "margin-top": "30px", cursor: "row-resize", height: "3px", width: "100%" }, className: "U_MD_O_W_Table_rowRule", inline: true }, _trClone); //行尺 _table.rowExpanding(_rowRule); //上下拉伸事件 U.selectEl(_trClone).find(".U_UF_E_Table_tdCheckd").removeClass("U_UF_E_Table_tdCheckd"); //删除所有选中表格和 聚焦表格的样式 U.selectEl(_trClone).find(".U_UF_E_Table_tdCurrent").removeClass("U_UF_E_Table_tdCurrent"); return _trClone; }; /** * 合并单元格功能 */ U.UF.E.table.mergeCells = function () { var _table = U.UF.E.table; var _tdList = U.selectEl(".U_UF_E_Table_tdCheckd"); if (_tdList.length <= 1) return; var _x1 = _table.index(_tdList[0]); //x坐标开始点 var _y1 = _table.index(_tdList[0].parentNode); //y坐标开始点 var _x2 = _table.index(_tdList[_tdList.length - 1]); //x坐标结束点 var _y2 = _table.index(_tdList[_tdList.length - 1].parentNode); //y坐标结束点 var _tableEl = _table.parentSelect(_tdList[0], "table"); //获取table元素 var _trList = _tableEl.querySelectorAll("tr"); //获取table里所有tr var _text = ""; //合并后的总内容 var allWidth = 0; //合并后的总宽度 for (var i = _y1; i <= _y2; i++) { /*该循环*/ var _trAllTd = _trList[i].querySelectorAll("td"); //获取选中表格的所在tr for (var j = _x1; j <= _x2; j++) { // 获取选中表格的 所在td var _tdEl = _trAllTd[j]; //获取每个选中的单元格 _text += _tdEl.innerText; //合并内容 if (i === _y1) { //只计算选中表格第一行 的总宽度 allWidth += _tdEl.offsetWidth; } if (i === _y1 && j === _x1) continue; //第一个td就跳过 其他的则display为 none U.selectEl(_tdEl).css("display", "none"); } } var _textNode = document.createTextNode(_text); //文字节点 _text为总内容 var _firstNode = _table.getFirstText(_tdList[0]); //获取被合并单元格的td所在的文字节点 _firstNode ? _firstNode.remove() : ""; //如果存在文字节点 则删除 _tdList[0].appendChild(_textNode); //然后将新创建的总文字节点 添加到该单元格里 _tdList[0].style.width = allWidth + "px"; //添加总宽度 var _col = U.selectEl(_tdList[0]).attr("colspan"); _col <= _x2 - _x1 + 1 ? U.selectEl(_tdList[0]).attr("colspan", _x2 - _x1 + 1) : ""; //跨的列数 U.selectEl(_tdList[0]).attr("rowspan", _y2 - _y1 + 1); //跨的行数 U.selectEl(_tdList[0].querySelector(".U_MD_O_W_Table_colRule")).css("margin-left", allWidth + 'px'); //更新 列尺的位置 _table.firstLinePeak(_tableEl); //将表格的第一个tr里的所有列尺元素 添加 zindex为1 的样式 }; /** * 删除列 */ U.UF.E.table.removeColumn = function () { var _table = U.UF.E.table var tdList = U.selectEl(".U_UF_E_Table_tdCheckd"); if (!tdList[0]) { //如果没有 选中的td if ($(".U_UF_E_Table_tdCurrent")[0]) { //再判断 有无聚焦的 td tdList = U.selectEl(".U_UF_E_Table_tdCurrent"); } else { return; //如果没有 则直接返回 } } var _start = _table.index(tdList[0]); //列的开始位置 var _end = _table.index(tdList[tdList.length - 1]); //列的结束位置 var _tableEl = _table.parentSelect(tdList[0], 'table'); var _trList = U.selectEl(_tableEl).find("tr"); var _widthSum = 0; //删除列的总宽 for (var i = 0, len = _trList.length; i < len; i++) { var _tdList = U.selectEl(_trList[i]).find("td"); for (var j = _start; j <= _end; j++) { i === 0 ? _widthSum += _tdList[j].offsetWidth : ""; //只计算第一行删除的列宽 _tdList[j].remove(); } } _tableEl.style.width = _tableEl.offsetWidth - _widthSum + "px"; var _tdLen = _tableEl.querySelectorAll("td").length; //获取当前列的长度 if (!_tdLen) { //如果table不存在td 则删除table和 table父节点(div) var _parentDiv = _table.parentSelect(_tableEl, "div"); _parentDiv.remove(); return } _table.firstLinePeak(_tableEl); //将表格的第一个tr里的所有列尺元素 添加 zindex为1 的样式 }; /** * 添加点击时的聚焦效果 并且若存在textarea元素 则删除并获取textarea的值给td */ U.UF.E.table.removeFocus = function () { //添加点击时的聚焦效果 并且若存在textarea元素 则删除并获取textarea的值给td U.selectEl(".U_UF_E_Table_tdCheckd").removeClass("U_UF_E_Table_tdCheckd"); U.selectEl(".U_UF_E_Table_tdCurrent").removeClass("U_UF_E_Table_tdCurrent"); return; var _textArea = U.selectEl(".U_UF_E_Table_tdText")[0], //如果存在textarea元素 则将其变为文本 _pel; _textArea ? _pel = _textArea.parentNode : ""; //如果textArea存在 先获取父节点td 然后将其变为文本 if (_pel) { var _textNode = document.createTextNode(_textArea.value); _pel.appendChild(_textNode); _textArea.remove(); } var _rowRuleList = U.selectEl(".U_MD_O_W_Table_rowRule"); //使div的margintop 及时更新 for (var i = 0, len = _rowRuleList.length; i < len; i++) { var _trEl = _rowRuleList[i].parentNode; _trEl.style.height = _trEl.clientHeight; U.selectEl(_rowRuleList[i]).css("margin-top", _trEl.clientHeight + "px"); } }; /** * * @param tr 获取所有tr用的(遍历所有tr) * @param x1 开始点x坐标 * @param y1 开始点y坐标 * @param x2 结束点x坐标 * @param y2 结束点y坐标 */ U.UF.E.table.tdAddClass = function (tr, x1, y1, x2, y2) { //获取首尾坐标轴 最后组成矩形 然后添加选中的class var _trList = tr.parentNode.querySelectorAll("tr"); var _x1 = Math.min(x1, x2); var _x2 = Math.max(x1, x2); var _y1 = Math.min(y1, y2); var _y2 = Math.max(y1, y2); for (var i = _y1; i <= _y2; i++) { var _tdList = _trList[i].querySelectorAll("td"); for (var j = _x1; j <= _x2; j++) { U.selectEl(_tdList[j]).addClass("U_UF_E_Table_tdCheckd"); } } } /** * * @param el 元素 * @returns {number} 返回当前元素在所有同类型元素 的第几个位置 */ U.UF.E.table.index = function (el) { var _el = el; var _name = _el.nodeName; //获取该元素的节点名 var _list = _el.parentNode.querySelectorAll(_name); //获取父节下的所有自己的节点 for (var i = 0, len = _list.length; i < len; i++) { if (_list[i] === _el) { return i; //返回在数组的索引 } } }; /** * 获取td的第一个文本元素 */ U.UF.E.table.getFirstText = function (td) { var _child = td.childNodes; for (var i = 0, len = _child.length; i < len; i++) { if (_child[i].nodeType === 3) { return _child[i]; } } return false; } /*获取指定标签的父节点*/ U.UF.E.table.parentSelect = function (el, type) { var _this = el; var type = type.toUpperCase(); if (_this.tagName === type) return _this; var parent = _this.parentNode; while (parent.tagName !== type) { parent = parent.parentNode; } return parent; }; /*在元素前面插入新元素*/ U.UF.E.table.Before = function (el, newEl) { var _this = el; var parentEl = _this.parentNode; parentEl.insertBefore(newEl, _this); }; /*在元素后面插入新元素*/ U.UF.E.table.After = function (el, newEl) { var _this = el; if (_this && _this.parentNode) { var parentEl = _this.parentNode; var child = parentEl.childNodes; var last = child[child.length - 1] || parentEl.lastChild; if (last === _this) { parentEl.appendChild(newEl); } else { parentEl.insertBefore(newEl, _this.nextSibling); } return newEl; } }; /** * 使光标聚焦在该元素后面 * @param el 需要文字聚焦的 元素节点 */ U.UF.E.table.placeCaretAtEnd = function (el) { //传入光标要去的节点对象 if (el.collapse) { //如果存在el.collapsed 则是range var range = el; range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); return; } if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { el.focus && el.focus(); var range = document.createRange(); range.selectNodeContents(el); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (typeof document.body.createTextRange != "undefined") { var textRange = document.body.createTextRange(); textRange.moveToElementText(el); textRange.collapse(false); textRange.select(); } }; /* 合并单元格使用bug: 1.选中表格时 如出现行和列对不齐时 除了删除列不会有问题以外 其他都会出问题 解决思路:由于合并单元格后 每行的td都对不齐了 因此需要修改选中td的接口 不准出现参差不齐的情况 2.在合并单元格的那一列用添加列 删除列会有bug 解决思路: 由于合并单元格时 有占用两列或两行的情况 因此需要在添加列删除列那里将占用两列以上的情况考虑进去 针对colspan属性做判断 3.在合并单元格的那一行除了 向上添加行功能 其他都会有bug 解决思路:由于跨行合并单元格 会使第第一行变成占2行或以上 其他行display为none 因此如果向下添加行则需要将display为none 消掉 主要也是需要针对rowspan属性做判断 */ ; ///
使用“扫一扫”即可将网页分享至朋友圈。" }, _codeBox); } else { _codeBox = U.selectEl('#wxfrom', parent)[0]; } U.selectEl(bindel).bind({ click: function () { U.UF.QR.generate("230", "235", "black", "#f4f4f4", href || window.location.href, _codeShowArea); _codeBox.style.display = ''; } }) return _codeBox; } /** * qq好友分享 * * @url {string} 分享的网页地址 * @title {string} 标题 * @pic {string} 图片绝对路径 * @desc {string} 分享介绍 * @summary {string} 分享内容 */ U.UF.OT.qqFriendShare = function (url, title, pic, desc, summary) { var _sharesinastring = 'https://connect.qq.com/widget/shareqq/index.html?url=' + encodeURIComponent(url || window.location.href) + '&title=' + encodeURIComponent(title || '这文件超棒的，分享给你看看！') + '&pic=' + pic || "" + '&desc=' + desc || "" + '&summary=' + summary || ""; window.open(_sharesinastring, 'newwindow', 'height=600,width=864,top=300,left=300'); } /** * 新浪微博分享 * * @url {string} 分享的网页地址 * @title {string} 标题 * @pic {string} 图片绝对路径 */ U.UF.OT.weiboShare = function (url, title, pic) { var _sharesinastring = 'http://v.t.sina.com.cn/share/share.php?url=' + encodeURIComponent(url || window.location.href) + '&title=' + encodeURIComponent(title || '这文件超棒的，分享给你看看！') + '&content=utf-8' + '&pic=' + pic || ""; window.open(_sharesinastring, 'newwindow', 'height=500,width=800,top=300,left=300'); } ;