Простой DataGrid
1. Метод пользовательской сортировки
2. Редакция
3. перетаскивать и перетаскивать
4. Парень
5. Линейный выбор с несколькими вариантами выбора (CTRL) (Shift)
6. Текстовый рендеринг - это раскрасить текст, например, больше 0, красный или менее 0, зеленый
7. Скрыть дисплей столбца
8. Группировка
Просто пример без оправданий с фоном
На самом деле, вы можете просто написать несколько обратных вызовов. Внутри есть загрузочная полоса, которая может отображаться до возврата результата.
Кода -копия выглядит следующим образом:
<! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> Таблица </title>
<стиль типа = "text/css">
*{маржа: 0; Надо: 0;}
.h {line-height: 20px;}
.c {Zoom: 1;}
.c: после {content: "."; дисплей: блок; высота: 0; ясно: оба; видимость: скрыто;}
.l {float: left;}
.r {float: справа;}
ul {list-style: none;}
.demo {ширина: 832px; Высота: 400px; размер шрифта: 12px; Маржа: 20px Auto; позиция: относительно}
.demo .m_a {hargin-right: 8px;}
.demo .nobReak {белое пространство: Keep-All;*белое пространство: нормальное; текстовое переполнение: ellipsis; переполнение: скрыто; высота: 22px; ширина: 100%;}
.demo .container {
Граница: 1px soluts #99bbe8;
Высота: Авто;
}
.demo .i_a {border: 1px solid #ccc; margin-top: 2px;}
.demo .t_a {border-left: 1px sold #99bbe8; Border-Bottom: 1px Solid #99bbe8;}
.demo .t_a td {founal-color: #fff; граница правом: 1px solid #ccc; граница-топ: 1px solid #ccc;}
.demo table td {
высота линии: 22px;
Высота: 20px;
}
.demo table thead .headfocus {
Фон: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) repeat-x 0 -163px;
}
.demo table thead td {
переполнение: скрыто;
}
.demo .t_a tbody td {padding-left: 8px;}
.demo .title {высота: 24px; высота линии: 22px; шрифт-вес: жирный шрифт; Лебь накладки: 20px; Цвет:#666666; Фон: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) repeat-x 0 -300px;}
.demo .bar {_display: inline block; линейная-высота: 20px; Высота: 20px; Пограничная топ: 1PX SOLID #99BBE8; Фон: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) repeat-x 0 -350px; Padding: 2px 0 2px 20px;}
.demo .f_a {color:#3b526e; font-weight: bold;}
.demo .first_div, .demo .prev_div, .demo .next_div, .demo .last_div, .demo .first_div_no, .demo .prev_div_no. .last_div_no {float: слева;
.demo .first_div {background -position: -12px -58px;}
.demo .first_div_no {background -position: 4px -58px; cursor: нормальный}
.demo .prev_div {background-position: -11px -78px;}
.demo .prev_div_no {background -position: 5px -78px; cursor: нормальный}
.demo .next_div {founal Position: -65px -78px;}
.demo .next_div_no {background-position: -49px -78px; cursor: нормальный}
.demo .last_div {background-position: -67px -58px;}
.demo .last_div_no {background-position: -51px -58px; cursor: нормальный}
.demo .rowfocus td {founal-color:#ebf2fb}
.demo .delbtn, .demo .delbtn: Hover {founal: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no-repeat; ширина: 45px; Text-Align: Center; Высота: 20px; цвет:#333; дисплей: блок; текстовый декорация: нет; float: left;}
.demo .delbtn {background-position: -55px 0;}
.demo .delbtn: Hover {background-Position: -55px -30px; цвет:#666}
.demo таблица {
размер шрифта: 12px;
Table-Layout: исправлен;
-moz-USER-SELECT: -MOZ-none;
-Вебкит-пользователь-выбор: нет;
-KHTML-USER-SELECT: Нет;
}
.demo .tabcontainer {
Ширина: 99%;
переполнение: авто;
Подкладка: 2px 0 0 2px;
фоновый цвет:#fffbf7;
позиция: относительно;
}
.demo table thead td {founale: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) repeat-x 0 -100px;}
.demo table thead a {
Z-Index: 1000;
фоновый цвет:#C3DAF9;
founal-image: url ("http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png");
дисплей: нет;
Ширина: 12px;
Высота: 22px;
Фоно -позиция: 0 -234px;
позиция: абсолютно;
Верх: 0;
Справа: 0;
}
.demo table thead div {позиция: относительно; z-index: 1;}
.demo таблица thead p {
Ширина: 1px;
Высота: 22px;
фоновый цвет:#99bbe8;
Плавание: осталось;
дисплей: блок;
Курсор: электронный резир;
Право маржи: 2PX;
}
.demo table tr.trfocus td {
Фоно-цвета:#ebf2fb
}
.demo div таблица, .demo div table tr, .demo div table tr td {
-moz-USER-SELECT: -MOZ-none;
-Вебкит-пользователь-выбор: нет;
}
.demo table tr td {founal-color: #fff; переполнение: скрыто; Текст-переполнение: ellipsis; Белое пространство: nowrap;}
.demo .loading {положение: абсолют; z-index: 9999; слева: 0; сверху: 0; фон:#e5e5e5; фильтр: альфа (непрозрачность = 50); непрозрачность: 0,5; -Moz-opbouty: 0,5; -khtml-opcytiny: 0,5;}
.demo .loaddiv {позиция: абсолют; z-index: 99999; ширина: 98px; высота: 28px; граница: 1px solid #6593cf; фон: #fff url (http://images.cnblogs.com/cnblogs_comcom/wtcsy/294024/r_ajastable. -300px; прокладка: 2px;}
.demo .loadgif {founale: #fff url (images/load_small.gif) без повторного перепорачивания 4px 5px; Подкладка: 5px 0 0 27px; ширина: 68px; высота: 21px; граница: 1px sold #6593cf;}
.demo .loadText {color:#000;}
.demo .edittable {border: 1px solid #c4c4c4;}
.demo .edittable td {founale:#ebf2fb; высота: 24px;}
.demo .editbtn {padding: 5px; ширина: 100px; маржа: 0 Auto; фон: #ebf2fb; граница: 1px sold #c4c4c4; граница-топ: нет;}
.demo .delbtn, .ajaxtable .delbtn: Hover {founal: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no-repeat; ширина: 45px; Text-Align: Center; Высота: 20px; цвет:#333; дисплей: блок; текстовый декорация: нет; float: left;}
.demo .delbtn {background-position: -55px 0;}
.demo .delbtn: Hover {background-Position: -55px -30px; цвет:#666}
.demo .btn_a, .ajaxtable .btn_a: Hover {cursor: pointer; founal: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) No-Repeat; Text-Align: Center; Padding-Top: 5px; ширина: 45px; высота: 17px; дисплей: блокировать; float: left; cursor: pointer; текстовое декорация: нет;}
.demo .btn_a {background-position: 0 0; color:#333;}
.demo .btn_a: Hover {background -Position: 0 -30px; Color:#666;}
.sort-asc .head_span {
Высота: 12px; Ширина: 24px;
дисплей: блок;
Плавание: осталось;
Право накладчика: 18px;
Фон: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no -repeat right -423px;
}
.head_span {float: left; line-height: 22px; display: block;}
.sort-desc .head_span {
Высота: 12px; Ширина: 24px;
дисплей: блок;
Плавание: осталось;
Право накладчика: 18px;
Предпосылки: URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no -repeat right -391px;
}
.x-menu {
позиция: абсолютно;
Фон: url (menu.gif) Repeat-y #f0f0f0;
Граница: 1PX SOLID #718BB7;
Ширина: 134px;
дисплей: нет;
}
.x-menu .disabled a {
Цвет:#999;
}
.x-menu-list {padding: 2px; переполнение: скрыто; поля: 0;}
.x-menu-list li {padding: 1px; Белое пространство: Nowrap; Высота: 20px;}
.x-menu-list li.focus {Backround:#09f;}
ax-menu-item {
дисплей: блок;
курсор: указатель;
высота линии: 18px;
Высота: 20px;
контур цвета: -моз-USE-TEXT-Color;
Схема в схеме: нет;
Схема ширины: 0;
Ширина: 100px;
Лебь накладки: 27px;
позиция: относительно;
Текстовое декорация: нет;
Белое пространство: Nowrap;
размер шрифта: 12px;
Цвет:#222;
}
ax-m_a {padding-left: 8px; ширина: 120px;}
ax-menu-item input {hargin-ruight: 8px}
Ax-Menu-item: Hover {фоновый цвет:#d9e8fb}
.ASC {founale: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no -repeat -53px -218px;}
.desc {founale: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no -repeat -53px -243px;}
.columns {founale: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no -repeat -53px -268px;}
.submenu {
позиция: абсолютно;
Z-Index: 1500;
Фон:#f0f0f0;
Граница: 1PX SOLID #718BB7;
Ширина: 134px;
дисплей: нет;
}
.x-menu-list .child-menu {founale: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no-repeat Право -444px;}
ax-m_a {padding-left: 8px; ширина: 120px;}
ax-menu-item input {hargin-ruight: 8px}
Ax-Menu-item: Hover {фоновый цвет:#d9e8fb}
.линия{
Ширина: 1px; фоновый цвет: #cccccc; положение: абсолютное; отображение: нет; Z-Index: 100;
}
.красный{
Цвет:#FF0000;
}
.жадность{
Цвет:#33FF00;
}
</style>
</head>
<тело>
1. Метод индивидуальной сортировки
<br>
2. Редакция
<br>
3. перетаскивать и перетаскивать
<br>
4. Парень
<br>
5. Линейный выбор с несколькими вариантами выбора (CTRL) (Shift)
<br>
6. Текстовый рендеринг - это раскрасить текст, например, больше 0, красный или менее 0, зеленый
<br>
7. Скрыть дисплей столбца
<br>
8. Группировка
<br>
<div id = 'demo' class = 'demo'> </div>
<br> <br> Сгруппировано следующее, и есть пользовательский метод сортировки, который, как правило, плохой <br> <br>
<div id = 'demo1' class = 'demo'> </div>
<script type = "text/javascript">
(function (doc, неопределенная) {
var win = это;
win.sys = function (ua) {
var b = {
т.е. /msie/.test(ua) &&! /pera/.test (ua),
Opera: /opera/.test(ua),
Safari: /webkit/.test(ua) &&! /chrome/.test (ua),
Firefox: /firefox/.test(ua),
Chrome: /chrome/.test(ua)
}, vmark = "";
для (var i in b) {
if (b [i]) {vmark = "safari" == i? "Версия": я; перерыв; }
}
b.version = vmark && regexp ("(?:" + vmark + ") [///:] ([// d.] +)"). тест (ua)? Regexp. $ 1: "0";
b.ie6 = b.ie && parseint (b.version, 10) == 6;
b.ie7 = b.ie && parseint (b.version, 10) == 7;
b.ie8 = b.ie && parseint (b.version, 10) == 8;
возврат B;
} (win.navigator.useragent.tolowercase ());
win.sys.ie6 && doc.execcommand ("fosticeImageCache", false, true);
Win. $$ = function (id) {
return typeof id === 'String'
? doc.getelementbyid (id)
: идентификатор;
};
Win. $ Q = function (имя, родитель) {
return parent.getelementsbytagname (имя);
}
Win. $ c = function (имя, родитель) {
var elem = typeof name === 'Object'? имя: doc.createElement (имя);
родитель && parent.appendchild (elem);
вернуть Элем;
};
win.addlistener = function (element, e, fn) {
! element.events && (element.events = {});
element.events [e] && (element.events [e] [addlistener.guid ++] = fn) || (element.events [e] = {'0': fn});
element.AddeventListener? element.AddeventListener (e, fn, false): element.attachevent ("on" + e, fn);
};
win.addlistener.guid = 1;
win.removelistener = function (element, e, fn) {
var Handlers = element.Events [e], тип;
if (fn) {
для (введите обработчики)
if (Handlers [type] === fn) {
element.RemoveEventListener? element.RemoveEventListener (e, fn, false): element.detachevent ("on" + e, fn);
Удалить обработчики [тип];
}
}еще{
для (введите в обработчиках) {
element.RemoveEventListener? element.RemoveEventListener (e, Handlers [type], false): element.detachevent ("on" + e, Handlers [type]);
Удалить обработчики [тип];
}
}
};
win.firevent = function (element, eventname) {
if (element [eventName]) {
element [EventName] ();
} else if (element.fireevent) {
element.fireVent ('on'+eventName);
} else if (doc.createevent) {
var evt = doc.createevent ("mouseevents");
evt.initevent (EventName, True, True);
element.dispatchevent (evt);
}
};
win.setstyle = function (elems, style, value) {
if (! elems.length) elems = [elems];
if (typeof style == "string") {
style = value === не определен?
return (o [style] = value, o);
}) ({});
};
Каждый (elems, function (i, elem, style) {
var value, имя, т.е. = sys.ie;
для (имя в стиле) {
value = style [name];
if (name === "непрозрачность" && ie) {
elem.style.filter = (elem.currentstyle.filter || "") .Replace (/alpha/([^)] */)/, "") + "alpha (opacity =" + value * 100 + ")";
} else if (name === "float") {
elem.style [т.е.? «стиль флюат»: "cssfloat"] = value;
}еще{
name = name.replace (/-([az])/ig, function (all, буква) {
return itled.touppercase ();
});
elem.style [name] = value;
}
}
}, стиль);
};
win.setattr = function (dom, attr) {
if (typeof attr! == 'Object')
возвращаться;
для (var name in attr)
dom.setattribute (name, attr [name]);
}
var slice = array.prototype.slice;
win.bind = function (Object, Fun) {
var args = slice.call (аргументы) .slice (2);
return function () {
вернуть fun.apply (объект, args);
};
};
win.bindaseventlistener = function (Object, Fun, Args) {
var args = slice.call (аргументы) .slice (2);
возврат функции (событие) {
return fun.apply (Object, [event || win.event] .concat (args));
}
};
win.extend = function () {
var target = аргументы [0] || {}, i = 1, length = arguments.length, deep = true, опции;
if (typeof target === "boolean") {
Deep = Target;
Target = аргументы [1] || {};
i = 2;
}
if (typeof target! == "Object" && object.prototype.tostring.call (target)! = "
target = {};
for (; i <length; i ++) {
if ((options = аргументы [i])! = null)
для (имя var в параметрах) {
var src = target [name], copy = options [name];
if (target === Copy)
продолжать;
if (deep && copy && typeof copy === "object" &&! copy.nodetype) {
target [name] = arguments.callee (deep, src || (copy.length! = null? []: {}), copy);
}
иначе if (копия! == не определен)
Target [name] = copy;
}
}
вернуть цель;
};
win.class = function (свойства) {
var _class = function () {
return (аргументы [0]! == null && this.initialize && typeof (this.initialize) == 'function')
? this.initialize.apply (это, аргументы)
: этот;
};
_class.prototype = свойства;
вернуть _class;
};
win.each = function (объект, обратный вызов, args) {
var name, i = 0, length = object.length;
if (args) {
args = array.prototype.slice.call (аргументы) .slice (2);
if (длина === не определен) {
для (имя в объекте)
if (callback.apply (object [name], [name, object [name]]. concat (args)) === false)
перерыв;
} еще
для (; i <длина; i ++)
if (callback.apply (object [i], [i, object [i]]. concat (args)) === false) //
перерыв;
} еще {
if (длина === не определен) {
для (имя в объекте)
if (callback.call (object [name], name, object [name]) === false)
перерыв;
} еще
for (var value = object [0];
i <length && callback.call (value, i, value)! == false; value = object [++ i]) {}
}
вернуть объект;
};
win.currentStyle = function (element) {
return element.currentStyle || doc.defaultview.getComputedStyle (element, null);
};
win.objpos = function (elem) {
var left = 0, top = 0, справа = 0, внизу = 0, doc = elem? elem.ownerdocument: doc;
if (! elem.getBoundingClientRect || win.sys.ie8) {
var n = elem;
while (n) {left += n.offsetleft, top += n.offsettop; n = N.OffSetParent; };
справа = левый + elem.offsetwidth; внизу = вверх + elem.offsetheight;
} еще {
var rect = elem.getBoundingClientRect ();
влево = правое = doc.documentelement.scrollleft || doc.body.scrollleft;
top = внизу = doc.documentelement.scrollleft || doc.body.scrollleft;
слева += rect.left; справа += rect.right;
top += rect.top; внизу += rect.bottom;
}
return {"left": слева, "top": top, "справа": справа, "внизу": внизу};
};
win.contains = function (k, j) {
Вернуть документ
? K.comparedocumentposition (J) и 16
: k! == j && k.contains (j);
};
win.hasclass = function (element, classname) {
return element.classname.match (new Regexp ('(// s |^)'+classname+'(// s | $)'));
};
win.addclass = function (element, classname) {
if (! win.hasclass (element, classname))
element.classname.replace (// s/g, '') === ''
? element.classname = classname
: element.classname+= ""+classname;
};
win.removeclass = function (element, classname) {
win.hasclass (element, classname) && (element.classname = element.classname.replace (new Regexp ('(// s*|^)'+classname+'(// s*| $)'), ''));
}
})(документ);
(function (doc, неопределенная) {
var win = это,
uuid = -1;
/*
Проверьте, есть ли ключ в строке
Если есть и за ключ следуют - вернуть - что -то впоследствии вернуть истинность
Никакое обнаружение возвращает неверно
*/
Функция проверка (str, key) {
var reg = new Regexp ('(?:^| // s)'+key+'// b-? (.*?) (?: // s | $)', 'i');
if (reg.exec (str)! = null) {
return regexp. $ 1 === ''? True: regexp. $ 1;
}еще{
вернуть ложь;
}
};
/*
Изменить значение, соответствующее ключу в строке
*/
Функция Modify (str, Key, значение) {
var reg = new Regexp ('(^| // s) ('+key+'// b-).*? (// s | $)', 'i');
return str.replace (reg, '$ 1 $ 2'+value+'$ 3');
};
win.easygrid = новый класс ({
параметры: {
персидж: 10,
CurrPage: 0,
TotalPage: 0,
Подсчет: 10,
Страница: 0,
Isedit: ложь,
WidthConfig: {
TD: NULL,
prevtd: null,
x: 0,
tdwidth: 0,
Prevwidth: 0
},
Cellminwidth: 50,
Sorttype: {
int: function (v) {return parseint (v)},
float: function (v) {return parsefloat (v)},
Дата: function (v) {return v.toString ()},
String: function (v) {return v.toString ()}
},
Название: «Название»
},
инициализировать: function (options) {
var op = extend (true, {}, this.options),
опции = this.defaults = extend (op, options),
контейнер = this.container = $ c ('div', options.container),
dataconfig = options.dataconfig,
title = $ c ('div', контейнер);
container.classname = 'intainer';
title.innerhtml = options.title;
title.classname = 'title';
this.primarykey = options.primarykey;
this.top = $ c ('div', контейнер);
this.top.classname = 'bar';
this.top.innerhtml = '<div> <a href = "javascript:;" page = "start"> </a> <a href = "javascript:;" page = "Next"> </a> <div> <div> <input type = "text"/> </div> <div> </div> <a href = "javascript:;" "" page = "pre"> </a> <a href = "javascript:;" page = "end"> </a> <div> <a href = "javascript:;" Go = "Go"> Jump </a> <a href = "javascript:;" del = "del"> Delete </a> <viv> Текущая страница имеет в общей сложности одну страницу и одну часть данных, в общей сложности один кусок данных и в общей сложности один кусок данных, и общая сумма одной части данных, и общая сумма данных, и общий кусок данных, и общий общий кусок данных, и общий кусок данных, и общий кусок, и общий кусок, и общий кусок, и общий кусок, и общий кусок, и общий кусок данных, и общий кусок, и общий кусок, и общий кусок, и общий кусок данных, и общий кусок, и общий кусок, и общий кусок, и общий кусок, и общий элемент, и общий кусок данных, и общий кусок данных и общий кусок данных и общий кусок данных и общий кусок данных и общий кусок данных и общий кусок данных и общий кусок данных и общий кусок данных и общий кусок. data, and a total of one piece of data, and a total of one piece of data, and a total of one piece of data, and a total of one piece of data, and a total of one piece of data, and a total of one piece of data, and a total of one piece of data, and a total of one piece of data, and a total of one piece of data, and a total of one piece of data, and a total of one piece of data, and a total of one piece of data, and a total of one piece of данные и в общей сложности один кусок данных и в общей сложности один кусок данных,
var tabcontainer = this.tabcontainer = $ c ('div', контейнер);
this.bottom = $ c (this.top.clonenode (true), контейнер);
tabcontainer.classname = 'tabcontainer';
tabcontainer.style.height = ~~ options.container.offsetheight - 83+'px';
var table = this.table = $ c ('table', tabcontainer);
table.classname = 't_a';
setattr (таблица, {cellPadding: "0", сотовая связь: "0", граница: "0"});
this.tead = $ c ('head', таблица);
this.tbody = $ c ('tbody', table);
this.tbody.style.display = 'none';
// загрузка
this.loading_bg = $ c ('div', intaner);
this.loading_bg.classname = 'загрузка';
setStyle (this.loading_bg, {
Ширина: контейнер.offsetwidth+2+'px',
Высота: контейнер. Офф.
});
this.Loading = $ c ('div', intaner);
this.loading.classname = 'loaddiv'
SetStyle (this.Loading, {
Слева: (container.offsetwidth/2-45) + 'px',
Верх: (intainer.offsetheight/2-14) + 'px'
});
this.loading.innerhtml = '<div> загрузка ... </div>';
// Сколько столбцов в таблице
this.colcount = options.fields.length;
// Форма источника данных - [[], [], [], [], []]
this.data = [];
// Все формы заголовка группировки в запрошенном в настоящее время источник данных - [trdom1, trdom2]
this.grouphead = [];
// Записать TR [TR1, TR2, TR3] группы, которая была вставлена в таблицу
this.inserttrs = [];
// Индекс столбцов
// форма [[TD11, TD12, TD13, TD14], [TD21, TD22, TD23, TD24]]]]
this.columns = [];
// Истина означает положительный порядок ложный означает обратный порядок
this.ascsort = true;
// Сохранить, какой столбец сортирует заголовок TD
this.sortcolumn = '';
// Все строки TR, если нет формы группировки [TR1, TR2, TR3, TR4]
// Если есть группировка [[TR1, TR2, TR3, TR4], [TR5, TR6, TR7, TR8]]
this.rows = [];
// меню уровня 1
this.popmenu = $ c ('div', doc.body);
this.popmenu.classname = 'x-menu';
this.popmenu.innerhtml = '<ul> <li> <a href = "javascript:;" menutype = "asc"> asc </a> </li> <li> <a href = "javascript:;" menutype = "desc"> вниз </a> </li> <li> <a href = "javascript:;" menutype = "columns"> Все столбцы </a> </li> </ul> ';
// Создать подменю
this.subpopmenu = $ c ('div', doc.body);
this.subpopmenu.classname = 'sumperu';
// открыт ли первый слой всплывающего окна заголовка таблицы. Если он открыт, сохраните TD
this.ismenuopen = false;
// Сохранить, отображается ли столбец во всех столбцах или скрыто NUM в качестве счетчика, чтобы увидеть, сколько там столбцов.
// Формат закрывается: [true, false, true, true] столбец 1,3,4 показывает скрытый второй столбец
this.isshowtrs = {
num: 0,
Clos: []
};
// Создать базовую линию, отображаемая при перетаскивании
this.line = $ c ('div', doc.body);
this.line.classname = 'line';
// Сохранить строку
// Инкрементные количества атрибута uuid такие как {1: dom, 2: dom}
this.selectedRows = {};
// Сохранить последнюю выбранную строку
this.lastselectrow = {dom: null, index: null};
this.currandititrow = {index: 0, dom: null};
this.editdata = [];
this.editform = $ c ('div', tabcontainer) ;;
setStyle (this.editform, {
Позиция: «Абсолют»,
дисплей: «нет»,
'z-index': '120'
});
this.edittable = $ c ('table', this.editform);
setattr (this.edittable, {
сотовая связь: '0',
CellPadding: '0',
граница: '0' '
});
var btnc = $ c ('div', this.editform);
btnc.classname = 'editbtn';
btnc.style.textalign = 'center';
btnc.innerhtml = '<div> <a do = "отправить" href = "javaScript :;"> отправить </a> <a do = "cancel" href = "javaScript :;"> Cancel </a> </div>';
this.edittable.classname = 'edittable';
var etr = $ c ('tr', $ c ('tbody', this.edittable));
// Создать копию TR, потому что узел можно скопировать напрямую, когда TR сгенерируется позже
this.copytr = $ c ('tr');
this.grouptr = $ c ('tr');
this.grouptr.setattribute ('g', 'y');
var ctd = $ c ('td', this.grouptr)
ctd.setattribute ('colspan', options.fields.length);
var theadtr = $ c ('tr', this.head),
twidth = 0,
self = это,
ul = $ c ('ul', this.subpopmenu),
Ли;
Каждый (Options.fields, function (i, o) {
var td = $ c ('td', Headtr),
width = o.width? O.Width: '80 ',
div = i === 0? '<div>': '<div> <p> </p>';
td.innerhtml = [div, '<pan>', o.name, '</span> <a href = "javascript :;"> </a> </div>']. Join ('');
setAttr (td, {clos: i, width: width, не выбирается: 'on', 'class': o.type === не определен? '': 'type-'+o.type});
self.createinput (i, o, etr);
twidth = twidth + (~~ width);
li = $ c ('li', ul);
li.innerhtml = [
'<a href = "javascript:;" > <input type = "fackbox" checked = "true" cols = "',
я,
'"/>',
o.name,
'</a>'
].присоединиться('');
// Создать первый элемент каждого столбца в индексе столбца
self.columns [i] = [td];
$ c ('td', self.copytr) .setAttribute ('не выбирается', 'on');
// Рассчитайте индекс столбцов и общее количество столбцов.
self.isshowtrs.num ++;
self.isshowtrs.clos [i] = true;
});
setattr (this.table, {width: twidth+options.fields.length+1})
// генерировать TR в TBODY только генерирует TR в соответствии с PerStage. Это элемент конфигурации, который показывает, сколько фрагментов данных в настоящее время доступно.
var i = 0,
trslen = options.perpage,
frag = doc.createdocumentfragment (),
arr = new Array (options.fields.length),
ТР,
TDS;
for (; i <trslen; i ++) {
tr = this.copytr.clonenode (true);
tds = $ q ('td', tr);
каждый (arr, function (i) {
// Сгенерировать все элементы индекса столбца
self.columns [i] .push (tds [i]);
});
$ c (tr, frag);
}
this.tbody.appendchild (frag);
if (typeof dataConfig === 'Object') {
setTimeout (function () {self.getDataCallback (dataConfig);}, 5);
}еще{
}
/*
Перетащите стол
Сортировка таблицы
Подождите некоторых операций
*/
addlistener (this.tread, 'click', bindaseventlistener (this, this.sorttable));
addlistener (this.tead, 'mouseover', bindaseventlistener (this, this.teadover));
addlistener (this.tead, 'mouseout', bindaseventlistener (this, this.teadout));
addlistener (this.tead, 'mousedown', bindaseventlistener (это, this.dragwidth));
/*
Свяжите всплывающее слое. Нажмите События для сортировки
Меню уровня 2, чтобы скрыть столбец
*/
addlistener (this.popmenu, 'click', bindaseventlistener (this, this.menuclick));
addlistener (this.popmenu, 'mouseover', bindaseventlister (this, this.menuover));
addlistener (this.subpopmenu, 'click', bindaseventlistener (this, this.submenuclick));
/*
Поместите настольные ряды и становятся толще
*/
addlistener (this.tbody, 'mouseMove', bindaseventListener (это, this.rowhighlight, true));
addlistener (this.tbody, 'mouseout', bindaseventlistener (this, this.rowhighlight, false));
addlistener (this.tbody, 'mousedown', bindaseventlistener (this, this.selectrow, false));
addlistener (this.tbody, 'dblclick', bindaseventlistener (это, this.editrow, false));
addlistener (btnc, 'click', bindaseventlistener (this, this.modifytr));
addlistener (this.top, 'click', bindaseventlistener (this, this.pagebarclick));
addlistener (this.bottom, 'click', bindaseventlistener (this, this.pagebarclick));
},
getDataCallback: function (data) {
var options = this.defaults,
self = это,
Тотла = 0;
this.data.length = 0;
if (data.data) {
if (data.data [0] .groupName) {
var grouphead = this.grouphead;
grouphead.length = 0;
каждый (data.data, function (i, o) {
var gtr = self.grouptr.clonenode (true);
$ Q ('td', gtr) [0] .innerhtml = O.GroupName;
grouphead.push (gtr);
каждый (O.Rows, function (j, d) {
// Последний элемент данных в этом.data является индексом
D.push (i);
self.data.push (d);
});
});
this.showgroup = true;
}еще{
каждый (data.data, function (i, o) {
self.data.push (o);
});
this.showgroup = false;
}
}еще{
возвращаться;
}
Total = data.total
? data.total> = this.data.length
? data.total
: this.data.length
: this.data.length;
this.writemessage (total);
this.buildtbody (options.currpage);
},
Buildtbody: function (pagenum) {
if (this.data.length === 0) {
this.tbody.style.display = 'none';
возвращаться;
}
var i = 0,
j = 0,
self = это,
data = this.data,
параметры = это.defaults,
trslen = options.perpage,
tdslen = options.fields.length,
tbody = this.tbody,
trs = tbody.getelementsbytagname ('tr'),
start = pagenum*options.perpage,
Tr;
this.row.length = 0;
if (this.showgroup) {
var Group = {},
Индекс,
arr = [],
INSERTTRS = this.InsertTrs;
// очистить ранее вставленную группу TR
inserttrs.length! = 0 && каждый (inserttrs, function (i, o) {
self.tbody.removechild (o);
});
inserttrs.length = 0;
// Передача данных заполнения на это.
var num = - 1;
for (; i <trslen; i ++) {
tr = trs [i];
// Если нет данных, начните скрывать оставшиеся ряды
if (! data [i+start]) {
tr.style.display = 'none';
продолжать;
}
// Сделать тег TR, который данные в данных соответствуют
tr.setattribute ('DataInDex', i+start);
tr.style.display = 'block';
tds = tr.getelementsbytagname ('td');
// x - идентификация различных групп групп в группе
var x = data [i+start] [data [i+start] .length-1];
// используется для определения того, находятся ли последующие данные и предыдущие данные в одной и той же группе
// Если это та же группа, добавьте последний столбец этого.
// Создать столбец, который не та же группа
num == x
? this.rows [this.rows.length-1] .push (tr)
: (this.rows [this.rows.length] = [tr], num = x);
// Использование массива ARR, чтобы запомнить положение первой TR каждой группы, потому что заголовок TR вставлен позже в позицию NUM - это номер последовательности группы.
! (num в группе) && (группа [num] = i + start, arr.push ([num, i]));
for (j = 0; j <tdslen; j ++) {
td = tds [j];
var txt = data [i+start] [j] === ''? '': data [i+start] [j];
render = options.fields [j] .render;
td.innerhtml = рендер
? рендер (TXT)
:текст;
}
tr.style.display = '';
}
каждый (arr.reverse (), function (i, o) {
inserttrs.push (self.grouphead [o [0]]);
self.tbody.insertbefore (self.grouphead [o [0]], trs [o [1]]);
});
}еще{
for (; i <trslen; i ++) {
tr = trs [i];
// Сделать тег TR, который данные в данных соответствуют
tr.setattribute ('DataInDex', i+start);
this.row.push (tr);
// скрыть TR без данных
if (! data [i+start]) {
tr.style.display = 'none';
продолжать;
}
tr.style.display = '';
tds = $ q ('td', tr);
for (j = 0; j <tdslen; j ++) {
var txt = data [i+start] [j] === ''? '': data [i+start] [j];
render = options.fields [j] .render;
tds [j] .innerhtml = рендер
? рендер (TXT)
:текст;
}
}
}
options.currpage = pagenum;
this.top.getelementsbytagname ('span') [0] .innerhtml = this.bottom.getelementsbytagname ('span') [0] .innerhtml = ~~ pagenum+1;
var topas = this.top.getelementsbytagname ('a'),
Bottomas = this.bottom.getElementsbytagname ('a');
if (options.totalpage === 1) {
Bottomas [0] .classname = topas [0] .classname = 'first_div_no';
Bottomas [1] .classname = topas [1] .classname = 'prev_div_no';
Bottomas [2] .classname = topas [2] .classname = 'next_div_no';
Bottomas [3] .classname = topas [3] .classname = 'last_div_no';
} else if (options.currpage === 0) {
Bottomas [0] .classname = topas [0] .classname = 'first_div_no';
Bottomas [1] .classname = topas [1] .classname = 'prev_div_no';
Bottomas [2] .classname = topas [2] .classname = 'next_div';
Bottomas [3] .classname = topas [3] .classname = 'last_div';
} else if (options.currpage+1 === options.totalpage) {
Bottomas [0] .classname = topas [0] .classname = 'first_div';
Bottomas [1] .classname = topas [1] .classname = 'prev_div';
Bottomas [2] .classname = topas [2] .classname = 'next_div_no';
Bottomas [3] .classname = topas [3] .classname = 'last_div_no';
}еще{
Bottomas [0] .classname = topas [0] .classname = 'first_div';
Bottomas [1] .classname = topas [1] .classname = 'prev_div';
Bottomas [2] .classname = topas [2] .classname = 'next_div';
Bottomas [3] .classname = topas [3] .classname = 'last_div';
}
this.tbody.style.display = '';
this.loading_bg.style.display = 'none';
this.loading.style.display = 'none';
},
writemessage: function (total) {
var options = this.defaults,
base = total/options.perpage,
topspans = this.top.getelementsbytagname ('span'),
BottomSpans = this.bottom.getElementsbytagname ('span');
Options.totalpage = base> parseint (base)
? Parseint (Base) +1
: база;
BottomSpans [0] .innerhtml = topspans [0] .innerhtml = ~~ options.currpage+1;
BottomSpans [1] .innerhtml = topspans [1] .innerhtml = options.totalpage;
BottomSpans [2] .innerhtml = topspans [2] .innerhtml = options.perpage;
BottomSpans [3] .innerhtml = topspans [3] .innerhtml = total;
},
SortTable: function (e) {
var elem = e.target || e.srcelement,
self = это,
параметры = это.defaults,
eLemname = elem.nodename.tolowercase (),
showgroup = this.showgroup,
tdelem = elem,
имя = eLemname;
// нажимать может быть запускается при перетаскивании. Причина в том, что все коды в соответствии с IE связаны с этим. Таблица. Смотрите перетаскивание.
if ($ q ('td', elem) .length> 1)
возвращаться;
if (имя! == 'td') {
while (name! == 'td') {
tdelem = tdelem.parentnode;
name = tdelem.nodename.tolowercase ();
}
}
var Issort = checkreg (tdelem.classname, 'sort'),
type = checkreg (tdelem.classname, 'type')
// Сорт
if (elemname! == 'a' && type) {
var fragment = doc.createdocumentfragment ();
if (this.sortcolumn! == tdelem && this.sortcolumn! == '') {
removeClass (this.sortcolumn, 'sort-asc');
removeClass (this.sortcolumn, 'sort-desc');
}
if (Issort) {
// Есть группировки, каждая группа будет перевернута отдельно и не сгруппирована и будет перевернута напрямую.
ShowGroup
? каждый (this.rows, function (i, o) {o.reverse ();})
: this.rows.reverse ();
tdelem.classname = modify (tdelem.classname, 'sort', issort === 'asc'? 'desc': 'asc');
}еще{
ShowGroup
? каждый (this.rows, function (i, o) {
o.sort (self.compare (tdelem.getattribute ('clos'), type));
})
: this.rows.sort (this.compare (tdelem.getattribute ('clos'), type));
// Если он отсортирован в положительном порядке, добавьте флаг положительного порядка.
if (this.ascsort) {
addclass (tdelem, 'sort-asc');
}еще{
// обратная сортировка будет инвертировать исходную сортировку и добавить флаг сортировки
ShowGroup
? каждый (this.rows, function (i, o) {o.reverse ();})
: this.rows.reverse ();
addclass (tdelem, 'sort-desc');
}
}
// Видрировать отсортированные данные в таблицу
var inserttrs = this.inserttrs,
len = inserttrs.length-1,
arr = [];
каждый (this.rows, function (i, tr) {
arr = [inserttrs [len-i]]. concat (tr);
ShowGroup
? Каждый (arr, function (idx, obj) {frag.appendchild (obj);})
: frag.appendchild (tr);
});
this.tbody.appendchild (frag);
this.sortcolumn = tdelem;
}
// -------------------------------------------------------------------------------------
/*
Если вы нажмете на тег в заголовке, появится меню
*/
if (elemname === 'a') {
/*
Нажав за пределы меню, изменение функции будет выполнено
Используется для очистки скрытого слоя события документа для удаления стиля TD и
*/
функция documentClick () {
self.popmenu.style.display = 'none';
self.subpopmenu.style.display = 'none';
if (self.ismenuopen) {
removeListener (документ, «клик»);
removeClass ($ q ('div', self.ismenuopen) [0], 'headfocus');
$ q ('a', self.ismenuopen) [0] .style.display = 'none';
}
self.ismenuopen = false;
}
var pos = objpos (elem),
left = pos.left+math.max (document.documentelement.scrollleft, document.documentelement.scrollleft),
top = pos.top +math.max (document.documentelement.scrolltop, document.documentelement.scrolltop) +elem.offsetheight,
td = elem.parentnode.parentnode,
lis = $ q ('li', this.popmenu);
// Если это.
this.ismenuopen && documentClick ();
if (! Checkreg (td.classname, 'type')) {
addClass (lis [0], 'отключен');
addClass (LIS [1], 'отключен');
}еще{
removeClass (LIS [0], 'отключен');
removeClass (LIS [1], 'отключен');
}
Sys.ie
? e.cancelbubble = true
: e.stoppropagation ();
// При отображении слоя TD прикреплен к этому.
this.ismenuopen = td;
AddListener (документ, «Нажмите», DocumentClick);
setStyle (this.popmenu, {
слева: слева+'px',
Верх: верх+'px',
дисплей: 'block'
});
}
},
Сравните: function (n, type) {
var orttype = this.defaults.sorttype,
txt = sys.ie? 'innertext': 'textcontent';
! sorttype [type] && (type = 'string');
Возвращается функция (A1, A2) {
a1 = sorttype [type] (a1.cells [n] [txt]);
a2 = orttype [type] (a2.cells [n] [txt]);
вернуть a1 == a2? 0: a1 <a2? 1: -1;
}
},
pageBarClick : function(e){
varelem = e.target || e.srcElement,
options = this.defaults,
typePage = elem.getAttribute('page'),
isGo = elem.getAttribute('go');
isDel = elem.getAttribute('del');
if(typePage){
var number = {
start : 0,
end : options.totalPage-1,
next : options.currPage-1,
pre : options.currPage+1
}[typePage];
this.toPage(number);
}
if(isDel){
this.del();
}
if(isGo){
var number = ~~elem.parentNode.getElementsByTagName('input')[0].value-1;
this.toPage(number);
}
},
toPage : function(num){
if(typeof num !=='number'||isNaN(num))return;
var options = this.defaults,
self = это,
dataConfig = options.dataConfig;
//如果请求的分页数小于0就默认为0 如果打越最大分页数就默认为最大分页数
num>=options.totalPage
&&(num = options.totalPage-1);
num<0&&(num = 0);
//s为当前面板的第一页e为当前面板的最后
var basePage = options.count/options.perPage,
s = options.page*basePage,
e = s + basePage-1;
this.tbody.style.display = 'none';
this.loading_bg.style.display = '';;
this.loading.style.display = '';
setTimeout(function(){self.buildTbody(num);},10);
},
del : function(){
//做删除的时候需要有主键的索引我全部保存在tr的
var selectedRows = this.selectedRows,
arr = []
for(var name in selectedRows){
arr.push(selectedRows[name].getAttribute('dataIndex'));
}
alert('选择了主键值为'+arr.join(','));
},
theadOver : function(e){
var elem = e.target || E.srcelement;
if(elem.nodeName.toLowerCase() === 'div'){
$q('a',elem)[0].style.display = 'block';
addClass(elem,'theadfocus');
}
},
theadOut : function(e){
var elem = e.target || e.srcElement,
toElem = e.toElement||e.relatedTarget,
elemName = elem.nodeName.toLowerCase();
if(this.isMenuOpen && contains(this.isMenuOpen,elem))
возвращаться;
//如果离开了当前的td 隐藏显示出来的东西
if(elemName === 'div'&& elem !== this.isMenuOpen){
if(!contains(elem,toElem)){
$q('a',elem)[0].style.display = 'none';
removeClass(elem,'theadfocus');
}
}
if(elemName === 'a' || elemName ==='span' || elemName === 'p'){
var parent = elem.parentNode;
if(!contains(elem,toElem)){
$q('a',parent)[0].style.display = 'none';
removeClass(parent,'theadfocus');
}
}
},
menuClick : function(e){
var elem = e.target || e.srcElement,
className = this.isMenuOpen.className;
if(elem.nodeName.toLowerCase()==='a'){
//如果td的样式中不存在type 也就是说不需要排序则不进行排序阻止事件冒泡
if(!checkReg(className,'type')){
Sys.ie
? e.cancelBubble = true
: e.stopPropagation();
возвращаться;
}
//如果a标签的menuType
var menuOp = elem.getAttribute('menuType'),
sortOrder = checkReg(className,'sort');
//选择所有列不进行排序
if(menuOp==='columns')
возвращаться;
/*
如果没有排序就根据menuOp来进行排序
如果已排序且与menuOp排序方式不同则进行排序
*/
if(sortOrder){
if(menuOp != sortOrder){
var td = $q('td',this.thead)[this.isMenuOpen.getAttribute('clos')];
fireEvent(td,'click');
}
}еще{
this.ascSort = {
desc : false,
asc : true
}[menuOp];
var td = $q('td',this.thead)[this.isMenuOpen.getAttribute('clos')];
fireEvent(td,'click');
}
//完成上面的操作后设置成正序因为之后点别的列默认还是按正序列来排
this.ascSort = true;
}
},
menuOver : function(e){
var elem = e.target || E.srcelement;
if(elem.nodeName.toLowerCase()==='a'&&elem.getAttribute('menuType')==='columns'){
var pos = objPos(elem),
left = pos.left+Math.max(document.documentElement.scrollLeft,document.documentElement.scrollLeft) + elem.offsetWidth,
top = pos.top+Math.max(document.documentElement.scrollTop,document.documentElement.scrollTop);
setStyle(this.subPopMenu,{left:left+'px',top:top+'px',display:'block'});
}
},
subMenuClick : function(e){
var elem = e.target || e.srcElement,
isA = elem.nodeName.toLowerCase() === 'a';
Sys.ie
? e.cancelBubble = true
: e.stopPropagation();
if(isA||elem.nodeName.toLowerCase() === 'input'){
var input = isA
? $q('input',elem.parentNode)[0]
: elem,
clos = input.getAttribute('cols'),
self = this;
isA
&&(input.checked = (!input.checked));
var checked = input.checked,
hideOrShow = checked ? '' : 'никто';
//如果还剩一列并且这次是取消选中的
//则不执行隐藏
if(this.isShowTrs.num===1&&!checked){
input.checked = true;
return false;
}
Проверял
?(this.isShowTrs.num++,this.isShowTrs.clos[clos]=true)
:(this.isShowTrs.num--,this.isShowTrs.clos[clos]=false);
//如果实现了分组还必须把组tr的colSpan属性改变
this.showGroup
&&each(this.insertTrs,function(i,tr){
$q('td',tr)[0].setAttribute('colSpan',self.isShowTrs.num);
});
//显示或隐藏选中列
each(this.columns[clos],function(i,o){
o.style.display = hideOrShow;
});
var width = ~~this.columns[clos][0].getAttribute('width');
settimeout (function () {
Проверял
? self.table.setAttribute('width',~~self.table.getAttribute('width') + width)
: self.table.setAttribute('width',~~self.table.getAttribute('width') - width)
},0);
}
},
rowHighlight : function(e,isHight){
var elem = e.target || e.srcElement,
toElem = e.toElement||e.relatedTarget,
parent = elem.parentNode;
Sys.ie
? e.cancelBubble = true
: e.stopPropagation();
while(parent.nodeName.toLowerCase()!='tr'){
parent = parent.parentNode;
}
if(isHight&&hasClass(parent,'rowfocus'))
возвращаться;
//如果是分组的行tr 就返回
if(elem.nodeName.toLowerCase()==='td'&&parent.getAttribute('g')==='y')
возвращаться;
isHight
? addClass(parent,'rowfocus')
: removeClass(parent,'rowfocus');
},
selectRow : function(e){
var elem = e.target || E.srcelement;
if(elem.getAttribute('g')||elem.parentNode.getAttribute('g'))
возвращаться;
varself = this,
selectedRows = this.selectedRows,
lastSelectRow = this.lastSelectRow,
cellClick = false,
ctrlClick = false,
shiftClick = false;
if(elem.nodeName.toLowerCase() === 'td' ){
var parent = elem.parentNode,
className = parent.className,
options = this.defaults;
//按ctrl进行选择
if(e.ctrlKey===true){
index = checkReg(className,'select');
//选中那行的如果已经选中了就取消选中并且删除样式
//从this.selectedRows 中删除设置lastSelectRow={dom:null,index:null
if(hasClass(parent,'trfocus')){
if(index){
delete selectedRows[index];
removeClass(parent,'select-'+index);
removeClass(parent,'trfocus');
lastSelectRow.dom = lastSelectRow.index = null;
}
ctrlClick = false;
}еще{
selectedRows[++uuid] = parent;
addClass(parent,'trfocus ');
addClass(parent,'select-'+uuid);
ctrlClick = true;
}
}
//按住shift进行选择
if(e.shiftKey===true){
var lastDom;
if(lastSelectRow.dom===null){
shiftClick=true;
selectedRows[++uuid] = parent;
addClass(parent,'trfocus ');
addClass(parent,'select-'+uuid);
}еще{
var allRows = [];
//如果有分组个并所有的tr到一个数组
this.showGroup
? each(this.rows, function(i, o){
allRows = allRows.concat(o);
})
: allRows = this.rows;
each(allRows,function(i,o){
if(parent===o){
lastDom = {dom:o,index:i}
return false;
}
});
//清空掉之前所有选中tr的样式
each(selectedRows,function(i,o){
removeClass(o,'trfocus');
removeClass(o,'select-'+i);
delete selectedRows[i];
});
var len = Math.max(lastSelectRow.index,lastDom.index);
for(var i = Math.min(lastSelectRow.index,lastDom.index);i<=len;i++){
selectedRows[++uuid] = allRows[i];
addClass(allRows[i],'trfocus ');
addClass(allRows[i],'select-'+uuid);
}
}
}
//进行单选
if(e.ctrlKey===false&&e.shiftKey===false){
each(selectedRows,function(i,o){
removeClass(o,'trfocus');
removeClass(o,'select-'+i);
delete selectedRows[i];
});
selectedRows[++uuid] = parent;
addClass(parent,'trfocus');
addClass(parent,'select-'+uuid);
if(parent != lastSelectRow.dom)
cellClick=true;
}
// 点击后记录最后点击的行。
if(ctrlClick||cellClick||shiftClick){
var allRows = [];
//如果有分组个并所有的tr到一个数组
this.showGroup
? each(this.rows, function(i, o){allRows = allRows.concat(o);})
: allRows = this.rows;
//寻找parent的索引
each(allRows,function(i,o){
if(o===parent){
self.lastSelectRow.dom = o;
self.lastSelectRow.index = i;
return false;
}
});
}
}
},
dragWidth : function(e){
var elem = e.target || E.srcelement;
if(elem.nodeName.toLowerCase() === "p"){
/*
遍历当前选中的列的前面所有的列
如果没有或全部是隐藏的则返回
*/
for(var i=parseInt(elem.parentNode.parentNode.getAttribute('clos'))-1;i>=0;i--)
if(this.isShowTrs.clos[i]===true)break;
if(i<0)
возвращаться;
var options = this.defaults,
self = это,
widthConfig = options.widthConfig,
td = elem.parentNode.parentNode;
widthConfig.x = e.clientX;
widthConfig.td = td;
Sys.ie
? this.table.setCapture(false)
: e.preventDefault();
widthConfig.prevTd = this.columns[i][0];
widthConfig.tdWidth = ~~td.width;
widthConfig.prevWidth = ~~widthConfig.prevTd.width;
var height = Math.min(this.tabContainer.offsetHeight,this.table.offsetHeight),
scrollHeight = this.tabContainer.offsetHeight>=this.table.offsetHeight?0:18,
documentScrollLeft = doc.body.scrollLeft;
setStyle(this.line,{
left : e.clientX + doc.documentElement.scrollLeft + 'px',
height : height-scrollHeight +"px",
top : objPos(this.tabContainer).top+Math.max(document.documentElement.scrollTop,document.documentElement.scrollTop)+2+'px'
});
addListener(doc,'mousemove',bindAsEventListener(this,this.widthMove));
addListener(doc,'mouseup',bindAsEventListener(this,this.widthUp));
}
},
widthMove : function(e){
win.getSelection
? win.getSelection().removeAllRanges()
: doc.selection.empty();
var options = this.defaults,
widthConfig = options.widthConfig,
left = e.clientX,
clientX = left,
cellMinWidth = options.cellMinWidth;
if(clientX>widthConfig.x&&e.clientX - widthConfig.x>widthConfig.tdWidth-cellMinWidth){
left = widthConfig.x +widthConfig.tdWidth -cellMinWidth;
}
if(clientX<widthConfig.x&&widthConfig.x-clientX>widthConfig.prevWidth-cellMinWidth){
left = widthConfig.x - widthConfig.prevWidth +cellMinWidth;
}
setStyle(this.line,{
left : left + Math.max(document.documentElement.scrollLeft,document.body.scrollLeft)+"px",
display : "block"
});
},
widthUp : function(e){
this.line.style.display = 'none';
var widthConfig = this.defaults.widthConfig,
x = parseInt(this.line.style.left)- Math.max(doc.documentElement.scrollLeft,doc.body.scrollLeft) - widthConfig.x ;
widthConfig.prevTd.width = ~~widthConfig.prevWidth + x ;
widthConfig.td.width = ~~widthConfig.tdWidth -x;
Sys.ie && this.table.releaseCapture();
removeListener(doc,'mousemove');
removeListener(doc,'mouseup');
},
createInput : function(i,obj, parent){
var etd = $c('td',parent),
input = $c('input',etd),
type = obj.edit;
etd.width = obj.width
input.type = 'text';
input.setAttribute('index',i);
!тип
&&input.setAttribute('readonly','readonly')
etd.appendChild(input);
input.className ='x-form-text i_a';
setStyle(input,{
width : obj.width - 1 +'px',
background : 'white'
});
},
editRow : function(e){
var elem = e.target || e.srcElement,
self = это,
options = this.defaults,
nodeName = elem.nodeName.toLowerCase();
if(nodeName!=='td'){
while(elem.nodeName.toLowerCase()!=='td'){
elem = elem.parentNode;
}
}
var tr = elem.parentNode;
this.currentEditRow.index = tr.getAttribute('dataindex');
this.currentEditRow.dom = tr;
if(tr.getAttribute('g'))
возвращаться;
var sTop = ~~this.tabContainer.scrollTop,
sLeft = ~~this.tabContainer.scrollLeft,
cTds = $q('td',tr);
pTds = $q('td',$q('tr',this.editTable)[0]),
txt = Sys.ie?'innerText':'textContent';
setStyle(this.editForm,{
top : tr.offsetTop + 'px',
left : tr.offsetLeft + 'px',
отображать : ''
});
each(cTds,function(i,td){
$q('input',pTds[i])[0].value = td[txt];
});
},
modifyTr : function(e){
var elem = e.target || E.srcelement;
if(elem.nodeName.toLowerCase()==='a'){
var tds = $q('td',this.editTable),
txt = txt =Sys.ie?'innerText':'textContent',
isC = false;
if(elem.getAttribute('do')==='submit'){
alert('索引为'+this.currentEditRow.index)
}
this.editForm.style.display = 'none';
}
}
});
})(документ);
window.onload = function(){
var data ={
//total:'55',
данные : []
}
var s='阿斯达三大散打三个而个呃奋斗个我是地方我师父威尔地方威尔威尔威尔豆腐干沃尔与体育56 范甘迪威尔请问额请问散阿萨德b你吗吗吗阿斯zweas dqwesdf 阿凡达散打有人6 斯蒂芬与',
b = ['人民币','欧元','美元'],
n = ['张三','李四','王五','赵六','陈七','猪八']
each(new Array(3000),function(i,o){
data.data.push([i+1,n[i%5]+i,(i%3===0?'-':'')+parseInt(Math.random()*1000),b[i%2],'1984-05-27',s.substring(Math.random()*10,Math.random()*10+15)])
});
data5 = {
total: 11,
данные : [
{
groupName : '平安银行',
rows : [
[1,'平安银行一张同-账单','-29792.66','日元','1928-06-15','一般'],
[2,'平安银行信用卡-账单','26268.99','欧元','1950-04-14','一般'],
[3,'平安银行基金-账单','-84149.12','英磅','1927-05-08','一般'],
[4,'平安银行信用卡-账单','23782.40','欧元','1995-01-05','一般'],
[5,'平安银行国债-账单','-48355.53','人民币','1953-07-01','很好'],
[6,'平安银行信用卡-账单','14922.48','人民币','1954-08-04','一般'],
[7,'平安银行信用卡-账单','87252.78','人民币','1956-10-01','很好'],
[8,'平安银行基金-账单','-67287.72','英磅','1948-02-24','一般'],
[9,'平安银行基金-账单','-51724.44','美元','1943-09-11','很差']
]
},
{
groupName : '交通银行',
rows : [
[151,'交通银行一张同-账单','23062.39','英磅','1959-01-03','一般'],
[152,'交通银行信用卡-账单','10634.01','英磅','1967-09-23','很好'],
[153,'交通银行基金-账单','-69832.32','美元','2000-06-07','很差'],
[154,'交通银行信用卡-账单','-22260.14','英磅','1999-05-27','很差'],
[155,'交通银行国债-账单','92868.28','英磅','1911-01-03','一般'],
[156,'交通银行信用卡-账单','77059.80','英磅','1990-08-03','一般']
]
},
{
groupName : '渣打银行',
rows : [
[182,'渣打银行一张同-账单','26046.45','英磅','1923-01-22','很好'],
[183,'渣打银行信用卡-账单','-57036.21','欧元','1974-04-20','很差']
]
},
{
groupName : '浦发银行',
rows : [
[218,'渣打银行信用卡-账单','51027.86','日元','1970-01-08','很好'],
[219,'渣打银行基金-账单','-58048.75','英磅','1948-02-12','一般'],
[220,'渣打银行信用卡-账单','-79938.95','欧元','1957-11-22','很差'],
[221,'渣打银行国债-账单','-65972.99','欧元','1953-07-01','很差'],
[222,'渣打银行信用卡-账单','44483.17','欧元','2000-06-11','一般']
]
},
{
groupName : '招商银行',
rows : [
[238,'招商银行信用卡-账单','77695.90','美元','1919-09-20','很好'],
[239,'招商银行信用卡-账单','52517.41','欧元','1921-11-12','很好'],
[240,'招商银行基金-账单','-45174.21','欧元','1949-03-08','很差'],
[241,'招商银行信用卡-账单','-60409.65','英磅','1950-04-02','一般'],
[242,'招商银行国债-账单','32741.68','美元','2005-11-17','很差']
]
},
{
groupName : '农业银行',
rows : [
[430,'农业银行一张同-账单','23474.59','日元','1983-01-13','一般'],
[431,'农业银行信用卡-账单','-64526.95','日元','1952-06-10','很好'],
[432,'农业银行基金-账单','49975.19','美元','1975-05-18','一般']
]
}
]
}
function xx(v){
return ~~v<0
? '<span>'+v+'</span>'
: '<span>'+v+'</span>'
}
new easyGrid({
container : $$('demo'),
//主键名删除编辑的时候需要这个东西
primaryKey : 'id',
fields : [
{name:'序号',param:'id',type:'int',width:'100'},
{name:'名称',param:'name',type:'string',edit:'edit',width:'140'},
{name:'余额',param:'money',type:'float',edit:'edit',render:xx,width:'100'},
{name:'币种',param:'type',type:'string',edit:'edit',width:'100'},
{name:'日期',param:'date',type:'date',edit:'edit',width:'100'},
{name:'备注',param:'note',type:'string',width:'255'}
],
dataConfig : data,
//一页有多少条
perPage : 1000,
//当前在第几页
currPage : 0,
//一共多少页
totalPage : 0,
//一次请求多少条数据
count : 2000,
//第几版数据
page : 0
});
easyGrid.prototype.options.sortType.cp=function(v){
if(v==='很好')
return 3
if(v==='一般')
return 2
if(v==='很差')
return 1
}
new easyGrid({
container : $$('demo1'),
//主键名删除编辑的时候需要这个东西
primaryKey : 'id',
fields : [
{name:'序号',param:'id',type:'int',width:'100'},
{name:'名称',param:'name',type:'string',edit:'edit',width:'140'},
{name:'余额',param:'money',type:'float',edit:'edit',render:xx,width:'100'},
{name:'币种',param:'type',type:'string',edit:'edit',width:'100'},
{name:'日期',param:'date',type:'date',edit:'edit',width:'100'},
{name:'备注',param:'note',type:'cp',width:'255'}
],
dataConfig : data5,
//一页有多少条
perPage : 20,
//当前在第几页
currPage : 0,
//一共多少页
totalPage : 0,
//一次请求多少条数据
count : 2000,
//第几版数据
page : 0
});
};
</script>
</body>
</html>
水平有限请多指教