JS（二十）前端表格控件Datalist2使用

来源：互联网发布：c语言头文件里写什么编辑：程序博客网时间：2024/05/19 13:09

Datalist2.css

.grid3_locked { position: absolute; overflow: hidden; }.grid3_unlocked { position: absolute; overflow: hidden; }.grid3_locked { border-right: #99bbe8 1px solid; }.grid_panel .panel_body { overflow: hidden !important; }.panel_body { border-bottom: #99bbe8 0px solid; position: relative; border-left: #99bbe8 1px solid; background-color: #ffffff; overflow: hidden; border-top: #99bbe8 0px; border-right: #99bbe8 1px solid; }.grid3 { position: relative; background-color: #ffffff; overflow: hidden; }.grid3_header { padding-bottom: 0px; padding-left: 0px; padding-right: 0px; background: url(../../images/default/grid/grid3-hrow.gif) #f9f9f9 repeat-x 0px bottom; cursor: default; padding-top: 1px; }.grid3_header_inner { float: left; overflow: hidden; }.grid3_header_offset { text-align: left; padding-left: 1px; }.grid3 TABLE { table-layout: fixed; }.grid3_hd_row TD { outline-style: none; outline-width: medium; -moz-user-focus: normal; }.grid3_row TD { outline-style: none; outline-width: medium; -moz-user-focus: normal; }.grid3_hd_row TD { border-left: #eeeeee 1px solid; font: 12px/15px 宋体,arial,tahoma,helvetica,sans-serif; vertical-align: middle; border-right: #d0d0d0 1px solid; }.grid3_row TD { height:16px; line-height: 16px; font: 12px Tahoma,宋体; padding-left: 0px; padding-right: 0px; vertical-align: middle; -moz-user-select: none; }.grid3_cell { white-space: nowrap; overflow: hidden; -moz-user-select: none; }.grid3_cellLast { border-right: #c5c5c5 0px solid; white-space: nowrap; overflow: hidden; -moz-user-select: none; }.grid3_cell_inner { padding-bottom: 5px; padding-left: 5px; padding-right: 3px; white-space: nowrap; overflow: hidden; padding-top: 5px; }.grid3_hd_inner { padding-bottom: 5px; padding-left: 5px; padding-right: 3px; white-space: nowrap; overflow: hidden; padding-top: 5px; }.grid3_hd_inner { position: relative; padding-bottom: 4px; padding-left: 5px; padding-right: 3px; cursor: inherit; padding-top: 4px; }.grid3_hd_btn { z-index: 2; position: absolute; width: 14px; display: none; background: url(../../images/default/grid/grid3-hd-btn.gif) #c3daf9 no-repeat left center; top: 0px; cursor: pointer; right: 0px; }.grid3_sort_icon { width: 7px; background-repeat: no-repeat; height: 4px; margin-left: 3px; vertical-align: middle; }.clear { line-height: 0; height: 0px; clear: both; font-size: 0px; overflow: hidden; }.grid3_locked .grid3_scroller { overflow: hidden; }.grid3_scroller { position: relative; overflow: auto; }.grid3_locked .grid3_row { border-right: 0px; }.grid3_row { border-bottom: 1px solid; border-left: 1px solid; width: 100%; border-top: 1px solid; cursor: default; border-right: 1px solid; }.grid3_row { border-bottom-color: #ededed; border-top-color: #ffffff; border-right-color: #ededed; border-left-color: #ededed; }.grid3_row_alt { background-color: #f2f2f2; }.grid3_row_over { background-color: #efefef; }.grid3_row_selected { background-image: none; border-bottom: #a3bae9 1px dotted; border-left: #a3bae9 1px dotted; background-color: #dfe8f6 !important; border-top: #a3bae9 1px dotted; border-right: #a3bae9 1px dotted; }.grid3_scroll_spacer { height: 19px; }.grid3_focus { position: absolute; line-height: 1px; outline-style: none; outline-width: 0px; width: 1px; height: 1px; font-size: 1px; top: 0px; left: 0px; -moz-user-select: text; }.grid3_resize_marker { z-index: 7; border-bottom: 0px; position: absolute; border-left: 0px; background-color: #777777; width: 1px; height: 100px; visibility: hidden; overflow: hidden; border-top: 0px; top: 0px; border-right: 0px; left: 0px; }.grid3_resize_proxy { z-index: 7; border-bottom: 0px; position: absolute; border-left: 0px; background-color: #777777; width: 1px; height: 100px; visibility: hidden; overflow: hidden; border-top: 0px; top: 0px; cursor: col-resize; border-right: 0px; left: 0px; }TD.grid3_hd_over { border-left: #aaccf6 1px solid; border-right: #aaccf6 1px solid; }TD.sort_desc { border-left: #aaccf6 0px solid; border-right: #aaccf6 0px solid; }TD.sort_asc { border-left: #aaccf6 0px solid; border-right: #aaccf6 0px solid; }TD.grid3_hd_over .grid3_hd_inner { background: url(../../images/default/grid/grid3-hrow-over.gif) #ebf3fd repeat-x left bottom; }TD.sort_desc .grid3_hd_inner { background: url(../../images/default/grid/grid3-hrow-over.gif) #ebf3fd repeat-x left bottom; }TD.sort_asc .grid3_hd_inner { background: url(../../images/default/grid/grid3-hrow-over.gif) #ebf3fd repeat-x left bottom; }.sort_asc .grid3_sort_icon { background-image: url(../../images/default/grid/sort_asc.gif); }.sort_desc .grid3_sort_icon { background-image: url(../../images/default/grid/sort_desc.gif); }.grid3_dirty_cell { background: url(....//images/default/grid/dirty.gif) no-repeat 0px 0px; }.grid3_edit_txt { border-bottom: #b5b8c8 1px solid; border-left: #b5b8c8 1px solid; padding-bottom: 0px; margin: 0px; padding-left: 3px; padding-right: 3px; font: 12px 宋体,arial,tahoma,helvetica,sans-serif; background: url(../../images/default/form/text-bg.gif) #ffffff repeat-x 0px 0px; vertical-align: middle; border-top: #b5b8c8 1px solid; border-right: #b5b8c8 1px solid; padding-top: 2px; }.grid3_edit_calendar { border-bottom: #7eadd9 1px solid; position: absolute; border-left: 0px; width: 17px; background: url(../../images/default/form/date-trigger.gif) no-repeat -51px 0px; height: 21px; border-top: 0px; top: 0px; cursor: pointer; border-right: 0px; }.grid3_edit_calendar2 { background-image: url(../../images/default/form/date-trigger.gif); border-bottom: #7eadd9 1px solid; width: 17px; background-position: -51px 0px; float: left; height: 21px; cursor: pointer; -moz-box-sizing: border-box; }.grid3_check_col { background-image: url(../../images/default/menu/unchecked.gif); background-color: transparent; width: 16px; background-repeat: no-repeat; background-position: center center; height: 16px; }.grid3_check_col_on { background-image: url(../../images/default/menu/checked.gif); background-color: transparent; width: 16px; background-repeat: no-repeat; background-position: center center; height: 16px; }DIV.grid3_sp { border-bottom: #ededed 1px solid; border-left: #ededed 1px solid; border-top: #ededed 1px solid; border-right: #ededed 1px solid; }TR.grid3_hd_row TD { background: url(../../images/default/grid/grid3-hrow.gif) repeat-x 0px bottom; }TR.grid3_row TD { border-bottom: #ededed 1px solid; cursor: default; }TR.grid3_row_alt TD { background-color: #f2f2f2; }TR.grid3_row_over TD { background: url(../../images/default/grid/row-over.gif) #efefef repeat-x left top; }TR.grid3_row_selected TD { background-color: #dfe8f6; }.grid3_cell_inner { white-space: nowrap; overflow: hidden; }.grid3_hd_inner { white-space: nowrap; overflow: hidden; }TR.grid3_row TD { border-bottom: #ededed 1px solid; cursor: default; }TR.grid3_row TD DIV.cell { padding-bottom: 0px; padding-left: 4px; text-overflow: ellipsis; padding-right: 4px; white-space: nowrap; overflow: hidden; padding-top: 0px; }TR.grid3_row TD DIV.Bcell { padding-bottom: 0px; padding-left: 4px; text-overflow: ellipsis; padding-right: 4px; white-space: nowrap; overflow: hidden; padding-top: 0px; font-weight: bold; }.grid3_hd { height: 21px; line-height: 21px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; font-weight: bold; border-right: #c5c5c5 1px solid; padding-top: 0px; background-color: #E4EEFA; -moz-user-select: none; }.grid3_cell { border-right: #c5c5c5 1px solid; -moz-user-select: none; }.tableEllipsis { table-layout: fixed; word-break: break-all; }.tableEllipsis TD { text-overflow: ellipsis; }.grid3_cell_first { padding-bottom: 0px; padding-left: 5px; padding-right: 3px; padding-top: 0px; }

Datalist2.js

Datalist2 = function () { var a = arguments[0] || {}; this.lockheaders = a.lockheaders; this.unlockheaders = a.unlockheaders; this.renderTo = a.renderTo; this.width = "100%"; this.height = this.__formatWHCssText(a.height); this.onclickEvent = a.click; this.ondblclickEvent = a.dblclick; this.onclickHeaderEvent = a.clickHeader; this.sortedHandler = a.sortedHandler; this.isClickSelect = a.isClickSelect == undefined || a.isClickSelect; this.isMouseoverSelect = a.isMouseoverSelect == undefined || a.isMouseoverSelect; this.pageSetting = a.pageSetting; this.imagePath = a.imagePath; this.isEnableAlternating = a.isEnableAlternating == undefined || a.isEnableAlternating; this.lockWidth = this.__formatWHCssText(a.lockWidth); this.unlockWidth = this.__formatWHCssText(a.unlockWidth); this.emptyText = a.emptyText || "无数据!"; this.isShowHeader = a.isShowHeader == undefined || a.isShowHeader; this.leftHead = this.renderTo + "_lockheaders"; this.rightHead = this.renderTo + "_unlockheaders"; this.leftBody = this.renderTo + "_lockbody"; this.rightBody = this.renderTo + "_unlockbody"; this.left = this.renderTo + "_left"; this.lockheaderstable = this.renderTo + "_lockheaderstable"; this.unlockheaderstable = this.renderTo + "_unlockheaderstable"; this.normalheaderstable = this.renderTo + "_normalheaderstable"; this.lockheadersbody = this.renderTo + "_lockheadersbody"; this.unlockheadersbody = this.renderTo + "_unlockheadersbody"; this.normalheadersbody = this.renderTo + "_normalheadersbody"; this.topright = this.renderTo + "_topright"; this.lockHeadersInfo = []; this.unlockHeadersInfo = []; this.normalHeadersInfo = []; if (this.lockheaders) { if (!this.__isMultiHeaders(this.lockheaders)) { this.__resetHeaders(this.lockheaders); this.lockheaders = [this.lockheaders] } } if (this.unlockheaders) { if (!this.__isMultiHeaders(this.unlockheaders)) { this.__resetHeaders(this.unlockheaders); this.unlockheaders = [this.unlockheaders] } } }; Wind.UI.Datalist2.prototype = { DataBind: function (b, a) { this.trs1 = []; this.trs2 = []; this.currentRowIndex = -1; this.dataSource = b; if (this.isFirstLoad == undefined) { this.isFirstLoad = true } else { this.isFirstLoad = false } this.__render(a); this.__bindEvent() }, appendData: function (d) { var e = this.dataSource.length; this.dataSource = this.dataSource.concat(d); if (this.dataSource && this.dataSource.length) { var c = document.createDocumentFragment(); var b = document.createDocumentFragment(); for (var a = e; a < this.dataSource.length; a++) { if (this.lockHeadersInfo && this.lockHeadersInfo.length) { c.appendChild(this.__renderBodys2("lock", this.tb1, a + 1)) } if (this.unlockHeadersInfo && this.unlockHeadersInfo.length) { b.appendChild(this.__renderBodys2("unlock", this.tb2, a + 1)) } } if (this.lockHeadersInfo && this.lockHeadersInfo.length) { this.tb1.tBodies[0].appendChild(c) } if (this.unlockHeadersInfo && this.unlockHeadersInfo.length) { this.tb2.tBodies[0].appendChild(b) } this.__setStyle2() } }, __render: function (d) { if (this.renderTo) { if (this.isFirstLoad) { document.getElementById(this.renderTo).style.cssText = ("border:solid 1px #99BBE8;  height:{0}; overflow:hidden; position:relative;").format(this.height) + document.getElementById(this.renderTo).style.cssText; var c = new StringBuilder(); c.append(("<div style='width:{0};'>").format(this.width)); if (this.lockheaders && this.lockheaders.length) { c.append(("<div id='{0}' style='position:absolute; height:{1}; border-right:solid 1px #99BBE8;z-index:3;'>").format(this.left, this.height)); c.append(("<div id='{0}' style='position:absolute; border-bottom:solid 1px #99BBE8; z-index:3; background-color:white;'></div>").format(this.leftHead)); c.append(("<div id='{0}' style='position:absolute; z-index:2;background-color:white;'></div></div>").format(this.leftBody)) } c.append(("<div id='{0}' style='border-bottom:solid 1px #99BBE8; z-index:2;background-color:white; position:relative;'></div>").format(this.rightHead)); c.append(("<div id='{0}' style='overflow:auto;'></div>").format(this.rightBody)); c.append(("<div id='{0}' style='position:absolute; right:0px; top:0px; width:15px;border-left:solid 1px #ADADAD; border-bottom:solid 1px #99BBE8;'></div>").format(this.topright)); if (this.pageSetting) { c.append(("<div id='{0}' class='PageBox'></div>").format(this.renderTo + "_Foot")) } c.append("</div>"); document.getElementById(this.renderTo).innerHTML = c.toString(); if (this.lockheaders && this.lockheaders.length) { var e = this.__renderLockHeaders(); if (this.isShowHeader) { document.getElementById(this.leftHead).appendChild(e) } this.__sortHeaders(this.lockHeadersInfo) } if (this.unlockheaders && this.unlockheaders.length) { var b = this.__renderUnLockHeaders(); if (this.isShowHeader) { document.getElementById(this.rightHead).appendChild(b) } this.__sortHeaders(this.unlockHeadersInfo) } this.__setStyle1() } if (this.dataSource && this.dataSource.length) { this.tb1 = document.createElement("table"); this.tb1.setAttribute("id", this.lockheadersbody); this.tb1.setAttribute("cellSpacing", 0); this.tb1.className = "tableEllipsis"; this.tb2 = document.createElement("table"); this.tb2.setAttribute("id", this.unlockheadersbody); this.tb2.setAttribute("cellSpacing", 0); this.tb2.className = "tableEllipsis"; for (var a = 0; a < this.dataSource.length; a++) { if (this.lockHeadersInfo && this.lockHeadersInfo.length) { this.__renderBodys("lock", this.tb1, a) } if (this.unlockHeadersInfo && this.unlockHeadersInfo.length) { this.__renderBodys("unlock", this.tb2, a) } } if (document.getElementById(this.leftBody)) { document.getElementById(this.leftBody).innerHTML = ""; document.getElementById(this.leftBody).appendChild(this.tb1) } document.getElementById(this.rightBody).innerHTML = ""; document.getElementById(this.rightBody).appendChild(this.tb2); this.__setStyle2() } else { document.getElementById(this.rightBody).innerHTML = this.emptyText } } if (this.pageSetting) { this.__renderPageBox(d) } }, __setStyle1: function () { if (document.getElementById(this.left)) { if (document.getElementById(this.lockheaderstable)) { document.getElementById(this.lockheaderstable).style.width = this.lockWidth } if (document.getElementById(this.leftHead)) { document.getElementById(this.leftBody).style.top = document.getElementById(this.leftHead).offsetHeight + "px" } document.getElementById(this.left).style.width = this.lockWidth; if (document.getElementById(this.rightHead)) { document.getElementById(this.rightHead).style.width = this.unlockWidth } } else { if (document.getElementById(this.rightHead)) { document.getElementById(this.rightHead).style.width = this.width } } if (document.getElementById(this.unlockheaderstable)) { document.getElementById(this.topright).style.height = document.getElementById(this.unlockheaderstable).offsetHeight + "px" } }, __setStyle2: function () { if (document.getElementById(this.left)) { document.getElementById(this.lockheadersbody).style.width = this.lockWidth; if (document.getElementById(this.leftHead)) { this.topScroll = document.getElementById(this.leftHead).offsetHeight } this.leftScroll = Utils.getPixel(this.lockWidth) + 2; if (document.getElementById(this.leftHead)) { document.getElementById(this.leftBody).style.top = document.getElementById(this.leftHead).offsetHeight } if (Utils.getPixel(this.lockWidth) != "" && this.lockWidth != "auto") { document.getElementById(this.rightHead).style.left = Utils.getPixel(this.lockWidth) + 2 + "px" } else { document.getElementById(this.rightHead).style.left = 2 + "px" } document.getElementById(this.rightBody).style.width = this.__formatWHCssText(document.getElementById(this.renderTo).offsetWidth - Utils.getPixel(this.lockWidth) - 6); document.getElementById(this.rightBody).style.marginLeft = Utils.getPixel(this.lockWidth) + 2 + "px" } else { document.getElementById(this.rightBody).style.width = this.width; this.leftScroll = 0 } if (document.getElementById(this.left)) { document.getElementById(this.unlockheadersbody).style.width = this.unlockWidth } else { document.getElementById(this.unlockheadersbody).style.width = this.width } if (this.height == "100%") { if (document.getElementById(this.left)) { if (navigator.userAgent.hasSubString("MSIE")) { var a = 0; a = parseInt(navigator.userAgent.split(";")[1].trim().split(" ")[1]); if ((a == 6) || (a == 7)) { document.getElementById(this.rightBody).style.height = (document.getElementById(this.unlockheadersbody).offsetHeight + 16 + 1) + "px" } } } } else { if (document.getElementById(this.rightHead)) { document.getElementById(this.rightBody).style.height = (document.getElementById(this.renderTo).offsetHeight - document.getElementById(this.rightHead).offsetHeight - 1 - 24 - 3) + "px" } if (document.getElementById(this.unlockheaderstable)) { document.getElementById(this.unlockheaderstable).style.width = document.getElementById(this.unlockheadersbody).offsetWidth + "px" } } if (document.getElementById(this.rightHead)) { if (this.pageSetting) { document.getElementById(this.renderTo).style.height = (document.getElementById(this.rightHead).offsetHeight + document.getElementById(this.rightBody).offsetHeight + 24) + "px" } else { document.getElementById(this.renderTo).style.height = (document.getElementById(this.rightHead).offsetHeight + document.getElementById(this.rightBody).offsetHeight) + "px" } } }, __bindEvent: function () { Utils.event.addEventHandler(document.getElementById(this.rightBody), "scroll", (function (a) { return function () { var c = a.topScroll - document.getElementById(a.rightBody).scrollTop; if (document.getElementById(a.leftBody)) { document.getElementById(a.leftBody).style.top = c + "px" } var b = a.leftScroll - document.getElementById(a.rightBody).scrollLeft; document.getElementById(a.rightHead).style.left = b + "px" } })(this)) }, __renderPageBox: function (a) { this.pageSetting.renderto = this.renderTo + "_Foot"; if (!this.pageBox) { this.pageBox = new Wind.UI.PageBox(this.pageSetting) } this.pageBox.DataBind(a) }, __renderLockHeaders: function () { return this.__renderHeaders("lock") }, __renderUnLockHeaders: function () { return this.__renderHeaders("unlock") }, __renderHeaders: function (f) { var g; var c; var a = document.createElement("table"); if (f == "lock") { g = this.lockheaders; a.setAttribute("id", this.lockheaderstable); c = "L" } if (f == "unlock") { g = this.unlockheaders; a.setAttribute("id", this.unlockheaderstable); c = "R" } a.className = "tableEllipsis"; if (g && g.length) { a.setAttribute("cellSpacing", 0); for (var d = 0; d < g.length; d++) { if (g[d] && g[d].length) { a.insertRow(d); for (var b = 0; b < g[d].length; b++) { a.rows[d].insertCell(b); if (g[d][b]["index"]) { a.rows[d].cells[b].id = f + "_" + g[d][b]["index"] } a.rows[d].cells[b].className = "grid3_hd"; if (g[d][b]["index"]) { a.rows[d].cells[b].setAttribute("index", g[d][b]["index"]) } var e = "font-weight:bold;border-right: 1px solid #C5C5C5;"; if (b == g[d].length - 1) { e = "font-weight:bold;border-right: 0px solid #C5C5C5;" } if (d > 0) { e += "border-top: 1px solid #C5C5C5;" } if (g[d][b]["width"]) { e += ("width:{0};").format(this.__formatWHCssText(g[d][b]["width"])) } if (g[d][b]["height"]) { e += ("height:{0};").format(this.__formatWHCssText(g[d][b]["height"])) } if (g[d][b]["align"]) { e += ("text-align: {0};").format(g[d][b]["align"]) } if (g[d][b]["sortable"]) { e += "cursor:pointer;"; Utils.event.addEventHandler(a.rows[d].cells[b], "click", (function (l, j, k, i, n, h, m) { return function () { if (l.dataSource && l.dataSource.length) { if (l.onclickHeaderEvent) { var r = []; var p = document.getElementById(l.renderTo).getElementsByTagName("td"); if (p && p.length) { for (var o = 0; o < p.length; o++) { if (p[o].getAttribute("index")) { r.push(p[o]) } } } var q = l.__clickHeader(r, n); l.onclickHeaderEvent(m.dataIndex, q) } else { l.__sort(j - 1, k, i, n, h); l.__setRowIndex(); l.currentRowIndex = -1 } } if (l.sortedHandler) { l.sortedHandler() } } })(this, g[d][b]["index"], g[d][b]["type"] ? g[d][b]["type"] : "string", c, a.rows[d].cells[b], g[d][b]["isSortByValue"], g[d][b])); a.rows[d].cells[b].innerHTML = ("<span>{0}</span><img src='data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==' class='grid3_sort_icon'>").format(g[d][b]["header"]) } else { a.rows[d].cells[b].innerHTML = g[d][b]["header"] } if (g[d][b]["style"]) { e += g[d][b]["style"] } a.rows[d].cells[b].style.cssText = e; if (g[d][b]["cs"]) { a.rows[d].cells[b].setAttribute("colSpan", g[d][b]["cs"]) } else { if (g[d][b]["rs"]) { a.rows[d].cells[b].setAttribute("rowSpan", g[d][b]["rs"]) } if (g[d][b]["index"] || (g.length == 1)) { if (f == "lock") { this.lockHeadersInfo.push(g[d][b]) } if (f == "unlock") { this.unlockHeadersInfo.push(g[d][b]) } if (f == "") { this.unlockHeadersInfo.push(g[d][b]) } } } } } } if (!document.getElementById(this.left)) { a.style.width = this.width } else { if (f == "unlock") { a.style.width = this.unlockWidth } } return a } }, __renderBodys: function (h, n, i) { var g; var m = ""; var l = ""; if (h == "lock") { g = this.lockHeadersInfo } if (h == "unlock") { g = this.unlockHeadersInfo } if (g && g.length) { n.insertRow(i); if (h == "lock") { this.trs1.push(n.rows[i]) } if (h == "unlock") { this.trs2.push(n.rows[i]) } if ((i % 2 == 1) && (this.isEnableAlternating)) { n.rows[i].className = "grid3_row grid3_row_alt" } else { n.rows[i].className = "grid3_row" } n.rows[i].setAttribute("index", i); n.rows[i].setAttribute("rowindex", i); if (this.isMouseoverSelect) { Utils.event.addEventHandler(n.rows[i], "mouseover", (function (j) { return function () { if (j) { j.className += " grid3_row_over" } } })(n.rows[i])); Utils.event.addEventHandler(n.rows[i], "mouseout", (function (j) { return function () { if (j) { j.className = j.className.replace("grid3_row_over", "") } } })(n.rows[i])) } if (this.isClickSelect) { Utils.event.addEventHandler(n.rows[i], "click", (function (k, j) { return function () { var o = parseInt(j.getAttribute("rowindex")); if (k.trs1 && k.trs1.length) { var q = document.getElementById(k.lockheadersbody).getElementsByTagName("tr")[k.currentRowIndex]; if (q) { q.className = q.className.replace("grid3_row_selected", "") } document.getElementById(k.lockheadersbody).getElementsByTagName("tr")[o].className += " grid3_row_selected" } if (k.trs2 && k.trs2.length) { var p = document.getElementById(k.unlockheadersbody).getElementsByTagName("tr")[k.currentRowIndex]; if (p) { p.className = p.className.replace("grid3_row_selected", "") } } document.getElementById(k.unlockheadersbody).getElementsByTagName("tr")[o].className += " grid3_row_selected"; k.currentRowIndex = o } })(this, n.rows[i])) } if (this.onclickEvent) { Utils.event.addEventHandler(n.rows[i], "click", (function (p, j, k) { return function () { var o = parseInt(k.getAttribute("index")); var q = parseInt(k.getAttribute("rowindex")); p.onclickEvent(p.dataSource[o], q) } })(this, i, n.rows[i])) } if (this.ondblclickEvent) { Utils.event.addEventHandler(n.rows[i], "dblclick", (function (k, j) { return function () { k.ondblclickEvent(j - 1) } })(this, i)) } var b = 0; for (var c = 0; c < g.length; c++) { try { if (typeof (this.dataSource[i][g[c]["dataIndex"]]) != "undefined") { l = this.dataSource[i][g[c]["dataIndex"]].toString() } else { l = this.dataSource[i][g[c]["dataIndex"]].toString() || "" } } catch (a) { l = "" } n.rows[i].insertCell(b); if (l.cs) { n.rows[i].cells[b].setAttribute("colSpan", l.cs) } if (l.rs) { n.rows[i].cells[b].setAttribute("rowSpan", l.rs) } n.rows[i].cells[b].className = "grid3_cell"; if (g[c]["width"]) { n.rows[i].cells[b].style.width = this.__formatWHCssText(g[c]["width"]) } if (!g[c]["renderer"]) { if (l.value) { m = l.value } else { m = l } } else { if (l.value) { m = g[c]["renderer"](i, l.value, n.rows[i].cells[b]) } else { m = g[c]["renderer"](i, l, n.rows[i].cells[b]) } } if (m == "") { m = " " } var f = 0; if (navigator.userAgent.hasSubString("MSIE")) { f = parseInt(navigator.userAgent.split(";")[1].trim().split(" ")[1]) } if ((g[c]["width"]) && (f == "8")) { n.rows[i].cells[b].style.cssText = ("width:{0};").format(this.__formatWHCssText(g[c]["width"])) } if (g[c]["textAlign"]) { n.rows[i].cells[b].align = g[c]["textAlign"] } var d = ""; if (g[c]["width"] && g[c]["width"].indexOf("px") != -1) { try { var e = parseInt(g[c]["width"].replace("px", "")); e -= 18; d = e + "px;" } catch (a) { } } if (!g[c]["renderer"]) { n.rows[i].cells[b].innerHTML = ("<div class='cell' style='width:" + d + ";overflow:hidden;' sortvalue='{0}' {1}>{2}</div>").format(l, m != " " ? ("title='{0}'").format(m) : "", m) } else { n.rows[i].cells[b].innerHTML = ("<div class='cell' style='width:" + d + ";overflow:hidden;' sortvalue='{0}' >{1}</div>").format(l, m) } b++ } } }, __renderBodys2: function (h, n, i) { var g = document.createElement("tr"); g.setAttribute("index", i - 1); g.setAttribute("rowindex", i - 1); var f; var m = ""; var l = ""; if (h == "lock") { f = this.lockHeadersInfo } if (h == "unlock") { f = this.unlockHeadersInfo } if (f && f.length) { if (h == "lock") { this.trs1.push(g) } if (h == "unlock") { this.trs2.push(g) } if ((i % 2 == 1) && (this.isEnableAlternating)) { g.className = "grid3_row grid3_row_alt" } else { g.className = "grid3_row" } var c = 0; for (var d = 0; d < f.length; d++) { var a = document.createElement("td"); if (i == 0) { a.style.width = this.__formatWHCssText(f[d]["width"]); a.style.height = "0px"; tb.className = "grid3_cell_first" } else { try { l = this.dataSource[i - 1][f[d]["dataIndex"]].toString() || "" } catch (b) { l = "" } if (l.cs) { a.setAttribute("colSpan", l.cs) } if (l.rs) { a.setAttribute("rowSpan", l.rs) } a.className = "grid3_cell"; if (f[d]["width"]) { a.style.width = this.__formatWHCssText(f[d]["width"]) } if (!f[d]["renderer"]) { if (l.value) { m = l.value } else { m = l } } else { if (l.value) { m = f[d]["renderer"](i - 1, l.value, a) } else { m = f[d]["renderer"](i - 1, l, a) } } if (m == "") { m = " " } var e = 0; if (navigator.userAgent.hasSubString("MSIE")) { e = parseInt(navigator.userAgent.split(";")[1].trim().split(" ")[1]) } if ((f[d]["width"]) && (e == "8")) { a.style.cssText = ("width:{0};").format(this.__formatWHCssText(f[d]["width"])) } if (f[d]["textAlign"]) { a.align = f[d]["textAlign"] } if (!f[d]["renderer"]) { a.innerHTML = ("<div class='cell' sortvalue='{0}' {1}>{2}</div>").format(l, m != " " ? ("title='{0}'").format(m) : "", m) } else { a.innerHTML = ("<div class='cell' sortvalue='{0}'>{1}</div>").format(l, m) } c++ } g.appendChild(a) } } if (this.isMouseoverSelect) { Utils.event.addEventHandler(g, "mouseover", (function (j) { return function () { if (j) { j.className += " grid3_row_over" } } })(g)); Utils.event.addEventHandler(g, "mouseout", (function (j) { return function () { if (j) { j.className = g.className.replace("grid3_row_over", "") } } })(g)) } if (this.isClickSelect) { Utils.event.addEventHandler(g, "click", (function (k, j) { return function () { var o = parseInt(j.getAttribute("rowindex")); if (k.trs1 && k.trs1.length) { var q = document.getElementById(k.lockheadersbody).getElementsByTagName("tr")[k.currentRowIndex]; if (q) { q.className = q.className.replace("grid3_row_selected", "") } document.getElementById(k.lockheadersbody).getElementsByTagName("tr")[o].className += " grid3_row_selected" } if (k.trs2 && k.trs2.length) { var p = document.getElementById(k.unlockheadersbody).getElementsByTagName("tr")[k.currentRowIndex]; if (p) { p.className = p.className.replace("grid3_row_selected", "") } } document.getElementById(k.unlockheadersbody).getElementsByTagName("tr")[o].className += " grid3_row_selected"; k.currentRowIndex = o } })(this, g)) } if (this.onclickEvent) { Utils.event.addEventHandler(g, "click", (function (p, j, k) { return function () { var o = parseInt(k.getAttribute("index")); var q = parseInt(k.getAttribute("rowindex")); p.onclickEvent(p.dataSource[o], q) } })(this, i, g)) } if (this.ondblclickEvent) { Utils.event.addEventHandler(g, "dblclick", (function (k, j) { return function () { k.ondblclickEvent(j - 1) } })(this, i)) } return g }, __sortHeaders: function (a) { a.sort(function (d, c) { return d.index - c.index }) }, __sort: function (f, j, l, c, d) { var g = c.className; if (this.lastSortHeaderTD) { if (this.lastSortHeaderTD == c) { if (g.indexOf("sort_asc") > 0) { c.className = "grid3_hd sort_desc" } else { c.className = "grid3_hd sort_asc" } } else { this.lastSortHeaderTD.className = "grid3_hd"; c.className = "grid3_hd sort_asc" } } else { c.className = "grid3_hd sort_asc" } this.lastSortHeaderTD = c; if (this.trs1 && this.trs1.length) { this.trs3 = []; for (var e = 0; e < this.trs1.length; e++) { var h = {}; h.L = this.trs1[e]; h.R = this.trs2[e]; this.trs3.push(h) } this.trs3.sort(this.__getSortFun(f, j, l, c.className, d)); var b = document.createDocumentFragment(); var a = document.createDocumentFragment(); for (var e = 0; e < this.trs3.length; e++) { if (this.isEnableAlternating) { if (e % 2 == 0) { this.trs3[e]["L"].className = "grid3_row"; this.trs3[e]["R"].className = "grid3_row" } else { this.trs3[e]["L"].className = "grid3_row grid3_row_alt"; this.trs3[e]["R"].className = "grid3_row grid3_row_alt" } } b.appendChild(this.trs3[e]["L"]); a.appendChild(this.trs3[e]["R"]) } document.getElementById(this.lockheadersbody).tBodies[0].appendChild(b); document.getElementById(this.unlockheadersbody).tBodies[0].appendChild(a) } else { this.trs2.sort(this.__getSortFun(f, j, l, c.className, d)); var k = document.createDocumentFragment(); for (var e = 0; e < this.trs2.length; e++) { if (this.isEnableAlternating) { if (e % 2 == 0) { this.trs2[e].className = "grid3_row" } else { this.trs2[e].className = "grid3_row grid3_row_alt" } } k.appendChild(this.trs2[e]) } document.getElementById(this.unlockheadersbody).tBodies[0].appendChild(k) } this.sortIndex = f; this.LR = l }, __getSortFun: function (c, d, b, f, a) { var e = function (h, g) { switch (g) { case "int": return parseInt(h); case "float": return parseFloat(h); case "double": return parseFloat(h); case "date": return h; default: return h.toString() } }; if (this.trs1 && this.trs1.length) { return function (h, k) { var j, i; if (!a) { j = e(h[b].cells[c].firstChild.firstChild.nodeValue, d); i = e(k[b].cells[c].firstChild.firstChild.nodeValue, d) } else { j = e(h[b].cells[c].firstChild.getAttribute("sortvalue"), d); i = e(k[b].cells[c].firstChild.getAttribute("sortvalue"), d) } var g = 0; if (d == "int" || d == "float" || d == "double") { g = j - i } else { g = j.localeCompare(i) } if (g < 0) { if (f.indexOf("sort_asc") >= 0) { return -1 } else { return 1 } } else { if (g > 0) { if (f.indexOf("sort_asc") >= 0) { return 1 } else { return -1 } } else { return 0 } } } } else { return function (h, k) { var j, i; if (!a) { j = e(h.cells[c].firstChild.firstChild.nodeValue, d); i = e(k.cells[c].firstChild.firstChild.nodeValue, d) } else { j = e(h.cells[c].firstChild.getAttribute("sortvalue"), d); i = e(k.cells[c].firstChild.getAttribute("sortvalue"), d) } var g = 0; if (d == "int" || d == "float" || d == "double") { g = j - i } else { g = j.localeCompare(i) } if (g < 0) { if (f.indexOf("sort_asc") >= 0) { return -1 } else { return 1 } } else { if (g > 0) { if (f.indexOf("sort_asc") >= 0) { return 1 } else { return -1 } } else { return 0 } } } } }, __resetHeaders: function (b) { for (var a = 0; a < b.length; a++) { b[a]["index"] = a + 1 } }, __isMultiHeaders: function (a) { if (a && a.length) { return a[0].length } return false }, __formatWHCssText: function (a) { if (!a) { return "auto" } else { if (!isNaN(a)) { return a + "px" } else { return a } } }, __clickHeader: function (c, d) { var a = "ascending"; if (c.length > 0) { for (var b = 0; b < c.length; b++) { if (c[b] != d) { c[b].className = c[b].className.replace("sort_asc", "").replace("sort_desc", "") } else { if (c[b].className.indexOf("sort_asc") < 0) { c[b].className += " sort_asc"; c[b].className = c[b].className.replace("sort_desc", ""); a = "ascending" } else { c[b].className += " sort_desc"; c[b].className = c[b].className.replace("sort_asc", ""); a = "descending" } } } } return a }, __setRowIndex: function () { if (document.getElementById(this.left)) { var b = document.getElementById(this.lockheadersbody).getElementsByTagName("tr"); if (b && b.length) { for (var c = 0; c < b.length; c++) { b[c].setAttribute("rowindex", c) } } } var a = document.getElementById(this.unlockheadersbody).getElementsByTagName("tr"); if (a && a.length) { for (var c = 0; c < a.length; c++) { a[c].setAttribute("rowindex", c) } } } };

使用方法：传入js数组

***为要展示的数据列表的表头文字

阅读全文

1 0