Javascript asli melaksanakan kemahiran table_javascript datagrid ringkas-tutorial js-php.cn

grid data ringkas

1. Isih Kaedah pengisihan tersuai

2. Edit

3. Seret

4. Penomboran

5 Pilihan tunggal, pilihan berbilang (ctrl), pilihan linear (anjakan)

6 Paparan teks adalah untuk mewarnakan teks, seperti merah jika lebih besar daripada 0 dan hijau jika kurang daripada 0

7. Tunjukkan dan sembunyikan lajur

8

Sekadar contoh tiada alasan dengan bahagian belakang

Malah, anda hanya boleh menulis beberapa panggilan balik Terdapat bar pemuatan di dalamnya, yang boleh dipaparkan sehingga hasilnya dikembalikan

Salin kod Kod adalah seperti berikut: http://www.w3.org/1999/xhtml "> jadual *{margin:0; pelapik:0;} .h{line-height:20px;} .c{zoom:1;} .c:selepas {content:"."; paparan:blok; ketinggian:0; jelas:keduanya; keterlihatan:tersembunyi;} .l{float:left;} .r{float:right;} ul{list-style:none;} .demo{width:832px; ketinggian:400px;saiz fon:12px; margin:20px auto; jawatan:saudara .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 .bekas{ sempadan:1px pepejal #99bbe8; ketinggian:auto; } .demo .i_a{border:1px pepejal #ccc;margin-top:2px;} .demo .t_a{border-left:1px solid #99bbe8;border-bottom:1px solid #99bbe8;} .demo .t_a td{warna latar belakang:#fff;border-right:1px pepejal #ccc;atas sempadan:1px pepejal #ccc;} .jadual demo td{ ketinggian garis:22px; ketinggian:20px; } .demo table thead .theadfocus{ latar belakang:url( http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png ) ulang-x 0 -163px; } .demo table thead td{ limpahan:tersembunyi; } .demo .t_a tbody td{padding-left:8px;} .demo .title{height:24px; ketinggian baris: 22px; font-weight:bold; padding-left:20px; warna:#666666; latar belakang:url( http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png ) ulang-x 0 -300px; } .demo .bar{_display:inline-block;line-height:20px; ketinggian:20px; atas sempadan:1px pepejal #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:18px; 16px;margin-top:3px;cursor:pointer;display:block;margin-right:5px;background:url( http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png ) tidak berulang} .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{warna latar:#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} .meja tunjuk cara{ saiz fon:12px; susun atur jadual:tetap; -moz-user-select: -moz-none; -webkit-user-select:none; -khtml-user-select:none; } .demo .tabcontainer{ lebar:99%; limpahan:auto; pelapik :2px 0 0 2px; warna latar belakang:#FFFBF7; jawatan:saudara; } .demo table thead td{background:url( http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png ) repeat-x 0 -100px;} .tead meja demo a{ indeks-z:1000; warna latar belakang:#C3DAF9; background-image:url(" http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png "); paparan:tiada; lebar:12px; ketinggian:22px; kedudukan latar belakang:0 -234px; kedudukan:mutlak; atas:0; betul:0; } .demo table thead div{ position:relative; indeks-z:1;} .tead jadual demo p{ lebar:1px; ketinggian:22px; warna latar belakang:#99BBE8; float:left; paparan:blok; kursor:e-resize; jidar-kanan:2px; } .jadual demo tr.trfocus td{ warna latar belakang:#ebf2fb } . jadual div demo, jadual div demo tr, jadual div demo tr td{ -moz-user-select: -moz-none; -webkit-user-select:none; } Jadual .demo tr td{warna latar:#fff; limpahan:tersembunyi; 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 -kelegapan: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 .editable 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{ ketinggian:12px; lebar:24px; paparan:blok; float:left; padding-right:18px; latar belakang:url( http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png ) tiada ulangan kanan -423px; } .head_span{float:left;line-height:22px;display:block;} .sort-desc .head_span{ ketinggian:12px; lebar:24px; paparan:blok; float:left; padding-right:18px; latar belakang:url( http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png ) tiada ulangan kanan -391px; } .x-menu{ kedudukan:mutlak; background:url(menu.gif) repeat-y #f0f0f0; sempadan:1px pepejal #718bb7; lebar:134px; paparan:tiada; } .x-menu .lumpuhkan{ warna:#999; } .x-menu-list{padding:2px; limpahan:tersembunyi; jidar:0;} .x-menu-list li{padding:1px; white-space:nowrap; ketinggian:20px;} .x-menu-list li.focus{backround:#09F;} a.x-menu-item{ paparan:blok; kursor: penunjuk; ketinggian garis: 18px; ketinggian:20px; warna-garis: -moz-use-text-color; gaya garis besar: tiada; lebar-garis besar: 0; lebar:100px; padding-left:27px; jawatan: relatif; hiasan teks: tiada; ruang putih: nowrap; saiz fon:12px; warna:#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{ kedudukan:mutlak; indeks-z: 1500; latar belakang:#f0f0f0; sempadan:1px pepejal #718bb7; lebar:134px; paparan:tiada; } .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; } 1.排序 自定义排序方式

2.编辑

3.拖拽

4.分页

5.单选 多选(ctrl) 线性选(shift)

6.文字render 就是给文字着色 比如 大于0红色 小于0绿色

7.对列的显示隐藏

8.分组

下面是分组的 且有一个自定义排序方式 很好 一般 很差

(fungsi(doc,undefined){ var win = ini; win.Sys = fungsi (ua){ var b = { iaitu: /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 = ""; untuk (var i dalam b) { jika (b[i]) { vMark = "safari" == i ? "versi" : i; pecah; } } 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; kembali b; }(win.navigator.userAgent.toLowerCase()); win.Sys.ie6&&doc.execCommand("BackgroundImageCache", false, true); menang.$$ = fungsi(id){ kembalikan jenis id === 'rentetan' ? doc.getElementById(id) : id; }; win.$q = fungsi(nama,ibu bapa){ return parent.getElementsByTagName(name); } win.$c = fungsi(nama,ibu bapa){ var elem = jenis nama ==='objek'? nama : doc.createElement(nama); ibu bapa&&ibu bapa.appendChild(elemen); kembali elem; }; win.addListener = fungsi(elemen,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 = fungsi(elemen,e,fn){ pengendali var = element.events[e],type; jika(fn){ untuk(taipkan pengendali) if(pengendali[jenis]===fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" e,fn); padamkan pengendali[jenis]; } }lain{ untuk(taipkan pengendali){ element.removeEventListener?element.removeEventListener(e,pengendali[jenis],false):element.detachEvent("on" e,pengendali[jenis]); padamkan pengendali[jenis]; } } }; win.fireEvent = function(elemen,eventName){ if(elemen[eventName]){ elemen[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 = fungsi(elem, gaya, nilai){ if( !elems.length ) elems = [elems]; if( jenis gaya == "rentetan"){ style = value === undefined?{cssText:style}:(function(o){ pulangan (o[style] = nilai,o); })({}); }; setiap(elem,fungsi(i,elem,gaya){ var value,name,ie=Sys.ie ; untuk(nama dalam gaya){ nilai = gaya[nama]; if (nama === "opacity" && ie) { elem.style.filter = (elem.currentStyle.filter || "").replace( /alpha([^)]*)/, "" ) "alpha(opacity=" value * 100 ")"; }else if(nama === "terapung"){ elem.style[ iaitu ? "styleFloat" : "cssFloat" ] = nilai; }lain{ nama = nama.ganti(/-([a-z])/ig, fungsi(semua, huruf){ return letter.toUpperCase(); }); elem.style[nama] = nilai; } } },gaya); }; win.setAttr = function(dom,attr){ if(typeof attr !== 'objek') kembali; for(nama var dalam attr) dom.setAttribute(nama,attr[nama]); } var slice = Array.prototype.slice; win.bind = fungsi(objek, keseronokan) { var args = slice.call(arguments).slice(2); kembalikan fungsi() { kembalikan fun.apply(objek, args); }; }; win.bindAsEventListener = fungsi(objek, keseronokan, hujah) { var args = slice.call(arguments).slice(2); kembalikan fungsi(acara) { kembalikan fun.apply(objek, [event || win.event].concat(args)); } }; win.extend = function(){ var target = arguments[0] || {}, i = 1, length = arguments.length, deep = true, pilihan; jika ( jenis sasaran === "boolean") { dalam = sasaran; sasaran = hujah[1] || {}; i = 2; } jika ( jenis sasaran !== "objek" && Object.prototype.toString.call(target)!="[object Function]") sasaran = {}; untuk(;i jika ( (pilihan = hujah[ i ]) != batal ) for(nama var dalam pilihan){ var src = sasaran[ nama ], salinan = pilihan[ nama ]; jika ( sasaran === salin ) teruskan; jika ( dalam && salin && jenis salinan === "objek" && !copy.nodeType ){ target[ name ] = arguments.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy ); } else if(copy !== undefined) sasaran[ nama ] = salinan; } } sasaran pulangan; }; win.Class = function(properties){ var _class = function(){ return (argumen[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : ini; }; _class.prototype = sifat; pulangkan _class; }; win.each = fungsi ( objek, panggil balik, args ) { nama var, i = 0, panjang = objek.panjang; jika ( args ) { args = Array.prototype.slice.call(arguments).slice(2); jika ( panjang === tidak ditentukan ) { untuk ( nama dalam objek ) if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) === false ) pecah; } lain untuk ( ; i if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false ) // pecah; } lain { jika ( panjang === tidak ditentukan ) { untuk ( nama dalam objek ) if ( callback.call( object[ name ], name, object[ name ] ) === false ) pecah; } lain untuk ( nilai var = objek[0]; i } objek kembali; }; win.currentStyle = fungsi(elemen){ kembalikan elemen.currentStyle || doc.defaultView.getComputedStyle(elemen, null); }; win.objPos = fungsi(elemen){ var kiri = 0, atas = 0, kanan = 0, bawah = 0, doc = elem ? elem.ownerDocument : doc; jika ( !elem.getBoundingClientRect || win.Sys.ie8 ) { var n = elem; manakala (n) { kiri = n.offsetLeft, atas = n.offsetTop; n = n.offsetParent; }; kanan = kiri elem.offsetWidth; bawah = elem atas.offsetHeight; } lain { var rect = elem.getBoundingClientRect(); kiri = kanan = doc.documentElement.scrollLeft || doc.body.scrollKiri; atas = bawah = doc.documentElement.scrollLeft || doc.body.scrollKiri; kiri = rect.left; kanan = rect.right; atas = rect.top; bawah = rect.bottom; } kembali { "kiri": kiri, "atas": atas, "kanan": kanan, "bawah": bawah }; }; win.contains = fungsi(k,j){ pulangkan document.compareDocumentPosition ? k.compareDocumentPosition(j)&16 : k!==j&&k.mengandungi(j); }; win.hasClass = function(elemen, className){ return element.className.match(new RegExp('( \s|^)' className '(\s|$)' )); }; win.addClass = function(elemen, className){ if(!win.hasClass(elemen, className)) element.className.replace(/s/g,'')==='' ? element.className = className : element.className = " " className; }; win.removeClass = fungsi(elemen,Nama kelas){ win.hasClass(elemen, className)&&(element.className = element.className.replace(new RegExp('( \s*|^)' className '(\s*|$)'),' ')); } })(dokumen); (fungsi(doc,undefined){ var win = ini, uuid = -1; /* 检查 字符串 中是否有 kunci 如果有 且key后面是- 返回-后面的东西 否则返回true 检测不到返回palsu */ fungsi checkReg(str,kunci){ var reg = new RegExp('(?:^|\s)' key '\b-?(.*?)(?:\s|$)','i'); if(reg.exec(str)!=null){ kembalikan RegExp.$1===''?true:RegExp.$1; }lain{ kembali palsu; } }; /* 修改字符串中key对应的value */ fungsi ubah suai(str,kunci,nilai){ var reg = RegExp baharu('(^|\s)(' key '\b-).*?( \s|$)','i' ); return str.replace(reg,'$1$2' nilai '$3'); }; win.easyGrid = Kelas baharu({ pilihan : { setiapHalaman : 10, currPage : 0, jumlahHalaman : 0, kira : 10, halaman : 0, isEdit : palsu, widthConfig : { td : batal, prevTd : null, x : 0, tdLebar : 0, prevWidth: 0 }, cellMinWidth : 50, jenis jenis : { int : function(v){return parseInt(v)}, float : function(v){return parseFloat(v)}, tarikh : function(v){return v.toString()}, rentetan : function(v){return v.toString()} }, tajuk : '标题' }, mulakan : fungsi(pilihan){ var op = extend(true,{},this.options), pilihan = this.defaults = extend(op,options), bekas = this.container = $c('div',options.container), dataConfig = options.dataConfig, tajuk = $c('div',bekas); container.className = 'bekas'; title.innerHTML = options.title; title.className = 'title'; this.primaryKey = options.primaryKey; this.top = $c('div',bekas); 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,' ']. sertai(''); 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 = [ ' saya, '"/>', o.nama, ' ' ].sertai(''); //Janakan item pertama setiap lajur dalam indeks lajur self.columns[i] = [td]; $c('td',self.copyTr).setAttribute('unselectable','on'); //Kira indeks lajur yang dipaparkan dan jumlah bilangan lajur num Self.isShowTrs.num ; Self.isShowTrs.clos[i]=benar; }); setAttr(this.table,{width:tWidth options.fields.length 1}) //Janakan tr dalam tbody Ia hanya menjana tr Ia dijana berdasarkan perPage Ia adalah item konfigurasi yang memaparkan bilangan data yang ada pada masa ini var i=0, trsLen = options.perPage, frag = doc.createDocumentFragment(), arr = Tatasusunan baharu(options.fields.length), tr, tds; untuk(;i tr = this.copyTr.cloneNode(true); tds = $q('td',tr); Setiap(arr,fungsi(i){ //Janakan semua item indeks lajur self.columns[i].push(tds[i]); }); $c(tr,frag); } This.tbody.appendChild(frag); if(typeof dataConfig === 'objek'){ setTimeout(function(){self.getDataCallBack(dataConfig);},5); }lain{ } /* Bentuk seret dan lepas Isih jadual Menunggu beberapa operasi */ 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)); /* Ikat peristiwa klik pada lapisan pop timbul untuk mengisih Menu peringkat kedua mengikat untuk menyembunyikan lajur dan menunjukkan */ AddListener(this.popMenu,'click',bindAsEventListener(this,this.menuClick)); AddListener(this.popMenu,'mouseover',bindAsEventListener(this,this.menuOver)); AddListener(this.subPopMenu,'click',bindAsEventListener(this,this.subMenuClick)); /* Letakkan kandungan garisan meja menjadi lebih tebal */ 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 : fungsi(data){ var options = this.defaults, diri = ini, Totla = 0; this.data.length = 0; jika(data.data){ if(data.data[0].groupName){ var grouphead = this.grouphead; ketua kumpulan.panjang = 0; setiap (data.data,fungsi(i,o){ var gtr = self.groupTr.cloneNode(true); $q('td',gtr)[0].innerHTML = o.groupName; grouphead.push(gtr); setiap(o.rows,function(j,d){ //this.data中数据的最后一项是 索引 d.push(i); self.data.push(d); }); }); this.showGroup=true; }lain{ setiap (data.data,fungsi(i,o){ self.data.push(o); }); this.showGroup=false; } }lain{ kembali; } jumlah = data.jumlah ? data.total>=this.data.length ? data.jumlah : this.data.length : this.data.length; this.writeMessage(jumlah); this.buildTbody(options.currPage); }, buildTbody : function(pageNum){ if(this.data.length===0){ this.tbody.style.display = 'tiada'; kembali; } var i = 0, j = 0, diri = ini, data = this.data, pilihan = this.defaults, trsLen = options.perPage, tdsLen = options.fields.length, tbody = this.tbody, trs = tbody.getElementsByTagName('tr'), mula = pageNum*options.perPage, tr; this.rows.length = 0; jika(this.showGroup){ kumpulan var = {}, indeks, arr = [], insertTrs = this.insertTrs; //清除掉之前插入的 分组tr insertTrs.length!=0&&each(insertTrs,function(i,o){ self.tbody.removeChild(o); }); masukkanTrs.panjang = 0; //遍历填充数据 给this.rows赋值 var num = - 1; untuk(;i tr = trs[i]; //如果没有数据了 就开始隐藏剩下的行 jika(!data[saya mula]){ tr.style.display = 'tiada'; teruskan; } //做标记 tr 里面的内容对应data中哪条数据 tr.setAttribute('dataIndex', saya mulakan); tr.style.display = 'sekat'; tds = tr.getElementsByTagName('td'); //x为 分组的不同组的标识 var x = data[saya mula][data[saya mula].panjang-1]; //Digunakan untuk menentukan sama ada data seterusnya dan data sebelumnya berada dalam kumpulan yang sama //Jika mereka berada dalam kumpulan yang sama, pilih lajur terakhir this.rows dan tambah //Buat lajur yang bukan kumpulan yang sama dan tambahkannya

num==x ? this.rows[this.rows.length-1].push(tr) : (this.rows[this.rows.length] = [tr],num = x); //Gunakan array arr untuk mengingati kedudukan tr pertama setiap kumpulan kerana pengepala tr akan dimasukkan kemudian i ialah kedudukan dan num ialah nombor urutan kumpulan !(bilangan dalam kumpulan)&&(kumpulan[bilangan] = saya mula,arr.push([bilangan,i])); untuk(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; } }

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

}lain{ untuk(;i //Tandakan kandungan dalam tr sepadan dengan sekeping data dalam data tr.setAttribute('dataIndex', saya mula); This.rows.push(tr); //Sembunyikan tr tanpa data Jika(!data[saya mula]){ tr.style.display = 'tiada'; Teruskan; } tr.style.display = ''; tds = $q('td',tr);

untuk(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'; }lain{ 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 ='tiada'; this.loading.style.display ='none'; }, writeMessage : fungsi(jumlah){ var options = this.defaults, asas = jumlah/pilihan.perHalaman, topSpans = this.top.getElementsByTagName('span'), bottomSpans = this.bottom.getElementsByTagName('span'); options.totalPage = asas > parseInt(base) ? parseInt(base) 1 : asas; 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 = jumlah; }, Jadual isihan : fungsi(e){ var elem = e.sasaran || e.srcElement, diri = ini, pilihan = this.defaults, elemName = elem.nodeName.toLowerCase(), showGroup = this.showGroup, tdElem = elem, nama = elemName; //拖拽的时候可能会触发一次klik 原因是ie下全部绑定在this.table上 代码见拖拽 if($q('td',elem).panjang>1) kembali; jika(nama !== 'td'){ while(nama !== 'td'){ tdElem = tdElem.parentNode; nama = 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'); }lain{ showGroup ? setiap(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'); }lain{ // 反序排列则将原有排序取反，并加上排序标志 showGroup ? setiap(this.rows,function(i,o){ o.reverse();}) : this.rows.reverse(); addClass(tdElem,'sort-desc'); } // Berikan data yang diisih ke jadual var insertTrs = this.insertTrs, len = insertTrs.length-1, arr = []; Setiap(this.rows,function(i,tr){ arr = [masukkanTrs[len-i]].concat(tr); ShowGroup setiap(arr,function(idx,obj){frag.appendChild(obj);}) : frag.appendChild(tr); }); This.tbody.appendChild(frag); This.sortColumn = tdElem; } //------------------------------------------------ --------------------------------------- /* Jika anda mengklik pada label A dalam pengepala, menu akan muncul */ if(elemName === 'a'){ /* Apabila mengklik di luar menu, fungsi yang diubah suai akan dilaksanakan Digunakan untuk mengosongkan acara klik pada dokumen Lapisan tersembunyi Alih keluar gaya td dan */ Fungsi documentClick(){ Self.popMenu.style.display = 'tiada'; Self.subPopMenu.style.display = 'tiada'; If(self.isMenuOpen){ removeListener(dokumen, 'klik'); removeClass($q('div',self.isMenuOpen)[0],'theadfocus'); $q('a',self.isMenuOpen)[0].style.display = 'none'; self.isMenuOpen = palsu; } var pos = objPos(elem), kiri = pos.left Math.max(document.documentElement.scrollLeft,document.documentElement.scrollLeft), atas = pos.top Math.max(document.documentElement.scrollTop,document.documentElement.scrollTop) elem.offsetHeight, td = elem.parentNode.parentNode, lis = $q('li',this.popMenu); //Jika this.isMenuOpen adalah benar, ini bermakna lapisan terbuka dan melakukan pemprosesan berkaitan penutupan This.isMenuOpen&&documentClick(); If(!checkReg(td.className,'type')){ addClass(lis[0],'disabled'); addClass(lis[1],'disabled'); }lain{ removeClass(lis[0],'disabled'); removeClass(lis[1],'disabled'); } Sys.ie e.cancelBubble = benar : e.stopPropagation(); //Apabila memaparkan lapisan, lampirkan td pada this.isMenuOpen This.isMenuOpen = td; AddListener(dokumen,'klik',documentClick); setStyle(this.popMenu,{ kiri atas : 'px' atas, Paparan:'sekat' }); } }, bandingkan : fungsi(n,jenis){ var sortType = this.defaults.sortType, txt =Sys.ie?'innerText':'textContent'; !sortType[type]&&(type = 'string'); Kembalikan fungsi(a1,a2){ a1 = sortType[type](a1.cells[n][txt]); a2 = sortType[type](a2.cells[n][txt]); kembalikan a1==a2?0:a1 } }, pageBarClick : function(e){ var elem = e.sasaran || e.srcElement, pilihan = this.defaults, typePage = elem.getAttribute('page'), isGo = elem.getAttribute('go'); isDel = elem.getAttribute('del'); if(typePage){ nombor var = { mula : 0, tamat : options.totalPage-1, seterusnya : options.currPage-1, pra : options.currPage 1 }[typePage]; this.toPage(nombor); } if(isDel){ this.del(); } if(isGo){ nombor var = ~~elem.parentNode.getElementsByTagName('input')[0].value-1; this.toPage(nombor); } }, toPage : function(num){ if(jenis nombor !=='nombor'||isNaN(nombor))kembali; var options = this.defaults, diri = ini, dataConfig = options.dataConfig; //如果请求的分页数小于0就默认为0 如果打越最大分页数 就默认为最大分顺最大分页 num>=options.totalPage &&(num = options.totalPage-1); num //s为当前面板的第一页 e为当前面板的最后 var basePage = options.count/options.perPage, s = options.page*basePage, e = s basePage-1; this.tbody.style.display = 'tiada'; this.loading_bg.style.display = '';; this.loading.style.display = ''; setTimeout(function(){self.buildTbody(num);},10); }, del : function(){ //做删除的时候需要有主键的索引 我全部保存在tr的 var selectedRows = this.selectedRows, arr = [] for(nama var dalam Rows terpilih){ arr.push(selectedRows[name].getAttribute('dataIndex')); } alert('选择了主键值为' arr.join(',')); }, theadOver : function(e){ var elem = e.sasaran || e.srcElement; if(elem.nodeName.toLowerCase() === 'div'){ $q('a',elem)[0].style.display = 'block'; addClass(elem,'theadfocus'); } }, theadOut : function(e){ var elem = e.sasaran || e.srcElement, toElem = e.toElement||e.relatedTarget, elemName = elem.nodeName.toLowerCase(); if(this.isMenuOpen && contains(this.isMenuOpen,elem)) kembali; //如果离开了当前的td 隐藏显示出来的东西 if(elemName === 'div'&& elem !== this.isMenuOpen){ if(!contains(elem,toElem)){ $q('a',elem)[0].style.display = 'tiada'; removeClass(elem,'theadfocus'); } } if(elemName === 'a' || elemName ==='span' || elemName === 'p'){ var induk = elem.parentNode; if(!contains(elem,toElem)){ $q('a',parent)[0].style.display = 'tiada'; removeClass(ibu bapa,'theadfocus'); } } }, menuKlik: fungsi(e){ var elem = e.target ||. e.srcElement, ClassName = this.isMenuOpen.className; If(elem.nodeName.toLowerCase()==='a'){ //Jika jenis tidak wujud dalam gaya td, yang bermaksud tiada pengisihan diperlukan, tiada pengisihan akan dilakukan untuk mengelakkan acara menggelegak If(!checkReg(className,'type')){ Sys.ie e.cancelBubble = benar : e.stopPropagation(); Kembali; } //Jika menuType tag ialah

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

Javascript asli melaksanakan kemahiran table_javascript datagrid ringkas