原生javascript实现简单的datagrid数据表格
投稿：hebedich
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了原生javascript实现简单的datagrid数据表格的方法，效果十分棒,需要的朋友可以参考下
简单的datagrid
1.排序 自定义排序方式
5.单选 多选(ctrl) 线性选(shift)
6.文字render& 就是给文字着色& 比如 大于0红色& 小于0绿色
7.对列的显示隐藏
只是一个示例& 没有什么与后台的借口
其实可以写几个回调就行了& 里面有loading条 可以在没返回结果前一直显示
&&!DOCTYPE html &
&html xmlns=""&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&title&table&/title&
&style type="text/css"&
*{margin:0; padding:0;}
.h{line-height:20}
.c{zoom:1;}
.c:after {content:"."; display: height:0; clear: visibility:}
.l{float:}
.r{float:}
ul{list-style:}
.demo{width:832 height:400font-size:12 margin:20 position:relative}
.demo .m_a{margin-right:8}
.demo .nobreak{white-space:keep-*white-space:text-overflow:overflow:height:22width:100%;}
.demo .container{
&border:1px solid #99bbe8;
.demo .i_a{border:1px solid #margin-top:2}
.demo .t_a{border-left:1px solid #99bbe8;border-bottom:1px solid #99bbe8;}
.demo .t_a td{background-color:#border-right:1px solid #border-top:1px solid #}
.demo table td{
&line-height:22
&height:20
.demo table thead .theadfocus{
&background:url() repeat-x 0 -163
.demo table thead td{
&overflow:
.demo .t_a tbody td{padding-left:8}
.demo .title{height:24 line-height:22 font-weight: padding-left:20 color:#666666; background:url() repeat-x 0 -300&}
.demo .bar{_display:inline-line-height:20 height:20 border-top:1px solid #99bbe8; background:url() repeat-x 0 -350padding:2px 0 2px 20}
.demo .f_a{color:#3b526e;font-weight:}
.demo .first_div,.demo .prev_div,.demo .next_div,.demo .last_div,.demo .first_div_no,.demo .prev_div_no,.demo .next_div_no,.demo .last_div_no{float:width:18height:16margin-top:3cursor:display:margin-right:5background:url() no-repeat}
.demo .first_div{background-position: -12px -58}
.demo .first_div_no{background-position:4px -58cursor:normal}
.demo .prev_div{background-position:-11px -78}
.demo .prev_div_no{background-position:5px -78cursor:normal}
.demo .next_div{background-position:-65px -78}
.demo .next_div_no{background-position:-49px -78cursor:normal}
.demo .last_div{background-position:-67px -58}
.demo .last_div_no{background-position:-51px -58cursor:normal}
.demo .rowfocus td{background-color:#ebf2fb}
.demo .delbtn,.demo .delbtn:hover{background:url() no-width:45text-align:height:20color:#333;display:text-decoration:float:}
.demo .delbtn{background-position:-55px 0;}
.demo .delbtn:hover{background-position:-55px -30color:#666}
.demo table{
&font-size:12
&table-layout:
&-moz-user-select: -moz-
&-webkit-user-select:
&-khtml-user-select:
.demo .tabcontainer{
width:99%;
padding :2px 0 0 2
background-color:#FFFBF7;
.demo table thead td{background:url() repeat-x 0 -100}
.demo table thead a{
&z-index:1000;
&background-color:#C3DAF9;
&&& background-image:url("");
&height:22
&background-position:0 -234
&position:
.demo table thead div{ position: z-index:1;}
.demo table thead p{
&height:22
&background-color:#99BBE8;
&cursor:e-
&margin-right:2
.demo table tr.trfocus td{
&background-color:#ebf2fb
.demo div table,.demo div table tr,.demo div table tr td{
&-moz-user-select: -moz-
&-webkit-user-select:
.demo table tr td{background-color:# overflow: text-overflow: white-space:}
.demo .loading{position:z-index:9999;left:0;top:0;background:#e5e5e5;filter:Alpha(opacity=50);opacity:0.5;-moz-opacity:0.5;-khtml-opacity:0.5;}
.demo .loaddiv{position:z-index:99999;width:98height:28border:1px solid #6593background:#fff url() repeat-x 0 -300padding:2}
.demo .loadgif{background:#fff url(images/loading_small.gif) no-repeat 4px 5 padding:5px 0 0 27width:68height:21border:1px solid #6593}
.demo .loadtext{color:#000;}
.demo .edittable{border:1px solid #c4c4c4;}
.demo .edittable td{background:#ebf2height:24}
.demo .editbtn{padding:5width:100margin:0background:#ebf2border:1px solid #c4c4c4;border-top:}
.demo .delbtn,.ajaxTable .delbtn:hover{background:url() no-width:45text-align:height:20color:#333;display:text-decoration:float:}
.demo .delbtn{background-position:-55px 0;}
.demo .delbtn:hover{background-position:-55px -30color:#666}
.demo .btn_a,.ajaxTable .btn_a:hover{ cursor:background:url() no-text-align:padding-top:5width:45height:17display:float:cursor:text-decoration:}
.demo .btn_a{background-position:0 0;color:#333;}
.demo .btn_a:hover{background-position:0 -30color:#666;}
.sort-asc .head_span{
&height:12 width:24
&padding-right:18
&background:url() no-repeat right -423
.head_span{float:line-height:22display:}
.sort-desc .head_span{
&height:12 width:24
&padding-right:18
&background:url() no-repeat right -391
&position:
&background:url(menu.gif) repeat-y #f0f0f0;
&border:1px solid #718bb7;
&width:134
.x-menu .disabled a{
&color:#999;
.x-menu-list{padding:2 overflow: margin:0;}
.x-menu-list li{padding:1 white-space: height:20}
.x-menu-list li.focus{backround:#09F;}
a.x-menu-item{
&cursor:&&
&&& line-height: 18
&height:20
&&& outline-color: -moz-use-text-
&&& outline-style:
&&& outline-width: 0;
&&& width:100
&padding-left:27
&&& position:
&&& text-decoration:
&&& white-space:
&font-size:12
&color:#222;
a.x-m_a{padding-left:8width:120}
a.x-menu-item input{margin-right:8px}
a.x-menu-item:hover{background-color:#d9e8fb}
.asc{background:url() no-repeat -53px -218}
.desc{background:url() no-repeat -53px -243}
.columns{background:url() no-repeat -53px -268}
&position:
&z-index: 1500;
&background:#f0f0f0;
&border:1px solid #718bb7;
&width:134
.x-menu-list .child-menu{background:url() no-repeat right -444}
a.x-m_a{padding-left:8width:120}
a.x-menu-item input{margin-right:8px}
a.x-menu-item:hover{background-color:#d9e8fb}
&width:1background-color: #position:display: z-index:100;
&color:#FF0000;
&color:#33FF00;
1.排序 自定义排序方式
5.单选 多选(ctrl) 线性选(shift)
6.文字render& 就是给文字着色& 比如 大于0红色& 小于0绿色
7.对列的显示隐藏
&div id='demo' class='demo'&&/div&
&br&&br&下面是分组的& 且有一个自定义排序方式& 很好 一般 很差&br&&br&
&div id='demo1' class='demo'&&/div&
&script type="text/javascript"&
(function(doc,undefined){
&var win =
&win.Sys = function (ua){
&&var b = {
&&&ie: /msie/.test(ua) && !/opera/.test(ua),
&&&opera: /opera/.test(ua),
&&&safari: /webkit/.test(ua) && !/chrome/.test(ua),
&&&firefox: /firefox/.test(ua),
&&&chrome: /chrome/.test(ua)
&&},vMark = "";
&&for (var i in b) {
&&&if (b[i]) { vMark = "safari" == i ? "version" : }
&&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;&
&}(win.navigator.userAgent.toLowerCase());
&win.Sys.ie6&&doc.execCommand("BackgroundImageCache", false, true);
&win.$$ = function(id){
&&return typeof id === 'string'
&&&? doc.getElementById(id)
&win.$q = function(name,parent){
&&return parent.getElementsByTagName(name);
&win.$c = function(name,parent){
&&var elem = typeof name ==='object'? name : doc.createElement(name);
&&parent&&parent.appendChild(elem);
&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],
&&&for(type in handlers)
&&&&if(handlers[type]===fn){
&&&&&element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn);
&&&&&delete handlers[type];
&&&for(type in handlers){
&&&&element.removeEventListener?element.removeEventListener(e,handlers[type],false):element.detachEvent("on" + e,handlers[type]);
&&&&delete handlers[type];
&win.fireEvent = function(element,eventName){
&&if(element[eventName]){
&&&element[eventName]();
&&}else if(element.fireEvent){
&&&element.fireEvent('on'+eventName);
&&}else if(doc.createEvent){
&&&var evt = doc.createEvent("MouseEvents");
&&&evt.initEvent(eventName, true, true);
&&&element.dispatchEvent(evt);
&win.setStyle = function(elems, style, value){
&&if( !elems.length ) elems = [elems];
&&if( typeof style == "string"){&&&&&&
&&&style = value === undefined?{cssText:style}:(function(o){
&&&&return (o[style] = value,o);&&&&&&&&&&
&&&})({});
&&each(elems,function(i,elem,style){
&&&var value,name,ie=Sys.
&&&for(name in style){
&&&&value = style[name];
&&&&if (name === "opacity" && ie) {
&&&&&elem.style.filter = (elem.currentStyle.filter || "").replace( /alpha\([^)]*\)/, "" ) + "alpha(opacity=" + value * 100 + ")";
&&&&}else if(name === "float"){
&&&&&elem.style[ ie ? "styleFloat" : "cssFloat" ] =
&&&&}else{
&&&&&name = name.replace(/-([a-z])/ig, function(all, letter){
&&&&&&return letter.toUpperCase();
&&&&&elem.style[name] =
&&},style);
&win.setAttr = function(dom,attr){
&&if(typeof attr !== 'object')
&&for(var name in attr)
&&&dom.setAttribute(name,attr[name]);
&var slice = Array.prototype.
&win.bind = function(object, fun) {
&&var args = slice.call(arguments).slice(2);
&&return function() {
&&&&return fun.apply(object, args);
&win.bindAsEventListener = function(object, fun,args) {
&&var args = slice.call(arguments).slice(2);
&&return function(event) {
&&&return fun.apply(object, [event || win.event].concat(args));
&win.extend = function(){
&&var target = arguments[0] || {}, i = 1, length = arguments.length, deep = true,
&&if ( typeof target === "boolean" ) {
&&&target = arguments[1] || {};
&&if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]")
&&&target = {};
&&for(;i&i++){
&&&if ( (options = arguments[ i ]) != null )
&&&&for(var name in options){
&&&&&var src = target[ name ], copy = options[ name ];
&&&&&if ( target === copy )
&&&&&if ( deep && copy && typeof copy === "object" && !copy.nodeType ){
&&&&&&target[ name ] = arguments.callee( deep, src || ( copy.length != null ? [ ] : { } ), copy );
&&&&&else if(copy !== undefined)
&&&&&&target[ name ] =&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&
&win.Class = function(properties){
&&var _class = function(){
&&&return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function')
&&&&? this.initialize.apply(this, arguments)
&&_class.prototype =
&&return _
&win.each =& function ( object, callback, args ) {&
&&var name, i = 0, length = object.&
&&if ( args ) {
&&&args = Array.prototype.slice.call(arguments).slice(2);
&&&if ( length === undefined ) {&
&&&&for ( name in object )&
&&&&&if ( callback.apply( object[ name ],[name,object[ name ]].concat(args) ) === false )&
&&&&for ( ; i & i++)&
&&&&&if ( callback.apply( object[ i ],[i,object[ i ]].concat(args)) === false )&& //
&&} else {&&&&
&&&if ( length === undefined ) {&
&&&&for ( name in object )&
&&&&&if ( callback.call( object[ name ], name, object[ name ] ) === false )&
&&&&for ( var value = object[0];&
&&&&&i & length && callback.call( value, i, value ) !== value = object[++i] ){}&
&win.currentStyle = function(element){
&&return element.currentStyle || doc.defaultView.getComputedStyle(element, null);
&win.objPos = function(elem){
&&var left = 0, top = 0, right = 0, bottom = 0,doc = elem ? elem.ownerDocument :
&&if ( !elem.getBoundingClientRect || win.Sys.ie8 ) {
&&&var n =
&&&while (n) { left += n.offsetLeft, top += n.offsetT n = n.offsetP };
&&&right = left + elem.offsetW bottom = top + elem.offsetH
&&} else {
&&&var rect = elem.getBoundingClientRect();
&&&left = right = doc.documentElement.scrollLeft || doc.body.scrollL
&&&top = bottom = doc.documentElement.scrollLeft || doc.body.scrollL
&&&left += rect. right += rect.
&&&top += rect. bottom += rect.
&&return { "left": left, "top": top, "right": right, "bottom": bottom };&&&&&&
&win.contains = function(k,j){
&&pareDocumentPosition
&&&? k.compareDocumentPosition(j)&16
&&&: k!==j&&k.contains(j);
&win.hasClass = function(element, className){
&&return element.className.match(new RegExp('());
&win.addClass = function(element, className){
&&if(!win.hasClass(element, className))
&&&element.className.replace(/\s/g,'')===''
&&&&? element.className = className
&&&&: element.className+= " "+classN
&win.removeClass = function(element, className){
&&win.hasClass(element, className)&&(element.className = element.className.replace(new RegExp('( '));
})(document);
(function(doc,undefined){
&var win&&&&& = this,
&&uuid&&& = -1;
&&检查 字符串 中是否有key
&&如果有 且key后面是-& 返回-后面的东西 否则返回true
&&检测不到返回false
&function checkReg(str,key){
&&var reg = new RegExp('(?:^|\\s)'+key+'\\b-?(.*?)(?:\\s|$)','i');
&&if(reg.exec(str)!=null){
&&&return RegExp.$1===''?true:RegExp.$1;
&&修改字符串中key对应的value
&function modify(str,key,value){
&&var reg = new RegExp('(^|\\s)('+key+'\\b-).*?();
&&return str.replace(reg,'$1$2'+value+'$3');
&win.easyGrid = new Class({
&&options&&& : {
&&&perPage&&&&& : 10,
&&&currPage&&&& : 0,
&&&totalPage&&& : 0,
&&&count&&&&&&& : 10,&
&&&page&&&&&&&& : 0,
&&&isEdit&&&&&& : false,&
&&&widthConfig& : {
&&&&td&&&&&& : null,
&&&&prevTd&& : null,
&&&&x&&&&&&& : 0,
&&&&tdWidth& : 0,
&&&&prevWidth: 0
&&&cellMinWidth : 50,
&&&sortType : {
&&&&int&&& : function(v){return parseInt(v)},
&&&&float& : function(v){return parseFloat(v)},
&&&&date&& : function(v){return v.toString()},
&&&&string : function(v){return v.toString()}
&&&title&&&&&&& : '标题'&&
&&initialize : function(options){
&&&var op&&&&&&&& = extend(true,{},this.options),
&&&&options&&& = this.defaults = extend(op,options),
&&&&container& = this.container = $c('div',options.container),
&&&&dataConfig = options.dataConfig,
&&&&title&&&&& = $c('div',container);
&&&container.className = 'container';&
&&&title.innerHTML = options.
&&&title.className = 'title';
&&&this.primaryKey = options.primaryK
&&&this.top = $c('div',container);
&&&this.top.className = 'bar';
&&&this.top.innerHTML = '&div class="c"&&a& href="javascript:;" class="first_div_no" page="start"&&/a&&a href="javascript:;" class="prev_div_no" page="next"&&/a&&div class="br"&&/div&&div class="l m_a"&&input type="text" style="width:40px" class="i_a" /&&/div&&div class="br"&&/div&&a href="javascript:;" class="next_div" page="pre"&&/a&&a href="javascript:;" class="last_div" page="end"&&/a&&div class="br"&&/div&&a href="javascript:;" class="delbtn m_a" go="go"&跳转&/a&&a href="javascript:;" class="delbtn" del="del"&删除&/a&&div class="r m_a"&当前第&span class="f_a"&&/span&页　总共&span class="f_a"&&/span&页　一页&span class="f_a"&&/span&条数据　共&span class="f_a"&&/span&条数据&/div&&/div&';
&&&var tabContainer = this.tabContainer& = $c('div',container);
&&&this.bottom = $c(this.top.cloneNode(true),container);
&&&tabContainer.className = 'tabcontainer';
&&&tabContainer.style.height =& ~~options.container.offsetHeight - 83+'px';
&&&var table = this.table = $c('table',tabContainer);
&&&table.className = 't_a';
&&&setAttr(table,{cellpadding :"0",cellspacing:"0",border :"0"});
&&&this.thead = $c('thead',table);
&&&this.tbody = $c('tbody',table);
&&&this.tbody.style.display = 'none';
&&&//loading条&
&&&this.loading_bg = $c('div',container);
&&&this.loading_bg.className = 'loading';
&&&setStyle(this.loading_bg,{
&&&&width& : container.offsetWidth+2+'px',
&&&&height : container.offsetHeight+2+'px'
&&&this.loading = $c('div',container);
&&&this.loading.className ='loaddiv'
&&&setStyle(this.loading,{
&&&&left:(container.offsetWidth/2-45) + 'px',
&&&&top:(container.offsetHeight/2-14) + 'px'
&&&this.loading.innerHTML = '&div class="loadgif"&Loading...&/div&';&&&
&&&//表格有多少列
&&&this.colCount = options.fields.
&&&// 数据源 形式是&[[],[],[],[],[],[]]
&&&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 =&&&
&&&//保存哪一列正在排序中的表头td&
&&&this.sortColumn = '';
&&&//所有tr行& 如果没有分组 形式是[tr1,tr2,tr3,tr4]
&&&//如果有分组& [[tr1,tr2,tr3,tr4],[tr5,tr6,tr7,tr8]]
&&&this.rows =[];
&&&//一级菜单
&&&this.popMenu = $c('div',doc.body);
&&&this.popMenu.className = 'x-menu';
&&&this.popMenu.innerHTML = '&ul class="x-menu-list"&&li&&a href="javascript:;" class="x-menu-item asc" menuType="asc"&升序&/a&&/li&&li&&a href="javascript:;" class="x-menu-item desc" menuType="desc"&降序&/a&&/li&&li&&a href="javascript:;" class="x-menu-item columns" menuType="columns"&所有列&/a&&/li&&/ul&';
&&&// 创建子菜单&
&&&this.subPopMenu = $c('div',doc.body);
&&&this.subPopMenu.className = 'submenu';
&&&//表头的第一级弹出层是否打开 如果打开& 保存 该td
&&&this.isMenuOpen =
&&&//保存列所有列中 某一列是否显示 或隐藏 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 = '&div class="c"&&a class="btn_a m_a" do="submit" href="javascript:;"&提交&/a&&a class="btn_a" do="cancel" href="javascript:;"&取消&/a&&/div&';
&&&this.editTable.className = 'edittable';
&&&var etr = $c('tr', $c('tbody',this.editTable));
&&&//创建一个 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),
&&&each(options.fields,function(i,o){
&&&&var td = $c('td',theadTr),
&&&&&width = o.width?o.width:'80',
&&&&&div = i===0?'&div class="c nobreak"&':'&div class="c nobreak"&&p&&/p&';
&&&&td.innerHTML = [div,'&span class="head_span"&',o.name,'&/span&&a href="javascript:;"&&/a&&/div&'].join('');
&&&&setAttr(td,{clos:i,width:width,unselectable:'on','class':o.type === undefined?'':'type-'+o.type});
&&&&self.createInput(i,o,etr);
&&&&tWidth = tWidth + (~~width);&&&
&&&&li = $c('li',ul);
&&&&li.innerHTML = [
&&&&&'&a href="javascript:;" class="x-menu-item x-m_a" &&input type="checkbox" checked="true"& cols="',
&&&&&'"/&',
&&&&&o.name,
&&&&&'&/a&'
&&&&].join('');
&&&&//生成列索引 的& 每列的第一项
&&&&self.columns[i] = [td];
&&&&$c('td',self.copyTr).setAttribute('unselectable','on');
&&&&//计算出 所显示的列索引 和 一共多少列num &&&&&
&&&&self.isShowTrs.num++;
&&&&self.isShowTrs.clos[i]=&&&&
&&&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),
&&&for(;i&trsLi++){
&&&&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);&&&&
&&&&表格拖拽
&&&&表格排序
&&&&等一些操作
&&&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.length = 0;
&&&&&each(data.data,function(i,o){
&&&&&&var gtr = self.groupTr.cloneNode(true);
&&&&&&$q('td',gtr)[0].innerHTML = o.groupN
&&&&&&grouphead.push(gtr);
&&&&&&each(o.rows,function(j,d){
&&&&&&//this.data中数据的最后一项是 索引
&&&&&&&d.push(i);&&&&&&&&&&&&
&&&&&&&self.data.push(d);&&&&
&&&&&&});&&&&&&
&&&&&this.showGroup=
&&&&}else{
&&&&&each(data.data,function(i,o){&&&&&&&&&&
&&&&&&self.data.push(o);&&&&&
&&&&&this.showGroup=
&&&total = data.total
&&&&&? data.total&=this.data.length
&&&&&&? data.total
&&&&&&: this.data.length
&&&&&: this.data.
&&&this.writeMessage(total);
&&&this.buildTbody(options.currPage);
&&buildTbody : function(pageNum){
&&&if(this.data.length===0){
&&&&this.tbody.style.display = 'none';
&&&var i&&&&&& = 0,
&&&&j&&&&&& = 0,
&&&&self&&& = this,
&&&&data&&& = this.data,
&&&&options = this.defaults,
&&&&trsLen& = options.perPage,
&&&&tdsLen& = options.fields.length,
&&&&tbody&& = this.tbody,
&&&&trs&&&& = tbody.getElementsByTagName('tr'),
&&&&start&& = pageNum*options.perPage,
&&&this.rows.length = 0;
&&&if(this.showGroup){
&&&&var group = {},
&&&&&index,
&&&&&arr = [],
&&&&&insertTrs = this.insertT
&&&&&&&&&&&
&&&&//清除掉之前插入的 分组tr
&&&&insertTrs.length!=0&&each(insertTrs,function(i,o){
&&&&&self.tbody.removeChild(o);
&&&&insertTrs.length = 0;&&&&&
&&&&//遍历填充数据&给this.rows赋值&&&&
&&&&var num = - 1;
&&&&for(;i&trsLi++){
&&&&&tr&= trs[i];
&&&&&//如果没有数据了& 就开始隐藏剩下的行
&&&&&if(!data[i+start]){
&&&&&&tr.style.display = 'none';
&&&&&//做标记 tr 里面的内容对应data中哪条数据&
&&&&&tr.setAttribute('dataIndex',i+start);
&&&&&tr.style.display = 'block';
&&&&&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&tdsLj++){
&&&&&&td = tds[j];
&&&&&&var txt&& = data[i+start][j] ===''?'&':data[i+start][j];
&&&&&&&render = options.fields[j].
&&&&&&&td.innerHTML = render
&&&&&&&&?render(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]]);&
&&&&});&&&&&
&&&&for(;i&trsLi++){
&&&&&tr&= trs[i];
&&&&&//做标记 tr 里面的内容对应data中哪条数据&
&&&&&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&tdsLj++){
&&&&&&var txt&& = data[i+start][j] ===''?'&':data[i+start][j];
&&&&&&&render = options.fields[j].
&&&&&&&tds[j].innerHTML = render
&&&&&&&&?render(txt)
&&&&&&&&:&&&&&&&&&&&&
&&&options.currPage = pageN
&&&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 : function(total){
&&&var options&&&& = this.defaults,
&&&&base&&&&&&& = total/options.perPage,
&&&&topSpans&&& = this.top.getElementsByTagName('span'),
&&&&bottomSpans = this.bottom.getElementsByTagName('span');&&&&
&&&options.totalPage = base & parseInt(base)
&&&&&&&&&? parseInt(base)+1
&&&&&&&&&:&
&&&bottomSpans[0].innerHTML = topSpans[0].innerHTML = ~~options.currPage+1;
&&&bottomSpans[1].innerHTML = topSpans[1].innerHTML = options.totalP
&&&bottomSpans[2].innerHTML = topSpans[2].innerHTML = options.perP
&&&bottomSpans[3].innerHTML = topSpans[3].innerHTML =
&&sortTable : function(e){
&&&var elem = e.target || e.srcElement,&&&&
&&&&self = this,
&&&&options&& = this.defaults,
&&&&elemName& = elem.nodeName.toLowerCase(),
&&&&showGroup = this.showGroup,
&&&&tdElem&&& = elem,
&&&&name&&&&& = elemN
&&&//拖拽的时候可能会触发一次click 原因是ie下全部绑定在this.table上 代码见拖拽
&&&if($q('td',elem).length&1)
&&&if(name !== 'td'){
&&&&while(name !== 'td'){
&&&&&tdElem = tdElem.parentN
&&&&&name = tdElem.nodeName.toLowerCase();
&&&var issort = checkReg(tdElem.className,'sort'),
&&&&type&& = checkReg(tdElem.className,'type')
&&&//进行排序
&&&if(elemName !=='a'&&type){
&&&&var frag = doc.createDocumentFragment();
&&&&if(this.sortColumn!==tdElem&&this.sortColumn!==''){
&&&&&removeClass(this.sortColumn,'sort-asc');
&&&&&removeClass(this.sortColumn,'sort-desc');
&&&&if(issort){
&&&&&// 有分组，每组单独取反序& 不分组，直接取反序
&&&&&showGroup
&&&&&&? each(this.rows,function(i,o){ o.reverse();})&
&&&&&&: this.rows.reverse();
&&&&&&tdElem.className = modify(tdElem.className,'sort',issort==='asc'?'desc':'asc');
&&&&}else{
&&&&&showGroup
&&&&&&? each(this.rows,function(i,o){
&&&&&&&o.pare(tdElem.getAttribute('clos'),type));
&&&&&&: this.rows.pare(tdElem.getAttribute('clos'),type));
&&&&&// 如果是正序排序，加上正序排列的标志。&
&&&&&if(this.ascSort){&&&&&&&&
&&&&&&addClass(tdElem,'sort-asc');
&&&&&}else{
&&&&&&// 反序排列则将原有排序取反，并加上排序标志
&&&&&&showGroup
&&&&&&&? each(this.rows,function(i,o){ o.reverse();})
&&&&&&&: this.rows.reverse();
&&&&&&addClass(tdElem,'sort-desc');
&&&&&}&&&&
&&&&// 将排序后的数据渲染到表格
&&&&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 = tdE
&&&//-------------------------------------------------------------------------------------
&&&如果点击的是表头中的 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 =
&&&&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 =&&&&&
&&&&addListener(document,'click',documentClick);
&&&&setStyle(this.popMenu,{
&&&&&left&&& : left+'px',
&&&&&top&&&& : top+'px',
&&&&&display :'block'&
&&&&});&&&
&&compare : function(n,type){
&&&var sortType = this.defaults.sortType,
&&&&txt =Sys.ie?'innerText':'textContent';
&&&!sortType[type]&&(type = 'string');
&&&return function(a1,a2){
&&&&a1 = sortType[type](a1.cells[n][txt]);
&&&&a2 = sortType[type](a2.cells[n][txt]);
&&&&return a1==a2?0:a1&a2?1:-1;
&&pageBarClick : function(e){
&&&var&elem&&&& = e.target || e.srcElement,
&&&&options& = this.defaults,
&&&&typePage = elem.getAttribute('page'),
&&&&isGo&&&& = elem.getAttribute('go');
&&&&isDel&&& = elem.getAttribute('del');
&&&&if(typePage){
&&&&&var number = {
&&&&&&start : 0,
&&&&&&end&& : options.totalPage-1,
&&&&&&next& : options.currPage-1,
&&&&&&pre&& : options.currPage+1
&&&&&}[typePage];
&&&&&this.toPage(number);
&&&&if(isDel){
&&&&&this.del();
&&&&if(isGo){
&&&&&var number = ~~elem.parentNode.getElementsByTagName('input')[0].value-1;
&&&&&this.toPage(number);
&&toPage : function(num){
&&&if(typeof num !=='number'||isNaN(num))
&&&var options&&& = this.defaults,
&&&&self&&&&&& = this,
&&&&dataConfig = options.dataC&&&&
&&&//如果请求的分页数小于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 = 'none';
&&&this.loading_bg.style.display = '';;
&&&this.loading.style.display = '';
&&&setTimeout(function(){self.buildTbody(num);},10);&&
&&del : function(){
&&&//做删除的时候需要有主键的索引& 我全部保存在tr的
&&&var selectedRows = this.selectedRows,
&&&&arr = []
&&&&for(var name in selectedRows){&&&&&
&&&&&arr.push(selectedRows[name].getAttribute('dataIndex'));
&&&alert('选择了主键值为'+arr.join(','));
&&theadOver : function(e){
&&&var elem = e.target || e.srcE
&&&if(elem.nodeName.toLowerCase() === 'div'){
&&&&$q('a',elem)[0].style.display = 'block';
&&&&addClass(elem,'theadfocus');
&&theadOut : function(e){
&&&var elem&&&& = e.target || e.srcElement,
&&&&toElem&& = e.toElement||e.relatedTarget,
&&&&elemName = elem.nodeName.toLowerCase();
&&&if(this.isMenuOpen && contains(this.isMenuOpen,elem))
&&&//如果离开了当前的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.parentN
&&&&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.classN
&&&if(elem.nodeName.toLowerCase()==='a'){
&&&&//如果td的样式中不存在type 也就是说不需要排序 则不进行排序 阻止事件冒泡
&&&&if(!checkReg(className,'type')){
&&&&&Sys.ie
&&&&&&? e.cancelBubble = true
&&&&&&: e.stopPropagation();
&&&&//如果a标签 的menuType &&&&&&&
&&&&var menuOp = elem.getAttribute('menuType'),
&&&&&sortOrder = checkReg(className,'sort');&
&&&&//选择所有列& 不进行排序&&
&&&&if(menuOp==='columns')
&&&&&如果没有排序& 就根据menuOp来进行排序
&&&&&如果已排序&& 且与 menuOp排序方式不同& 则进行排序
&&&&if(sortOrder){&&&
&&&&&if(menuOp != sortOrder){
&&&&&&var td = $q('td',this.thead)[this.isMenuOpen.getAttribute('clos')];
&&&&&&fireEvent(td,'click');
&&&&}else{
&&&&&this.ascSort = {
&&&&&&desc : false,
&&&&&&asc& : true
&&&&&}[menuOp];
&&&&&var td = $q('td',this.thead)[this.isMenuOpen.getAttribute('clos')];
&&&&&fireEvent(td,'click');
&&&&//完成上面的操作后 设置成正序& 因为 之后点别的列 默认还是按正序列来排
&&&&this.ascSort =&&&&
&&menuOver : function(e){
&&&var elem = e.target || e.srcE
&&&if(elem.nodeName.toLowerCase()==='a'&&elem.getAttribute('menuType')==='columns'){
&&&&var pos& = objPos(elem),
&&&&&left = pos.left+Math.max(document.documentElement.scrollLeft,document.documentElement.scrollLeft) + elem.offsetWidth,
&&&&&top& = pos.top+Math.max(document.documentElement.scrollTop,document.documentElement.scrollTop);
&&&&&setStyle(this.subPopMenu,{left:left+'px',top:top+'px',display:'block'});
&&subMenuClick : function(e){
&&&var elem = e.target || e.srcElement,
&&&&isA& = elem.nodeName.toLowerCase() === 'a';
&&&&? e.cancelBubble = true
&&&&: e.stopPropagation();&&&&&
&&&if(isA||elem.nodeName.toLowerCase() === 'input'){
&&&&var input = isA
&&&&&&? $q('input',elem.parentNode)[0]
&&&&&&: elem,
&&&&&clos& = input.getAttribute('cols'),
&&&&&self& =
&&&&&&&(input.checked = (!input.checked));&&&&&
&&&&var checked = input.checked,
&&&&&hideOrShow = checked ? '' : 'none';
&&&&//如果还剩一列& 并且这次是取消选中的
&&&&//则 不执行隐藏
&&&&if(this.isShowTrs.num===1&&!checked){&&&&&
&&&&&input.checked =
&&&&checked
&&&&&?(this.isShowTrs.num++,this.isShowTrs.clos[clos]=true)
&&&&&:(this.isShowTrs.num--,this.isShowTrs.clos[clos]=false);
&&&&//如果实现了分组& 还必须把组tr的colSpan属性改变
&&&&this.showGroup
&&&&&&&each(this.insertTrs,function(i,tr){
&&&&&&$q('td',tr)[0].setAttribute('colSpan',self.isShowTrs.num);
&&&&//显示或隐藏选中列
&&&&each(this.columns[clos],function(i,o){
&&&&&o.style.display = hideOrS&&&&&&&&
&&&&var width = ~~this.columns[clos][0].getAttribute('width');
&&&&setTimeout(function(){&
&&&&&checked
&&&&&&? self.table.setAttribute('width',~~self.table.getAttribute('width') + width)
&&&&&&: self.table.setAttribute('width',~~self.table.getAttribute('width') - width)
&&&&},0);&&&&
&&rowHighlight : function(e,isHight){
&&&var elem&& = e.target || e.srcElement,
&&&&toElem = e.toElement||e.relatedTarget,
&&&&parent = elem.parentN
&&&&Sys.ie
&&&&&? e.cancelBubble = true
&&&&&: e.stopPropagation();
&&&while(parent.nodeName.toLowerCase()!='tr'){
&&&&parent = parent.parentN
&&&if(isHight&&hasClass(parent,'rowfocus'))
&&&&&&&&&&
&&&//如果是分组的行tr 就返回&&
&&&if(elem.nodeName.toLowerCase()==='td'&&parent.getAttribute('g')==='y')
&&&isHight
&&&&? addClass(parent,'rowfocus')
&&&&: removeClass(parent,'rowfocus');
&&selectRow : function(e){
&&&var elem = e.target || e.srcE
&&&if(elem.getAttribute('g')||elem.parentNode.getAttribute('g'))
&&&var&self&&&&&&&&& = this,
&&&&selectedRows& = this.selectedRows,
&&&&lastSelectRow = this.lastSelectRow,
&&&&cellClick&&&& = false,
&&&&ctrlClick&&&& = false,
&&&&shiftClick&&& =
&&&if(elem.nodeName.toLowerCase() === 'td' ){
&&&&var parent&&& = elem.parentNode,
&&&&&className = parent.className,
&&&&&options&& = this.
&&&&//按ctrl进行选择
&&&&if(e.ctrlKey===true){
&&&&&index = checkReg(className,'select');
&&&&&//选中那行的如果已经选中了& 就取消选中 并且 删除样式
&&&&&//从 this.selectedRows 中删除& 设置lastSelectRow={dom:null,index:null&
&&&&&if(hasClass(parent,'trfocus')){
&&&&&&if(index){
&&&&&&&delete selectedRows[index];
&&&&&&&removeClass(parent,'select-'+index);
&&&&&&&removeClass(parent,'trfocus');
&&&&&&&lastSelectRow.dom = lastSelectRow.index =
&&&&&&}&&&&&&&
&&&&&&ctrlClick =
&&&&&}else{
&&&&&&selectedRows[++uuid] =
&&&&&&addClass(parent,'trfocus ');
&&&&&&addClass(parent,'select-'+uuid);
&&&&&&ctrlClick = &
&&&&//按住shift进行选择
&&&&if(e.shiftKey===true){
&&&&&var lastD
&&&&&if(lastSelectRow.dom===null){
&&&&&&shiftClick=
&&&&&&selectedRows[++uuid] =
&&&&&&addClass(parent,'trfocus ');
&&&&&&addClass(parent,'select-'+uuid);&&&&&&
&&&&&}else{
&&&&&&var allRows = [];
&&&&&&//如果有分组& 个并所有的tr到一个数组
&&&&&&this.showGroup
&&&&&&&? each(this.rows, function(i, o){
&&&&&&&&allRows = allRows.concat(o);
&&&&&&&})&
&&&&&&&: allRows = this.
&&&&&&each(allRows,function(i,o){&&&&&&&&&&&&
&&&&&&&if(parent===o){
&&&&&&&&lastDom = {dom:o,index:i}
&&&&&&&}&&&&&&
&&&&&&//清空掉之前所有选中tr的样式
&&&&&&each(selectedRows,function(i,o){
&&&&&&&removeClass(o,'trfocus');&
&&&&&&&removeClass(o,'select-'+i);
&&&&&&&delete selectedRows[i];&&&&&& &
&&&&&&var len = Math.max(lastSelectRow.index,lastDom.index);
&&&&&&for(var i = Math.min(lastSelectRow.index,lastDom.index);i&=i++){
&&&&&&&selectedRows[++uuid] = allRows[i];
&&&&&&&addClass(allRows[i],'trfocus ');
&&&&&&&addClass(allRows[i],'select-'+uuid);&&&&&&&
&&&&&}&&&&
&&&&//进行单选
&&&&if(e.ctrlKey===false&&e.shiftKey===false){&&&&&
&&&&&each(selectedRows,function(i,o){
&&&&&&removeClass(o,'trfocus');
&&&&&&removeClass(o,'select-'+i);
&&&&&&delete selectedRows[i];&
&&&&&});&&&&&
&&&&&selectedRows[++uuid] =&&&&&
&&&&&addClass(parent,'trfocus');
&&&&&addClass(parent,'select-'+uuid);
&&&&&if(parent != lastSelectRow.dom)
&&&&&&cellClick=&&&&&&&&&&
&&&&// 点击后记录最后点击的行。
&&&&if(ctrlClick||cellClick||shiftClick){
&&&&&var allRows = [];
&&&&&&&&&&
&&&&&//如果有分组& 个并所有的tr到一个数组
&&&&&this.showGroup
&&&&&&? each(this.rows, function(i, o){allRows = allRows.concat(o);})&
&&&&&&: allRows = this.
&&&&&//寻找parent的索引
&&&&&each(allRows,function(i,o){
&&&&&&if(o===parent){
&&&&&&&self.lastSelectRow.dom =
&&&&&&&self.lastSelectRow.index =
&&dragWidth : function(e){
&&&var elem = e.target || e.srcE
&&&if(elem.nodeName.toLowerCase() === "p"){
&&&&&遍历 当前选中的列的 前面所有的列&&&&&&
&&&&&如果没有 或 全部是隐藏的&& 则返回
&&&&for(var i=parseInt(elem.parentNode.parentNode.getAttribute('clos'))-1;i&=0;i--)
&&&&&if(this.isShowTrs.clos[i]===true)
&&&&if(i&0)
&&&&var options = this.defaults,
&&&&&self = this,&&&&
&&&&&widthConfig = options.widthConfig,&&&&
&&&&&td = elem.parentNode.parentN
&&&&&widthConfig.x = e.clientX;
&&&&&widthConfig.td =
&&&&&Sys.ie
&&&&&&? this.table.setCapture(false)
&&&&&&: e.preventDefault();
&&&&&widthConfig.prevTd&&& = this.columns[i][0];&
&&&&&widthConfig.tdWidth&& = ~~td.&&&&&
&&&&&widthConfig.prevWidth = ~~widthConfig.prevTd.
&&&&&var height = Math.min(this.tabContainer.offsetHeight,this.table.offsetHeight),
&&&&&&scrollHeight = this.tabContainer.offsetHeight&=this.table.offsetHeight?0:18,
&&&&&&documentScrollLeft = doc.body.scrollL&&&&&
&&&&&setStyle(this.line,{
&&&&&&left&&& : e.clientX + doc.documentElement.scrollLeft + 'px',
&&&&&&height& : height-scrollHeight +"px",
&&&&&&top&&&& : objPos(this.tabContainer).top+Math.max(document.documentElement.scrollTop,document.documentElement.scrollTop)+2+'px'
&&&&&addListener(doc,'mousemove',bindAsEventListener(this,this.widthMove));
&&&&&addListener(doc,'mouseup',bindAsEventListener(this,this.widthUp));
&&widthMove : function(e){
&&&win.getSelection
&&&&? win.getSelection().removeAllRanges()
&&&&: doc.selection.empty();
&&&var options&&&&& = this.defaults,
&&&&widthConfig& = options.widthConfig,
&&&&left&&&&&&&& = e.clientX,
&&&&clientX&&&&& = left,
&&&&cellMinWidth = options.cellMinW
&&&if(clientX&widthConfig.x&&e.clientX - widthConfig.x&widthConfig.tdWidth-cellMinWidth){
&&&&left = widthConfig.x +widthConfig.tdWidth -cellMinW
&&&if(clientX&widthConfig.x&&widthConfig.x-clientX&widthConfig.prevWidth-cellMinWidth){
&&&&left = widthConfig.x - widthConfig.prevWidth +cellMinW
&&&setStyle(this.line,{
&&&&left&&& : left + Math.max(document.documentElement.scrollLeft,document.body.scrollLeft)+"px",
&&&&display : "block"&&&&
&&widthUp : function(e){
&&&this.line.style.display = 'none';
&&&var widthConfig = this.defaults.widthConfig,
&&&&x = parseInt(this.line.style.left)- Math.max(doc.documentElement.scrollLeft,doc.body.scrollLeft) - widthConfig.
&&&widthConfig.prevTd.width = ~~widthConfig.prevWidth + x&& ;&&&
&&&widthConfig.td.width = ~~widthConfig.tdWidth -x;
&&&Sys.ie && this.table.releaseCapture();
&&&removeListener(doc,'mousemove');
&&&removeListener(doc,'mouseup');
&&createInput : function(i,obj, parent){
&&&var etd&&&& = $c('td',parent),
&&&&input&& = $c('input',etd),
&&&&type&&& = obj.
&&&etd.width& = obj.width
&&&input.type = 'text';
&&&input.setAttribute('index',i);
&&&&&&input.setAttribute('readonly','readonly')
&&&etd.appendChild(input);
&&&input.className ='x-form-text i_a';
&&&setStyle(input,{
&&&&width&&&&& : obj.width - 1 +'px',
&&&&background : 'white'
&&editRow : function(e){
&&&var elem&&&& = e.target || e.srcElement,
&&&&self&&&& = this,
&&&&options& = this.defaults,
&&&&nodeName = elem.nodeName.toLowerCase();
&&&if(nodeName!=='td'){
&&&&while(elem.nodeName.toLowerCase()!=='td'){
&&&&&elem = elem.parentN
&&&var tr = elem.parentN
&&&this.currentEditRow.index = tr.getAttribute('dataindex');
&&&this.currentEditRow.dom&& =
&&&if(tr.getAttribute('g'))
&&&var sTop& = ~~this.tabContainer.scrollTop,
&&&&sLeft = ~~this.tabContainer.scrollLeft,
&&&&cTds& = $q('td',tr);
&&&&pTds& = $q('td',$q('tr',this.editTable)[0]),
&&&&txt&& = Sys.ie?'innerText':'textContent';
&&&setStyle(this.editForm,{
&&&&top&&&& : tr.offsetTop& + 'px',
&&&&left&&& : tr.offsetLeft + 'px',
&&&&display : ''
&&&each(cTds,function(i,td){
&&&&$q('input',pTds[i])[0].value = td[txt];
&&&});&&&&
&&modifyTr : function(e){
&&&var elem = e.target || e.srcE
&&&if(elem.nodeName.toLowerCase()==='a'){
&&&&var tds = $q('td',this.editTable),
&&&&&txt = txt =Sys.ie?'innerText':'textContent',
&&&&&isC =
&&&&if(elem.getAttribute('do')==='submit'){
&&&&&alert('索引为'+this.currentEditRow.index)
&&&&this.editForm.style.display = 'none';&
})(document);
window.onload = function(){
&var data ={
&&//total:'55',
&&data : []
&var s='阿斯达三大散打三个而个呃 奋斗个我是地方我师父 威尔 地方威尔威尔威尔 豆腐干 沃尔与体育 56& 范甘迪威尔 请问额请问散阿萨德b你吗 吗吗 阿斯 zweas dqwesdf 阿凡达散打有人6 斯蒂芬与',
&&b = ['人民币','欧元','美元'],
&&n = ['张三','李四','王五','赵六','陈七','猪八']
&each(new Array(3000),function(i,o){
&&data.data.push([i+1,n[i%5]+i,(i%3===0?'-':'')+parseInt(Math.random()*1000),b[i%2],'',s.substring(Math.random()*10,Math.random()*10+15)])&&&&&&&&
&data5 = {
&&total:&& 11,
&&data& : [&&&&&&&&&&&&&&&
&&&&groupName : '平安银行',
&&&&rows : [
&&&&&[1,'平安银行一张同-账单','-29792.66','日元','','一般'],
&&&&&[2,'平安银行信用卡-账单','26268.99','欧元','','一般'],
&&&&&[3,'平安银行基金-账单','-84149.12','英磅','','一般'],
&&&&&[4,'平安银行信用卡-账单','23782.40','欧元','','一般'],
&&&&&[5,'平安银行国债-账单','-48355.53','人民币','','很好'],
&&&&&[6,'平安银行信用卡-账单','14922.48','人民币','','一般'],
&&&&&[7,'平安银行信用卡-账单','87252.78','人民币','','很好'],
&&&&&[8,'平安银行基金-账单','-67287.72','英磅','','一般'],
&&&&&[9,'平安银行基金-账单','-51724.44','美元','','很差']
&&&&groupName : '交通银行',
&&&&rows : [&&&&&&
&&&&&[151,'交通银行一张同-账单','23062.39','英磅','','一般'],
&&&&&[152,'交通银行信用卡-账单','10634.01','英磅','','很好'],
&&&&&[153,'交通银行基金-账单','-69832.32','美元','','很差'],
&&&&&[154,'交通银行信用卡-账单','-22260.14','英磅','','很差'],
&&&&&[155,'交通银行国债-账单','92868.28','英磅','','一般'],
&&&&&[156,'交通银行信用卡-账单','77059.80','英磅','','一般']
&&&&groupName : '渣打银行',
&&&&rows : [
&&&&&[182,'渣打银行一张同-账单','26046.45','英磅','','很好'],
&&&&&[183,'渣打银行信用卡-账单','-57036.21','欧元','','很差']
&&&&groupName : '浦发银行',
&&&&rows : [
&&&&&[218,'渣打银行信用卡-账单','51027.86','日元','','很好'],
&&&&&[219,'渣打银行基金-账单','-58048.75','英磅','','一般'],
&&&&&[220,'渣打银行信用卡-账单','-79938.95','欧元','','很差'],
&&&&&[221,'渣打银行国债-账单','-65972.99','欧元','','很差'],
&&&&&[222,'渣打银行信用卡-账单','44483.17','欧元','','一般']
&&&&groupName : '招商银行',
&&&&rows : [
&&&&&[238,'招商银行信用卡-账单','77695.90','美元','','很好'],
&&&&&[239,'招商银行信用卡-账单','52517.41','欧元','','很好'],
&&&&&[240,'招商银行基金-账单','-45174.21','欧元','','很差'],
&&&&&[241,'招商银行信用卡-账单','-60409.65','英磅','','一般'],
&&&&&[242,'招商银行国债-账单','32741.68','美元','','很差']&&
&&&},&&&&&&&&
&&&&groupName : '农业银行',
&&&&rows : [
&&&&&[430,'农业银行一张同-账单','23474.59','日元','','一般'],
&&&&&[431,'农业银行信用卡-账单','-64526.95','日元','','很好'],
&&&&&[432,'农业银行基金-账单','49975.19','美元','','一般']
&&&}&&&&&&&&
&function xx(v){
&&return ~~v&0
&&&? '&span class="greed"&'+v+'&/span&'
&&&: '&span class="red"&'+v+'&/span&'
&new easyGrid({
&&container& : $$('demo'),
&&//主键名& 删除 编辑 的时候 需要这个东西
&&primaryKey : 'id',
&&fields&&&& : [
&&&{name:'序号',param:'id',type:'int',width:'100'},
&&&{name:'名称',param:'name',type:'string',edit:'edit',width:'140'},
&&&{name:'余额',param:'money',type:'float',edit:'edit',render:xx,width:'100'},
&&&{name:'币种',param:'type',type:'string',edit:'edit',width:'100'},
&&&{name:'日期',param:'date',type:'date',edit:'edit',width:'100'},
&&&{name:'备注',param:'note',type:'string',width:'255'}
&&dataConfig : data,
&&//一页有多少条
&&perPage&&& : 1000,
&&//当前在第几页
&&currPage&& : 0,
&&//一共多少页
&&totalPage& : 0,
&&//一次请求多少条数据
&&count&&&&& : 2000,
&&//第几版数据
&&page&&&&&& : 0
&easyGrid.prototype.options.sortType.cp=function(v){&&&
&&if(v==='很好')
&&&return 3
&&if(v==='一般')
&&&return 2
&&if(v==='很差')
&&&return 1&&&&
&new easyGrid({
&&container& : $$('demo1'),
&&//主键名& 删除 编辑 的时候 需要这个东西
&&primaryKey : 'id',
&&fields&&&& : [
&&&{name:'序号',param:'id',type:'int',width:'100'},
&&&{name:'名称',param:'name',type:'string',edit:'edit',width:'140'},
&&&{name:'余额',param:'money',type:'float',edit:'edit',render:xx,width:'100'},
&&&{name:'币种',param:'type',type:'string',edit:'edit',width:'100'},
&&&{name:'日期',param:'date',type:'date',edit:'edit',width:'100'},
&&&{name:'备注',param:'note',type:'cp',width:'255'}
&&dataConfig : data5,
&&//一页有多少条
&&perPage&&& : 20,
&&//当前在第几页
&&currPage&& : 0,
&&//一共多少页
&&totalPage& : 0,
&&//一次请求多少条数据
&&count&&&&& : 2000,
&&//第几版数据
&&page&&&&&& : 0
水平有限& 请多指教
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具