ホームページ > ウェブフロントエンド > jsチュートリアル > ネイティブ JavaScript は単純な datagrid データを実装します table_javascript スキル

ネイティブ JavaScript は単純な datagrid データを実装します table_javascript スキル

WBOY
リリース: 2016-05-16 16:22:34
オリジナル
1455 人が閲覧しました

単純なデータグリッド

1. 並べ替え カスタム並べ替え方法

2.編集

3. ドラッグ

4. ページネーション

5. 単一選択、複数選択 (ctrl)、線形選択 (shift)

6. テキストのレンダリングでは、テキストに色を付けます (0 より大きい場合は赤、0 より小さい場合は緑など)。

7. 列の表示と非表示

8. グループ化

バックエンドについては単なる例です。

実際には、いくつかのコールバックを記述するだけで済みます。内部には読み込みバーがあり、結果が返されるまで表示できます。

コードをコピー コードは次のとおりです:

 
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),
   サファリ: /webkit/.test(ua) && !/chrome/.test(ua),
   Firefox: /firefox/.test(ua),
   クロム: /chrome/.test(ua)
  },vMark = "";
  for (var i in b) {
   if (b[i]) { vMark = "サファリ" == i ? 「バージョン」: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){
  ID の型を返す === '文字列'
   ? doc.getElementById(id)
   : id;
 };
 win.$q = function(name,parent){
  returnparent.getElementsByTagName(name);
 }
 win.$c = function(name,parent){
  var elem = 名前の種類 ==='オブジェクト'?名前: doc.createElement(name);
  親&&親.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;
  if(fn){
   for(ハンドラーを入力)
    if(ハンドラー[タイプ]===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(要素,イベント名){
  if(要素[イベント名]){
   要素[イベント名]();
  }else if(element.fireEvent){
   element.fireEvent('on' イベント名);
  }else if(doc.createEvent){
   var evt = doc.createEvent("マウスイベント");
   evt.initEvent(イベント名, 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);          
   })({});
  };
  each(elems,function(i,elem,style){
   var 値,名前,ie=Sys.ie ;
   for(スタイル名){
    値 = スタイル[名前];
    if (名前 === "不透明度" && 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, 文字){
      return Letter.toUpperCase();
     });
     elem.style[名前] = 値;
    }
   }
  },スタイル);
 };
 win.setAttr = function(dom,attr){
  if(属性の種類 !== 'オブジェクト')
   戻る;
  for(属性内の変数名)
   dom.setAttribute(name,attr[name]);
 }
 
 var スライス = Array.prototype.slice;
 win.bind = function(object, fun) {
  var args = slide.call(arguments).slice(2);
  return function() {
    return fun.apply(object, args);
  };
 };
 
 win.bindAsEventListener = function(object, fun,args) {
  var args = slide.call(arguments).slice(2);
  戻り関数(イベント) {
   return fun.apply(object, [event || win.event].concat(args));
  }
 };
 win.extend = function(){
  var ターゲット = 引数[0] || {}、i = 1、長さ = argument.length、深さ = true、オプション;
  if ( typeof target === "boolean" ) {
   深い = ターゲット;
   ターゲット = 引数[1] || {};
   i = 2;
  }
  if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[オブジェクト関数]")
   ターゲット = {};
  for(;i    if ( (オプション = 引数[ i ]) != null )
    for(オプションの変数名){
     var src = ターゲット[名前]、コピー = オプション[名前];
     if (ターゲット === コピー)
      続行;
     if ( deep && copy && typeof copy === "object" && !copy.nodeType ){
      target[ name ] = argument.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy );
     }
     else if(コピー !== 未定義)
      ターゲット[名前] = コピー;                      
    }
  }
  リターンターゲット。          
 };
 
 win.Class = function(properties){
  var _class = function(){
   return (arguments[0] !== null && this.initialize && typeof(this.initialize) == '関数')
    ? this.initialize.apply(this, 引数)
    : これ;
  };
  _class.prototype = プロパティ;
  return _class;
 }; 
 win.each = function ( object, callback, args ) {
  変数名、i = 0、長さ = 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      if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) //
      壊す; 
  } else {
   if ( 長さ === 未定義 ) {
    for ( オブジェクト内の名前 )
     if ( callback.call( object[ name ], name, object[ name ] ) === false )
      壊す; 
   } 他
    for ( var value = object[0];
     私は<長さ && callback.call( value, i, value ) !== false;値 = オブジェクト[ i] ){}
  }
  オブジェクトを返します。 
 }; 
 win.currentStyle = 関数(要素){
  戻り要素.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; };
   右 = 左 elem.offsetWidth;底部 = 上部の elem.offsetHeight;
  } else {
   var rect = elem.getBoundingClientRect();
   左 = 右 = doc.documentElement.scrollLeft || doc.body.scrollLeft;
   上 = 下 = doc.documentElement.scrollLeft || doc.body.scrollLeft;
   左 = 直方体左; right =rect.right;
   トップ = 長方形トップ;ボトム=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 = function(element, className){
  return element.className.match(new RegExp('(\s|^)' className '(\s|$)'));
 };
 win.addClass = function(element, className){
  if(!win.hasClass(要素, クラス名))
   element.className.replace(/s/g,'')===''
    ? element.className = クラス名
    : element.className = " " className;
 };
 win.removeClass = function(element, className){
  win.hasClass(element, className)&&(element.className = element.className.replace(new RegExp('(\s*|^)' className '(\s*|$)'),' '));
 }
})(ドキュメント);
(関数(ドキュメント,未定義){
 var win = これ,
  uuid = -1;
 /*
  检查字符串中是有キー
  結果があり、キー後面が - 後面を返す場合、そうでない場合は true を返します
  检测不到返false
 */
 関数 checkReg(str,key){
  var reg = new RegExp('(?:^|\s)' キー '\b-?(.*?)(?:\s|$)','i');
  if(reg.exec(str)!=null){
   return RegExp.$1===''?true:RegExp.$1;
  }その他{
   false を返します。 
  }
 };
 /*
  修正文字符串中キー应の値
 */
 関数変更(str,key,value){
  var reg = new RegExp('(^|\s)(' key '\b-).*?(\s|$)','i');
  return str.replace(reg,'$1$2' value '$3');
 }; 
 win.easyGrid = 新しいクラス({
  オプション : {
   ページあたり : 10、
   現在のページ : 0,
   合計ページ : 0,
   count : 10,
   ページ : 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)},
    日付 : function(v){return v.toString()},
    文字列: function(v){return v.toString()}
   }、
   タイトル : '标题'
  }、
  初期化:関数(オプション){
   var op = extend(true,{},this.options),
    options = this.defaults = extend(op,options),
    コンテナ = this.container = $c('div',options.container),
    dataConfig = options.dataConfig,
    タイトル = $c('div',container);
   コンテナ.クラス名 = 'コンテナ'; 
   title.innerHTML = options.title;
   title.className = 'タイトル';
   this.primaryKey = options.primaryKey;
   this.top = $c('div',container);
   this.top.className = 'バー';
   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 === unknown?'':'type-' o.type});
Self.createInput(i,o,etr);
tWidth = tWidth (~~幅);
li = $c('li',ul);
li.innerHTML = [
''、
o.名前、
'
'
].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の生成はperPageに基づいてtrを生成するだけです
現在データが何個あるかを表示する設定項目です。 var i=0,
trsLen = options.perPage,
frag = doc.createDocumentFragment(),
arr = 新しい配列(options.fields.length),
て、
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(dataConfig の種類 === 'オブジェクト'){
setTimeout(function(){self.getDataCallBack(dataConfig);},5); }その他{

}
/*
フォームのドラッグアンドドロップ
テーブルの並べ替え
いくつかの操作を待っています
*/
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));

/*
ポップアップレイヤーのクリックイベントをバインドして並べ替えます
列を非表示にして
を表示する第 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,
自分 = これ、
トトラ = 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 中のデータの最後の部分はインデックス
       d.push(i);            
       self.data.push(d);    
      });      
     });
     this.showGroup=true;
    }その他{
     each(data.data,function(i,o){
      self.data.push(o);     
     });
     this.showGroup=false;
    }
   }その他{
    戻る;
   }
   合計 = データ.合計
     ? data.total>=this.data.length
      ?データ.合計
      : this.data.length
     : this.data.length;
   this.writeMessage(合計);
   this.buildTbody(options.currPage);
  },
  buildTbody : function(pageNum){
   if(this.data.length===0){
    this.tbody.style.display = 'none';
    戻る; 
   }
   
   var i = 0,
    j = 0,
    自分 = これ、
    データ = this.data,
    オプション = 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 グループ = {},
     インデックス、
     arr = [],
     insertTrs = this.insertTrs;
           
    //清除掉前插入の分組tr
    insertTrs.length!=0&&each(insertTrs,function(i,o){
     self.tbody.removeChild(o);
    });
    挿入Trs.length = 0;     
    
    //遍历充填データベース 给this.rows赋值
    var num = - 1;
    for(;i      tr = trs[i];
     
     //如果没データ了 就始開始隐藏剩下の行
     if(!data[i start]){
      tr.style.display = 'none';
      続行;
     }
     
     //做标记 tr里面的内容对应データ中哪条データー
     tr.setAttribute('dataIndex',i start);
     tr.style.display = 'ブロック';
     tds = tr.getElementsByTagName('td');
     //x は分単位の異なるグループの标识
     var x = データ[i 開始][データ[i 開始].length-1];
//後続のデータと前のデータが同じグループに属するかどうかを判断するために使用されます
//同じグループにある場合は、this.rows の最後の列を選択し、
を追加します //同じグループにない列を作成し、
を追加します
num==x
? this.rows[this.rows.length-1].push(tr)
: (this.rows[this.rows.length] = [tr],num = x);

//tr ヘッダーは後で挿入されるため、配列 arr を使用して各グループの最初の tr の位置を覚えておきます。
はその位置であり、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;
}
                                                                                                                                          }

Each(arr.reverse(),function(i,o){
insertTrs.push(self.grouphead[o[0]]);
Self.tbody.insertBefore(self.grouphead[o[0]],trs[o[1]]); });

}その他{
for(;i                                                                                                                                                                                   //data のどのデータに対応する tr の内容をマークします
tr.setAttribute('dataIndex',i start); This.rows.push(tr);
// データなしで tr を非表示
If(!data[i start]){
tr.style.display = 'none';
続行;
}
tr.style.display = '';
tds = $q('td',tr);

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 ='none';
   this.loading.style.display ='none';
   
  }、
  writeMessage : 関数(合計){
   var オプション = this.defaults,
    Base = total/options.perPage,
    topSpans = this.top.getElementsByTagName('span'),
    BottomSpans = this.bottom.getElementsByTagName('span');    
   options.totalPage = ベース > parseInt(base)
         ? parseInt(base) 1
         : ベース; 
   bottomSpans[0].innerHTML = topSpans[0].innerHTML = ~~options.currPage 1;
   bottomSpans[1].innerHTML = topSpans[1].innerHTML = options.totalPage;
   bottomSpans[2].innerHTML = topSpans[2].innerHTML = options.perPage;
   bottomSpans[3].innerHTML = topSpans[3].innerHTML = total;
  },
  sortTable : function(e){
   var elem = e.target || e.srcElement、
    自分 = これ、
    オプション = this.defaults,
    elemName = elem.nodeName.toLowerCase(),
    showGroup = this.showGroup,
    tdElem = elem,
    名前 = elemName;
    
   //拖拽の時間は一度クリックを引き起こす可能性があります原因は、つまり、this.table 上ですべての決定が行われているためです
   if($q('td',elem).length>1)
    戻る;
   if(名前 !== 'td'){
    while(name !== 'td'){
     tdElem = tdElem.parentNode;
     名前 = 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');
    }その他{
     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');
     }その他{
      // 反序列则将原有排序取反,并加上排序标志
      showGroup
? 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);
ショーグループ
各(arr,function(idx,obj){frag.appendChild(obj);})
: frag.appendChild(tr); });
This.tbody.appendChild(frag);
This.sortColumn = tdElem;
}

//------------------------------------------------ ----------------------------------------
/*
ヘッダーの A ラベルをクリックすると、メニューが表示されます
*/
if(elemName === 'a'){
/*
メニューの外側をクリックすると、変更された機能が実行されます
ドキュメントのクリックイベントをクリアするために使用されます。 非表示レイヤー td と
のスタイルを削除します。 */
関数 documentClick(){
Self.popMenu.style.display = 'none';
Self.subPopMenu.style.display = 'none';
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 が true の場合、レイヤーが開いていることを意味し、閉じる関連の処理を実行します
This.isMenuOpen&&documentClick();

If(!checkReg(td.className,'type')){
addClass(lis[0],'disabled');
addClass(lis[1],'disabled');
}その他{
removeClass(lis[0],'disabled');
removeClass(lis[1],'disabled');
}
システム
? e.cancelBubble = true
: e.stopPropagation();
//レイヤー表示時にthis.isMenuOpen
にtdをアタッチする This.isMenuOpen = td; AddListener(document,'click',documentClick);
setStyle(this.popMenu,{
左 トップ : トップ 'px',
表示:「ブロック」
});
}
}、
比較: function(n,type){
var sortType = this.defaults.sortType,
txt =Sys.ie?'innerText':'textContent';
!sortType[タイプ]&&(タイプ = '文字列');
戻り関数(a1,a2){
a1 = sortType[タイプ](a1.cells[n][txt]);
    a2 = sortType[タイプ](a2.cells[n][txt]);
    a1==a2?0:a1    }
  }、
  pageBarClick : function(e){
   var elem = e.target || e.src要素、
    オプション = this.defaults,
    typePage = elem.getAttribute('page'),
    isGo = elem.getAttribute('go');
    isDel = elem.getAttribute('del');
    
    if(typePage){
     変数番号 = {
      開始: 0、
      end : options.totalPage-1,
      次へ: options.currPage-1,
      pre : options.currPage 1
     }[typePage];
     this.toPage(number);
    }
    if(isDel){
     this.del();
    }
    
    if(isGo){
     var 番号 = ~~elem.parentNode.getElementsByTagName('input')[0].value-1;
     this.toPage(number);
    }
  }、
  toPage : function(num){
   if(typeof num !=='number'||isNaN(num))return;
   var options = this.defaults,
    自分自身 = これ、
    dataConfig = options.dataConfig;    
   //要求された分数が 0 より小さい場合は 0 である場合、最大分数が最大分数と見なされます
   num>=options.totalPage
    &&(num = options.totalPage-1);
   num    
   //s は当前面パネルの最初の页 e は当前面パネルの最後
   varbasePage = options.count/options.perPage,
    s = options.page*basePage,
    e = sbasePage-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(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 = 'ブロック';
    addClass(elem,'theadfocus');
   }
  }、
  theadOut : function(e){
   var elem = e.target || e.src要素、
    toElem = e.toElement||e.popularTarget,
    elemName = elem.nodeName.toLowerCase();
   
   if(this.isMenuOpen && contains(this.isMenuOpen,elem))
    戻る;
   
   //如果离开了現在のtd隐藏表示結果の东西
   if(elemName === 'div'&& elem !== this.isMenuOpen){
    if(!contains(elem,toElem)){
     $q('a',elem)[0].style.display = 'none';
     RemoveClass(elem,'theadfocus');
    }
   }
 
   if(elemName === 'a' || elemName === 'span' || elemName === 'p'){
    var parent = elem.parentNode;
    if(!contains(elem,toElem)){
     $q('a',parent)[0].style.display = 'none';
removeClass(parent,'theadfocus');
}
}
}、
menuClick: function(e){
var elem = e.target || e.srcElement,
クラス名 = this.isMenuOpen.className;
If(elem.nodeName.toLowerCase()==='a'){
//型が td スタイルに存在しない場合、つまりソートが必要ない場合、イベントのバブリングを防ぐためにソートは実行されません
If(!checkReg(className,'type')){
システム
? e.cancelBubble = true
: e.stopPropagation();
戻る;
}

//タグのmenuTypeが
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート