原生javascript實作簡單的datagrid資料表_javascript技巧

簡單的datagrid

1.排序 自訂排序方式

2.編輯

3.拖曳

4.分頁

5.單選 多選(ctrl) 線性選(shift)

6.文字render  就是給文字著色  例如 大於0紅色  小於0綠色

7.對列的顯示隱藏

8.分組

只是一個範例  沒有什麼與後台的藉口

其實可以寫幾個回呼就行了  裡面有loading條 可以在沒回傳結果前一直顯示

複製程式碼 程式碼如下:

 
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 = [
     '',
     o.name,
     ''
    ].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 根據perPage產生 它是顯示目前一共有多少條資料的設定項
   var i=0,
    trsLen = options.perPage,
    frag   = doc.createDocumentFragment(),
    arr    = new Array(options.fields.length),
    tr,
    tds;
   for(;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));
   
   /*
    放上去表格行的內容變粗
   */
   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;
     
     每個（數據.數據，函數（i，o）{
      var gtr = self.groupTr.cloneNode(true);
      $q('td',gtr)[0].innerHTML = o.groupName;
      grouphead.push(gtr);
      每個（o.rows，函數（j，d）{
      //this.data中資料的最後一項是索引
       d.推(i);            
       self.data.push(d);    
      });      
     });
     this.showGroup=true;
    }其他{
     每個（資料.數據，函數（i，o）{          
      self.data.push(o);     
     });
     this.showGroup=false;
    }
   }其他{
    返回；
   }
   總計 = data.total
     ？ data.total>=this.data.length
      ？數據.總計
      : this.data.length
     : this.data.length;
   this.writeMessage(總計);
   this.buildTbody(options.currPage);
  },  
  buildTbody : 函數(pageNum){
   if(this.data.length===0){
    this.tbody.style.display = '無';
    返回; 
   }
   
   var i       = 0,
    j       = 0,
    自我    = 這個，
    資料    = this.data,
    選項 = this.defaults,
    trsLen = options.perPage,
    tdsLen = options.fields.length,
    tbody   = this.tbody，
    trs     = tbody.getElementsByTagName('tr'),
    開始 = pageNum*options.perPage,
    tr；
   this.rows.length = 0;
   
   if(this.showGroup){
    var 組 = {},
     索引，
     arr = [],
     insertTrs = this.insertTrs;
           
    //清除先前插入的分區tr
    insertTrs.length!=0&&each(insertTrs,function(i,o){
     self.tbody.removeChild(o);
    });
    insertTrs.length = 0;     
    
    //遍歷填入資料給this.rows屬性    
    var num = - 1;
    for(;i      tr = trs[i];
     
     //若沒有資料就開始隱藏剩餘行
     if(!data[我開始]){
      tr.style.display = '無';
      繼續；
     }
     
     // 做標記tr裡面的內容對應資料中哪一條資料
     tr.setAttribute('dataIndex',i start);
     tr.style.display = '塊';
     tds = tr.getElementsByTagName('td');
     //x為分組的不同組別的識別
     var x = data[i start][data[i start].length-1];
     //用來判斷後來的資料和先前的資料是不是同一個組別的
     //如果是同一組的 選this.rows的最後一列新增
     //不是同一個群組的建立一列新增
 
     num==x
      ? this.rows[this.rows.length-1].push(tr)
      : (this.rows[this.rows.length] = [tr],num = x);
      
     //用陣列arr 記住每個分組的的第一個tr的位置 因為後面要插入tr頭  i為位置 num為分組的序號  
     !(num in group)&&(group[num] = i start,arr.push([num,i]));
     for(j = 0;j       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      tr = trs[i];
     //做標記 tr 裡面的內容對應data中哪一個資料 
     tr.setAttribute('dataIndex',i start);     
     this.rows.push(tr);
     //沒有資料的tr隱藏掉
     if(!data[i start]){
      tr.style.display = 'none';
      continue;
     }
     tr.style.display = '';
     tds = $q('td',tr);
  
     for(j = 0;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';
   }其他{
    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 ='無';
   this.loading.style.display ='none';
   
  },
  writeMessage : 函數（總共）{
   var options     = this.defaults,
    基數        = 總計/options.perPage,
    topSpans    = this.top.getElementsByTagName('span'),
    BottomSpans = this.bottom.getElementsByTagName('span');    
   options.totalPage = 基數 > parseInt(基)
         ？          ： 根據； 
   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 = 總計;
  },  
  排序表：函數（e）{
   var elem = e.target || e.srcElement,    
    =自我這個，
    選項 = this.defaults,
    elemName = elem.nodeName.toLowerCase(),
    showGroup = this.showGroup,
    tdElem    = elem,
    名稱      = elemName;
    
   //拖曳的時候可能會觸發一次click原因是ie下全部綁定在this.table上程式碼見拖曳
   if($q('td',elem).length>1)
    返回；
   if(name !== 'td'){
    while(name !== 'td'){
     tdElem = tdElem.parentNode;
     name = tdElem.nodeName.toLowerCase();
    } 
   }
   var issort = checkReg(tdElem.className,'sort'),
    類型 = 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');
    } 
    如果（排序）{
     // 有分組，每組單獨取反序  不分組，直接取反序
     表演組
      每個(this.rows,function(i,o){ o.reverse();}) 
      : this.rows.reverse();
      tdElem.className =修改(tdElem.className,'sort',issort==='asc'?'desc':'asc');
    }其他{
     表演組
      每個(this.rows,函數(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');
     }其他{
      // 反序排列則將原有排序取反，並加上排序標誌
      表演隊
       ? each(this.rows,function(i,o){ o.reverse();})
       : this.rows.reverse();
      addClass(tdElem,'sort-desc');
     }    
    }
    
    // 將排序後的資料渲染到表格
    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'){
    /*
     當在選單外點選的時候會執行 改函數
     用於清除 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是真 表示 層是開啟狀態的  執行關閉相關的處理
    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]);
    返回 a1==a2?0:a1    }
  },   
  pageBarClick : 函數(e){
   var elem     = e.target || e.srcElement,
    選項 = this.defaults,
    typePage = elem.getAttribute('page'),
    isGo     = elem.getAttribute('go');
    isDel    = elem.getAttribute('del');
    
    if(typePage){
     變數編號 = {
      開始：0，
      結束   : options.totalPage-1,
      下一個：options.currPage-1，
      前   : options.currPage 1
     }[typePage];
     this.toPage(數);
    }
    if(isDel){
     this.del();
    }
    
    if(isGo){
     var number = ~~elem.parentNode.getElementsByTagName('input')[0].value-1;
     this.toPage(數);
    }  
  },
  toPage : 函數(num){
   if(typeof num !=='number'||isNaN(num))return;
   var options    = this.defaults,
    self       = 這個，
    資料配置 = 選項.資料配置;    
   //如果請求的分頁數小於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 = '無';
   this.loading_bg.style.display = '';;
   this.loading.style.display = '';
   setTimeout(function(){self.buildTbody(num);},10);  
   
  },
  del : 函數(){
   // 做刪除的時候需要有主鍵的索引 我全部存在tr的
   var selectedRows = this.selectedRows,
    arr = []
    for(selectedRows 中的變數名稱){     
     arr.push(selectedRows[name].getAttribute('dataIndex'));
    }
   alert('選擇了主鍵值為' arr.join(','));
  },
  theadOver : 函數(e){
   var elem = e.target || e.srcElement;
   if(elem.nodeName.toLowerCase() === 'div'){
    $q('a',elem)[0].style.display = 'block';
    addClass(elem,'theadfocus');
   }
  },
  theadOut : 函數(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父 = 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        

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn