DataGrid بسيط
1. طريقة الفرز المخصص
2.edit
3. السحب والسحب
4. ترقيم الصفحات
5. الاختيار الفردي متعدد الخيارات (CTRL) الاختيار الخطي (Shift)
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>
<type type = "text/css">
*{الهامش: 0 ؛ الحشو: 0 ؛}
.h {line-height: 20px ؛}
.c {Zoom: 1 ؛}
.c: بعد {content: "." ؛ العرض: كتلة ؛ الارتفاع: 0 ؛ واضح: كلاهما ؛ الرؤية: مخفية ؛}
.l {float: left ؛}
.r {تعويم: يمين ؛}
ul {على غرار القائمة: لا شيء ؛}
.demo {العرض: 832px ؛ الارتفاع: 400 بكسل ؛ حجم الخط: 12 بكسل ؛ الهامش: 20 بكسل Auto ؛ الموقف: قريب}
.demo .m_a {margin-right: 8px ؛}
.demo .NobReak {White-Space: Keep-All ؛*White-Space: Normal ؛ Text-Overflow: Ellipsis ؛ Overden: Hidden ؛ الارتفاع: 22px ؛ العرض: 100 ٪ ؛}
.demo .Container {
الحدود: 1 بكسل Solid #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 table td {
رفع الخط: 22px ؛
الارتفاع: 20 بكسل ؛
}
.demo table thead .headfocus {
الخلفية: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) REFENT -X 0 -163PX ؛
}
.demo table thead td {
الفائض: مخفي.
}
.demo .t_a tbody td {padding-left: 8px ؛}
.demo .title {الارتفاع: 24px ؛ رفع الخط: 22px ؛ خط الرصيف: جريئة ؛ حشو اليسار: 20 بكسل ؛ اللون:#666666 ؛ الخلفية: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) REFERT -X 0 -300PX ؛}
.demo .bar {_display: inline-block ؛ line-height: 20px ؛ الارتفاع: 20 بكسل ؛ أعلى الحدود: 1 بكسل Solid #99bbe8 ؛ الخلفية: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) تكرار 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 ، .demo .next_div_no. .last_div_no {float: left ؛ width: 18px ؛ الارتفاع: 16px ؛ الهامش top: 3px ؛ المؤشر: pointer ؛ display: block ؛ margin-right: 5px ؛ background: url (http://images.cnblogs.com/cnblogs_com/wtcsy
.demo .first_div {background -position: -12px -58px ؛}
،
.demo .prev_div {background-position: -11px -78px ؛}
.demo .prev_div_no {background -position: 5px -78px ؛ المؤشر: عادي}
.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 ؛ المؤشر: عادي}
.demo .rowfocus td {background-color:#ebf2fb}
.demo .delbtn ، .demo .delbtn: hover {background: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) عدم التكرار ؛ العرض: 45 بكسل ؛ محاذاة النص: المركز ؛ الارتفاع: 20 بكسل ؛ اللون:#333 ؛ العرض: كتلة ؛ تكرار النص: لا شيء ؛ عائم: يسار ؛}
.demo .delbtn {background-position: -55px 0 ؛}
.demo .delbtn: hover {background-position: -55px -30px ؛ color:#666}
.demo table {
حجم الخط: 12 بكسل ؛
طاولة الطاولة: ثابت ؛
-Moz-User-Select: -moz-none ؛
-webkit-user-select: لا شيء ؛
-Khtml-User-select: لا شيء ؛
}
.demo .tabcontainer {
العرض: 99 ٪ ؛
الفائض: السيارات ؛
الحشو: 2px 0 0 2px ؛
لون الخلفية:#fffbf7 ؛
الموقف: قريب
}
.demo table thead td {background: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) REFENT -X 0 -100PX ؛}
.demo table thead a {
Z-Index: 1000 ؛
لون الخلفية:#C3DAF9 ؛
خلفية-صورة: url ("http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png") ؛
العرض: لا شيء ؛
العرض: 12 بكسل ؛
الارتفاع: 22px ؛
خلفية الموضع: 0 -234px ؛
الموقف: مطلق ؛
أعلى: 0 ؛
اليمين: 0 ؛
}
.demo table thead div {الموضع: النسبي ؛ z-index: 1 ؛}
.demo table thead p {
العرض: 1px ؛
الارتفاع: 22px ؛
خلفية اللون:#99BBE8 ؛
تعويم: اليسار.
العرض: كتلة ؛
المؤشر: E-RESIVE ؛
الهامش اليمين: 2px ؛
}
.demo table tr.trfocus td {
خلفية اللون:#ebf2fb
}
.demo div table ، .demo div table tr ، .demo div table td {
-Moz-User-Select: -moz-none ؛
-webkit-user-select: لا شيء ؛
}
.demo table td {background-color: #fff ؛ الفائض: مخفي. Text-Overflow: ellipsis ؛ الفضاء الأبيض: nowrap ؛}
.demo .loading {الموضع: absolute ؛ z-index: 9999 ؛ اليسار: 0 ؛ أعلى: 0 ؛ الخلفية:#e5e5e5 ؛ مرشح: ألفا (التعتيم = 50) ؛ عتامة: 0.5 ؛ -moz- opacity: 0.5 ؛ -Khtml-pacity: 0.5 ؛}
.demo .loaddiv {الموضع: absolute ؛ z-index: 99999 ؛ العرض: 98px ؛ الارتفاع: 28px ؛ الحدود: 1px solid #6593cf ؛ الخلفية: #fff url (http://images.cnblogs.com -300px ؛ الحشو: 2px ؛}
.demo .loadgif {background: #fff url (Images/loading_small.gif) no-repeat 4px 5px ؛ Padding: 5px 0 0 27px ؛ العرض: 68px ؛ الارتفاع: 21px ؛ الحدود: 1px الصلبة #6593cf ؛}
.demo .loadtext {color:#000 ؛}
.demo .edittable {border: 1px solid #c4c4c4 ؛}
.demo .edittable td {background:#ebf2fb ؛ الارتفاع: 24px ؛}
.demo .editbtn {padding: 5px ؛ العرض: 100px ؛ الهامش: 0 Auto ؛ الخلفية: #ebf2fb ؛ الحدود: 1px Solid #c4c4c4 ؛ الحدود: لا شيء ؛}
.demo .delbtn ، .ajaxtable .delbtn: hover {background: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) عدم التكرار ؛ العرض: 45 بكسل ؛ محاذاة النص: المركز ؛ الارتفاع: 20 بكسل ؛ اللون:#333 ؛ العرض: كتلة ؛ تكرار النص: لا شيء ؛ عائم: يسار ؛}
.demo .delbtn {background-position: -55px 0 ؛}
.demo .delbtn: hover {background-position: -55px -30px ؛ color:#666}
.demo .btn_a ، .ajaxtable .btn_a: hover {cursor: pointer ؛ background: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) لا تكرار ؛ محاذاة نصية: الوسط ؛ الحادين: 5px ؛ العرض: 45px ؛ الارتفاع: 17px ؛ العرض: كتلة ؛ تعويم: اليسار ؛ المؤشر: مؤشر ؛ ثنائي النص: لا شيء ؛}
.demo .btn_a {background-position: 0 0 ؛ color:#333 ؛}
.demo .btn_a: hover {background -position: 0 -30px ؛ color:#666 ؛}
.sort-asc .head_span {
الارتفاع: 12 بكسل ؛ العرض: 24 بكسل ؛
العرض: كتلة ؛
تعويم: اليسار.
حشو اليمين: 18 بكسل ؛
الخلفية: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no -repeat يمين -423px ؛
}
.head_span {float: Left ؛ Line-Height: 22px ؛ Display: Block ؛}
.sort-desc.
الارتفاع: 12 بكسل ؛ العرض: 24 بكسل ؛
العرض: كتلة ؛
تعويم: اليسار.
حشو اليمين: 18 بكسل ؛
الخلفية: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no -repeat right -391px ؛
}
.x-menu {
الموقف: مطلق ؛
الخلفية: url (menu.gif) Repert-y #f0f0f0 ؛
الحدود: 1 بكسل Solid #718bb7 ؛
العرض: 134px ؛
العرض: لا شيء ؛
}
.x-menu .disabled a {
اللون:#999 ؛
}
.x-menu-list {padding: 2px ؛ الفائض: مخفي. الهامش: 0 ؛}
.x-menu-list li {padding: 1px ؛ الفضاء الأبيض: Nowrap ؛ الارتفاع: 20 بكسل ؛}
.x-menu-list li.focus {backround:#09f ؛}
Ax-menu-item {
العرض: كتلة ؛
المؤشر: مؤشر.
ارتفاع الخط: 18 بكسل ؛
الارتفاع: 20 بكسل ؛
الخطوط العريضة اللون: -moz-use-text-color ؛
أسلوب الخطوط العريضة: لا شيء ؛
عرض الخطوط العريضة: 0 ؛
العرض: 100px ؛
حشو اليسار: 27 بكسل ؛
الموقف: قريب
تدمير النص: لا شيء ؛
الفضاء الأبيض: Nowrap ؛
حجم الخط: 12 بكسل ؛
اللون:#222 ؛
}
AX-M_A {padding-left: 8px ؛ العرض: 120px ؛}
إدخال Ax-Menu-Item {Margin-Right: 8px}
Ax-Menu-Ideem: Hover {Background-Color:#d9e8fb}
.asc {background: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no -repeat -53px -218px ؛}
.
.Columns {background: url (http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no -repeat -53px -268px ؛}
.submenu {
الموقف: مطلق ؛
Z-Index: 1500 ؛
الخلفية:#f0f0f0 ؛
الحدود: 1 بكسل Solid #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 ؛ العرض: 120px ؛}
إدخال Ax-Menu-Item {Margin-Right: 8px}
Ax-Menu-Ideem: Hover {Background-Color:#d9e8fb}
.خط{
العرض: 1px ؛ خلفية اللون: #cccccc ؛ الموضع: المطلق ؛ العرض: لا شيء ؛ Z-index: 100 ؛
}
.أحمر{
اللون:#ff0000 ؛
}
.جشع{
اللون:#33ff00 ؛
}
</style>
</head>
<body>
1. طريقة الفرز المخصص
<br>
2.edit
<br>
3. السحب والسحب
<br>
4. ترقيم الصفحات
<br>
5. الاختيار الفردي متعدد الخيارات (CTRL) الاختيار الخطي (Shift)
<br>
6. عرض النص هو تلوين النص ، على سبيل المثال ، أكبر من 0 أو أحمر أو أقل من 0 ، الأخضر
<br>
7. إخفاء عرض العمود
<br>
8. التجميع
<br>
<div id = 'demo' class = 'demo'> </viv>
<br> <br> يتم تجميع ما يلي وهناك طريقة فرز مخصصة جيدة ، فقيرة بشكل عام <br> <br>
<div id = 'demo1' class = 'demo'> </viv>
<script type = "text/javaScript">
(وظيفة (DOC ، غير محدد) {
var win = this ؛
win.sys = function (ua) {
var b = {
ie: /msie/.test(ua) &&!/opera/.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 = Varke && regexp ("(؟:" + varke + ") [///:] ([// 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 ؛
العودة ب ؛
} (win.navigator.useragent.toLowerCase ()) ؛
win.sys.ie6 && doc.execcommand ("backgroundImageCache" ، false ، true) ؛
Win. $$ = function (id) {
إرجاع typeof id === 'String'
؟ doc.getElementByid (id)
: بطاقة تعريف؛
} ؛
Win. $ q = function (name ، Parent) {
return parent.getElementsByTagName (name) ؛
}
Win. $ C = Function (name ، Parent) {
var elem = typeof name === 'Object'؟ الاسم: Doc.CreateElement (الاسم) ؛
Parent && parent.appendchild (elem) ؛
إرجاع 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] ، type ؛
إذا (fn) {
لـ (اكتب معالجات)
if (معالجات [type] === fn) {
element.RemoveEventListener؟ element.RemoveEventListener (E ، FN ، false): element.detachevent ("on" + e ، fn) ؛
حذف معالجات [النوع] ؛
}
}آخر{
لـ (اكتب معالجات) {
element.RemoveEventListener؟ element.RemoveEventListener (E ، معالجات [النوع] ، خطأ): element.detachevent ("on" + e ، معالجات [type]) ؛
حذف معالجات [النوع] ؛
}
}
} ؛
win.fireevent = function (element ، eventName) {
if (element [eventName]) {
العنصر [eventName] () ؛
} آخر إذا (element.fireevent) {
element.fireevent ('on'+eventName) ؛
} آخر إذا (doc.createeven) {
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 === undefined؟ {csstext: style} :( function (o) {
إرجاع (o [النمط] = القيمة ، o) ؛
}) ({}) ؛
} ؛
كل (elems ، وظيفة (i ، elem ، style) {
var value ، name ، ie = sys.ie ؛
ل (الاسم في النمط) {
القيمة = النمط [الاسم] ؛
if (name === "opated" && ie) {
elem.style.filter = (elem.currentStyle.filter || "") .replace (/alpha/([^)] */) ، "") + "alpha (opitated =" + value * 100 + ") ؛
} آخر إذا (name === "float") {
elem.style [أي؟ "stylefloat": "cssfloat"] = value ؛
}آخر{
name = name.replace (/-([AZ])/IG ، Function (All ، Letter) {
letter letter.ToupperCase () ؛
}) ؛
elem.style [name] = value ؛
}
}
}، أسلوب)؛
} ؛
win.setattr = function (dom ، attr) {
إذا (typeof attr! == 'كائن')
يعود؛
لـ (اسم var في attr)
dom.setattribute (الاسم ، attr [name]) ؛
}
var slice = array.prototype.slice ؛
win.bind = function (كائن ، متعة) {
var args = slice.call (وسيطات) .slice (2) ؛
وظيفة الإرجاع () {
إرجاع المرح. apply (كائن ، args) ؛
} ؛
} ؛
win.bindaseventListener = function (كائن ، متعة ، args) {
var args = slice.call (وسيطات) .slice (2) ؛
وظيفة الإرجاع (الحدث) {
return fun.apply (Object ، [event || win.event] .Concat (args)) ؛
}
} ؛
win.Extend = function () {
var target = mations [0] || {} ، i = 1 ، length = edation.length ، deep = true ، Options ؛
if (typeof target === "Boolean") {
عميق = الهدف ؛
الهدف = الوسائط [1] || {} ؛
أنا = 2 ؛
}
if (typeof target! == "object" && object.prototype.toString.call (target)! = "[comfort function]")
الهدف = {} ؛
لـ (؛ i <length ؛ i ++) {
if ((خيارات = الوسائط [i])! = null)
لـ (var name in Options) {
var src = target [name] ، copy = Options [name] ؛
إذا (الهدف === نسخة)
يكمل؛
if (deep && copy && typeof copy === "object" &&! copy.nodeType) {
Target [name] = enduments.callee (deep ، src || (copy.length! = null؟ []: {}) ، copy) ؛
}
آخر إذا (نسخة! == غير محددة)
الهدف [الاسم] = نسخة ؛
}
}
الهدف الإرجاع ؛
} ؛
win.class = function (خصائص) {
var _class = function () {
إرجاع (وسيطات [0]! == null && this.initialize && typeof (this.initialize) == 'function')
؟ this.initialize.apply (هذا ، الحجج)
: هذا؛
} ؛
_class.prototype = الخصائص ؛
العودة _class ؛
} ؛
win.each = دالة (كائن ، رد الاتصال ، args) {
var name ، i = 0 ، length = object.length ؛
إذا (args) {
args = array.prototype.slice.call (الحجج) .slice (2) ؛
إذا (الطول === غير محدد) {
ل (الاسم في كائن)
if (callback.apply (Object [name] ، [name ، Object [name]]. concat (args)) === false)
استراحة؛
} آخر
لـ (؛ i <length ؛ i ++)
if (callback.apply (object [i] ، [i ، object [i]]. concat (args)) === false) //
استراحة؛
} آخر {
إذا (الطول === غير محدد) {
ل (الاسم في كائن)
if (callback.call (Object [name] ، name ، Object [name]) === false)
استراحة؛
} آخر
لـ (var value = object [0] ؛
i <length && callback.call (القيمة ، i ، القيمة)! == false ؛ value = object [++ i]) {}
}
كائن إرجاع ؛
} ؛
win.currentStyle = function (element) {
إرجاع element.currentStyle || Doc.DefaultView.getComputedStyle (Element ، Null) ؛
} ؛
win.objpos = function (elem) {
var left = 0 ، top = 0 ، right = 0 ، bottom = 0 ، doc = elem؟ elem.OwnerDocument: Doc ؛
if (! elem.getBoundingClientRect || win.sys.ie8) {
var n = elem ؛
بينما (n) {left += n.offSetLeft ، top += n.offsettop ؛ n = n.offsetParent ؛ } ؛
اليمين = اليسار + elem.offsetwidth ؛ أسفل = أعلى + elem.offsetheight ؛
} آخر {
var rect = elem.getBoundingClientRect () ؛
اليسار = يمين = 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) {
إرجاع document.comparedocumentPosition
؟ K.comparedocumentPosition (J) و 16
: k! == j && k.contains (j) ؛
} ؛
win.hasclass = function (العنصر ، className) {
return element.classname.match (new regexp ('(// s |^)'+className+'(// s | $)') ؛
} ؛
win.addclass = function (element ، className) {
if (! win.hasclass (عنصر ، classname))
element.classname.replace (// s/g ، '') === '' '
؟ element.className = className
: element.className+= ""+className ؛
} ؛
win.removeClass = function (element ، className) {
win.hasclass (العنصر ، className) && (element.className = element.className.replace (regexp جديد ('(// s*|^)'+className+'(// s*| $)') ، '')) ؛
}
})(وثيقة)؛
(وظيفة (DOC ، غير محدد) {
var win = هذا ،
uuid = -1 ؛
/*
تحقق مما إذا كان هناك مفتاح في السلسلة
إذا كان هناك وتبع المفتاح - العودة - شيء بعد ذلك ، وإلا ارجع صحيحا
لا يوجد اكتشاف يعود كاذب
*/
وظيفة checkreg (str ، key) {
var reg = new regexp ('(؟:^| // s)'+key+'// b-؟ (.*؟) (؟: // s | $)' ، 'i') ؛
if (reg.exec (str)! = null) {
return regexp. $ 1 === ''؟ true: regexp. $ 1 ؛
}آخر{
العودة كاذبة
}
} ؛
/*
تعديل القيمة المقابلة للمفتاح في السلسلة
*/
تعديل الوظيفة (str ، المفتاح ، القيمة) {
var reg = new regexp ('(^| // s) ('+key+'// b-).*؟ (// s | $)' ، 'i') ؛
إرجاع str.place (reg ، '$ 1 $ 2'+value+'$ 3') ؛
} ؛
win.easyGrid = فئة جديدة ({
خيارات: {
الزخرف: 10 ،
currpage: 0 ،
page page: 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)} ،
التاريخ: الدالة (V) {return v.toString ()} ،
السلسلة: Function (V) {return v.toString ()}
} ،
العنوان: "العنوان"
} ،
تهيئة: وظيفة (خيارات) {
var op = exment (true ، {} ، this.options) ،
الخيارات = this.defaults = تمديد (OP ، الخيارات) ،
حاوية = this.container = $ c ('Div' ، Options.Container) ،
DataconFig = Options.DataConfig ،
العنوان = $ c ('div' ، حاوية) ؛
container.className = 'Container' ؛
title.innerhtml = Options.title ؛
title.className = 'title' ؛
this.primaryKey = Options.PrimaryKey ؛
this.top = $ c ('div' ، حاوية) ؛
this.top.className = 'bar' ؛
this.top.innerhtml = '<viv> <a href = "javaScript :؛" page = "start"> </a> <a href = "javaScript :؛" page = "next"> </a> <viv> <viv> <input type = "text"/> </viv> <viv> </viv> <a href = "javaScript: ؛ ؛" page = "pre"> </a> <a href = "javaScript :؛" page = "end"> </a> <viv> <a href = "javaScript :؛" go = "go"> القفز </a> <a href = "javaScript :؛" del = "del"> delete </a> <viv> تحتوي الصفحة الحالية على ما مجموعه صفحة واحدة ، وقطعة واحدة من البيانات ، ما مجموعه جزء واحد من البيانات ، وما مجموعه جزء واحد من البيانات ، وعدد واحد من قطعة واحدة من البيانات ، وإجمالي جزء واحد من البيانات ، وإجمالي واحد من البيانات ، وعدد واحد من البيانات واحدة ، وإجمالي واحد من البيانات ، وإجمالي قطعة واحدة من البيانات ، وإجمالي قطعة واحدة من البيانات واحدة ، وإجمالي قطعة واحدة من البيانات ، وإجمالي واحد من البيانات. البيانات ، وما مجموعه جزء واحد من البيانات ، وما مجموعه جزء واحد من البيانات ، وما مجموعه جزء واحد من البيانات ، وما مجموعه جزء واحد من البيانات ، وما مجموعه جزء واحد من البيانات ، وإجمالي جزء واحد من البيانات ، وإجمالي واحد من البيانات ، وإجمالي واحد من البيانات ، وإجمالي واحد من البيانات ، وإجمالي واحد من البيانات ، وإجمالي واحد من البيانات ، وإجمالي قطعة واحدة من البيانات ، وإجمالي واحد من البيانات ، وإجمالي قطعة واحدة من البيانات ، وإجمالي قطعة واحدة من البيانات ، وإجمالي قطعة واحدة من البيانات ، وإجمالي قطعة واحدة من البيانات ، وإجمالي قطعة واحدة من البيانات ، وإجمالي بيانات واحدة ، وإجمالي بيانات واحدة ، وإجمالي بيانات واحدة ، وإجمالي بيانات واحدة من البيانات ، وإجمالي بيانات واحدة ، وإجمالي بيانات واحدة من البيانات ، وإجمالي بيانات واحدة من البيانات. البيانات ، وما مجموعه جزء واحد من البيانات ، وما مجموعه جزء واحد من البيانات ،
var tabContainer = this.tabContainer = $ c ('div' ، حاوية) ؛
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" ، الحدود: "0"}) ؛
this.tead = $ c ('head' ، table) ؛
this.tbody = $ c ('tbody' ، table) ؛
this.tbody.style.display = 'none' ؛
//تحميل
this.loading_bg = $ c ('div' ، حاوية) ؛
this.loading_bg.classname = 'loading' ؛
setStyle (this.loading_bg ، {
العرض: Container.OffsetWidth+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 = '<viv> loading ... </div>' ؛
// كم عدد الأعمدة الموجودة في الجدول
this.colcount = options.fields.length ؛
// نموذج مصدر البيانات هو [[] ، [] ، [] ، [] ، []]
this.data = [] ؛
// جميع نماذج رأس التجميع في مصدر البيانات المطلوب حاليًا هي [trdom1 ، trdom2]
this.grouphead = [] ؛
// سجل tr [tr1 ، tr2 ، tr3] للمجموعة التي تم إدراجها في الجدول
this.inserttrs = [] ؛
// فهرس العمود
// form [[TD11 ، TD12 ، TD13 ، TD14] ، [TD21 ، TD22 ، TD23 ، TD24]]]
this.columns = [] ؛
// الحقيقي يعني الترتيب الإيجابي يعني الترتيب العكسي
this.ascsort = صحيح ؛
// حفظ أي عمود يقوم بفرز رأس 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 ؛
// احفظ ما إذا كان يتم عرض عمود في جميع الأعمدة أو مخفية كقادة لمعرفة عدد الأعمدة الموجودة.
// تنسيق يغلق: [صحيح ، خطأ ، حقيقي ، حقيقي] يعرض العمود 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.currapentItrow = {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 ، {
Cellping: '0' ،
cellpadding: '0' ،
الحدود: '0'
}) ؛
var btnc = $ c ('div' ، this.editform) ؛
btnc.className = 'editbtn' ؛
btnc.style.textalign = 'center' ؛
btnc.innerhtml = '<viv> <a do = "submit" href = "javaScript: ؛"> إرسال </a> <a do = "cancel" href = "javaScript: ؛"> إلغاء </a> </viv>' ؛
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) ،
لي.
كل (خيارات. الحقول ، الدالة (i ، o) {
var td = $ c ('td' ، headtr) ،
العرض = O.WIDTH؟ O.WIDTH: '80 '،
div = i === 0؟ '<viv>': '<viv> <p> </p>' ؛
td.innerhtml = [div ، '<span>' ، o.name ، '</span> <a href = "javaScript: ؛"> </a> </viv>'].
setattr (td ، {clos: i ، width: width ، غير قابلة للتحديد: 'on' ، 'class': o.type === undefined؟ '': 'type-'+o.type}) ؛
self.createInput (i ، o ، etr) ؛
twidth = twidth + (~~ عرض) ؛
li = $ c ('li' ، ul) ؛
li.innerhtml = [
'<a href = "javaScript :؛" > <إدخال type = "checkbox" checked = "true" cols = "'،
أنا،
""/> "،
اسم
'</a>'
].ينضم('')؛
// قم بإنشاء العنصر الأول من كل عمود في فهرس العمود
self.columns [i] = [td] ؛
$ C ('td' ، self.copytr) .SetAttribute ('unlecectable' ، 'on') ؛
// احسب فهرس العمود وعدد الأعمدة العدد
self.isshowtrs.num ++ ؛
self.isshowtrs.clos [i] = true ؛
}) ؛
setattr (this.table ، {width: twidth+options.fields.length+1})
// إنشاء TR في tbody يولد فقط TR وفقا للفيروسات. إنه عنصر تكوين يوضح عدد أجزاء البيانات المتاحة حاليًا.
var i = 0 ،
trslen = الخيارات.
frag = doc.createdocumentFragment () ،
ARR = صفيف جديد (Options.Fields.Length) ،
TR ،
TDs
لـ (؛ i <trslen ؛ i ++) {
tr = this.copytr.clonenode (true) ؛
tds = $ q ('td' ، tr) ؛
كل (arr ، وظيفة (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.modifytr)) ؛
AddListener (this.top ، 'click' ، bindaseventListener (this ، this.pagebarclick)) ؛
AddListener (this.bottom ، 'click' ، bindaseventListener (this ، this.pagebarclick)) ؛
} ،
getDataCallback: وظيفة (بيانات) {
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 ، وظيفة (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 ؛
}
}آخر{
يعود؛
}
المجموع = data.total
؟ data.total> = this.data.length
؟ data.total
: this.data.length
: this.data.length ؛
this.writemessage (المجموع) ؛
this.buildtbody (Options.curt) ؛
} ،
buildtbody: وظيفة (pagenum) {
if (this.data.length === 0) {
this.tbody.style.display = 'none' ؛
يعود؛
}
var i = 0 ،
J = 0 ،
الذات = هذا ،
البيانات = this.data ،
الخيارات = this.defaults ،
trslen = الخيارات.
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 ؛
// مسح المجموعة التي تم إدراجها مسبقًا
inserttrs.length! = 0 && كل (inSertTrs ، function (i ، o) {
self.tbody.removechild (O) ؛
}) ؛
inSertTrs.length = 0 ؛
// نقل بيانات التعبئة إلى this.rows
var num = - 1 ؛
لـ (؛ i <trslen ؛ i ++) {
tr = trs [i] ؛
// إذا لم تكن هناك بيانات ، ابدأ في إخفاء الصفوف المتبقية
if (! data [i+start]) {
tr.style.display = 'none' ؛
يكمل؛
}
// قم بعمل TAG 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) ؛
// استخدم Array ARR لتذكر موضع TR الأول لكل مجموعة لأن Header I tr تم إدراجها لاحقًا إلى الموضع هو رقم تسلسل المجموعة.
! (num in group) && (group [num] = i + start ، arr.push ([num ، i])) ؛
لـ (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 () ، وظيفة (i ، o) {
inserttrs.push (self.grouphead [o [0]]) ؛
self.tbody.insertbefore (self.grouphead [o [0]] ، trs [o [1]]) ؛
}) ؛
}آخر{
لـ (؛ i <trslen ؛ i ++) {
tr = trs [i] ؛
// قم بعمل TAG 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) ؛
لـ (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)
:رسالة قصيرة؛
}
}
}
Options.cursrpage = 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' ؛
} آخر إذا (Options.cursrpage === 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' ؛
} آخر إذا (Options.cursed+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: وظيفة (إجمالي) {
Var Options = this.defaults ،
قاعدة = إجمالي/خيارات.
topspans = this.top.getelementsbytagname ('span') ،
bottomspans = this.bottom.getElementSbyTagName ('span') ؛
Options.TotalPage = قاعدة> parseint (قاعدة)
؟ Parseint (قاعدة) +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 ؛
} ،
sortable: function (e) {
var elem = e.target || E.Srclement ،
الذات = هذا ،
الخيارات = this.defaults ،
elemname = elem.nodename.tolowercase () ،
showgroup = this.showgroup ،
tdelem = elem ،
الاسم = elemname ؛
// قد يتم تشغيل النقر عند السحب. والسبب هو أن جميع الرموز تحت IE مرتبطة بهذا. انظر السحب والإسقاط.
إذا ($ Q ('td' ، elem) .length> 1)
يعود؛
إذا (الاسم! == 'td') {
بينما (الاسم! == 'td') {
tdelem = tdelem.parentNode ؛
name = tdelem.nodename.toLowerCase () ؛
}
}
var issort = checkreg (tdelem.classname ، 'sort') ،
اكتب = checkreg (tdelem.classname ، 'اكتب')
//نوع
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 ، وظيفة (i ، tr) {
arr = [inSertTrs [len-i]]. concat (tr) ؛
عرض مجموعة
؟ كل (arr ، وظيفة (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' ؛
إذا (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 = صحيح
: e.StopPropagation () ؛
// عند عرض الطبقة ، يتم إرفاق TD بهذا.
this.ismenuopen = td ؛
AddListener (وثيقة ، "انقر" ، documentClick) ؛
setStyle (this.popmenu ، {
اليسار: اليسار+'px' ،
TOP: TOP+'PX' ،
العرض: "كتلة"
}) ؛
}
} ،
قارن: الوظيفة (n ، اكتب) {
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.Srclement ،
الخيارات = 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 ? '' : 'لا أحد'؛
//如果还剩一列并且这次是取消选中的
//则不执行隐藏
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);
!يكتب
&&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',
عرض : ''
}) ؛
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>
水平有限请多指教