http://www.w3.org/1999/xhtml">
表格標題>
1.排序 自定义排序方式
2.编辑
3.拖拽
4.分页
5.单选 多选(ctrl) 线性选(shift)
6.文字render 就是给文字着色 比如 大于0红色 小于0绿色
7.对列的显示隐藏
8.分组
下面是分组的 且有一个自定义排序方式 很好 一般 很差
<腳本類型=“text/javascript”>
（函數（文檔，未定義）{
var win = this;
win.Sys = 函數 (ua){
var b = {
即： /msie/.test(ua) && !/opera/.test(ua),
歌劇：/opera/.test(ua),
Safari: /webkit/.test(ua) && !/chrome/.test(ua),
火狐：/firefox/.test(ua),
鉻：/chrome/.test(ua)
},vMark = "";
for (var i in b) {
if (b[i]) { vMark = "safari" == i ? 「版本」：我；休息; }
}
b.version = vMark && RegExp("(?:" vMark ")[\/: ]([\d.] )").test(ua) ? RegExp.$1 : "0";
b.ie6 = b.ie && parseInt(b.version, 10) == 6;
b.ie7 = b.ie && parseInt(b.version, 10) == 7;
b.ie8 = b.ie && parseInt(b.version, 10) == 8;
回傳 b;
}(win.navigator.userAgent.toLowerCase());
win.Sys.ie6&&doc.execCommand("BackgroundImageCache", false, true);
win.$$ = 函數(id){
返回 typeof id === 'string'
？ doc.getElementById(id)
: id;
};
win.$q = 函數(名稱,父級){
returnparent.getElementsByTagName(name);
}
win.$c = 函數(姓名,父級){
var elem = typeof name ==='物件'？名稱 : doc.createElement(name);
父&&parent.appendChild(elem);
返回元素；
};
win.addListener = function(element,e,fn){
!element.events&&(element.events = {});
element.events[e]&&(element.events[e][addListener.guid ]=fn)||(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）{
for（輸入處理程序）
if(handlers[type]===fn){
element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" e,fn);
刪除處理程序[類型];
}
}其他{
for（輸入處理程序）{
element.removeEventListener?element.removeEventListener(e,handlers[type],false):element.detachEvent("on" e,handlers[type]);
刪除處理程序[類型];
}
}
};
win.fireEvent = function(element,eventName){
if(元素[事件名稱]){
元素[事件名稱]();
}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"){
樣式 = 值 === 未定義？ {cssText:style}:(function(o){
return (o[樣式] = 值,o);
})({});
};
每個（elems，函數（i，elem，樣式）{
var value,name,ie=Sys.ie ;
for（名稱風格）{
值 = 樣式[名稱];
if (name === "不透明度" && ie) {
elem.style.filter = (elem.currentStyle.filter || "").replace( /alpha([^)]*)/, "" ) "alpha(opacity=" value * 100 ")";
}else if(name === "float"){
elem.style[ 即 ? "styleFloat" : "cssFloat" ] = 值;
}其他{
name = name.replace(/-([a-z])/ig, function(all, letter){
return letter.toUpperCase();
});
elem.style[姓名] = 值;
}
}
},風格);
};
win.setAttr = function(dom,attr){
if(typeof attr !== 'object')
返回；
for(attr 中的變數名稱)
dom.setAttribute(name,attr[name]);
}
var slice = Array.prototype.slice;
win.bind = 函數(物件, 樂趣) {
var args = slice.call(arguments).slice(2);
回傳函數() {
return fun.apply(object, args);
};
};
win.bindAsEventListener = function(object, fun,args) {
var args = slice.call(arguments).slice(2);
返回函數（事件）{
return fun.apply(object, [event || win.event].concat(args));
}
};
win.extend = function(){
var 目標 = 參數[0] || {}, i = 1, length = argument.length, deep = true, options;
if ( typeof target === "boolean" ) {
深度=目標；
目標=參數[1] || {};
我 = 2;
}
if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]")
目標 = {};
for(;i<長度;i){
if ( (options = argument[ i ]) != null )
for(選項中的變數名稱){
var src = target[ name ], copy = options[ name ];
if ( 目標 === 複製 )
繼續；
if ( deep && copy && typeof copy === "object" && !copy.nodeType ){
target[ name ] = argument.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy );
}
else if(複製！==未定義)
目標[姓名]=複製；
}
}
返回目標；
};
win.Class = 函數(屬性){
var _class = function(){
return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function')
？ this.initialize.apply(this, 參數)
：這；
};
_class.prototype = 屬性;
回傳_class;
};
win.each = 函數（物件、回呼、參數）{
var name, i = 0, length = object.length;
if ( args ) {
args = Array.prototype.slice.call(arguments).slice(2);
if ( 長度 === 未定義 ) {
for (物件中的名稱)
if (callback.apply(object[ name ],[name,object[ name ]].concat(args) ) === false )
休息;
} 其他
for ( ; i < 長度; i )
if (callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) //
休息;
} 其他 {
if ( 長度 === 未定義 ) {
for (物件中的名稱)
if (callback.call(object[ name ], name, object[ name ] ) === false )
休息;
} 其他
for ( var value = object[0];
我< length && callback.call( value, i, value ) !== false;值 = 物件[ i] ){}
}
回傳對象；
};
win.currentStyle = 函數(元素){
回傳元素.currentStyle || doc.defaultView.getComputedStyle(element, null);
};
win.objPos = 函數(elem){
var 左 = 0，上 = 0，右 = 0，下 = 0，doc = elem ？ elem.ownerDocument : doc;
if ( !elem.getBoundingClientRect || win.Sys.ie8 ) {
var n = elem;
while (n) { 左 = n.offsetLeft, 上 = 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.bottom;
}
return { "left": 左, "top": 上, "right": 右, "bottom": 下 };
};
win.contains = function(k,j){
返回 document.compareDocumentPosition
？ k.compareDocumentPosition(j)&16
: k!==j&&k.contains(j);
};
win.hasClass = 函數(元素, 類別名稱){
return element.className.match(new RegExp('(
\s|^)' className '(\s|$)'));
};
win.addClass = 函數(元素, 類別名稱){
if(!win.hasClass(element, className))
element.className.replace(/s/g,'')===''
？ element.className = 類別名稱
: element.className = " " className;
};
win.removeClass = 函數(元素, 類別名稱){
win.hasClass(element, className)&&(element.className = element.className.replace(new RegExp('(\s*|^)' className '(\s*|$)'),' '));
}
})(文檔);
（函數（文檔，未定義）{
var win = 這個，
uuid = -1;
/*
檢查字串中是否有key
如果有且關鍵後面是- 回-後面的東西否則回傳true
偵測不到回傳false
*/
函數 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');
return str.replace(reg,'$1$2' value '$3');
};
win.easyGrid = 新類別({
選項 : {
每頁 : 10,
currPage : 0,
總頁數 : 0,
計數 : 10,
頁 : 0,
isEdit : false,
寬度配置：{
td ：空，
上一個Td：空，
x : 0,
td寬度：0，
上一頁寬度：0
},
單元格最小寬度：50，
排序類型：{
int : function(v){return parseInt(v)},
float ：函數（v）{返回parseFloat（v）}，
日期 : function(v){return v.toString()},
字串 : function(v){return v.toString()}
},
標題 : '標題'
},
初始化：函數（選項）{
var op = 擴充(true,{},this.options),
選項 = this.defaults = 擴充(op,選項),
容器 = this.container = $c('div',options.container),
dataConfig = options.dataConfig,
標題 = $c('div',container);
容器.className = '容器';
title.innerHTML = options.title;
title.className = '標題';
this.primaryKey = options.primaryKey;
this.top = $c('div',container);
this.top.className = 'bar';
this.top.innerHTML = '';
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 = 'Loading...
';
//表格有多少列
this.colCount = options.fields.length;
// 数据源 形式是 [[],[],[],[],[],[]]
this.data = [];
// 当前请求到的数据源中 所有的分组头 形式是 [trdom1,trdom2]
this.grouphead = [];
//记录已经插入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 = '';
// 创建子菜单
this.subPopMenu = $c('div',doc.body);
this.subPopMenu.className = 'submenu';
//表头的第一级弹出层是否打开 如果打开 保存 该td
this.isMenuOpen = false;
//保存列所有列中 某一列是否显示 或隐藏 num为计数器 看有多少列是现实中的
//格式 clos: [ true,false,true,true] 1,3,4列显示 第2列隐藏
this.isShowTrs = {
num : 0,
clos: []
};
// 创建拖动时显示的基准线
this.line = $c('div',doc.body);
this.line.className = 'line';
//保存行
//属性为uuid的递增量如 {1:dom,2:dom}
this.selectedRows = {};
// 保存最后选中的行
this.lastSelectRow = {dom:null,index:null};
this.currentEditRow = {index:0,dom:null};
this.editData = [];
this.editForm = $c('div',tabContainer);;
setStyle(this.editForm,{
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 = '';
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.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?'':'
';
td.innerHTML = [div,'
',o.name,''].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 = [
'
