原生javascript實現(xiàn)簡單的datagrid數(shù)據(jù)表格
更新時間：2015年01月02日 10:52:43 投稿：hebedich
這篇文章主要介紹了原生javascript實現(xiàn)簡單的datagrid數(shù)據(jù)表格的方法，效果十分棒,需要的朋友可以參考下
簡單的datagrid
1.排序 自定義排序方式
2.編輯
3.拖拽
4.分頁
5.單選 多選(ctrl) 線性選(shift)
6.文字render 就是給文字著色 比如 大于0紅色 小于0綠色
7.對列的顯示隱藏
8.分組
只是一個示例 沒有什么與后臺的借口
其實可以寫幾個回調(diào)就行了 里面有l(wèi)oading條 可以在沒返回結(jié)果前一直顯示
復制代碼 代碼如下:
<!DOCTYPE html >
<html xmlns=" <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table</title>
<style type="text/css">
*{margin:0; padding:0;}
.h{line-height:20px;}
.c{zoom:1;}
.c:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.l{float:left;}
.r{float:right;}
ul{list-style:none;}
.demo{width:832px; height:400px;font-size:12px; margin:20px auto; position:relative}
.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{
border:1px solid #99bbe8;
height:auto;
}
.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 table td{
line-height:22px;
height:20px;
}
.demo table thead .theadfocus{
background:url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) repeat-x 0 -163px;
}
.demo table thead td{
overflow:hidden;
}
.demo .t_a tbody td{padding-left:8px;}
.demo .title{height:24px; line-height:22px; font-weight:bold; padding-left:20px; color:#666666; background:url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) repeat-x 0 -300px; }
.demo .bar{_display:inline-block;line-height:20px; height:20px; border-top:1px solid #99bbe8; background:url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) repeat-x 0 -350px;padding:2px 0 2px 20px;}
.demo .f_a{color:#3b526e;font-weight:bold;}
.demo .first_div,.demo .prev_div,.demo .next_div,.demo .last_div,.demo .first_div_no,.demo .prev_div_no,.demo .next_div_no,.demo .last_div_no{float:left;width:18px;height:16px;margin-top:3px;cursor:pointer;display:block;margin-right:5px;background:url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no-repeat}
.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;cursor:normal}
.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) no-repeat;width:45px;text-align:center;height:20px;color:#333;display:block;text-decoration:none;float:left;}
.demo .delbtn{background-position:-55px 0;}
.demo .delbtn:hover{background-position:-55px -30px;color:#666}
.demo table{
font-size:12px;
table-layout:fixed;
-moz-user-select: -moz-none;
-webkit-user-select:none;
-khtml-user-select:none;
}
.demo .tabcontainer{
width:99%;
overflow:auto;
padding :2px 0 0 2px;
background-color:#FFFBF7;
position:relative;
}
.demo table thead td{background:url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) repeat-x 0 -100px;}
.demo table thead a{
z-index:1000;
background-color:#C3DAF9;
background-image:url(" display:none;
width:12px;
height:22px;
background-position:0 -234px;
position:absolute;
top:0;
right:0;
}
.demo table thead div{ position:relative; z-index:1;}
.demo table thead p{
width:1px;
height:22px;
background-color:#99BBE8;
float:left;
display:block;
cursor:e-resize;
margin-right:2px;
}
.demo table tr.trfocus td{
background-color:#ebf2fb
}
.demo div table,.demo div table tr,.demo div table tr td{
-moz-user-select: -moz-none;
-webkit-user-select:none;
}
.demo table tr td{background-color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.demo .loading{position:absolute;z-index:9999;left:0;top:0;background:#e5e5e5;filter:Alpha(opacity=50);opacity:0.5;-moz-opacity:0.5;-khtml-opacity: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_ajaxtable.png) repeat-x 0 -300px;padding:2px;}
.demo .loadgif{background:#fff url(images/loading_small.gif) no-repeat 4px 5px; padding:5px 0 0 27px;width: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) no-repeat;width:45px;text-align:center;height:20px;color:#333;display:block;text-decoration:none;float:left;}
.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) 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{
height:12px; width:24px;
display:block;
float:left;
padding-right:18px;
background:url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no-repeat right -423px;
}
.head_span{float:left;line-height:22px;display:block;}
.sort-desc .head_span{
height:12px; width:24px;
display:block;
float:left;
padding-right:18px;
background:url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no-repeat right -391px;
}
.x-menu{
position:absolute;
background:url(menu.gif) repeat-y #f0f0f0;
border:1px solid #718bb7;
width:134px;
display:none;
}
.x-menu .disabled a{
color:#999;
}
.x-menu-list{padding:2px; overflow:hidden; margin:0;}
.x-menu-list li{padding:1px; white-space:nowrap; height:20px;}
.x-menu-list li.focus{backround:#09F;}
a.x-menu-item{
display:block;
cursor: pointer;
line-height: 18px;
height:20px;
outline-color: -moz-use-text-color;
outline-style: none;
outline-width: 0;
width:100px;
padding-left:27px;
position: relative;
text-decoration: none;
white-space: nowrap;
font-size:12px;
color:#222;
}
a.x-m_a{padding-left:8px;width:120px;}
a.x-menu-item input{margin-right:8px}
a.x-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{
position:absolute;
z-index: 1500;
background:#f0f0f0;
border:1px solid #718bb7;
width:134px;
display:none;
}
.x-menu-list .child-menu{background:url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no-repeat right -444px;}
a.x-m_a{padding-left:8px;width:120px;}
a.x-menu-item input{margin-right:8px}
a.x-menu-item:hover{background-color:#d9e8fb}
.line{
width:1px;background-color: #cccccc;position:absolute;display:none; z-index:100;
}
.red{
color:#FF0000;
}
.greed{
color:#33FF00;
}
</style>
</head>
<body>
1.排序 自定義排序方式
<br>
2.編輯
<br>
3.拖拽
<br>
4.分頁
<br>
5.單選 多選(ctrl) 線性選(shift)
<br>
6.文字render 就是給文字著色 比如 大于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(ua) && !/opera/.test(ua),
opera: /opera/.test(ua),
safari: /webkit/.test(ua) && !/chrome/.test(ua),
firefox: /firefox/.test(ua),
chrome: /chrome/.test(ua)
},vMark = "";
for (var i in b) {
if (b[i]) { vMark = "safari" == i ? "version" : i; break; }
}
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;
return 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,parent){
var elem = typeof name ==='object'? name : doc.createElement(name);
parent&&parent.appendChild(elem);
return 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;
if(fn){
for(type in handlers)
if(handlers[type]===fn){
element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn);
delete handlers[type];
}
}else{
for(type in handlers){
element.removeEventListener?element.removeEventListener(e,handlers[type],false):element.detachEvent("on" + e,handlers[type]);
delete handlers[type];
}
}
};
win.fireEvent = function(element,eventName){
if(element[eventName]){
element[eventName]();
}else if(element.fireEvent){
element.fireEvent('on'+eventName);
}else if(doc.createEvent){
var evt = doc.createEvent("MouseEvents");
evt.initEvent(eventName, true, true);
element.dispatchEvent(evt);
}
};
win.setStyle = function(elems, style, value){
if( !elems.length ) elems = [elems];
if( typeof style == "string"){
style = value === undefined?{cssText:style}:(function(o){
return (o[style] = value,o);
})({});
};
each(elems,function(i,elem,style){
var value,name,ie=Sys.ie ;
for(name in style){
value = style[name];
if (name === "opacity" && ie) {
elem.style.filter = (elem.currentStyle.filter || "").replace( /alpha\([^)]*\)/, "" ) + "alpha(opacity=" + value * 100 + ")";
}else if(name === "float"){
elem.style[ ie ? "styleFloat" : "cssFloat" ] = value;
}else{
name = name.replace(/-([a-z])/ig, function(all, letter){
return letter.toUpperCase();
});
elem.style[name] = value;
}
}
},style);
};
win.setAttr = function(dom,attr){
if(typeof attr !== 'object')
return;
for(var name in attr)
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 = target;
target = arguments[1] || {};
i = 2;
}
if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]")
target = {};
for(;i<length;i++){
if ( (options = arguments[ i ]) != null )
for(var name in options){
var src = target[ name ], copy = options[ name ];
if ( target === copy )
continue;
if ( deep && copy && typeof copy === "object" && !copy.nodeType ){
target[ name ] = arguments.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy );
}
else if(copy !== undefined)
target[ name ] = copy;
}
}
return target;
};
win.Class = function(properties){
var _class = function(){
return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function')
? this.initialize.apply(this, arguments)
: this;
};
_class.prototype = properties;
return _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 ( name in object )
if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) === false )
break;
} else
for ( ; i < length; i++)
if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) //
break;
} else {
if ( length === undefined ) {
for ( name in object )
if ( callback.call( object[ name ], name, object[ name ] ) === false )
break;
} else
for ( var value = object[0];
i < length && callback.call( value, i, value ) !== false; value = object[++i] ){}
}
return object;
};
win.currentStyle = function(element){
return 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;
while (n) { left += n.offsetLeft, top += n.offsetTop; n = n.offsetParent; };
right = left + elem.offsetWidth; bottom = top + elem.offsetHeight;
} else {
var rect = elem.getBoundingClientRect();
left = right = doc.documentElement.scrollLeft || doc.body.scrollLeft;
top = bottom = doc.documentElement.scrollLeft || doc.body.scrollLeft;
left += rect.left; right += rect.right;
top += rect.top; bottom += rect.bottom;
}
return { "left": left, "top": top, "right": right, "bottom": bottom };
};
win.contains = function(k,j){
return 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*|$)'),' '));
}
})(document);
(function(doc,undefined){
var win = this,
uuid = -1;
/*
檢查 字符串 中是否有key
如果有 且key后面是- 返回-后面的東西 否則返回true
檢測不到返回false
*/
function checkReg(str,key){
var reg = new RegExp('(?:^|\\s)'+key+'\\b-?(.*?)(?:\\s|$)','i');
if(reg.exec(str)!=null){
return RegExp.$1===''?true:RegExp.$1;
}else{
return false;
}
};
/*
修改字符串中key對應的value
*/
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({
options : {
perPage : 10,
currPage : 0,
totalPage : 0,
count : 10,
page : 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)},
date : function(v){return v.toString()},
string : function(v){return v.toString()}
},
title : '標題'
},
initialize : 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 class="c"><a href="javascript:;" class="first_div_no" page="start"></a><a href="javascript:;" class="prev_div_no" page="next"></a><div class="br"></div><div class="l m_a"><input type="text" style="width:40px" class="i_a" /></div><div class="br"></div><a href="javascript:;" class="next_div" page="pre"></a><a href="javascript:;" class="last_div" page="end"></a><div class="br"></div><a href="javascript:;" class="delbtn m_a" go="go">跳轉(zhuǎn)</a><a href="javascript:;" class="delbtn" del="del">刪除</a><div class="r m_a">當前第<span class="f_a"></span>頁 總共<span class="f_a"></span>頁 一頁<span class="f_a"></span>條數(shù)據(jù) 共<span class="f_a"></span>條數(shù)據(jù)</div></div>';
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(table,{cellpadding :"0",cellspacing:"0",border :"0"});
this.thead = $c('thead',table);
this.tbody = $c('tbody',table);
this.tbody.style.display = 'none';
//loading條
this.loading_bg = $c('div',container);
this.loading_bg.className = 'loading';
setStyle(this.loading_bg,{
width : container.offsetWidth+2+'px',
height : container.offsetHeight+2+'px'
});
this.loading = $c('div',container);
this.loading.className ='loaddiv'
setStyle(this.loading,{
left:(container.offsetWidth/2-45) + 'px',
top:(container.offsetHeight/2-14) + 'px'
});
this.loading.innerHTML = '<div class="loadgif">Loading...</div>';
//表格有多少列
this.colCount = options.fields.length;
// 數(shù)據(jù)源 形式是 [[],[],[],[],[],[]]
this.data = [];
// 當前請求到的數(shù)據(jù)源中 所有的分組頭 形式是 [trdom1,trdom2]
this.grouphead = [];
//記錄已經(jīng)插入table的分組的tr [tr1,tr2,tr3]
this.insertTrs = [];
//列索引
//形式 [[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 =[];
//一級菜單
this.popMenu = $c('div',doc.body);
this.popMenu.className = 'x-menu';
this.popMenu.innerHTML = '<ul class="x-menu-list"><li><a href="javascript:;" class="x-menu-item asc" menuType="asc">升序</a></li><li><a href="javascript:;" class="x-menu-item desc" menuType="desc">降序</a></li><li><a href="javascript:;" class="x-menu-item columns" menuType="columns">所有列</a></li></ul>';
// 創(chuàng)建子菜單
this.subPopMenu = $c('div',doc.body);
this.subPopMenu.className = 'submenu';
//表頭的第一級彈出層是否打開 如果打開 保存 該td
this.isMenuOpen = false;
//保存列所有列中 某一列是否顯示 或隱藏 num為計數(shù)器 看有多少列是現(xiàn)實中的
//格式 clos: [ true,false,true,true] 1,3,4列顯示 第2列隱藏
this.isShowTrs = {
num : 0,
clos: []
};
// 創(chuàng)建拖動時顯示的基準線
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,{
position : 'absolute',
display : 'none',
'z-index': '120'
});
this.editTable = $c('table',this.editForm);
setAttr(this.editTable,{
cellspacing:'0',
cellpadding:'0',
border:'0'
});
var btnC = $c('div',this.editForm);
btnC.className = 'editbtn';
btnC.style.textAlign = 'center';
btnC.innerHTML = '<div class="c"><a class="btn_a m_a" do="submit" href="javascript:;">提交</a><a class="btn_a" do="cancel" href="javascript:;">取消</a></div>';
this.editTable.className = 'edittable';
var etr = $c('tr', $c('tbody',this.editTable));
//創(chuàng)建一個 tr 的副本 因為后面生成tr的時候 可以直接復制節(jié)點
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.thead),
tWidth = 0,
self = this,
ul = $c('ul',this.subPopMenu),
li;
each(options.fields,function(i,o){
var td = $c('td',theadTr),
width = o.width?o.width:'80',
div = i===0?'<div class="c nobreak">':'<div class="c nobreak"><p></p>';
td.innerHTML = [div,'<span class="head_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:;" class="x-menu-item x-m_a" ><input type="checkbox" checked="true" cols="',
i,
'"/>',
o.name,
'</a>'
].join('');
//生成列索引 的 每列的第一項
self.columns[i] = [td];
$c('td',self.copyTr).setAttribute('unselectable','on');
//計算出 所顯示的列索引 和 一共多少列num
self.isShowTrs.num++;
self.isShowTrs.clos[i]=true;
});
setAttr(this.table,{width:tWidth+options.fields.length+1})
//生成tbody里面的tr 只是生成 tr 根據(jù)perPage生成 它是顯示當前一共有多少條數(shù)據(jù)的配置項
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);
each(arr,function(i){
//生成列索引的所有項
self.columns[i].push(tds[i]);
});
$c(tr,frag);
}
this.tbody.appendChild(frag);
if(typeof dataConfig === 'object'){
setTimeout(function(){self.getDataCallBack(dataConfig);},5);
}else{
}
/*
表格拖拽
表格排序
等一些操作
*/
addListener(this.thead,'click',bindAsEventListener(this,this.sortTable));
addListener(this.thead,'mouseover',bindAsEventListener(this,this.theadOver));
addListener(this.thead,'mouseout',bindAsEventListener(this,this.theadOut));
addListener(this.thead,'mousedown',bindAsEventListener(this,this.dragWidth));
/*
綁定彈出層click事件 進行排序
第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));
/*
放上去表格行的內(nèi)容變粗
*/
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,
self = this,
totla = 0;
this.data.length = 0;
if(data.data){
if(data.data[0].groupName){
var grouphead = this.grouphead;
grouphead.length = 0;
each(data.data,function(i,o){
var gtr = self.groupTr.cloneNode(true);
$q('td',gtr)[0].innerHTML = o.groupName;
grouphead.push(gtr);
each(o.rows,function(j,d){
//this.data中數(shù)據(jù)的最后一項是 索引
d.push(i);
self.data.push(d);
});
});
this.showGroup=true;
}else{
each(data.data,function(i,o){
self.data.push(o);
});
this.showGroup=false;
}
}else{
return;
}
total = data.total
? data.total>=this.data.length
? data.total
: this.data.length
: this.data.length;
this.writeMessage(total);
this.buildTbody(options.currPage);
},
buildTbody : function(pageNum){
if(this.data.length===0){
this.tbody.style.display = 'none';
return;
}
var i = 0,
j = 0,
self = this,
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 = {},
index,
arr = [],
insertTrs = this.insertTrs;
//清除掉之前插入的 分組tr
insertTrs.length!=0&&each(insertTrs,function(i,o){
self.tbody.removeChild(o);
});
insertTrs.length = 0;
//遍歷填充數(shù)據(jù) 給this.rows賦值
var num = - 1;
for(;i<trsLen;i++){
tr = trs[i];
//如果沒有數(shù)據(jù)了 就開始隱藏剩下的行
if(!data[i+start]){
tr.style.display = 'none';
continue;
}
//做標記 tr 里面的內(nèi)容對應data中哪條數(shù)據(jù)
tr.setAttribute('dataIndex',i+start);
tr.style.display = 'block';
tds = tr.getElementsByTagName('td');
//x為 分組的不同組的標識
var x = data[i+start][data[i+start].length-1];
//用來判斷后來的數(shù)據(jù)和之前的數(shù)據(jù)是不是同一個組的
//如果是同一個組的 選this.rows的最后一列添加
//不是同一個組的創(chuàng)建一列添加
num==x
? this.rows[this.rows.length-1].push(tr)
: (this.rows[this.rows.length] = [tr],num = x);
//用數(shù)組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
?render(txt)
:txt;
}
tr.style.display = '';
}
each(arr.reverse(),function(i,o){
insertTrs.push(self.grouphead[o[0]]);
self.tbody.insertBefore(self.grouphead[o[0]],trs[o[1]]);
});
}else{
for(;i<trsLen;i++){
tr = trs[i];
//做標記 tr 里面的內(nèi)容對應data中哪條數(shù)據(jù)
tr.setAttribute('dataIndex',i+start);
this.rows.push(tr);
//沒有數(shù)據(jù)的tr隱藏掉
if(!data[i+start]){
tr.style.display = 'none';
continue;
}
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
?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'),
bottomAs = this.bottom.getElementsByTagName('a');
if(options.totalPage===1){
bottomAs[0].className = topAs[0].className = 'first_div_no';
bottomAs[1].className = topAs[1].className = 'prev_div_no';
bottomAs[2].className = topAs[2].className = 'next_div_no';
bottomAs[3].className = topAs[3].className = 'last_div_no';
}else if(options.currPage===0){
bottomAs[0].className = topAs[0].className = 'first_div_no';
bottomAs[1].className = topAs[1].className = 'prev_div_no';
bottomAs[2].className = topAs[2].className = 'next_div';
bottomAs[3].className = topAs[3].className = 'last_div';
}else if(options.currPage+1===options.totalPage){
bottomAs[0].className = topAs[0].className = 'first_div';
bottomAs[1].className = topAs[1].className = 'prev_div';
bottomAs[2].className = topAs[2].className = 'next_div_no';
bottomAs[3].className = topAs[3].className = 'last_div_no';
}else{
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 = total;
},
sortTable : function(e){
var elem = e.target || e.srcElement,
self = this,
options = this.defaults,
elemName = elem.nodeName.toLowerCase(),
showGroup = this.showGroup,
tdElem = elem,
name = elemName;
//拖拽的時候可能會觸發(fā)一次click 原因是ie下全部綁定在this.table上 代碼見拖拽
if($q('td',elem).length>1)
return;
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 frag = doc.createDocumentFragment();
if(this.sortColumn!==tdElem&&this.sortColumn!==''){
removeClass(this.sortColumn,'sort-asc');
removeClass(this.sortColumn,'sort-desc');
}
if(issort){
// 有分組，每組單獨取反序 不分組，直接取反序
showGroup
? each(this.rows,function(i,o){ o.reverse();})
: this.rows.reverse();
tdElem.className = modify(tdElem.className,'sort',issort==='asc'?'desc':'asc');
}else{
showGroup
? each(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');
}else{
// 反序排列則將原有排序取反，并加上排序標志
showGroup
? each(this.rows,function(i,o){ o.reverse();})
: this.rows.reverse();
addClass(tdElem,'sort-desc');
}
}
// 將排序后的數(shù)據(jù)渲染到表格
var insertTrs = this.insertTrs,
len = insertTrs.length-1,
arr = [];
each(this.rows,function(i,tr){
arr = [insertTrs[len-i]].concat(tr);
showGroup
? each(arr,function(idx,obj){frag.appendChild(obj);})
: frag.appendChild(tr);
});
this.tbody.appendChild(frag);
this.sortColumn = tdElem;
}
//-------------------------------------------------------------------------------------
/*
如果點擊的是表頭中的 A 標簽，則彈出菜單
*/
if(elemName === 'a'){
/*
當在菜單外面點擊的時候會執(zhí)行 改函數(shù)
用于清空 document的 click事件 隱藏層 去掉td,a的樣式
*/
function documentClick(){
self.popMenu.style.display = 'none';
self.subPopMenu.style.display = 'none';
if(self.isMenuOpen){
removeListener(document,'click');
removeClass($q('div',self.isMenuOpen)[0],'theadfocus');
$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是真 表示 層是打開狀態(tài)的 執(zhí)行關(guān)閉相關(guān)的處理
this.isMenuOpen&&documentClick();
if(!checkReg(td.className,'type')){
addClass(lis[0],'disabled');
addClass(lis[1],'disabled');
}else{
removeClass(lis[0],'disabled');
removeClass(lis[1],'disabled');
}
Sys.ie
? e.cancelBubble = true
: e.stopPropagation();
//當顯示層的時候 吧該td附到this.isMenuOpen上
this.isMenuOpen = td;
addListener(document,'click',documentClick);
setStyle(this.popMenu,{
left : left+'px',
top : top+'px',
display :'block'
});
}
},
compare : 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]);
return a1==a2?0:a1<a2?1:-1;
}
},
pageBarClick : function(e){
var elem = e.target || e.srcElement,
options = this.defaults,
typePage = elem.getAttribute('page'),
isGo = elem.getAttribute('go');
isDel = elem.getAttribute('del');
if(typePage){
var number = {
start : 0,
end : options.totalPage-1,
next : options.currPage-1,
pre : options.currPage+1
}[typePage];
this.toPage(number);
}
if(isDel){
this.del();
}
if(isGo){
var number = ~~elem.parentNode.getElementsByTagName('input')[0].value-1;
this.toPage(number);
}
},
toPage : function(num){
if(typeof num !=='number'||isNaN(num))return;
var options = this.defaults,
self = this,
dataConfig = options.dataConfig;
//如果請求的分頁數(shù)小于0就默認為0 如果打越最大分頁數(shù) 就默認為最大分頁數(shù)
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))
return;
//如果離開了當前的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();
return;
}
//如果a標簽 的menuType
var menuOp = elem.getAttribute('menuType'),
sortOrder = checkReg(className,'sort');
//選擇所有列 不進行排序
if(menuOp==='columns')
return;
/*
如果沒有排序 就根據(jù)menuOp來進行排序
如果已排序 且與 menuOp排序方式不同 則進行排序
*/
if(sortOrder){
if(menuOp != sortOrder){
var td = $q('td',this.thead)[this.isMenuOpen.getAttribute('clos')];
fireEvent(td,'click');
}
}else{
this.ascSort = {
desc : false,
asc : true
}[menuOp];
var td = $q('td',this.thead)[this.isMenuOpen.getAttribute('clos')];
fireEvent(td,'click');
}
//完成上面的操作后 設置成正序 因為 之后點別的列 默認還是按正序列來排
this.ascSort = true;
}
},
menuOver : function(e){
var elem = e.target || e.srcElement;
if(elem.nodeName.toLowerCase()==='a'&&elem.getAttribute('menuType')==='columns'){
var pos = objPos(elem),
left = pos.left+Math.max(document.documentElement.scrollLeft,document.documentElement.scrollLeft) + elem.offsetWidth,
top = pos.top+Math.max(document.documentElement.scrollTop,document.documentElement.scrollTop);
setStyle(this.subPopMenu,{left:left+'px',top:top+'px',display:'block'});
}
},
subMenuClick : function(e){
var elem = e.target || e.srcElement,
isA = elem.nodeName.toLowerCase() === 'a';
Sys.ie
? e.cancelBubble = true
: e.stopPropagation();
if(isA||elem.nodeName.toLowerCase() === 'input'){
var input = isA
? $q('input',elem.parentNode)[0]
: elem,
clos = input.getAttribute('cols'),
self = this;
isA
&&(input.checked = (!input.checked));
var checked = input.checked,
hideOrShow = checked ? '' : 'none';
//如果還剩一列 并且這次是取消選中的
//則 不執(zhí)行隱藏
if(this.isShowTrs.num===1&&!checked){
input.checked = true;
return false;
}
checked
?(this.isShowTrs.num++,this.isShowTrs.clos[clos]=true)
:(this.isShowTrs.num--,this.isShowTrs.clos[clos]=false);
//如果實現(xiàn)了分組 還必須把組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'))
return;
//如果是分組的行tr 就返回
if(elem.nodeName.toLowerCase()==='td'&&parent.getAttribute('g')==='y')
return;
isHight
? addClass(parent,'rowfocus')
: removeClass(parent,'rowfocus');
},
selectRow : function(e){
var elem = e.target || e.srcElement;
if(elem.getAttribute('g')||elem.parentNode.getAttribute('g'))
return;
var self = 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');
//選中那行的如果已經(jīng)選中了 就取消選中 并且 刪除樣式
//從 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;
}else{
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);
}else{
var allRows = [];
//如果有分組 個并所有的tr到一個數(shù)組
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到一個數(shù)組
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)
return;
var options = this.defaults,
self = this,
widthConfig = options.widthConfig,
td = elem.parentNode.parentNode;
widthConfig.x = e.clientX;
widthConfig.td = td;
Sys.ie
? this.table.setCapture(false)
: e.preventDefault();
widthConfig.prevTd = this.columns[i][0];
widthConfig.tdWidth = ~~td.width;
widthConfig.prevWidth = ~~widthConfig.prevTd.width;
var height = Math.min(this.tabContainer.offsetHeight,this.table.offsetHeight),
scrollHeight = this.tabContainer.offsetHeight>=this.table.offsetHeight?0:18,
documentScrollLeft = doc.body.scrollLeft;
setStyle(this.line,{
left : e.clientX + doc.documentElement.scrollLeft + 'px',
height : height-scrollHeight +"px",
top : objPos(this.tabContainer).top+Math.max(document.documentElement.scrollTop,document.documentElement.scrollTop)+2+'px'
});
addListener(doc,'mousemove',bindAsEventListener(this,this.widthMove));
addListener(doc,'mouseup',bindAsEventListener(this,this.widthUp));
}
},
widthMove : function(e){
win.getSelection
? win.getSelection().removeAllRanges()
: doc.selection.empty();
var options = this.defaults,
widthConfig = options.widthConfig,
left = e.clientX,
clientX = left,
cellMinWidth = options.cellMinWidth;
if(clientX>widthConfig.x&&e.clientX - widthConfig.x>widthConfig.tdWidth-cellMinWidth){
left = widthConfig.x +widthConfig.tdWidth -cellMinWidth;
}
if(clientX<widthConfig.x&&widthConfig.x-clientX>widthConfig.prevWidth-cellMinWidth){
left = widthConfig.x - widthConfig.prevWidth +cellMinWidth;
}
setStyle(this.line,{
left : left + Math.max(document.documentElement.scrollLeft,document.body.scrollLeft)+"px",
display : "block"
});
},
widthUp : function(e){
this.line.style.display = 'none';
var widthConfig = this.defaults.widthConfig,
x = parseInt(this.line.style.left)- Math.max(doc.documentElement.scrollLeft,doc.body.scrollLeft) - widthConfig.x ;
widthConfig.prevTd.width = ~~widthConfig.prevWidth + x ;
widthConfig.td.width = ~~widthConfig.tdWidth -x;
Sys.ie && this.table.releaseCapture();
removeListener(doc,'mousemove');
removeListener(doc,'mouseup');
},
createInput : function(i,obj, parent){
var etd = $c('td',parent),
input = $c('input',etd),
type = obj.edit;
etd.width = obj.width
input.type = 'text';
input.setAttribute('index',i);
!type
&&input.setAttribute('readonly','readonly')
etd.appendChild(input);
input.className ='x-form-text i_a';
setStyle(input,{
width : obj.width - 1 +'px',
background : 'white'
});
},
editRow : function(e){
var elem = e.target || e.srcElement,
self = this,
options = this.defaults,
nodeName = elem.nodeName.toLowerCase();
if(nodeName!=='td'){
while(elem.nodeName.toLowerCase()!=='td'){
elem = elem.parentNode;
}
}
var tr = elem.parentNode;
this.currentEditRow.index = tr.getAttribute('dataindex');
this.currentEditRow.dom = tr;
if(tr.getAttribute('g'))
return;
var sTop = ~~this.tabContainer.scrollTop,
sLeft = ~~this.tabContainer.scrollLeft,
cTds = $q('td',tr);
pTds = $q('td',$q('tr',this.editTable)[0]),
txt = Sys.ie?'innerText':'textContent';
setStyle(this.editForm,{
top : tr.offsetTop + 'px',
left : tr.offsetLeft + 'px',
display : ''
});
each(cTds,function(i,td){
$q('input',pTds[i])[0].value = td[txt];
});
},
modifyTr : function(e){
var elem = e.target || e.srcElement;
if(elem.nodeName.toLowerCase()==='a'){
var tds = $q('td',this.editTable),
txt = txt =Sys.ie?'innerText':'textContent',
isC = false;
if(elem.getAttribute('do')==='submit'){
alert('索引為'+this.currentEditRow.index)
}
this.editForm.style.display = 'none';
}
}
});
})(document);
window.onload = function(){
var data ={
//total:'55',
data : []
}
var s='阿斯達三大散打三個而個呃 奮斗個我是地方我?guī)煾?威爾 地方威爾威爾威爾 豆腐干 沃爾與體育 56 范甘迪威爾 請問額請問散阿薩德b你嗎 嗎嗎 阿斯 zweas dqwesdf 阿凡達散打有人6 斯蒂芬與',
b = ['人民幣','歐元','美元'],
n = ['張三','李四','王五','趙六','陳七','豬八']
each(new Array(3000),function(i,o){
data.data.push([i+1,n[i%5]+i,(i%3===0?'-':'')+parseInt(Math.random()*1000),b[i%2],'1984-05-27',s.substring(Math.random()*10,Math.random()*10+15)])
});
data5 = {
total: 11,
data : [
{
groupName : '平安銀行',
rows : [
[1,'平安銀行一張同-賬單','-29792.66','日元','1928-06-15','一般'],
[2,'平安銀行信用卡-賬單','26268.99','歐元','1950-04-14','一般'],
[3,'平安銀行基金-賬單','-84149.12','英磅','1927-05-08','一般'],
[4,'平安銀行信用卡-賬單','23782.40','歐元','1995-01-05','一般'],
[5,'平安銀行國債-賬單','-48355.53','人民幣','1953-07-01','很好'],
[6,'平安銀行信用卡-賬單','14922.48','人民幣','1954-08-04','一般'],
[7,'平安銀行信用卡-賬單','87252.78','人民幣','1956-10-01','很好'],
[8,'平安銀行基金-賬單','-67287.72','英磅','1948-02-24','一般'],
[9,'平安銀行基金-賬單','-51724.44','美元','1943-09-11','很差']
]
},
{
groupName : '交通銀行',
rows : [
[151,'交通銀行一張同-賬單','23062.39','英磅','1959-01-03','一般'],
[152,'交通銀行信用卡-賬單','10634.01','英磅','1967-09-23','很好'],
[153,'交通銀行基金-賬單','-69832.32','美元','2000-06-07','很差'],
[154,'交通銀行信用卡-賬單','-22260.14','英磅','1999-05-27','很差'],
[155,'交通銀行國債-賬單','92868.28','英磅','1911-01-03','一般'],
[156,'交通銀行信用卡-賬單','77059.80','英磅','1990-08-03','一般']
]
},
{
groupName : '渣打銀行',
rows : [
[182,'渣打銀行一張同-賬單','26046.45','英磅','1923-01-22','很好'],
[183,'渣打銀行信用卡-賬單','-57036.21','歐元','1974-04-20','很差']
]
},
{
groupName : '浦發(fā)銀行',
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 : '農(nóng)業(yè)銀行',
rows : [
[430,'農(nóng)業(yè)銀行一張同-賬單','23474.59','日元','1983-01-13','一般'],
[431,'農(nóng)業(yè)銀行信用卡-賬單','-64526.95','日元','1952-06-10','很好'],
[432,'農(nóng)業(yè)銀行基金-賬單','49975.19','美元','1975-05-18','一般']
]
}
]
}
function xx(v){
return ~~v<0
? '<span class="greed">'+v+'</span>'
: '<span class="red">'+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,
//一次請求多少條數(shù)據(jù)
count : 2000,
//第幾版數(shù)據(jù)
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,
//一次請求多少條數(shù)據(jù)
count : 2000,
//第幾版數(shù)據(jù)
page : 0
});
};
</script>
</body>
</html>
水平有限 請多指教
相關(guān)文章
這篇文章主要為大家詳細介紹了JS實現(xiàn)按鈕顏色切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
下載站控制介紹字數(shù)顯示的腳本 顯示全部 隱藏介紹等功能
有一些下載網(wǎng)站為了整體的統(tǒng)一，盡量的控制軟件介紹的字數(shù)顯示，要不因為字數(shù)介紹太多導致用戶看到下載鏈接比較靠后等原因而一個小功能的實現(xiàn)。2009-09-09
uniapp實現(xiàn)微信一鍵登錄按鈕樣式(膠囊按鈕的樣式)
這篇文章主要介紹了uniapp實現(xiàn)微信一鍵登錄按鈕樣式，如何開發(fā)膠囊按鈕的樣式,需要的朋友可以參考下2024-07-07
本文從7個方面講述 JavaScript 中那些你不很熟知但非常實用的技巧。2010-08-08
微信支付如何實現(xiàn)內(nèi)置瀏覽器的H5頁面支付
這篇文章主要介紹了微信支付如何實現(xiàn)內(nèi)置瀏覽器的H5頁面支付的相關(guān)資料,需要的朋友可以參考下2015-09-09
微信小程序如何修改radio和checkbox的默認樣式和圖標
這篇文章主要介紹了微信小程序修改radio和checkbox的默認樣式和圖標,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
本文主要分享了canvas繪制表盤時鐘的示例代碼。具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章主要介紹了js函數(shù)內(nèi)變量的作用域分析,以實例形式簡單分析了js函數(shù)的變量調(diào)用順序,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了js調(diào)出上下文菜單的實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-12-12
搜了搜這個，發(fā)現(xiàn)找不到答案。所以自己寫了一個，很多程序繞過這個問題，往往人工來決定在何處截斷 ，太麻煩了。2008-07-07