概述
自己写的js插件，留存参考
if (typeof jQuery === 'undefined') { throw 'no jquery'; }
(function () {
//合并json对象
var MergeJsonObj = function (s, o) {
var r = {};
for (var p in s) {
r[p] = s[p];
}
for (var q in o) {
r[q] = o[q];
}
return r;
};
//取字符串占位长度（全角及汉字2，字母1）
var GetCharLength = function (s) {
var l = 0, s = s + '';
for (var i in s) {
if ((s.charCodeAt(i) & 0xff00) != 0) {
l++;
}
l++;
}
return l;
};
//字符串补零
var FixedZero = function (s, n, isEnd) {
s += '';
while (s.length < n) {
s = isEnd ? s + '0' : '0' + s;
}
return s;
}
//取绝对定位信息
$.fn.GetRect = function () {
var r = $(this).get(0).getBoundingClientRect(),
t = document.documentElement.clientTop,
l = document.documentElement.clientLeft;
return{
top : r.top - t,
bottom : r.bottom - t,
left : r.left - l,
right : r.right - l
}
}
/* 公共事件管理模块 ------ Start ------ */
window.UE_EVENT = window.UE_EVENT || {
Key: 1,
ClipBoard: null,
CurrElement: null,
CurrKey: 0,
Events: { 'mousemove': [], 'mousedown': [], 'keypress': [], 'dblclick': [], 'mouseup': [], 'keydown': [], 'keyup': [], 'click': [], 'resize': [], 'copy': [], 'paste': [] },
Delete: function (event, key) {
if (!event || !key) return false;
var e = event.toLowerCase(),l = this.Events[e];
for (var i in l) {
if (l[i].KEY == key) {
l.splice(i, 1);
break;
}
}
},
Add: function (dom, event, callback) {
if (!dom || !event || !callback) return false;
UE_EVENT.IsRun || UE_EVENT.Run();
var key = UE_EVENT.SetEventKey(dom), isExists = false, e = event.toLowerCase(), l = this.Events[e];
for (var i in l) {
if (l[i].KEY == key) {
l[i].FUN = callback;
isExists = true;
}
}
if (!isExists) {
l.push({ 'KEY': key, 'EVENT': e, 'DOM': dom[0] || dom, 'FUN': callback });
}
},
Excute: function (event, e) {
var l = this.Events[event];
if (event == 'resize') {
for (var i in l) {
var t = l[i], d = t.DOM;
if (t.width != $(d).width() || t.height != $(d).height()) {
t.width = $(d).width();
t.height = $(d).height();
l[i].FUN(t.width, t.height, null, d);
}
}
} else {
e = e || window.event;
var t = e.srcElement || e.target,
k = parseInt($(t).attr('eventkey'), 10);
for (var i in l) {
if (l[i].KEY == k || l[i].KEY == this.CurrKey) {
l[i].FUN(e, t, l[i].KEY, l[i].DOM);
}
}
}
},
Download: function (url, json) {
var form = $('<form style="display:none" target="ue_download_iframe" method="post" action="' + url + '"><iframe id="ue_download_iframe" name="ue_download_iframe" οnlοad=""></iframe><input name="JsonData" value="' + JSON.stringify(json).replace(/"/g, "'") + '" /></form>').appendTo('body');
var iframe = document.getElementById('ue_download_iframe');
if (document.readyState) {
iframe.onreadystatechange = function () {
if (this.readyState && this.readyState == 'complete') {
form.remove();
}
}
} else {
iframe.onload = function () {
form.remove();
}
}
form.submit();
},
SetEventKey: function (obj) {
if (!obj) return;
var dom = obj[0] || obj,
isDOM = (typeof HTMLElement === 'object') ? (dom instanceof HTMLElement) : dom && typeof dom === 'object' && dom.nodeType === 1,
key = isDOM ? parseInt($(dom).attr('eventkey'), 10) : dom.eventKey;
key = key || UE_EVENT.Key++;
if (isDOM) {
$(dom).attr('eventkey', key)
} else {
dom.eventKey = key;
}
return key;
},
Run: function (obj) {
if (!this.IsRun) {
$(document).on('mousemove', function (e) {
UE_EVENT.Excute('mousemove', e);
}).on('mousedown', function (e) {
UE_EVENT.Excute('mousedown', e);
}).on('keypress', function (e) {
UE_EVENT.Excute('keypress', e);
}).on('dblclick', function (e) {
UE_EVENT.Excute('dblclick', e);
}).on('mouseup', function (e) {
UE_EVENT.Excute('mouseup', e);
}).on('keydown', function (e) {
UE_EVENT.Excute('keydown', e);
}).on('keyup', function (e) {
UE_EVENT.Excute('keyup', e);
}).on('click', function (e) {
UE_EVENT.CurrKey = 0;
UE_EVENT.Excute('click', e);
});
setInterval(function () { UE_EVENT.Excute('resize', null); }, 200);
//$(window).on('resize', function (e) {
// UE_EVENT.Excute('resize', e);
//});
$('body').on({
copy: function (e) {
var d = window.clipboardData || e.originalEvent.clipboardData;
var txt = "";
UE_EVENT.Excute('copy', txt);
d.setData('Text', txt);
return false;
},
paste: function (e) {
var d = window.clipboardData || e.originalEvent.clipboardData;
UE_EVENT.Excute('paste', d.getData('Text'));
}
});
}
UE_EVENT.IsRun = true;
return true;
}
};
$.fn.SetEvent = function (event, callback) {
return UE_EVENT.Add(this, event, callback);
};
$.fn.ActiveEvent = function () {
UE_EVENT.CurrKey = UE_EVENT.SetEventKey(this);
};
/* 公共事件管理模块 ------ End ------ */
/* 分页模块 ------ Start ------ */
$.fn.LoadPageFilter = function (pager, callback) {
if (pager.totalPage > 1) {
var parent = $(this);
var styles = ''
+ '<style id="ue_pager_style">'
+ ' .ue_pager_frame{position:relative;border:none;width:100%;height:16px;line-height:16px;text-align:center;padding:2px;}'
+ ' .ue_pager_size {border:1px solid #999;height:12px;width:24px;margin:1px 0;float:left;}'
+ ' .ue_pager_sizes {border:1px solid #666;width:16px;height:80px;background-color:#eee;position:absolute;z-index:105;display:none;left:34px;bottom:16px;}'
+ ' .ue_pager_sizes div {cursor:pointer;}'
+ ' .ue_pager_sizes div:hover {background-color:#ccc;}'
+ ' .ue_pager_page {border:1px solid #999;height:12px;width:24px;margin:1px 18px 1px 0;float:right;}'
+ ' .ue_pager_btn {color:#0f7fc9;text-decoration:none;padding:0 5px;font-weight:bold;border-radius:3px;box-shadow:0 1px 0px 1px rgba(0, 0, 0, 0.05);margin:0 3px;}'
+ ' .ue_pager_btn:hover {color:#337383;background-color:#eeeeee;transition:all ease-in-out 0.2s;}'
+ ' .ue_pager_selected{background-color:#cccccc;}'
+ '</style>';
if ($('#ue_pager_style').length < 1) {
$('head').append(styles);
}
var idx = pager.pageIndex, total = pager.totalPage;
$(this).find('.ue_pager_frame').remove();
var frame = $('<div class="ue_pager_frame"><span style="float:left;margin-left:2px;">Size:</span></div>').appendTo($(this));
var size = $('<input class="ue_pager_size" value="' + pager.pageSize + '" />').appendTo(frame);
var sizes = $('<div class="ue_pager_sizes"><div>10</div><div>20</div><div>30</div><div>40</div><div>50</div></div>').appendTo(frame);
var page = $('<input class="ue_pager_page" value="' + idx + '" />').appendTo(frame);
frame.append('<span style="float:right;">Page:</span>');
if (idx > 1) {
frame.append('<a class="ue_pager_btn" href="#" pidx="' + (idx - 1) + '"><<</a>');
}
frame.append('<a class="ue_pager_btn ' + (idx == 1 ? "ue_pager_selected" : "") + '" href="#" pidx="1" >1</a>');
if (idx == 3) {
frame.append('<a class="ue_pager_btn" href="#" pidx="2">2</a>');
}
if (idx > 3) {
frame.append('<a class="ue_pager_btn" href="#"> ... </a>');
frame.append('<a class="ue_pager_btn" href="#" pidx="' + (idx - 1) + '">' + (idx - 1) + '</a>');
}
if (idx > 1 && idx < total) {
frame.append('<a class="ue_pager_btn ue_pager_selected" href="#" >' + idx + '</a>');
}
if (idx < (total - 2)) {
frame.append('<a class="ue_pager_btn" href="#" pidx="' + (idx + 1) + '">' + (idx + 1) + '</a>');
frame.append('<a class="ue_pager_btn" href="#"> ... </a>');
}
if (idx == (total - 2)) {
frame.append('<a class="ue_pager_btn" href="#" pidx="' + (total - 1) + '">' + (total - 1) + '</a>');
}
frame.append('<a class="ue_pager_btn ' + (idx == total ? "ue_pager_selected" : "") + '" href="#" pidx="' + total + '" >' + total + '</a>');
if (idx < total) {
frame.append('<a class="ue_pager_btn" href="#" pidx="' + (idx + 1) + '">>></a>');
}
frame.find('a').off('click').on('click', function () {
var pidx = parseInt($(this).attr('pidx'), 10);
if (pidx > 0) {
callback(pidx, pager.pageSize);
}
});
size.off('click').on('click', function (e) {
e.stopPropagation();
parent.find('.ue_pager_sizes').show().find('div').off('click').on('click', function () {
parent.find('.ue_pager_size').val($(this).html());
parent.find('.ue_pager_sizes').hide();
callback(idx, parseInt($(this).html(), 10));
});
}).off('change').on('change', function (e) {
e.stopPropagation();
callback(idx, parseInt($(this).val(), 10));
});
page.off('change').on('change', function (e) {
e.stopPropagation();
callback(parseInt($(this).val(), 10), pager.pageSize);
});
return true;
}
return false;
};
/* 分页模块 ------ End ------ */
/* grid模块 ------ Start ------ */
window.UEGridList = [];
window.UEGrid = window.UEGrid || {
create: function (container, config) {
var grid = {
pager: { pageIndex: 1, pageSize: 0, totalCount: 0, startIndex: 0, totalPage: 0 },
srcList: [], filterList: [], pageList: [], currList: [], backList: [], changeList: [], checkedList:[], errList: [],
newRow: null, selectedRow: null, selectRowIdx: 0, overRowIdx: 0, eventKey: 0,
compareTypes:'*,=,>,<,!',
lineWidth: 0,
rowCount: 0,
defaultConfig: {
showPage: false,
resizeable: true,
charWidth: 8,
headHeight: 24,
lineHeight: 20,
width: 360,
height: 200,
columnMaxWidth: 150,
columnMinWidth: 40,
columnDefWidth: 80,
headColor: "#fff",
headBGColor: "#666",
headLineColor: '#fff',
cellBorderColor: "#999",
overLineBGColor: "#def",
firstLineBGColor: "#ddd",
secondLineBGColor: "#fff",
selectLineBGColor: "#8ac",
filterImg: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAMCAYAAACwXJejAAAAL0lEQVR42mP4X6/OQAhDGCCATQFUHFURDhpDFzY+piA6jaIIh4KhoQhHcDAQEy0AohflF76Z3eMAAAAASUVORK5CYII=',
unFilterImg:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAMCAMAAACHgmeRAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRF7RwkqOf6NAAAAAN0Uk5T//8A18oNQQAAACxJREFUeNpiYGRiYGICYkYgAlIQkhEkAmaBxBkgXIg6MMUIUkESiwmNBRBgACd2ALMRm0KHAAAAAElFTkSuQmCC',
},
style: function () {
return ''
+ '<style id="ue_grid_style">'
+ ' .ue_grid_container {padding:0;position:relative;}'
+ ' .ue_grid_click {width:12px;font-size:10px;position:absolute;cursor:pointer;opacity:0;}'
+ ' .ue_grid_frame {border: 1px solid #666;border-radius: 3px;overflow:hidden;background-color:#fff; position:relative;z-index: 99;font-size:12px;margin: 0;padding: 0;}'
+ ' .ue_grid_content {border: none;position: relative;overflow:auto;width: 100%;height: 100%;}'
+ ' .ue_grid_scroll {overflow:hidden;width:auto;height:auto;position:relative;}'
+ ' .ue_grid_resize{position:absolute;width:13px;height:15px;right:0;bottom:0;padding:1px 0 0 3px;z-index:100;cursor:se-resize;display:none;}'
+ ' .ue_grid_thead {font-size:16px;font-weight:bold;text-align:center;position:relative;}'
+ ' .ue_grid_th {background-color:transparent;float:left;position:relative;user-select:none;}'
+ ' .ue_grid_ts {background-color:transparent;overflow:hidden;color:#0c0;font-size: xx-small;position:absolute;border:none;opacity:0;width:3px;cursor:ew-resize;top:0;right:-1px;z-index:100;text-indent:-2px;}'
+ ' .ue_grid_table {overflow:hidden;width:auto;height:auto;position:relative;}'
+ ' .ue_grid_input {border:none;height:100%;left:1px;top:0;position:absolute;}'
+ ' .ue_grid_filter {border:none;left:1px;top:1px;position:absolute;background-color:#eee;font-size:12px;color:#666;text-align:left;display:none;z-index:101;}'
+ ' .ue_grid_fbtn {width:9px;cursor:pointer;}'
+ ' .ue_grid_thead_chk, .ue_grid_cell_chk{width:14px; height:14px;margin:3px auto;}'
+ ' .ue_grid_cell_drp{position:absolute;left:0;top:0;}'
+ ' .ue_grid_cell {position:relative;background-color: transparent;margin: 0;padding:0 2px;float:left;overflow: hidden;text-overflow:ellipsis;word-break:keep-all;white-space:nowrap;cursor:default;}'
+ '</style>';
},
showHead: function () {
var c = this.config, th = '';
for (var i = 0; i < c.columns.length; i++) {
var col = c.columns[i], display = !col.visiable ? "display:none" : "display:inline-block;", sc = col.sortType == 'asc' ? 'ue_grid_asc' : 'ue_grid_desc';
if (col.type == "checkbox") {
th += '<div class="ue_grid_th" thIdx="' + i + '" style="' + display + ';border-right:1px solid ' + c.headLineColor + ';width:' + (col.width - 1) + 'px;height:' + c.headHeight + 'px;line-height:' + c.headHeight + 'px;color:' + c.headColor + '" onselectstart="return false;">'
+ '<input class="ue_grid_thead_chk" thIdx="' + i + '" type="checkbox" ' + (col.readonly ? 'disabled="disabled"' : '') + '/>'
+ '</div>';
} else {
th += '<div class="ue_grid_th" thIdx="' + i + '" style="' + display + ';border-right:1px solid ' + c.headLineColor + ';width:' + (col.width - 1) + 'px;height:' + c.headHeight + 'px;line-height:' + c.headHeight + 'px;color:' + c.headColor + '" onselectstart="return false;">'
+ col.caption
+ '<div class="ue_grid_ts" thIdx="' + i + '" style="height:' + c.headHeight + 'px;line-height:' + c.headHeight + 'px;">'
+ (!col.filterable ? '' : '<div class="ue_grid_fbtn" thIdx="' + i + '" style="height:' + c.headHeight + 'px;background-color:' + c.headBGColor + ';"><img alt="" style="margin-top:' + (c.headHeight - 12) / 2 + 'px;" src="' + c.filterImg + '" /></div>') + '</div></div>';
}
}
this.theadDom.html(th).width(this.lineWidth);
},
refresh: function () {//数据绑定
var c = this.config,list = this.getCurrList();
if (Object.prototype.toString.call(list) === '[object Array]' && list.length > 0) {
this.tableDom.html('').width(this.lineWidth);;
for (var i = 0; i < list.length; i++) {
var r = list[i], bgc = (i % 2) > 0 ? c.firstLineBGColor : c.secondLineBGColor;
for (var j = 0; j < c.columns.length; j++) {
var col = c.columns[j], f = col.field, v = r[f], display = !col.visiable ? "display:none" : "display:inline-block;";
var td = $('<div class="ue_grid_cell" trIdx="' + i + '" tdIdx="' + j + '" srcIdx="' + r.ue_grid_src_idx + '" style="' + display + ';background-color:' + bgc + ';border-right:1px solid ' + c.cellBorderColor + ';border-bottom:1px solid ' + c.cellBorderColor + ';width:' + (col.width - 5) + 'px;height:' + (c.lineHeight - 1) + 'px;line-height:' + (c.lineHeight - 1) + 'px;"></div>').appendTo(this.tableDom);
switch (col.type) {
case '':
case 'string':
case 'mail': {
} break;
case 'bool': {
var m = r.format ? r.format : 'true,false', s = m.split(','), v = v ? s[0] : s[1];
} break;
case 'number': {
v = '<input class="ue_grid_cell_time" type="number" value="' + v + '" style="border:none;background-color:transparent;100%;height:100%;" />';
} break;
case 'button': {
v = '<input class="ue_grid_cell_' + col.option + '" type="button" value="' + (col.value ? col.value : col.option) + '" />';
} break;
case 'time': {
v = '<input class="ue_grid_cell_time" type="datetime" value="' + v + '" style="border:none; background-color:transparent;width:100%;height:100%;" />';
} break;
case 'date': {
v = '<input class="ue_grid_cell_time" type="date" value="' + v + '" style="border:none;background-color:transparent;100%;height:100%;" />';
} break;
case 'checkbox': {
td.css('text-align', 'center');
v = '<input class="ue_grid_cell_chk" trIdx="' + i + '" tdIdx="' + j + '" srcIdx="' + r.ue_grid_src_idx + '" type="checkbox" ' + (v ? 'checked="checked"' : '') + ' ' + (col.readonly ? 'disabled="disabled"' : '') + '/>';
} break;
case 'dropdown': {
if (col.datasource) {
for (var k in col.datasource) {
var item = col.datasource[k];
v = item.value == v ? item.text : v;
}
}
} break;
case 'lookup': {
if (col.type == 'lookup') {
td.css('overflow', '');
}
} break;
case 'template': {
v = r.content ? r.content : col.content;
} break;
default: break;
}
td.html(v);
}
}
this.scrollDom.css({ width: this.lineWidth });
this.contentDom.height(this.frameDom.height() - c.headHeight - (this.lineWidth > this.contentDom.width() ? 0 : 0));
if (this.config.showPage) {
var g = this, pager = g.pager;
var re = g.frameDom.LoadPageFilter(pager, function (page, size) {
pager.pageIndex = page < 1 ? 1 : page > pager.totalPage ? pager.totalPage : page;
if (size != pager.pageSize) {
pager.pageSize = size < 1 ? 1 : size > pager.totalCount ? pager.totalCount : size;
pager.totalPage = Math.ceil(pager.totalCount / size);
pager.pageIndex = 1;
}
g.setPageList();
});
if (re) {
this.contentDom.height(this.contentDom.height() - 20);
}
}
}
this.bindEvent();
},
setListByfilter: function () {
this.filterList = this.srcList, c = this.config;
for (var i in c.columns) {
var col = c.columns[i];
if (col.filterText) {
var type = col.filterText.substr(0, 1),
text = this.compareTypes.indexOf(type) == -1 ? col.filterText : col.filterText.substr(1);
t = text.toLowerCase();
this.filterList = this.filterList.filter(function (item) {
var s = item[col.field].toLowerCase();
return type == '*' ? s.indexOf(t) > -1
: type == '=' ? s == t
: type == '>' ? s > t
: type == '<' ? s < t
: type == '!' ? s != t
: s.indexOf(t) > -1;
});
}
}
this.setPageList();
},
setPageList: function () {
var pager = this.pager, c = this.config;
pager.totalCount = this.filterList.length;
pager.pageSize = c.showPage ? (pager.pageSize || c.pageSize || this.rowCount) : pager.totalCount;
pager.totalPage = Math.ceil(pager.totalCount / pager.pageSize);
pager.pageStart = (pager.pageIndex - 1) * pager.pageSize;
var endIdx = pager.pageStart + pager.pageSize;
pager.endIndex = pager.totalCount > endIdx ? endIdx : pager.totalCount;
this.pageList = this.filterList.slice(pager.pageStart, pager.endIndex);
var h = (c.showPage ? this.pageList.length : pager.totalCount) * c.lineHeight;
this.scrollDom.height(h);
this.refresh();
},
getCurrList: function () {
var pager = this.pager;
var endIdx = pager.startIndex + this.rowCount;
pager.endIndex = pager.totalCount > endIdx ? endIdx : pager.totalCount;
this.currList = this.pageList.slice(pager.startIndex, pager.endIndex);
return this.currList;
},
changeColumnIdx: function (srcIdx, targetIdx) {
var c = this.config, src = c.columns[srcIdx];
c.columns.splice(srcIdx, 1);
c.columns.splice(targetIdx, 0, src);
this.showHead();
this.refresh();
},
mouseMove: function (e, t, k, d) {
var g = d;
if (g.x > 0 || g.y > 0) {
if (g.columnMove && e.pageX != g.x) {
if (!g.thClone) {
var o = g.theadDom.find('.ue_grid_th[thIdx="' + g.currentColumnIdx + '"]'),
t = g.tableDom.find('.ue_grid_cell[tdIdx="' + g.currentColumnIdx + '"]');
g.startLeft = o.offset().left - g.theadDom.offset().left;
g.thClone = o.clone().css({ position: 'absolute', border: '1px solid #333', opacity: 0.6, left: g.startLeft, zIndex: 999 }).appendTo(g.theadDom);
g.tdClone = t.clone().css({ position: 'absolute', border: '1px solid #333', opacity: 0.6, left: g.startLeft, zIndex: 999 }).appendTo(g.theadDom);
for (var i = 0; i < t.length; i++) {
var src = $(t[i]);
$(g.tdClone[i]).css({ top: i * g.config.lineHeight }).appendTo(g.tableDom);
}
} else {
var left = parseInt(g.thClone.css('left'), 10) + e.pageX - g.x;
g.thClone.css({ left: left });
g.tdClone.css({ left: left });
}
}
if (g.columnResize) {
g.setColumnWidth(g.currentColumnIdx, e.pageX - g.x);
}
if (g.startResize) {
if (e.pageX > g.x) {
if (g.contentDom[0].clientWidth < g.tableDom.width()) {
var x = e.pageX - g.x,
sx = g.tableDom.width() - g.contentDom[0].clientWidth,
tx = x > sx ? sx : x;
g.frameDom.css({ width: g.frameDom.width() + tx });
g.contentDom.css({ width: g.contentDom.width() + tx });
}
} else {
if (g.frameDom.width() > 36) {
g.frameDom.css({ width: g.frameDom.width() + (e.pageX - g.x) });
g.contentDom.css({ width: g.contentDom.width() + (e.pageX - g.x) });
}
}
if (e.pageY > g.y) {
if ((g.contentDom[0].clientHeight - g.config.headHeight) < g.tableDom.height()) {
var y = e.pageY - g.y,
sy = g.tableDom.height() - g.contentDom[0].clientHeight + g.config.headHeight,
ty = y > sy ? sy : y;
g.frameDom.css({ height: g.frameDom.height() + ty });
g.contentDom.css({ height: g.contentDom.height() + ty });
}
} else {
if (g.frameDom.height() > 36) {
g.frameDom.css({ height: g.frameDom.height() + (e.pageY - g.y) });
g.contentDom.css({ height: g.contentDom.height() + (e.pageY - g.y) });
}
}
g.config.maxWidth = g.contentDom.width();
g.config.maxHeight = g.contentDom.height();
}
}
g.x = e.pageX;
g.y = e.pageY;
},
mouseUp: function (e, k, t, d) {
var g = d;
g.startResize = false;
g.columnResize = false;
if (g.columnMove) {
g.columnMove = false;
if (g.thClone) {
var left = parseInt(g.thClone.css('left'), 10), cols = g.config.columns;
if (g.startLeft > left) {
for (var i = 0; i < cols.length; i++) {
if (left < cols[i].width) {
g.changeColumnIdx(g.currentColumnIdx, i);
break;
}
left = left - cols[i].width;
}
} else {
left += g.thClone.outerWidth();
for (var i = 0; i < cols.length; i++) {
left = left - cols[i].width;
if (left < cols[i].width) {
g.changeColumnIdx(g.currentColumnIdx, i);
break;
}
}
}
g.thClone && g.thClone.remove();
g.tdClone && g.tdClone.remove();
g.thClone = null;
g.tdClone = null;
}
g.theadDom.find('.ue_grid_th[thIdx=' + g.currentColumnIdx + ']').css('cursor', 'default');
}
},
keyDown: function (e, k, t, d) {
e = e || window.event;
if (d.eventKey == UE_EVENT.CurrKey && d.frameDom.css('display') != 'none') {
var c = d.config;
switch (e.which) {
case 13: {//回车
var o = $(document.activeElement);
if (o.hasClass('ue_grid_filter')) {
var idx = parseInt(o.attr('thIdx'), 10), col = d.config.columns[idx], txt = $(o).val();
if (txt != col.filterText) {
col.filterText = txt;
d.setListByfilter();
}
} else {
d.setSelectRow(d.overRowIdx);
!d.config.callback || d.config.callback(d.selectedRow, d);
}
} break;
case 38: {//上向键
d.keyPrev();
return false;
} break;
case 40: {//下向键
d.keyNext();
return false;
} break;
default: break;
}
}
},
autoSize: function (w, h, t, d) {
var g = $(d).GetUEGrid();
g.frameDom.css({ width: w - 2, height: h - 2 });
g.contentDom.css({ width: g.frameDom.width() - g.config.headWidth, height: g.frameDom.height() - g.config.headHeight });
g.bindData();
},
bindEvent: function () {
var g = this;
$(g).SetEvent('mouseup', g.mouseUp);
$(g).SetEvent('mousemove', g.mouseMove);
$(g).SetEvent('mousedown', g.mouseDown);
$(g).SetEvent('keydown', g.keyDown);
g.parent.SetEvent('resize', g.autoSize);
g.contentDom.scroll(function () {
$(g).ActiveEvent();
var tp = $(this).scrollTop();
if (tp != g.scrollTop) {
if (!g.config.showPage) {
var lines = Math.ceil(tp / g.config.lineHeight);
g.pager.startIndex = lines;
g.refresh();
}
g.scrollTop = tp;
}
if (!g.config.showPage) {
g.tableDom.css({ top: tp });
}
g.theadDom.css({ left: -$(this).scrollLeft() });
});
g.resizeDom.on('mousedown', function (e) {
e = e || window.event;
e.stopPropagation();
$(g).ActiveEvent();
g.startResize = !g.startResize;
});
g.tableDom.find('.ue_grid_cell').off('mouseenter').on('mouseenter', function (e) {
e = e || window.event;
e.stopPropagation();
g.overLine(parseInt($(this).attr('trIdx'), 10));
}).off('click').on('click', function (e) {
$(g).ActiveEvent();
e = e || window.event;
e.stopPropagation();
var t = e.srcElement || e.target;
var tdIdx = parseInt($(this).attr('tdIdx'), 10), srcIdx = parseInt($(this).attr('srcIdx'), 10), c = g.config.columns[tdIdx];
g.setSelectRow(parseInt($(this).attr('trIdx'), 10));
!g.config.callback || g.config.callback(g.selectedRow, g);
if (!c.readonly) {
if (c.type == 'dropdown'){
if (c.datasource) {
if (!c.drpDom) {
c.drpDom = $('<select class="ue_grid_cell_drp"></select>');
for (var i in c.datasource) {
var item = c.datasource[i];
c.drpDom.append('<option value="' + item.value + '" >' + item.text + '</option>');
}
}
if ($(this).find('select').length < 1) {
var text = $(this).text();
c.drpDom.css({
width: $(this).width() + 4,
height: $(this).height(),
}).appendTo($(this)).show().focus();
c.drpDom.off('click').on('click', function (e) { e = e || window.event; e.stopPropagation(); }).off('change').on('change', function (e) {
var text = $(this).find("option:selected").text();
g.tableDom.find('.ue_grid_cell[srcIdx="' + srcIdx + '"][tdIdx="' + tdIdx + '"]').text(text);
g.changeCellValue(srcIdx, tdIdx, $(this).val());
}).off('blur').on('blur', function (e) {
$(this).hide();
});
var options = c.drpDom.find('option');
for (var i = 0; i < options.length; i++) {
var opt = $(options[i]);
if (opt.is('option')) {
if (opt.text() == text) {
c.drpDom.get(0).selectedIndex = i;
}
}
}
}
}
} else if (c.type == 'button') {
} else if (c.type == 'checkbox') {
// 测试弹出层效果
//var l = $(this).offset().left - g.parent.offset().left;
//var t = $(this).offset().top - g.parent.offset().top;
//$('<div style="border:1px solid red;width:100px;height:40px;position:absolute;z-index:999;"></div>').css({ top: t, left: l - 30 }).appendTo(g.parent);
} else if (c.type == 'lookup') {
c.callback($(this), g);
} else if (c.type == 'template') {
c.callback($(this), g);
} else {
if (!$(t).hasClass('ue_grid_input')) {
g.currentCell = $(this);
g.inputDom = g.inputDom || $('<input type="text" class="ue_grid_input" style="width:100%px;width:100%px;" />');
g.inputDom.val(g.currentCell.text()).appendTo(g.currentCell).show().focus().on('change', function () {
var parent = $(this).parent(),
srcIdx = parseInt(parent.attr('srcIdx'), 10),
tdIdx = parseInt(parent.attr('tdIdx'), 10);
g.changeCellValue(srcIdx, tdIdx, $(this).val());
parent.text($(this).val());
$(this).hide();
});
}
}
}
}).find('input').off('click').on('click', function (e) {
e = e || window.event;
e.stopPropagation();
$(g).ActiveEvent();
if (this.type == 'button') {
alert('test button');
}
if (this.type == 'checkbox') {
}
});
g.tableDom.find('input[type="checkbox"]').off('change').on('change', function (e) {
var idx = parseInt($(this).parent().attr('tdIdx'), 10);
var sdx = parseInt($(this).parent().attr('srcIdx'), 10);
g.changeCellValue(sdx, idx, $(this).is(':checked'));
g.setCheckedRow();
});
g.tableDom.find('input').off('click').on('click', function (e) {
e = e || window.event;
e.stopPropagation();
$(g).ActiveEvent();
//
});
g.theadDom.find('.ue_grid_th').off('mousedown').on('mousedown', function (e) {
e = e || window.event;
e.stopPropagation();
$(g).ActiveEvent();
g.currentColumnIdx = parseInt($(this).attr('thIdx'), 10);
$(this).css('cursor', 'move');
g.columnMove = !g.columnMove;
}).off('click').on('click', function (e) {
e = e || window.event;
e.stopPropagation();
$(g).ActiveEvent();
var t = e.srcElement || e.target;
if ($(t).hasClass('ue_grid_th')) {
var idx = parseInt($(this).attr('thIdx'), 10);
g.sortColumn(idx);
}
}).off('mouseenter').on('mouseenter', function (e) {
e = e || window.event;
e.stopPropagation();
$(g).ActiveEvent();
$(this).find('.ue_grid_ts').css({ width: '12px', opacity: 1 });
}).off('mouseleave').on('mouseleave', function (e) {
e = e || window.event;
e.stopPropagation();
$(g).ActiveEvent();
$(this).find('.ue_grid_ts').css({ width: '3px', opacity: 0 });
});
g.theadDom.find('.ue_grid_ts').off('mousedown').on('mousedown', function (e) {
e = e || window.event;
e.stopPropagation();
$(g).ActiveEvent();
g.columnResize = !g.columnResize;
g.currentColumnIdx = parseInt($(this).attr('thIdx'), 10);
}).off('dblclick').on('dblclick', function (e) {
e = e || window.event;
e.stopPropagation();
$(g).ActiveEvent();
var idx = parseInt($(this).attr('thIdx'), 10), col = g.config.columns[idx], f = col.field;
var len = GetCharLength(col.caption) * 8 + 8;
for (var i in g.currList) {
var r = g.currList[i], v = r[f], l = GetCharLength(v) * 8 + 8;
len = len > l ? len : l;
}
g.setColumnWidth(idx, len - $(this).parent().outerWidth());
});
g.theadDom.find('.ue_grid_fbtn').off('click').on('click', function (e) {
e = e || window.event;
e.stopPropagation();
$(g).ActiveEvent();
var idx = parseInt($(this).attr('thIdx'), 10);
if (!g.config.columns[idx].filterText) {
g.showFilterDom($(this));
$(this).find('img').attr('src', g.config.unFilterImg);
} else {
g.config.columns[idx].filterText = '';
g.setListByfilter();
$(this).find('img').attr('src', g.config.filterImg);
}
});
g.theadDom.find('.ue_grid_thead_chk').off('change').on('change', function (e) {
e = e || window.event;
e.stopPropagation();
$(g).ActiveEvent();
var val = $(this).is(':checked'), cid = parseInt($(this).attr('thIdx'), 10), field = g.config.columns[cid].field;
g.tableDom.find('input[tdIdx="' + cid + '"]').prop('checked', val);
g.filterList.forEach(function (item) {
item[field] = val;
});
g.checkedList = val ? g.filterList : [];
});
},
keyPrev: function () {
var g = this, c = g.config, idx = 0,
st = g.contentDom[0].scrollTop,
ch = g.contentDom[0].clientHeight;
if (g.overRowIdx > 0) {
idx = g.overRowIdx - 1;
} else {
g.pager.startIndex -= 1;
idx = 0;
g.refresh();
}
g.overLine(idx);
},
keyNext: function () {
var g = this, idx = 0;
if (g.overRowIdx < (this.rowCount - 1)) {
idx = g.overRowIdx + 1;
} else {
g.pager.startIndex += 1;
idx = this.rowCount - 1;
g.refresh();
}
g.overLine(idx);
},
setColumnWidth: function (i, x) {
var c = this.frameDom.find('.ue_grid_th[thIdx="' + i + '"]');
var d = this.frameDom.find('.ue_grid_cell[tdIdx="' + i + '"]');
if ((c.width() + x) > this.config.columnMinWidth) {
this.lineWidth += x;
this.scrollDom.css({ width: this.lineWidth });
this.theadDom.css({ width: this.lineWidth });
this.tableDom.css({ width: this.lineWidth });
c.width(c.width() + x);
d.width(d.width() + x);
this.config.columns[i].width = this.config.columns[i].width = c.outerWidth();
}
},
showFilterDom: function (obj) {
var g = this, idx = parseInt($(obj).attr('thIdx'), 10), col = g.config.columns[idx], p = obj.parent().parent();
if (!g.filterDom) {
g.filterDom = $('<input class="ue_grid_filter" type="text" />');
}
g.filterDom.css({ width: p.width() - 2, height: p.height() - 5 }).off('blur').on('blur', function () {
$(g).ActiveEvent();
var txt = $(this).val();
if (txt != col.filterText) {
col.filterText = txt;
g.setListByfilter();
}
$(this).hide();
}).val(g.config.columns[idx].filterText).appendTo(p).show().focus();
},
getRowBySrcId: function (list, srcId) {
for (var i in list) {
if (list[i].ue_grid_src_idx == srcId) {
return list[i];
}
}
return null;
},
getIdxBySrcId: function (list, srcId) {
for (var i in list) {
if (list[i].ue_grid_src_idx == srcId) {
return i;
}
}
return -1;
},
getRowByKey: function (list, key) {
var k = this.config.keyField;
for (var i in list) {
if (list[i][k] == key) {
return list[i];
}
}
return null;
},
changeCellValue: function (srcIdx, tdIdx, val) {
var c = this.config.columns[tdIdx],
row = this.getRowBySrcId(this.srcList, srcIdx),
crow = this.getRowBySrcId(this.changeList, srcIdx),
brow = this.getRowBySrcId(this.backList, srcIdx),
cell = this.tableDom.find('.ue_grid_cell[srcIdx="' + srcIdx + '"][tdIdx="' + tdIdx + '"]');
if (c.regexp && !c.regexp.test(val)) {
cell.css({ borderColor: '#f00'}).focus();
return false;
}
if (!brow) {
brow = $.extend(true, {}, row);//深度复制
this.backList.push(row);
}
row[c.field] = val;
if (!crow) {
this.changeList.push(row);
} else {
crow[c.field] = val;
}
cell.css({ borderColor: this.config.cellBorderColor});
},
changeCell: function (grid, cell, val) {
var obj = $(cell),
srcIdx = parseInt(obj.attr('srcIdx'), 10),
tdIdx = parseInt(obj.attr('tdIdx'), 10);
grid.changeCellValue(srcIdx, tdIdx, val);
},
overLine: function (trIdx) {
var overRow = this.tableDom.find('.ue_grid_cell[trIdx=' + this.overRowIdx + ']'),
bgc = this.selectedRow && this.selectRowIdx == this.overRowIdx ? this.config.selectLineBGColor : (this.overRowIdx % 2) > 0 ? this.config.firstLineBGColor : this.config.secondLineBGColor;
overRow.css('background-color', bgc);
this.overRowIdx = trIdx;
this.tableDom.find('.ue_grid_cell[trIdx=' + trIdx + ']').css('background-color', this.config.overLineBGColor);
},
filterColumn: function (idx, value) {
if (this.currentCell && this.currentCell.find('.ue_grid_input')) {
var o = this.currentCell.find('.ue_grid_input');
this.currentCell.text(o.val());
var srcIdx = parseInt(this.currentCell.parent().attr('srcIdx'), 10);
var tdIdx = this.currentCell.attr('tdIdx');
this.srcList[srcIdx][this.config.columns[tdIdx].field] = o.val();
o.hide();
}
},
setSelectRow: function (trIdx) {
var srcIdx = parseInt(this.tableDom.find('.ue_grid_cell[trIdx=' + trIdx + ']').attr('srcIdx'), 10);
this.selectedRow = this.srcList[srcIdx];
if (this.selectRowIdx != trIdx) {
var bgc = (this.selectRowIdx % 2) > 0 ? this.config.firstLineBGColor : this.config.secondLineBGColor;
this.tableDom.find('.ue_grid_cell[trIdx=' + this.selectRowIdx + ']').css('background-color', bgc);
}
this.selectRowIdx = trIdx;
this.tableDom.find('.ue_grid_cell[trIdx=' + trIdx + ']').css('background-color', this.config.selectLineBGColor);
},
setCheckedRow: function (filterField) {
this.checkdeList = this.filterList.filter(function (item) {
return item[filterField];
});
},
showHideColumn: function (idxs) {
if (idxs) {
var idxs = idxs.split(',');
for (var i in idxs) {
var idx = idxs[i];
this.contentDom.find('.ue_grid_th[thIdx="' + idx + '"]').css('display', 'inline-block');
this.contentDom.find('.ue_grid_cell[tdIdx="' + idx + '"]').css('display', 'inline-block');
}
} else {
this.contentDom.find('div:hidden').css('display', 'inline-block');
}
},
getCofig: function () {
return this.config;
},
getColumnCofig: function () {
return this.config.columns;
},
setColumnCofig: function (columnsConfig) {
this.config.columns = columnsConfig;
return this.bindData();
},
initSrcId: function () {
var list = this.srcList, len = list.length;
for (var i = 0; i < len; i++) {
list[i].ue_grid_src_idx = i;
}
},
setRow: function (row, idx) {
if (!row) return;
var k = this.config.keyField;
srow = this.getRowByKey(this.srcList, row[k]);
if (srow) {
srcId = srow.ue_grid_src_idx;
row = MergeJsonObj(srow, row);
item = this.getRowByKey(this.changeList, row[k]);
if (item) {
item = row;
} else {
this.changeList.push(row);
var copy = $.extend(true, {}, srow);
this.backList.push(copy);
}
this.srcList.splice(srcId, 1, row);
} else {
this.addRow(row);
}
this.setListByfilter();
},
deleteRow: function (srcIdx) {
var idx = this.getIdxBySrcId(this.srcList, srcIdx);
if (idx != -1) {
this.srcList.splice(idx, 1);
}
item = this.getRowByKey(this.changeList, srcIdx);
if (item) {
item.isDelete = true;
}
idx = this.getIdxBySrcId(this.backList, srcIdx);
if (idx != -1) {
this.changeList.splice(idx, 1);
}
this.setListByfilter();
},
createNewRow: function () {
this.newRow = {};
this.newRow.ue_grid_src_idx = this.srcList.length;
for (var i in this.config.columns) {
this.newRow[this.config.columns[i].field] = '';
}
},
addRow: function (item, idx) {
if (!item) return;
item.ue_grid_src_idx = this.srcList.length;
idx = idx || this.srcList.length;
this.srcList.splice(idx, 0, item);
this.changeList.push(item);
this.setListByfilter();
},
addEmptyRow: function () {
this.createNewRow();
this.pageList.shift();
this.pageList.push(this.newRow);
this.srcList.push(this.newRow);
this.refresh();
this.overLine(this.rowCount - 1);
},
addRange: function (arr, idx) {
if (arr && Object.prototype.toString.call(arr) === '[object Array]' && arr.length > 0) {
var list = this.srcList, len = list.length;
for (var i in arr) {
arr[i].ue_grid_src_idx = len + i;
}
idx = idx || len;
list.splice(idx, 0, arr);
this.changeList.splice(idx, 0, arr);
this.setListByfilter();
}
},
sortColumn: function (idx) {
var c = this.config.columns[idx], f = c.field;
if (c.sortable) {
var sort = this.theadDom.find('.ue_grid_sort[thIdx="' + idx + '"]');
if (c.sortType == 'desc') {
this.filterList.sort(function (a, b) {
return a[f] == b[f] ? 0 : a[f] > b[f] ? 1 : -1;
});
c.sortType = 'asc';
} else {
this.filterList.sort(function (a, b) {
return a[f] == b[f] ? 0 : a[f] < b[f] ? 1 : -1;
});
c.sortType = 'desc';
}
}
this.setPageList();
},
show: function () {
if (this.frameDom.css('display') == 'none') {
this.showHead();
this.refresh();
this.frameDom.show();
}
},
bindData: function (list, cfg) {
var c = this.config = cfg ? MergeJsonObj(this.defaultConfig, cfg) : this.config;
c.dataList = list || c.dataList;
this.srcList = list || this.srcList;
this.lineWidth = 0;
if (c.columns && c.columns.length > 0) {
for (var i in c.columns) {
var col = c.columns[i];
col.width = col.width || c.columnDefWidth;
col.caption = col.caption || col.field;
col.readonly = col.readonly || false;
col.filterable = col.filterable == undefined ? true : col.filterable;
col.visiable = col.visiable || false;
col.sortable = col.sortable || false;
col.filterType = '⊂';
col.type = col.type || '';
if (col.visiable) {
this.lineWidth += col.width;
}
}
} else {
c.columns = [];
for (var i in this.srcList[0]) {
var col = { field: i, caption: i, type: '', readonly: true, visiable: true, filterable: true, format: '', style: '', sortable: true, filterType: '⊂' };
c.columns.push(col);
col.width = c.columnDefWidth;
this.lineWidth += col.width;
}
}
var h = this.parent[0].clientHeight - c.headHeight - (this.lineWidth > this.parent[0].clientWidth ? 17 : 0) - (c.showPage ? 20 : 0);
this.rowCount = Math.ceil(h / c.lineHeight);
this.initSrcId();
this.filterList = this.srcList;
this.showHead();
this.setPageList();
},
initGrid: function (parent, cfg) {
if ($('#ue_grid_style').length < 1) {
$(this.style()).appendTo('head');
}
var c = this.config = MergeJsonObj(this.defaultConfig, cfg);
if (!c.keyField) {
alert('No key field!');
return;
}
this.scrollTop = 0;
this.parent = parent;
this.parent.addClass('ue_grid_container');
this.frameDom = this.frameDom || $('<div class="ue_grid_frame" contenteditable="false" style="width:' + (parent[0].clientWidth - 2) + 'px;height:' + (parent[0].clientHeight - 2) + 'px;"></div>').appendTo(parent);
this.resizeDom = $('<div class="ue_grid_resize">◢</div>').appendTo(this.frameDom);
this.theadDom = $('<div class="ue_grid_thead" style="background-color:' + c.headBGColor + ';height:' + c.headHeight + 'px;"></div>').appendTo(this.frameDom);
this.contentDom = $('<div class="ue_grid_content"></div>').appendTo(this.frameDom);
this.scrollDom = $('<div class="ue_grid_scroll"></div>').appendTo(this.contentDom);
this.tableDom = $('<div class="ue_grid_table"></table>').appendTo(this.scrollDom);
this.contentDom.height(this.frameDom.height() - c.headHeight);
if (c.resizeable) {
this.resizeDom.show();
}
this.bindData(cfg.dataList);
}
};
grid.initGrid(container, config);
return grid;
}
};
$.fn.AddUEGrid = function (config, callback) {
config.callback = callback;
var parent = $(this);
var id = parent.attr('id') || 'ue_grid_container_' + UEGridList.length;
parent.attr('id', id);
for (var i in UEGridList) {
var item = UEGridList[i];
if (item.parent.attr('id') == id) {
UEGridList.splice(i, 1);
break;
}
}
var o = UEGrid.create(parent, config);
UEGridList.push(o);
return o;
};
$.fn.GetUEGrid = function () {
var id = $(this).attr('id');
for (var idx in UEGridList) {
var item = UEGridList[idx];
if (id == item.parent.attr('id')) {
return item;
}
}
return null;
};
/* grid模块 ------ End ------ */
/* lookup模块 ------ Start ------ */
window.UELookupList = [];
'use strict';
window.UELookup || (window.UELookup = function (target, config) {
var lookup = {
fields: [],
captions: [],
filterText: null,
selectValue: null,
selectText: null,
selectedRow: null,
overRowIndex: 0,
selectedRowIndex: 0,
keyIndex: 0,
keyDown: false,
defaultConfig: {
charWidth: 8,
headHeight: 24,
lineHeight: 20,
maxWidth: 360,
maxHeight: 200,
columnMaxWidth: 150,
columnMinWidth: 60,
columnDefWidth: 80,
headColor: "#fff",
headBGColor: "#666",
headLineColor: '#fff',
firstLineBGColor: "#eee",
secondLineBGColor: "#fff",
overLineBGColor: "#cde",
cellBorderColor: "#999",
defaultValue: '',
isDropDownList: false,
isCaseSensitive: false,
},
style: ''
+ '<style id="ue_lookup_style">'
+ ' .ue_lookup_select {background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEZJREFUeNpi/P//PwOxgImBBEAHxUFBUf9BGFkSXQyueN26ZYwwBcg0TBwEGNFDA9kkZIVgAFKMjgMDI/9jE2ccHOEMEGAAmBo82XXtlgkAAAAASUVORK5CYII=) no-repeat;}'
+ ' .ue_lookup_click {width:12px;font-size:12px;position:absolute;cursor:pointer;opacity:0.4;}'
+ ' .ue_lookup_frame {border:1px solid #666;display:none;overflow:hidden;position:absolute;z-index:299;font-size:12px;user-select:none;margin: 0;padding: 0;background-color:#fff;}'
+ ' .ue_lookup_content {border: none;position: relative;overflow:auto;width: 100%;height: 100%;}'
+ ' .ue_lookup_resize{position:absolute;width:13px;height:15px;right:0;bottom:0;padding:1px 0 0 3px;z-index:300;cursor:se-resize;}'
+ ' .ue_lookup_thead {font-size: 14px;font-weight: bold; text-align: center; position: relative;overflow:hidden;width:auto;}'
+ ' .ue_lookup_th {background-color: transparent;overflow: hidden;display: inline-block;float:left;padding:0 2px;width:auto;}'
+ ' .ue_lookup_table {overflow:hidden;}'
+ ' .ue_lookup_tr {display: block;}'
+ ' .ue_lookup_td {background-color:transparent;overflow:hidden;display:inline-block;margin:0;padding:0 2px;float:left;text-overflow:ellipsis;word-break:keep-all;white-space:nowrap;cursor:default;}'
+ '</style>',
bindData: function (src) {//数据绑定
var o = this, c = this.config, list = src || this.list;
this.tableDom.html('');
if (Object.prototype.toString.call(list) === '[object Array]' && list.length > 0) {
for (var i = 0; i < list.length; i++) {
var r = list[i], bgc = (i % 2) > 0 ? c.firstLineBGColor : c.secondLineBGColor;
for (var j = 0; j < this.columns.length; j++) {
var col = this.columns[j], f = col.field, v = r[f], w = GetCharLength(v) * c.charWidth + 6;
var title = w > col.width ? ('title="' + v + '"') : '';
if (col.visiable) {
var tdDom = $('<div class="ue_lookup_td" trIdx="' + i + '" tdIdx="' + j + '" style="background-color:' + bgc + ';border-right:1px solid ' + c.cellBorderColor + ';border-bottom:1px solid ' + c.cellBorderColor + ';width:' + (col.width - 5) + 'px;height:' + (c.lineHeight - 1) + 'px;line-height:' + (c.lineHeight) + 'px;" ' + title + '>' + v + '</div>').appendTo(this.tableDom);
}
if (f == c.indexField) {
this.keyIndex = j
};
}
}
var hs = c.lineHeight * list.length;
this.theadDom.width(this.lineWidth);
this.tableDom.css({ width: this.lineWidth, height: list.length * c.lineHeight });
this.contentDom.css({ width: this.lineWidth < c.maxWidth ? (this.lineWidth + (hs < c.maxHeight ? 0 : 17)) : c.maxWidth, height: hs < c.maxHeight ? (hs + (this.lineWidth < c.maxWidth ? 1 : 17)) : c.maxHeight });
this.frameDom.css({ width: this.contentDom.width(), height: this.contentDom.height() + (c.isDropDownList ? 0 : c.headHeight) });
this.bindEvent();
var value = this.target.val() || this.target.text();
this.setSelectByValue(value);
}
},
mouseMove: function (e,t,k,d) {
e.stopPropagation();
if (d.startResize) {
if (d.x == 0 && d.y == 0) {
d.x = e.pageX;
d.y = e.pageY;
} else {
if (e.pageX > d.x) {
if (d.contentDom[0].clientWidth < d.tableDom.width()) {
var x = e.pageX - d.x,
sx = d.tableDom.width() - d.contentDom[0].clientWidth,
tx = x > sx ? sx : x;
d.frameDom.css({ width: d.frameDom.width() + tx });
d.contentDom.css({ width: d.contentDom.width() + tx });
}
} else {
if (d.frameDom.width() > 36) {
d.frameDom.css({ width: d.frameDom.width() + (e.pageX - d.x) });
d.contentDom.css({ width: d.contentDom.width() + (e.pageX - d.x) });
}
}
if (e.pageY > d.y) {
if (d.contentDom[0].clientHeight < d.tableDom.height()) {
var y = e.pageY - d.y,
sy = d.tableDom.height() - d.contentDom[0].clientHeight,
ty = y > sy ? sy : y;
d.frameDom.css({ height: d.frameDom.height() + ty });
d.contentDom.css({ height: d.contentDom.height() + ty });
}
} else {
if (d.frameDom.height() > 36) {
d.frameDom.css({ height: d.frameDom.height() + (e.pageY - d.y) });
d.contentDom.css({ height: d.contentDom.height() + (e.pageY - d.y) });
}
}
d.config.maxWidth = d.contentDom.width();
d.config.maxHeight = d.contentDom.height();
d.x = e.pageX;
d.y = e.pageY;
}
}
},
mouseUp: function (e,t,k,d) {
d.startResize = false;
},
keyDown: function (e, t, k, d) {
if (d.eventKey == UE_EVENT.CurrKey && d.frameDom.css('display') != 'none') {
var c = d.config;
switch (e.which) {
case 13: {//回车
var idx = parseInt(d.overRowIndex, 10);
d.setSelectRow(idx || 0);
d.setTargetValue(d.selectValue);
d.frameDom.hide();
!d.config.callback || d.config.callback(d.selectedRow);
} break;
case 27: {//ESC
d.frameDom.hide();
} break;
case 38: {//上向键
d.setSelectRow(d.overRowIndex - 1);
return false;
} break;
case 40: {//下向键
d.setSelectRow(d.overRowIndex + 1);
return false;
} break;
default: break;
}
}
},
bindEvent: function () {
var lkp = this;
$(lkp).SetEvent('mouseup', lkp.mouseUp);
$(lkp).SetEvent('mousemove', lkp.mouseMove);
$(lkp).SetEvent('keydown', lkp.keyDown);
lkp.tableDom.find('.ue_lookup_td').off('mouseenter').on('mouseenter', function (e) {
e = e || window.event;
e.stopPropagation();
$(lkp).ActiveEvent();
lkp.viewSelectRow(parseInt($(this).attr('trIdx'), 10));
}).off('click').on('click', function (e) {
e = e || window.event;
e.stopPropagation();
$(lkp).ActiveEvent();
lkp.setSelectRow(parseInt($(this).attr('trIdx'), 10));
lkp.setTargetValue(lkp.selectValue);
lkp.frameDom.hide();
!lkp.config.callback || lkp.config.callback(lkp.selectedRow);
});
},
setTargetValue: function (value) {
var isExsits = false;
for (var idx in this.config.dataList) {
var item = this.config.dataList[idx];
if (item[this.config.valueField] == value) {
var text = item[this.config.textField];
this.setSelectRow(idx);
this.target.val(text);
this.target.text(text);
isExsits = true;
break;
}
}
if (!isExsits) {
this.selectValue = this.selectText = value;
this.target.val(value);
this.target.text(value);
}
this.filterListByText(value);
},
setSelectByValue: function (value) {
for (var i in this.list) {
if (this.list[i][this.config.valueField] == value) {
this.setSelectRow(i);
break;
}
}
},
filterListByText: function (text) {
if (this.filterText != text) {
this.filterText = text;
this.list = [];
var v = text.toLowerCase();
for (var i in this.config.dataList) {
var item = this.config.dataList[i];
var s = item[this.config.textField].toLowerCase();
if (s.indexOf(v) > -1) {
this.list.push(item);
}
}
this.bindData();
}
},
setSelectRow: function (idx) {
var i = idx < 0 ? 0 : (idx >= this.list.length ? (this.list.length - 1) : idx);
this.selectedRowIndex = i;
this.selectedRow = this.list[i];
this.selectValue = this.selectedRow[this.config.valueField];
this.selectText = this.selectedRow[this.config.textField];
this.viewSelectRow(i);
},
viewSelectRow: function (idx) {
this.tableDom.find('div[trIdx="' + this.overRowIndex + '"]').css('background-color', this.overDomBGColor);
this.overRowIndex = idx;
var overLine = this.tableDom.find('div[trIdx="' + this.overRowIndex + '"]');
this.overDomBGColor = overLine.css('background-color');
overLine.css('background-color', this.config.overLineBGColor);
if (idx == 0) {
this.contentDom[0].scrollTop = 0;
} else {
var tp = idx * this.config.lineHeight;
var sp = this.contentDom[0].scrollTop;
var ch = this.contentDom[0].clientHeight;
if (tp < sp) {
this.contentDom[0].scrollTop = tp;
} else if ((tp + this.config.lineHeight) > (sp + ch)) {
this.contentDom[0].scrollTop = tp - ch + this.config.lineHeight;
}
}
},
setPosition: function () {
var ww = $(window).width(),
wh = $(window).height(),
bt = $('body').scrollTop(),
bl = $('body').scrollLeft(),
fw = this.frameDom.outerWidth(),
fh = this.frameDom.outerHeight(),
pw = this.target.outerWidth(),
ph = this.target.outerHeight(),
pl = this.target.offset().left,
pt = this.target.offset().top,
l = pl - this.target.parent().offset().left,
t = pt - this.target.parent().offset().top;
if ((pt + ph) > (wh + bt)) {
this.frameDom.css({ top: (wh + bt - fh) });
} else {
this.frameDom.css({ top: t + ph + 2 });
}
if ((pl + pw) > (ww + bl)) {
this.frameDom.css({ left: (ww + bl - fw) });
} else {
this.frameDom.css({ left: l });
}
},
show: function () {
if (this.frameDom.css('display') == 'none') {
this.bindData();
this.setPosition();
this.frameDom.show();
this.setSelectRow(0);
}
},
bind: function (tg, cfg) {
if ($('#ue_lookup_style').length < 1) {
$(this.style).appendTo('head');
}
var c = this.config = MergeJsonObj(this.defaultConfig, cfg), w = tg.outerWidth();
this.lineWidth = 0;
this.theadDom = $('<div class="ue_lookup_thead" style="background-color:' + c.headBGColor + ';height:' + c.headHeight + 'px;"></div>');
if (c.columns && c.columns.length > 0) {
this.columns = c.columns;
for (var i in this.columns) {
var col = this.columns[i];
col.width = col.width || c.columnDefWidth;
col.caption = !col.caption ? col.field : col.caption;
var col = this.columns[i];
col.visiable = col.visiable == undefined ? true : col.visiable;
if (col.visiable) {
$('<div class="ue_lookup_th" thIdx="' + i + '" style="border-right:1px solid ' + c.headLineColor + ';width:' + (col.width - 5) + 'px;height:' + c.headHeight + 'px;line-height:' + c.headHeight + 'px;color:' + c.headColor + '">' + col.caption + '</div>').appendTo(this.theadDom);
this.lineWidth += col.visiable ? col.width : 0;
}
}
} else {
this.columns = [];
for (var i in c.dataList[0]) {
var col = { field: i, caption: i, visiable: true };
col.width = col.width || c.columnDefWidth;
this.lineWidth += col.width;
this.columns.push(col);
$('<div class="ue_lookup_th" thIdx="' + i + '" style="border-right:1px solid ' + c.headLineColor + ';width:' + (col.width - 5) + 'px;height:' + c.headHeight + 'px;line-height:' + c.headHeight + 'px;color:' + c.headColor + '">' + col.caption + '</div>').appendTo(this.theadDom);
}
}
var ths = this.theadDom.find('.ue_lookup_th');
if (this.lineWidth < (w + 10) && ths.length > 0) {
var ws = w + 10 - this.lineWidth, cs = Math.ceil(ws / ths.length, 10);
for (var i = 0; i < ths.length; i++) {
var th = $(ths[i]);
var idx = parseInt(th.attr('thIdx'), 10);
this.columns[idx].width += cs;
$(th).width(th.width() + cs);
this.lineWidth += cs;
}
}
c.valueField = c.valueField || this.fields[0];
c.textField = c.textField || this.fields[0];
tg.addClass('ue_lookup_select').css('background-position', (tg.outerWidth() - 16) + 'px ' + (tg.outerHeight() - 14) / 2 + 'px');
tg.parent().css({ position: 'relative' });
this.target = tg;
this.list = c.dataList;
this.frameDom = this.frameDom || $('<div class="ue_lookup_frame"></div>').insertAfter(tg);
this.resizeDom = $('<div class="ue_lookup_resize">◢</div>').appendTo(this.frameDom);
if (!c.isDropDownList) {
this.theadDom.appendTo(this.frameDom)
}
this.contentDom = $('<div class="ue_lookup_content"></div>').appendTo(this.frameDom);
this.tableDom = $('<div class="ue_lookup_table"></table>').appendTo(this.contentDom);
this.setPosition();
var lkp = this;
tg.val(c.defaultValue) || tg.text(c.defaultValue);
tg.on('keyup', function (e) {
$(lkp).ActiveEvent();
e = e || window.event;
lkp.filterListByText($(this).val());
}).on('blur', function (e) {
var obj = $(this);
lkp.frameDom.delay(500).queue(function () {
if (lkp.config.isBlurHide) {
!lkp.config.blurCallback || lkp.config.blurCallback(lkp.selectedRow);
obj.remove();
}
$(this).hide().dequeue();
});
}).on('focus', function (e) {
$(lkp).ActiveEvent();
$('.ue_lookup_frame').hide();
if (lkp.config.setDataCallback) {
lkp.config.dataList = lkp.list = lkp.config.setDataCallback();
}
lkp.show();
});
this.contentDom.scroll(function () {
$(lkp).ActiveEvent();
lkp.theadDom.css({ left: -$(this).scrollLeft() });
});
this.resizeDom.off('mousedown').on('mousedown', function (e) {
$(lkp).ActiveEvent();
lkp.startResize = !lkp.startResize;
});
}
};
lookup.bind(target, config);
return lookup;
});
$.fn.AddUELookup = function (config, callback) {
if (!config.dataList) return false;
config.callback = callback;
var id = $(this).attr('id') || 'ue_lookup_container_' + UELookupList.length;
$(this).attr('id', id);
for (var i in UELookupList) {
var item = UELookupList[i];
if (item.target.attr('id') == id) {
UELookupList.splice(i, 1);
break;
}
}
var o = UELookup($(this), config);
UELookupList.push(o);
return o;
};
$.fn.GetUELookup = function () {
var id = $(this).attr('id');
for (var idx in UELookupList) {
var item = UELookupList[idx];
if (item.target.attr('id') == id) {
return item;
}
}
return null;
};
/* lookup模块 ------ End ------ */
/* split模块 ------ Start ------ */
window.UESplitList = [];
'use strict';
$.fn.AddUESplit = function (config) {
var id = $(this).attr('id') || 'ue_split_container_' + UELookupList.length;
$(this).attr('id', id);
for (var i in UELookupList) {
var item = UELookupList[i];
if (item.parent.attr('id') == id) {
UELookupList.splice(i, 1);
break;
}
}
var split = {
resize: 0,
prevWidth: 0,
prevHeight: 0,
nextWidth: 0,
nextHeight: 0,
splitWidth: 0,
splitHeight: 0,
parentWidth: 0,
parentHeight: 0,
defaultConfig: {
showBorder: false,
splitType: 's',
splitWidth: 5,
overHeight: 0,
underHeight: 0,
leftWidth: 0,
rightWidth: 0,
borderWidth: 1,
borderColor: "#999",
},
mouseMove: function (e, t, k, d) {
e.stopPropagation();
if (d.resize == 1 && (d.x > 0 || d.y > 0)) {
var x = e.pageX - d.x, y = e.pageY - d.y, h = d.prevHeight + d.nextHeight, w = d.prevWidth + d.nextWidth;
if (d.config.splitType == 's') {
d.prevHeight += y;
d.nextHeight -= y;
if (d.nextHeight < 0) {
d.prevHeight = h;
d.nextHeight = 0;
}
if (d.prevHeight < 0) {
d.prevHeight = 0;
d.nextHeight = h;
}
} else {
d.prevWidth += x;
d.nextWidth -= x;
if (d.prevWidth < 0) {
d.prevWidth = 0;
d.nextWidth = w;
}
if (d.nextWidth < 0) {
d.nextWidth = 0;
d.prevWidth = w;
}
}
d.show();
}
d.x = e.pageX;
d.y = e.pageY;
},
mouseUp: function (e, t, k, d) {
d.resize = d.x = d.y = 0;
},
resize: function (w, h, k, d) {
var s = $(d).GetUESplit();
s.rework();
},
bindEvent:function(){
var s = this;
$(this).SetEvent('mousemove', this.mouseMove);
$(this).SetEvent('mouseup', this.mouseMove);
this.parent.SetEvent('resize', this.resize);
this.splitDom.on('mousedown', function (e) {
$(s).ActiveEvent();
s.resize = 1;
s.x = s.y = 0;
});
},
rework: function () {
var c = this.config, r = c.borderWidth * 4 + c.splitWidth,
pw = this.parent[0].clientWidth, ph = this.parent[0].clientHeight;
if (c.splitType == 's') {
this.splitHeight = c.splitWidth;
this.splitWidth = pw;
this.prevWidth = this.nextWidth = pw - c.borderWidth * 2;
if (this.prevHeight == this.nextHeight) {
var rh = parseInt((ph - r) / 2, 10);
this.prevHeight = this.nextHeight = rh;
} else {
this.prevHeight = parseInt(this.prevHeight * ph / this.parentHeight, 10);
this.nextHeight = ph - this.prevHeight - r;
}
} else {
this.splitWidth = c.splitWidth;
this.splitHeight = ph;
this.prevHeight = this.nextHeight = ph - c.borderWidth * 2;
if (this.prevWidth == this.nextWidth) {
var rw = parseInt((pw - r) / 2, 10);
this.prevWidth = this.nextWidth = rw;
} else {
this.prevWidth = parseInt(this.prevWidth * pw / this.parentWidth, 10);
this.nextWidth = pw - this.prevWidth - r;
}
}
this.parentWidth = pw;
this.parentHeight = ph;
this.show();
},
show: function () {
this.prevDom .css({ width: this.prevWidth, height: this.prevHeight });
this.nextDom .css({ width: this.nextWidth, height: this.nextHeight });
this.splitDom.css({ width: this.splitWidth, height: this.splitHeight });
},
init: function (p, f) {
var i = UESplitList.length;
var c = this.config = MergeJsonObj(this.defaultConfig, f);
r = c.borderWidth * 4 + c.splitWidth;
this.parent = p;
this.parent.css({position: 'relative', overflow: 'hidden', fontSize: 0 });
this.prevDom = c.prevDom || $('<div></div>').appendTo(p);
this.nextDom = c.nextDom || $('<div></div>').appendTo(p);
this.prevDom.css({ display: 'inline-block', whiteSpace: 'normal' }).attr('splitId', i);
this.nextDom.css({ display: 'inline-block', whiteSpace: 'normal' }).attr('splitId', i);
if (c.showBorder) {
this.prevDom.css({ position: 'relative', border: c.borderWidth + 'px solid ' + c.borderColor });
this.nextDom.css({ position: 'relative', border: c.borderWidth + 'px solid ' + c.borderColor });
} else {
c.borderWidth = 0;
}
if (c.splitType == 'w') {
this.parent.css({ whiteSpace: 'nowrap' });
}else {
this.parent.css({ whiteSpace: 'normal' });
}
this.splitDom = this.splitDom || $('<div splitId="split_' + i + '" style="position:relative; display:inline-block; background-color:#eee; cursor:' + c.splitType + '-resize;"></div>').insertBefore(this.nextDom);
this.rework();
this.bindEvent();
}
}
split.init($(this), config);
UESplitList.push(split);
return split;
};
$.fn.GetUESplit = function () {
var id = $(this).attr('id');
for (var idx in UESplitList) {
var item = UESplitList[idx];
if (item.parent.attr('id') == id) {
return item;
}
}
return null;
};
/* split ------ End ------ */
}());
短短三天，更新了30次。。。。现在是3.0版了。。。。。。
更新不下200次了。。。。
最后
以上就是含糊短靴为你收集整理的自己写的js插件，grid/lookup等，留存参考的全部内容，希望文章能够帮你解决自己写的js插件，grid/lookup等，留存参考所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复