간단한 Datagrid
1. 사용자 정의 정렬 방법
2. 편집
3. 드래그 앤 드래그
4. Pagination
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>
<스타일 유형 = "텍스트/CSS">
*{마진 : 0; 패딩 : 0;}
.h {line-height : 20px;}
.c {Zoom : 1;}
.C : {content : "."이후; 디스플레이 : 블록; 높이 : 0; Clear : 둘 다; 가시성 : 숨겨진;}
.l {float : 왼쪽;}
.r {float : Right;}
ul {목록 스타일 : 없음;}
.demo {너비 : 832px; 높이 : 400px; 글꼴 크기 : 12px; 마진 : 20px 자동; 위치 : 상대}
.demo .m_a {마진-오른쪽 : 8px;}
.demo .NobReak {White-space : keep-all;*흰색 공간 : 정상; 텍스트-오버 플로우 : 엘립스, 오버플로 : 숨겨진; 높이 : 22px; 너비 : 100%;}
.demo .Container {
테두리 : 1px 고체 #99bbe8;
높이 : 자동;
}
.demo .i_a {테두리 : 1px solid #ccc; margin-top : 2px;}
.demo .t_a {Border-Left : 1px Solid #99bbe8; Border-Bottom : 1px solid #99bbe8;}
.DEMO .T_A TD {배경색 : #fff; 테두리-권리 : 1px Solid #CCC; Border-Top : 1PX Solid #CCC;}
.demo 테이블 td {
라인 높이 : 22px;
높이 : 20px;
}
.demo 테이블 thead .headfocus {
배경 : URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) 반복 -x 0 -163px;
}
.DEMO 테이블 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) 반복 -x 0 -300px;}
.demo .bar {_display : 인라인-블록; 선-높이 : 20px; 높이 : 20px; 테두리 : 1px 고체 #99bbe8; 배경 : URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) 반복 -x 0 -350px; 패딩 : 2px 0 2px 20px;}
.demo .f_a {색상 :#3B526E; 글꼴 중량 : BOLD;}
.demo .first_div, .demo .prev_div, .demo .next_div, .demo .last_div, .demo .first_div_no, .demo .prev_div_no, .demo .next_div_no, .demo .next_div_no, .demo .last_div_no {float : 왼쪽; 너비 : 18px; 높이 : 16px; 마진-탑 : 3px; 커서; 포인터; 디스플레이 : 블록; 마진-오른쪽 : 5px; 배경 : url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024)) no-retper)
.demo .first_div {배경 위치 : -12px -58px;}
.demo .first_div_no {배경 위치 : 4px -58px; 커서 : 정상}
.demo .prev_div {배경 위치 : -11px -78px;}
.demo .prev_div_no {배경 위치 : 5px -78px; 커서 : 정상}
.demo .next_div {배경 위치 : -65px -78px;}
.demo .next_div_no {배경 위치 : -49px -78px; 커서 : 정상}
.demo .last_div {배경 위치 : -67px -58px;}
.demo .last_div_no {배경 위치 : -51px -58px; 커서 : 정상}
.demo .rowfocus td {배경색 :#ebf2fb}
.demo .delbtn, .demo .delbtn : hover {back No-Repeat; 너비 : 45px; 텍스트-정렬 : 중심; 높이; 높이 : 20px; 색상 :#333; 디스플레이 : 블록; 텍스트-장식 : 없음; float : 왼쪽;}
.DEMO .DELBTN {배경 위치 : -55PX 0;}
.DEMO .DELBTN : 호버 {배경 위치 : -55px -30px; 색상 :#666}
.DEMO 테이블 {
글꼴 크기 : 12px;
테이블 레이 아웃 : 고정;
-moz-user select : -moz-none;
-webkit-user select : 없음;
-khtml-user-select : 없음;
}
.demo .TabContainer {
너비 : 99%;
오버플로 : 자동;
패딩 : 2px 0 0 2px;
배경색 :#fffbf7;
위치 : 상대;
}
.DEMO 테이블 THEAD TD {배경 : URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) 반복 -x 0-100px;}
.demo 테이블 thead a {
Z- 인덱스 : 1000;
배경색 :#c3daf9;
배경-이미지 : URL ( "http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png");
디스플레이 : 없음;
너비 : 12px;
높이 : 22px;
배경 위치 : 0-234px;
위치 : 절대;
상단 : 0;
오른쪽 : 0;
}
.DEMO 테이블 THEAD DIV {위치 : 상대; z- 안수 : 1;}
.DEMO 테이블 THEAD P {
너비 : 1px;
높이 : 22px;
배경색 :#99bbe8;
플로트 : 왼쪽;
디스플레이 : 블록;
커서 : e- 레지 크기;
마진 오른쪽 : 2px;
}
.demo 테이블 tr.trfocus td {
배경색 :#EBF2FB
}
.demo div table, .demo div table tr, .demo div table tr td {
-moz-user select : -moz-none;
-webkit-user select : 없음;
}
.demo table tr td {배경색 : #fff; 오버플로 : 숨겨진; 텍스트 오버 플로우 : 일방시스; 화이트 공간 : Nowrap;}
.demo .loading {위치 : 절대; z- 안수 : 9999; 왼쪽 : 0; 상단 : 0; 배경 :#e5e5e5; 필터 : 알파 (불투명도 = 50); 불투명도 : 0.5;-양의 능력 : 0.5; -khtml-opacity : 0.5;}
.demo .loaddiv {위치 : 절대; z- 인덱스 : 99999; 너비 : 98px; 높이 : 28px; 테두리 : 1px solid #6593cf; 배경 : #fff url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajajaxtable.png) -300px; 패딩 : 2px;}
.demo .loadgif {배경 : #fff url (images/loading_small.gif) no-Repeat 4px 5px; 패딩 : 5px 0 0 27px; 너비 : 68px; 높이 : 21px; 테두리 : 1px 솔리드 #6593cf;}
.demo .loadText {color :#000;}
.demo .edittable {테두리 : 1px 고체 #c4c4c4;}
.demo .edittable td {배경 :#ebf2fb; 높이 : 24px;}
.demo .editbtn {패딩 : 5px; 너비 : 100px; 마진 : 0 자동; 배경 : #ebf2fb; 테두리 : 1px solid #c4c4c4; 테두리 : 없음;}
.demo .delbtn, .ajaxtable .delbtn : hover {back No-Repeat; 너비 : 45px; 텍스트-정렬 : 중심; 높이; 높이 : 20px; 색상 :#333; 디스플레이 : 블록; 텍스트-장식 : 없음; float : 왼쪽;}
.DEMO .DELBTN {배경 위치 : -55PX 0;}
.DEMO .DELBTN : 호버 {배경 위치 : -55px -30px; 색상 :#666}
.demo .btn_a, .ajaxtable .btn_a : hover {cursor : pointer; background : url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) No-Repeat; Text-Align : Center; Padding-Top : 5px; 너비 : 45px; 높이 : 17px; 디스플레이 : 블록; 플로트 : 왼쪽; 커서 : 포인터; 텍스트 결정 : 없음;}
.DEMO .BTN_A {배경 위치 : 0 0; 색상 :#333;}
.DEMO .BTN_A : 호버 {배경 위치 : 0 -30px; 색상 :#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) 반복 Y #f0f0f0;
국경 : 1px 고체 #718bb7;
너비 : 134px;
디스플레이 : 없음;
}
.x-menu .disabled a {
색상 :#999;
}
.x-menu-list {패딩 : 2px; 오버플로 : 숨겨진; 여백 : 0;}
.x-menu-list li {패딩 : 1px; 흰색 공간 : Nowrap; 높이 : 20px;}
.x-menu-list li.focus {backround :#09f;}
ax-menu-item {
디스플레이 : 블록;
커서 : 포인터;
라인 높이 : 18px;
높이 : 20px;
개요 색상 : -Moz 사용 텍스트 컬러;
개요 스타일 : 없음;
개요 넓이 : 0;
너비 : 100px;
왼쪽 패딩 : 27px;
위치 : 상대;
텍스트 결정 : 없음;
흰색 공간 : Nowrap;
글꼴 크기 : 12px;
색상 :#222;
}
ax-m_a {padding-left : 8px; 너비 : 120px;}
AX-MENU-ITEM 입력 {마진 오른쪽 : 8px}
AX-MENU-ITEM : 호버 {배경색 :#D9E8FB}
.AC {배경 : URL (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no -Repeat -53px -218px;}
.desc {배경 : url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no -repeat -53px -243px;}
.columns {배경 : url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no -Repeat -53px -268px;}
.submenu {
위치 : 절대;
Z- 인덱스 : 1500;
배경 :#f0f0f0;
국경 : 1px 고체 #718bb7;
너비 : 134px;
디스플레이 : 없음;
}
.x-menu-list .child-menu {배경 : url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no-Repeat right -444px;}
ax-m_a {padding-left : 8px; 너비 : 120px;}
AX-MENU-ITEM 입력 {마진 오른쪽 : 8px}
AX-MENU-ITEM : 호버 {배경색 :#D9E8FB}
.선{
너비 : 1px; 배경색 : #CCCCCC; 위치 : 절대; 디스플레이 : 없음; Z- 인덱스 : 100;
}
.빨간색{
색상 :#FF0000;
}
.탐욕{
색상 :#33ff00;
}
</스타일>
</head>
<body>
1. 사용자 정의 정렬 방법
<br>
2. 편집
<br>
3. 드래그 앤 드래그
<br>
4. Pagination
<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">
(함수 (doc, undefined) {
var win = 이것;
win.sys = function (ua) {
var b = {
IE : /msie/.test(ua) &&! /opera/.test (ua),
오페라 : /opera/.test(ua),
safari : /webkit/.test(ua) &&! /chrome/.test (ua),
Firefox : /Firefox/.test(ua),
Chrome : /chrome/.test(ua)
}, vmark = "";
for (b in b in b) {
if (b [i]) {vmark = "safari"== i? "버전": i; 부서지다; }
}
b.version = vmark && regexp ( "(? :" + vmark + ") [/// :] ([// d.] +)"). Test (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 ( "backgroundimagecache", false, true);
승리. $$ = function (id) {
return typeof id === 'string'
? doc.getElementByid (id)
: ID;
};
win. $ q = 함수 (이름, 부모) {
return parent.getEmentsByTagName (이름);
}
win. $ c = 함수 (이름, 부모) {
var elem = typeof name === '객체'? 이름 : 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 핸들러 = Element.Events [e], 유형;
if (fn) {
for (핸들러 입력)
if (핸들러 [type] === fn) {
요소 .removeEventListener? element.removeEventListener (e, fn, false) : element.detachevent ( "on" + e, fn);
핸들러 삭제 [유형];
}
}또 다른{
for (핸들러 입력) {
요소 .removeEventListener? element.removeEventListener (e, 핸들러 [type], false) : element.detacheVent ( "on" + e, 핸들러 [type]);
핸들러 삭제 [유형];
}
}
};
win.fireevent = function (element, eventName) {
if (element [eventName]) {
요소 [EventName] ();
} else if (element.fireevent) {
요소 .fireevent ( 'on'+eventName);
} else if (doc.createevent) {
var evt = doc.createevent ( "mouseevents");
evt.initevent (EventName, True, True);
요소 .dispatchevent (EVT);
}
};
win.setstyle = function (Elems, Style, Value) {
if (! elems.length) elems = [Elems];
if (typeof Style == "String") {
style = value === 정의되지 않은? {csstext : style} :( function (o) {
return (o [style] = value, o);
}) ({});
};
각각 (elems, function (i, elem, style) {
var value, name, ie = sys.ie;
for (스타일의 이름) {
값 = 스타일 [이름];
if (name === "불투명도"&& IE) {
elem.style.filter = (elem.currentStyle.filter || "") .replace (/alpha/([^)] */)/, ") +"alpha (incacity = " + value * 100 +");
} else if (name === "float") {
Elem.style [즉,? "StyleFloat": "CSSFLOAT"] = value;
}또 다른{
name = name.replace (/-([az]))/ig, function (all, letter) {
return letter.toupperCase ();
});
elem.style [name] = value;
}
}
}, 스타일);
};
win.setattr = function (dom, attr) {
if (typeof attr! == 'object')
반품;
for (art in artm)
dom.setattribute (이름, attr [name]);
}
var slice = array.prototype.slice;
win.bind = 함수 (객체, 재미) {
var args = slice.call (인수) .slice (2);
return function () {
return fun.apply (Object, Args);
};
};
win.bindaseventListener = 함수 (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") {
딥 = 대상;
대상 = 인수 [1] || {};
i = 2;
}
if (taptions tarting! == "object"&& 객체 .prototype.tostring.call (target)! = "[객체 함수]")
대상 = {};
for (; i <length; i ++) {
if ((옵션 = 인수 [i])! = null)
for (옵션의 var name) {
var src = target [name], copy = 옵션 [이름];
if (target === Copy)
계속하다;
if (deep && copy && typeof copy === "object"&&! copy.nodetype) {
대상 [name] = arguments.callee (deep, src || (copy.length! = null? [] : {}), copy);
}
else if (copy! == 정의되지 않은)
대상 [이름] = 복사;
}
}
반환 대상;
};
win.class = 함수 (속성) {
var _class = function () {
return (인수 [0]! == null && this.initialize && typeof (this.initialize) == 'function')
? this.initialize.apply (this, arguments)
: 이것;
};
_class.prototype = 속성;
반환 _class;
};
win.each = 함수 (객체, 콜백, args) {
var name, i = 0, 길이 = 객체 .length;
if (args) {
args = array.prototype.slice.call (arguments) .slice (2);
if (length === 정의되지 않은) {
for (객체의 이름)
if (callback.apply (Object [name], [name, object [name]]. concat (args)) === 거짓)
부서지다;
} 또 다른
for (; i <길이; i ++)
if (callback.apply (Object [i], [i, 객체 [i]]. concat (args)) === 거짓) //
부서지다;
} 또 다른 {
if (length === 정의되지 않은) {
for (객체의 이름)
if (callback.call (개체 [이름], 이름, 개체 [이름]) === 거짓)
부서지다;
} 또 다른
for (var value = Object [0];
i <longth && callback.call (value, i, value)! == false; value = Object [++ i]) {}
}
리턴 객체;
};
win.currentStyle = function (요소) {
반환 요소 .CurrentStyle || Doc.DefaultView.GetComputedStyle (요소, NULL);
};
win.objpos = function (elem) {
var 왼쪽 = 0, 상단 = 0, 오른쪽 = 0, 하단 = 0, doc = elem? elem. onerdocument : 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 ();
왼쪽 = right = doc.documentElement.scrollleft || Doc.body.scrollleft;
상단 = 하단 = doc.documentElement.scrollleft || Doc.body.scrollleft;
왼쪽 += rect.left; 오른쪽 += rect.right;
상단 += rect.top; 하단 += rect.bottom;
}
반환 { "왼쪽": 왼쪽, "상단": 상단, "오른쪽": 오른쪽, "하단": 하단};
};
win.contains = function (k, j) {
return document.comparedocumentPosition을 반환합니다
? k.comparedocumentPosition (J) & 16
: k! == j && k.contains (j);
};
win.hasclass = function (요소, classname) {
return emplic.classname.match (새 regexp ( '(// s |^)'+className+'(// s | $)');
};
win.addclass = function (요소, classname) {
if (! win.hasclass (요소, classname))
요소 .className.replace (// s/g, '') === ''
? 요소 .className = className
: element.className+= ""+className;
};
win.removeclass = function (요소, classname) {
win.hasclass (element, classname) && (element.classname = element.classname.replace (new regexp ( '(// s*|^)'+className+'(// s*| $)', ''));
}
})(문서);
(함수 (doc, undefined) {
var win = this,
uuid = -1;
/*
문자열에 키가 있는지 확인하십시오
있고 열쇠가 뒤 따르는 경우 - 반환 - 나중에 무언가를 반환합니다.
검출이 False를 반환하지 않습니다
*/
함수 checkreg (str, key) {
var reg = new regexp ( '(? :^| // s)'+key+'// b-? (.*?) (? : // s | $)', 'i');
if (reg.exec (str)! = null) {
반환 regexp. $ 1 === ''? true : regexp. $ 1;
}또 다른{
거짓을 반환합니다.
}
};
/*
문자열의 키에 해당하는 값 수정
*/
함수 수정 (str, key, value) {
var reg = new regexp ( '(^| // s) ('+key+'// b-).*? (// s | $)', 'i');
Return str.replace (Reg, '$ 1 $ 2'+Value+'$ 3');
};
win.easygrid = 새로운 클래스 ({{
옵션 : {
PORPAGE : 10,
Curpage : 0,
TotalPage : 0,
수 : 10,
페이지 : 0,
isedit : false,
widthconfig : {
TD : NULL,
prevtd : null,
x : 0,
tdwidth : 0,
prevwidth : 0
},
Cellminwidth : 50,
SortType : {
int : 함수 (v) {return parseint (v)},
float : function (v) {return parsefloat (v)},
날짜 : function (v) {return v.toString ()},
문자열 : 함수 (v) {return v.toString ()}
},
제목 : '제목'
},
초기화 : 함수 (옵션) {
var op = extend (true, {}, this.options),
옵션 = this.defaults = Extend (OP, 옵션),
컨테이너 = this.container = $ c ( 'div', 옵션 .container),
DataConfig = 옵션 .dataconfig,
title = $ c ( 'div', 컨테이너);
container.className = '컨테이너';
title.innerhtml = 옵션 .Title;
title.className = 'title';
this.primarykey = 옵션 .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> <입력 유형 = "text"/> </div> <div> </div> <a href = "javaScript :;" page = "pre"> </a> <a href = "javaScript :;" page = "end"> </a> <div> <a href = "javaScript :;" go = "go"> 점프 </a> <a href = "javaScript :;" del="del">Delete</a><div>The current page has a total of one page, and one piece of data, 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 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 데이터 및 총 1 개의 데이터 및 총 1 개의 데이터,
var tabcontainer = this.tabcontainer = $ c ( 'div', 컨테이너);
this.bottom = $ c (this.top.clonenode (true), 컨테이너);
tabcontainer.classname = 'tabcontainer';
tabcontainer.style.height = ~~ 옵션 .container.offsetheight -83+'px';
var table = this.table = $ c ( '테이블', tabcontainer);
table.classname = 't_a';
setattr (표, {cellPadding : "0", 셀 패싱 : "0", 테두리 : "0"});
this.tead = $ c ( '머리', 테이블);
this.tbody = $ c ( 'tbody', 테이블);
this.tbody.style.display = 'none';
//로드
this.loading_bg = $ c ( 'div', 컨테이너);
this.loading_bg.classname = '로드';
setstyle (this.loading_bg, {
너비 : 컨테이너 .offsetWidth+2+'PX',
높이 : 컨테이너 .offsetheight+2+'px'
});
this.loading = $ c ( 'div', 컨테이너);
this.loading.classname = 'loaddiv'
setstyle (this.loading, {
왼쪽 : (container.offsetWidth/2-45) + 'px',
상단 : (Container.offSetheight/2-14) + 'PX'
});
this.loading.innerhtml = '<div> 로딩 ... </div>';
// 테이블에 몇 개의 열이 있습니다
this.colcount = 옵션 .fields.length;
// 데이터 소스 양식은 [[], [], [], [], []]입니다.
this.data = [];
// 현재 요청 된 데이터 소스의 모든 그룹 헤더 양식은 [Trom1, Trom2]입니다.
this.grouphead = [];
// 테이블에 삽입 된 그룹의 TR [TR1, TR2, TR3]을 기록합니다.
this.inserttrs = [];
// 열 인덱스
// 형태 [[TD11, TD12, TD13, TD14], [TD21, TD22, TD23, TD24]]
this.columns = [];
// true는 긍정적 순서를 의미합니다 거짓은 역 순서를 의미합니다
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 = 'submenu';
// 테이블 헤더의 첫 번째 레벨 팝업 레이어가 열려 있는지 여부. 그것이 열리면 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.currentEditrow = {index : 0, dom : null};
this.editdata = [];
this.editform = $ c ( 'div', tabcontainer) ;;
setstyle (this.editform, {
위치 : '절대',
디스플레이 : 'None',
'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 = '센터';
btnc.innerhtml = '<div> <a do = "제출"href = "javaScript :;"> 제출 </a> <a do = "cance"href = "javaScript :;"> 취소 </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', 옵션 .fields.length);
var theadtr = $ c ( 'tr', this.head),
twidth = 0,
self = this,
ul = $ c ( 'ul', this.subpopmenu),
리;
각각 (옵션 .fields, function (i, o) {
var td = $ c ( 'td', headtr),
너비 = O.Width? O.Width : '80 ',
div = i === 0? '<div>': '<div> <p> </p>';
td.innerhtml = [div, '<span>', o.name, '</span> <a href = "javaScript :;"> </a> </div>']. join ( '');
statttr (td, {clos : i, 너비 : 너비, 비 선택 : 'on', 'class': o.type === 정의되지 않은? '': 'type-'+o.type});
self.createInput (i, o, etr);
twidth = twidth + (~~ 너비);
li = $ c ( 'li', ul);
li.innerhtml = [
'<a href = "JavaScript :;" > <입력 유형 = "checkbox"checked = "true"cols = " ',
나,
' "/>',
O. 이름,
'</a>'
].가입하다('');
// 열 인덱스에서 각 열의 첫 번째 항목 생성
self.columns [i] = [td];
$ c ( 'td', self.copytr) .setAttribute ( '선택할 수없는', 'on');
// 열 인덱스 계산과 총 열 NUM
self.isshowtrs.num ++;
self.isshowtrs.clos [i] = true;
});
setattr (this.table, {너비 : twidth+옵션 .fields.length+1})
// TRE를 생성하여 TBody는 Perpage에 따라 TR을 생성합니다. 현재 사용 가능한 데이터 수를 보여주는 구성 항목입니다.
var i = 0,
trslen = 옵션 .perpage,
frag = doc.createdocumentfragment (),
arr = new Array (옵션 .fields.length),
Tr,
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, this.dragwidth));
/*
정렬을 위해 팝업 레이어 클릭 이벤트를 바인딩합니다
열을 숨기려는 레벨 2 메뉴 바인딩
*/
AddListener (this.popmenu, 'click', bindaseventListener (this, this.menuclick));
AddListener (this.popmenu, 'mouseover', bindaseventListener (this, this.Menuover));
AddListener (this.subpopmenu, 'click', bindaseventListener (this, this.submenuclick));
/*
테이블 행을 켜고 두껍게됩니다
*/
AddListener (this.tbody, 'mousemove', bindaseventListener (this, 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, 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 옵션 = this.defaults,
self = this,
totla = 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) {
// this.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
? 데이터
: this.data.length
: this.data.length;
this.writemessage (총);
this.buildtbody (옵션 .currpage);
},
BuildTbody : 함수 (pagenum) {
if (this.data.length === 0) {
this.tbody.style.display = 'none';
반품;
}
var i = 0,
J = 0,
self = this,
data = this.data,
옵션 = this.defaults,
trslen = 옵션 .perpage,
tdslen = 옵션 .fields.length,
tbody = this.tbody,
trs = tbody.getElementsByTagName ( 'tr'),
start = pagenum*옵션 .perpage,
Tr;
this.rows.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;
// 채우기 데이터를 this.rows로 전송합니다
var num = -1;
for (; i <trslen; i ++) {
tr = trs [i];
// 데이터가 없으면 나머지 행을 숨기기 시작합니다.
if (! data [i+start]) {
tr.style.display = 'none';
계속하다;
}
// 데이터의 데이터가
tr.setattribute ( 'dataindex', i+start);
tr.style.display = '블록';
tds = tr.getElementsByTagName ( 'td');
// x는 그룹의 다른 그룹 그룹을 식별하는 것입니다.
var x = data [i+start] [data [i+start] .length-1];
// 후속 데이터와 이전 데이터가 동일한 그룹에 있는지 확인하는 데 사용됩니다.
// 동일한 그룹 인 경우 this.rows의 마지막 열을 추가하십시오.
// 그룹이 아닌 열을 만듭니다.
num == x
? this.rows [this.rows.length-1] .push (tr)
: (this.rows [this.rows.length] = [tr], num = x);
// 배열을 사용하여 각 그룹의 첫 번째 TR의 위치를 기억하기 위해 TR 헤더 i가 나중에 삽입되기 때문에 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 = 옵션 .fields [j] .Render;
td.innerhtml = render
? 렌더 (txt)
: 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.setattribute ( 'dataindex', i+start);
this.rows.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 = 옵션 .fields [j] .Render;
tds [j] .innerhtml = render
? 렌더 (txt)
: txt;
}
}
}
옵션 .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 (옵션 .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 (옵션 .currpage+1 === 옵션 .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 : 함수 (총) {
var 옵션 = this.defaults,
Base = Total/Options.perpage,
topspans = this.top.getElementsByTagName ( 'span'),
BottomSpans = this.bottom.getElementsByTagName ( 'span');
옵션 .totalpage = base> parseint (base)
? parseint (기본) +1
: 기본;
BottomSpans [0] .innerhtml = topspans [0] .innerhtml = ~~ 옵션 .currpage+1;
BottomSpans [1] .innerhtml = topspans [1] .innerhtml = 옵션 .totalpage;
BottomSpans [2] .innerhtml = topspans [2] .innerhtml = 옵션 .perpage;
BottomSpans [3] .innerhtml = topspans [3] .innerhtml = Total;
},
Sorttable : 함수 (e) {
var elem = e.target || e.srcelement,
self = this,
옵션 = this.defaults,
elemname = elem.nodename.tolowercase (),
Showgroup = this.showgroup,
tdelem = Elem,
이름 = elemname;
// 드래그 할 때 클릭이 트리거 될 수 있습니다. 그 이유는 IE의 모든 코드가 this.table에 바인딩되기 때문입니다. 드래그 앤 드롭을 참조하십시오.
if ($ q ( 'td', elem) .length> 1)
반품;
if (name! == '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) {
// 그룹화가 있으며, 각 그룹은 별도로 반전되고 그룹화되지 않으며 직접 반전됩니다.
쇼 그룹
? 각 (this.rows, function (i, o) {O.reverse ();})
: this.rows.reverse ();
tdelem.classname = modify (tdelem.classname, 'sort', issort === 'asc'? 'desc': 'asc');
}또 다른{
쇼 그룹
? 각각 (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');
}또 다른{
// 바이스 정렬은 원래 정렬을 뒤집고 정렬 플래그를 추가합니다.
쇼 그룹
? 각 (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);
쇼 그룹
? 각 (arr, function (idx, obj) {frag.appendchild (obj);})
: Frag.AppendChild (TR);
});
this.tbody.appendChild (Frag);
this.sortcolumn = tdelem;
}
// -----------------------------------------------------------------------------------------------
/*
헤더의 A 태그를 클릭하면 메뉴가 나타납니다.
*/
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),
왼쪽 = 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이 true 인 경우 레이어가 열려 있고 근접 관련 처리의 실행이 수행됩니다.
this.ismenuopen && documentclick ();
if (! checkreg (td.className, 'type')) {
AddClass (Lis [0], 'Disabled');
AddClass (Lis [1], 'Disabled');
}또 다른{
removeClass (LIS [0], '비활성화');
RemoveClass (LIS [1], '장애인');
}
Sys.ie
? e.cancelbubble = true
: e.StopPropagation ();
// 레이어를 표시 할 때 TD가 this.ismenuopen에 첨부됩니다.
this.ismenuopen = td;
AddListener (Document, 'Click', DocumentClick);
setstyle (this.popmenu, {
왼쪽 : 왼쪽+'px',
상단 : Top+'PX',
디스플레이 : '블록'
});
}
},
비교 : 함수 (n, type) {
var sorttype = this.defaults.sorttype,
txt = sys.ie? 'InnerText': 'TextContent';
! sorttype [type] && (type = 'string');
반환 함수 (a1, a2) {
a1 = sorttype [type] (a1.cells [n] [txt]);
a2 = sorttype [type] (a2.cells [n] [txt]);
반환 a1 == a2? 0 : a1 <a2? 1 : -1;
}
},
PageBarClick : function (e) {
varelem = e.target || e.srcelement,
옵션 = 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 = this,
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 ? '' : 'none';
//如果还剩一列并且这次是取消选中的
//则不执行隐藏
if(this.isShowTrs.num===1&&!checked){
input.checked = true;
거짓을 반환합니다.
}
checked
?(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(){
checked
? 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}
거짓을 반환합니다.
}
});
//清空掉之前所有选中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;
거짓을 반환합니다.
}
});
}
}
},
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 = this,
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);
!type
&&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 = this,
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',
display : ''
});
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';
}
}
});
})(document);
window.onload = function(){
var data ={
//total:'55',
data : []
}
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,
data : [
{
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
});
};
</스크립트>
</body>
</html>
水平有限请多指教