単純なデータグリッド
1.カスタムソートメソッド
2.Edit
3。ドラッグとドラッグ
4。ページネーション
5。シングル選択複数選択（CTRL）線形選択（シフト）
6.テキストレンダリングは、たとえば0を超える、赤または0未満、緑のテキストを色付けすることです。
7。列ディスプレイを非表示にします
8。グループ化
背景に言い訳がない例です
実際、いくつかのコールバックを書くことができます。内部には、結果が返されるまで表示できるロードバーがあります。
コードコピーは次のとおりです。
<！doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title>表</title>
<style type = "text/css">
*{マージン：0;パディング：0;}
.h {line-height：20px;}
.C {Zoom：1;}
.c：after {content： "。";表示：ブロック;高さ：0;クリア：両方;可視性：非表示;}
.l {float：left;}
.r {float：右;}
ul {list-style：none;}
.demo {width：832px;高さ：400px; font-size：12px;マージン：20px Auto;位置：相対}
.demo .m_a {margin-right：8px;}
.demo .nobreak {white-space：keep-all;*white-space：normal; text-overflow：ellipsis; overflow：hidden; height：22px; width：100％;}
.demo .container {
境界線：1pxソリッド＃99bbe8;
高さ：自動;
}
.demo .i_a {border：1px solid #ccc; margin-top：2px;}
.demo .t_a {border-left：1px solid＃99bbe8; border-bottom：1px solid＃99bbe8;}
.demo .t_a td {background-color：#fff; border-right：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）Repeat -X 0 -163px;
}
.demoテーブルthead td {
オーバーフロー：隠し;
}
.demo .t_a tbody td {padding-left：8px;}
.demo .title {height：24px;ラインハイト：22px; font-weight：bold;パディング左：20px;色：＃666666;背景：url（http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png）Repeat -X 0 -300px;}
.demo .bar {_display：inline-block; line-height：20px;高さ：20px;ボーダートップ：1pxソリッド＃99bbe8;背景：url（http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png）Repeat -x 0 -350px;パディング：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 .demo .first_div_no、.demo .prev_div_no、.demo .next_div_no .last_div_no {float：left; width：18px; height：16px; margin-top：3px; cursor：pointer; display：block; block; block; background：url（http://images.cnblogs.com/cnblogs_com/wtcsy/294024/-repiet.aby exexable
.demo .first_div {background -position：-12px -58px;}
.demo .first_div_no {background -position：4px -58px; cursor：normal}
.demo .prev_div {background-position：-11px -78px;}
.demo .prev_div_no {background -position：5px -78px; cursor：normal}
.demo .next_div {background-position：-65px -78px;}
.demo .next_div_no {background-position：-49px -78px;カーソル：通常}
.demo .last_div {background-position：-67px -58px;}
.demo .last_div_no {background-position：-51px -58px; cursor：normal}
.demo .rowfocus td {background-color：＃ebf2fb}
.demo .delbtn、.demo .delbtn：hover {background：url（http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png）ノーリピート;幅：45px;テキストアリグイン：中央;高さ：20px;色：＃333;ディスプレイ：ブロック;テキストゼロ：なし;フロート：左;}
.demo .delbtn {background-position：-55px 0;}
.demo .delbtn：hover {background-position：-55px -30px; color：＃666}
.demoテーブル{
フォントサイズ：12px;
Table-layout：修正;
-moz-user-select：-moz-none;
-webkit-user-select：none;
-khtml-user-select：none;
}
.demo .tabcontainer {
幅：99％;
オーバーフロー：自動;
パディング：2px 0 0 2px;
バックグラウンドカラー：＃fffbf7;
位置：相対;
}
.demoテーブルThead td {background：url（http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png）Reprey-x 0 -100px;}
.demoテーブルa {
z-index：1000;
バックグラウンドカラー：＃c3daf9;
背景 - イメージ：url（ "http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png"）;
表示：なし;
幅：12px;
高さ：22px;
バックグラウンドポジション：0 -234px;
位置：絶対;
上：0;
右：0;
}
.demoテーブルthead div {position：relative; z-index：1;}
.demoテーブルthead p {
幅：1px;
高さ：22px;
バックグラウンドカラー：＃99bbe8;
フロート：左;
表示：ブロック;
カーソル：e-resize;
マージン右：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：none;
}
.demoテーブルTr td {background-color：#fff;オーバーフロー：隠し;テキストオーバーフロー：省略記号;ホワイトスペース：nowrap;}
.demo .loading {position：aspolute：absolute; z-index：9999; left：0; top：0; background：＃e5e5e5; filter：alpha（ofacity = 50）; ofacity：0.5; -moz-opacacity：0.5; -khtml-opacacity：0.5;}
.demo .loaddiv {position：absolute; z-index：99999; width：98px; height：28px; border：1px solid＃6593cf; background：#fff url（http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r-r_a -300px;パディング：2px;}
.demo .loadgif {background：#fff url（images/loading_small.gif）No-Repeat 4px 5px;パディング：5px 0 0 27px;幅：68px; height：21px; border：1px solid＃6593cf;}
.demo .loadtext {color：＃000;}
.demo .edittable {border：1px solid＃c4c4c4;}
.demo .edittable td {background：＃ebf2fb; height：24px;}
.demo .editbtn {padding：5px; width：100px; margin：0 auto; background：＃ebf2fb; border：1px solid＃c4c4c4; border-top：none;}
.demo .delbtn、.ajaxtable .delbtn：hover {background：url（http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png）ノーリピート;幅：45px;テキストアリグイン：中央;高さ：20px;色：＃333;ディスプレイ：ブロック;テキストゼロ：なし;フロート：左;}
.demo .delbtn {background-position：-55px 0;}
.demo .delbtn：hover {background-position：-55px -30px; color：＃666}
.demo .btn_a、.ajaxtable .btn_a：hover {cursor：cursor：pointer; background：url（http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png） NO-Repeat; Text-Align：Center; Padding-Top：5px; width：45px; height：17px; display：block; float：left; cursor：pointer; text-decoration：none;}
.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）
}
.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）
}
.x-menu {
位置：絶対;
背景：url（menu.gif）Repeat-y＃f0f0f0;
境界線：1pxソリッド＃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;
アウトラインカラー：-moz-use-text-color;
アウトラインスタイル：なし;
アウトラインウィッド：0;
幅：100px;
パディング左：27px;
位置：相対;
テキスト装置：なし;
ホワイトスペース：nowrap;
フォントサイズ：12px;
色：＃222;
}
ax-m_a {padding-left：8px; width：120px;}
ax-menu-item input {margin-right：8px}
ax-menu-item：hover {background-color：＃d9e8fb}
.asc {background：url（http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png）no -repeat -53px -218px;}
.desc {background：url（http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png）no -repeat -53px -243px;}
.columns {background：url（http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png）no -repeat -53px -268px;}
.submenu {
位置：絶対;
Z-Index：1500;
背景：＃f0f0f0;
境界線：1pxソリッド＃718bb7;
幅：134px;
表示：なし;
}
.x-menu-list .child-menu {background：url（http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png）No-Repeat Right -444px;}
ax-m_a {padding-left：8px; width：120px;}
ax-menu-item input {margin-right：8px}
ax-menu-item：hover {background-color：＃d9e8fb}
。ライン{
幅：1px; background-color：#cccccc; position：absolute; display：none; z-index：100;
}
。赤{
色：＃ff0000;
}
。貪欲{
色：＃33ff00;
}
</style>
</head>
<body>
1.カスタムソートメソッド
<br>
2.Edit
<br>
3。ドラッグとドラッグ
<br>
4。ページネーション
<br>
5。シングル選択複数選択（CTRL）線形選択（シフト）
<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、undefined）{
var win = this;
win.sys = function（ua）{
var b = {
ie：/msie/.test(uua）&&！/pera/.test（ua）、
Opera：/pera/.test(uua）、
safari：/webkit/.test(uua）&&！/chrome/.test（ua）、
firefox：/firefox/.test(uua）、
Chrome： /chrome/.test(uua）
}、vmark = "";
for（b in bin）{
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）;
win。$$ = function（id）{
return typeof id === 'string'
？ doc.getelementbyid（id）
：id;
};
win。$ q = function（name、parent）{
return parent.getElementsByTagname（name）;
}
win。$ c = function（name、warent）{
var elem = typeof name === 'object'？名前：doc.createelement（name）;
親&& parent.AppendChild（Elem）;
エレムを返します。
};
win.addlistener = function（element、e、fn）{
！element.events &&（element.events = {}）;
Element.Events [e] &&（element.events [e] [addlistener.guid ++] = fn）||（ement.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]、type;
if（fn）{
for（ハンドラーを入力）
if（handlers [type] === fn）{
element.RemoveEventListener？element.RemoveEventListener（e、fn、false）：element.detachevent（ "on" + e、fn）;
ハンドラーを削除[タイプ];
}
}それ以外{
for（タイプインハンドラー）{
element.RemoveEventListener？element.RemoveEventListener（e、handlers [type]、false）：element.detachevent（ "on" + e、handlers [type]）;
ハンドラーを削除[タイプ];
}
}
};
win.fireevent = function（element、eventname）{
if（element [eventname]）{
要素[eventName]（）;
} else if（element.fireevent）{
element.fireevent（ 'on'+eventname）;
} else if（doc.createevent）{
var evt = doc.createevent（ "mousevents"）;
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 === undefined？{csstext：style} :( function（o）{
return（o [style] = value、o）;
}）（{}）;
};
それぞれ（elems、function（i、elem、style）{
var値、name、ie = sys.ie;
for（名前のスタイル）{
value = style [name];
if（name === "ofacity" && ie）{
elem.style.filter =（elem.currentstyle.filter || ""）.replace（/alpha/（[^）] */）/、 ""） + "alpha（opacity =" + value * 100 + "）";
} else if（name === "float"）{
Elem.Style [IE？ "stylefloat"： "cssfloat"] = value;
}それ以外{
name = name.replace（/ - （[az]））/ig、function（all、letter）{
return retter.touppercase（）;
}）;
elem.style [name] = value;
}
}
}、style）;
};
win.setattr = function（dom、attr）{
if（typeof attr！== 'object'）
戻る;
for（attrのvar名）
dom.setattribute（name、attr [name]）;
}
var slice = array.prototype.slice;
win.bind = function（object、fun）{
var args = slice.call（arguments）.slice（2）;
return function（）{
return fun.apply（object、args）;
};
};
win.bindaseventlistener = function（object、fun、args）{
var args = slice.call（arguments）.slice（2）;
return function（event）{
return fun.apply（object、[event || win.event] .concat（args））;
}
};
win.extend = function（）{
var target = arguments [0] || {}、i = 1、length = arguments.length、deep = true、options;
if（typeof target === "boolean"）{
deep =ターゲット;
ターゲット=引数[1] || {};
i = 2;
}
if（typeof target！== "object" && object.prototype.tostring.call（ターゲット）！= "[オブジェクト関数]"）
ターゲット= {};
for（; i <length; i ++）{
if（（options = arguments [i]）！= null）
for（optionsのvar名）{
var src =ターゲット[name]、copy = options [name];
if（ターゲット===コピー）
続く;
if（deep && copy && typeof copy === "object" &&！copy.nodetype）{
ターゲット[name] = arguments.callee（deep、src ||（copy.length！= null？[]：{}）、copy）;
}
else if（copy！== undefined）
ターゲット[name] = copy;
}
}
ターゲットを返します。
};
win.class = function（properties）{
var _class = function（）{
return（arguments [0]！== null && this.initialize && typeof（this.initialize）== 'function'）
？ this.Initialize.Apply（this、arguments）
： これ;
};
_Class.Prototype = Properties;
_classを返す;
};
win.each = function（object、callback、args）{
var name、i = 0、length = object.length;
if（args）{
args = array.prototype.slice.call（arguments）.slice（2）;
if（length === undefined）{
for（オブジェクトの名前）
if（callback.apply（object [name]、[name、object [name]]。concat（args））=== false）
壊す;
} それ以外
for（; i <length; i ++）
if（callback.apply（object [i]、[i、object [i]]。concat（args））=== false）//
壊す;
} それ以外 {
if（length === undefined）{
for（オブジェクトの名前）
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、bottom = 0、doc = elem？ Elem.Owndocument：doc;
if（！elem.getBoundingClientRect || win.sys.ie8）{
var n = elem;
while（n）{left += n.offsetLeft、top += n.offsettop; n = n.offsetparent; };
右=左 + elem.offsetwidth; bottom = top + elem.offsetheight;
} それ以外 {
var rect = elem.getBoundingClientRect（）;
左=右= doc.documentelement.scrollleft || doc.body.scrollleft;
top = bottom = doc.documentelement.scrollleft || doc.body.scrollleft;
左 += rect.left;右 += rect.right;
top += rect.top; bottom += rect.bottom;
}
return {"left"：left、 "top"：top、 "right"：right、 "bottom"：bottom};
};
win.contains = function（k、j）{
document.comParedocumentPositionを返します
？ 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、undefined）{
var win =これ、
uuid = -1;
/*
文字列にキーがあるかどうかを確認してください
ある場合、キーが続いている場合 - 戻ります - 何かを後で返しますtrue
検出は誤りを返しません
*/
function checkreg（str、key）{
var reg = new regexp（ '（？：^| // s）'+key+'// b-？（。*？）（？：// s | $）'、 'i'）;
if（reg.exec（str）！= null）{
RETURN REGEXP。$ 1 === ''？true：regexp。$ 1;
}それ以外{
falseを返します。
}
};
/*
文字列のキーに対応する値を変更する
*/
function modify（str、key、value）{
var reg = new regexp（ '（^| // s）（'+key+'// b-）。*？（// s | $）'、 'i'）;
return str.replace（reg、 '$ 1 $ 2'+value+'$ 3'）;
};
win.easygrid = new class（{
オプション：{
PERPAGE：10、
カレッパー：0、
TotalPage：0、
カウント：10、
ページ：0、
isedit：false、
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（）}、
文字列：function（v）{return v.tostring（）}
}、
タイトル：「タイトル」
}、
初期化：function（options）{
var op = extend（true、{}、this.options）、
options = this.defaults = extend（op、options）、
container = this.container = $ c（ 'div'、options.container）、
dataConfig = options.dataconfig、
title = $ c（ 'div'、container）;
container.classname = 'container';
title.innerhtml = options.title;
title.classname = 'title';
this.primarykey = options.primarykey;
this.top = $ c（ 'div'、container）;
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">ジャンプ</a> <a href = "javascript :;" del = "del"> delete </a> <div>現在のページには、合計1ページ、1つのデータ、合計1つのデータ、合計1つのデータ、合計1つのデータ、合計1つのデータ、合計1つのデータ、および1つのデータ、および合計データの合計データの合計データと合計データの合計データの合計1つのデータの合計データの合計1つのデータがあります。データ、合計1つのデータ、合計1つのデータ、合計1つのデータ、合計1つのデータ、合計1つのデータ、合計1つのデータ、合計1つのデータ、合計1つのデータ、合計1つのデータ、合計1つのデータ、および合計データの合計データ、合計データの合計1つのデータ、および合計データの合計1つのデータ、データ、および合計1つのデータ、および合計1つのデータ、
var tabcontainer = this.tabcontainer = $ c（ 'div'、container）;
this.bottom = $ c（this.top.clonenode（true）、container）;
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"、cellpacing： "0"、border： "0"}）;
this.tead = $ c（ 'head'、table）;
this.tbody = $ c（ 'tbody'、table）;
this.tbody.style.display = 'none';
//ロード
this.loading_bg = $ c（ 'div'、container）;
this.loading_bg.classname = 'loading';
setStyle（this.loading_bg、{
幅：container.offsetwidth+2+'px'、
高さ：container.offseTheight+2+'px'
}）;
this.loading = $ c（ 'div'、container）;
this.loading.classname = 'loaddiv'
setStyle（this.loading、{
左：（ container.offsetwidth/2-45） + 'px'、
TOP ：（ container.offsetheight/2-14） + 'px'
}）;
this.loading.innerhtml = '<div> loading ... </div>';
//テーブルにはいくつの列がありますか
this.colcount = options.fields.length;
//データソースフォームは[[]、[]、[]、[]、
this.data = [];
//現在要求されているデータソースのすべてのグループヘッダーフォームは[TRDOM1、TRDOM2]です
this.grouphead = [];
//テーブルに挿入されたグループのTR1、TR2、TR3]を記録します
this.inserttrs = [];
//列インデックス
// form [[TD11、TD12、TD13、TD14]、[TD21、TD22、TD23、TD24]]]]
this.columns = [];
// trueは正の順序を意味しますfalseは逆の順序を意味します
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> ';
// submenuを作成します
this.subpopmenu = $ c（ 'div'、doc.body）;
this.subpopmenu.classname = 'submenu';
//テーブルヘッダーの最初のレベルのポップアップレイヤーが開いているかどうか。開いている場合は、TDを保存します
this.ismenuopen = false;
//すべての列の列が表示されているか、numが表示されているかどうかをカウンターとして保存して、列がいくつあるかを確認します。
//フォーマットクローズ：[true、false、true、true]列1,3,4は2番目の列を非表示に示しています
this.isshowtrs = {
num：0、
クロー：[]
};
//ドラッグ時に表示されるベースラインを作成します
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、{
ポジション：「絶対」、
ディスプレイ：「なし」、
'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 = "submit" href = "javascript：;"> submit </a> <a do = "キャンセル" 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、
自己=これ、
ul = $ c（ 'ul'、this.subpopmenu）、
li;
それぞれ（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、 '<span>'、o.name、 '</span> <a href = "javascript：;"> </a> </div>']。join（ ''）;
setattr（td、{clos：i、width：width、unselectable： 'on'、 'class'：o.type === undefined？ ''： 'type-'+o.type}）;
self.createinput（i、o、etr）;
twidth = twidth +（~~ width）;
li = $ c（ 'li'、ul）;
li.innerhtml = [
'<a href = "javascript :;" > <入力タイプ= "チェックボックス" checked = "true" cols = "'、
私、
'"/>'、
O.NAME、
'</a>'
]。参加する（''）;
//列インデックスに各列の最初のアイテムを作成します
self.columns [i] = [td];
$ c（ 'td'、self.copytr）.setattribute（ 'of selectable'、 'on'）;
//列インデックスと列numの総数を計算します
self.isshowtrs.num ++;
self.isshowtrs.clos [i] = true;
}）;
setattr（this.table、{width：twidth+options.fields.length+1}）
// tbodyでTRを生成することは、perageに従ってTRを生成するだけです。これは、現在利用可能なデータの数を示す構成アイテムです。
var i = 0、
trslen = options.perpage、
frag = doc.createdocumentfragment（）、
arr = new Array（options.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'）{
setimeout（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 options = this.defaults、
自己=これ、
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.otal> = this.data.length
？ data.otal
：this.data.length
：this.data.length;
this.writemessage（合計）;
this.buildtbody（options.currpage）;
}、
buildtbody：function（pagenum）{
if（this.data.length === 0）{
this.tbody.style.display = 'none';
戻る;
}
var i = 0、
j = 0、
自己=これ、
data = this.data、
options = this.defaults、
trslen = options.perpage、
tdslen = options.fields.length、
tbody = this.tbody、
trs = tbody.getelementsbytagname（ 'tr'）、
start = pagenum*options.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;
// fillデータをthis.rowsに転送します
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];
//後続のデータと以前のデータが同じグループにあるかどうかを判断するために使用されます
//同じグループの場合は、this.rowsの最後の列を追加します
//同じグループではない列を作成する
num == x
？ this.rows [this.rows.length-1] .push（tr）
：（this.rows [this.rows.length] = [tr]、num = x）;
//配列arrを使用して、各グループの最初のTRの位置を覚えておいてください。TRヘッダーIが後で位置numに挿入され、グループのシーケンス番号があります。
！（num in group）&&（group [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 = 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を作成します
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 = options.fields [j] .render;
tds [j] .innerhtml = render
？レンダリング（txt）
：TXT;
}
}
}
options.currpage = pagenum;
this.top.getElementsByTagname（ 'span'）[0] .innerhtml = this.bottom.getelementsbytagname（ 'span'）[0] .innerhtml = ~~ pagenum+1;
var topas = this.top.getelementsbytagname（ 'a'）、
BOUTTOMAS = 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
：base;
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 =合計;
}、
sorttable：function（e）{
var elem = e.target || E.SRCELEMENT、
自己=これ、
options = this.defaults、
Elemname = elem.nodename.tolowercase（）、
showgroup = this.showgroup、
tdelem = elem、
name = 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（sistort）{
//グループがあり、各グループは個別に反転し、グループ化されず、直接反転します。
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;
}
// ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
/*
ヘッダーのAタグをクリックすると、メニューがポップアップ表示されます
*/
if（Elemname === 'A'）{
/*
メニューの外側をクリックすると、機能が実行されます
ドキュメントのクリックイベント隠されたレイヤーをクリアするために使用して、TDのスタイルを削除し、
*/
関数documentclick（）{
self.popmenu.style.display = 'none';
self.subpopmenu.style.display = 'none';
if（self.ismenuopen）{
removelistener（document、 'click'）;
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がtrueの場合、レイヤーが開いており、密接な関連処理の実行が実行されます。
this.ismenuopen && documentclick（）;
if（！checkreg（td.classname、 'type'））{
addclass（lis [0]、 'disabled'）;
addclass（lis [1]、 'disabled'）;
}それ以外{
Removeclass（lis [0]、 'disabled'）;
Removeclass（lis [1]、 'disabled'）;
}
sys.ie
？ e.cancelbubble = true
：e.StopPropagation（）;
//レイヤーを表示すると、TDがこれに取り付けられています。ismenuopen
this.ismenuopen = td;
addListener（document、 'click'、documentclick）;
setStyle（this.popmenu、{
左：左+'px'、
トップ：トップ+'px'、
ディスプレイ：「ブロック」
}）;
}
}、
比較：function（n、type）{
var sorttype = this.defaults.sorttype、
txt = sys.ie？ 'innertext'： 'textContent';
！sorttype [type] &&（type = 'string'）;
return function（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）{
varlem = 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,
自己=これ、
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');
setimeout（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,
自己=これ、
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,
自己=これ、
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>
水平有限请多指教