铁雪资源网

原生javascript实现简单的datagrid数据表格
站长资源 2024/12/24 佚名
69 1538
铁雪资源网 Design By www.gsvan.com

简单的datagrid

1.排序 自定义排序方式

2.编辑

3.拖拽

4.分页

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

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

7.对列的显示隐藏

8.分组

只是一个示例  没有什么与后台的借口

其实可以写几个回调就行了  里面有loading条 可以在没返回结果前一直显示

复制代码 代码如下:
 <!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table</title>
<style type="text/css">
*{margin:0; padding:0;}
.h{line-height:20px;}
.c{zoom:1;}
.c:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.l{float:left;}
.r{float:right;}
ul{list-style:none;}
.demo{width:832px; height:400px;font-size:12px; margin:20px auto; position:relative}
.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 .container{
 border:1px solid #99bbe8;
 height:auto;
}
.demo .i_a{border:1px solid #ccc;margin-top:2px;}
.demo .t_a{border-left:1px solid #99bbe8;border-bottom:1px solid #99bbe8;}
.demo .t_a td{background-color:#fff;border-right:1px solid #ccc;border-top:1px solid #ccc;}
.demo table td{
 line-height:22px;
 height:20px;
}
.demo table thead .theadfocus{
 background:url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) repeat-x 0 -163px;
}
.demo table thead td{
 overflow:hidden;
}
.demo .t_a tbody td{padding-left:8px;}
.demo .title{height:24px; line-height:22px; font-weight:bold; padding-left:20px; color:#666666; background:url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) repeat-x 0 -300px; }
.demo .bar{_display:inline-block;line-height:20px; height:20px; border-top:1px solid #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_no{float:left;width:18px;height:16px;margin-top:3px;cursor:pointer;display:block;margin-right:5px;background:url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no-repeat}
.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{background-color:#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}
.demo table{
 font-size:12px;
 table-layout:fixed;
 -moz-user-select: -moz-none;
 -webkit-user-select:none;
 -khtml-user-select:none;
}
.demo .tabcontainer{
width:99%;
overflow:auto;
padding :2px 0 0 2px;
background-color:#FFFBF7;
position:relative;
}
.demo table thead td{background:url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) repeat-x 0 -100px;}
.demo table thead a{
 z-index:1000;
 background-color:#C3DAF9;
    background-image:url("http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png");
 display:none;
 width:12px;
 height:22px;
 background-position:0 -234px;
 position:absolute;
 top:0;
 right:0;
}
.demo table thead div{ position:relative; z-index:1;}
.demo table thead p{
 width:1px;
 height:22px;
 background-color:#99BBE8;
 float:left;
 display:block;
 cursor:e-resize;
 margin-right:2px;
}
.demo table tr.trfocus td{
 background-color:#ebf2fb
}
.demo div table,.demo div table tr,.demo div table tr td{
 -moz-user-select: -moz-none;
 -webkit-user-select:none;
}
.demo table tr td{background-color:#fff; overflow:hidden; 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-opacity: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 .edittable 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{
 height:12px; width:24px;
 display:block;
 float:left;
 padding-right:18px;
 background:url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no-repeat right -423px;
}
.head_span{float:left;line-height:22px;display:block;}
.sort-desc .head_span{
 height:12px; width:24px;
 display:block;
 float:left;
 padding-right:18px;
 background:url(http://images.cnblogs.com/cnblogs_com/wtcsy/294024/r_ajaxtable.png) no-repeat right -391px;
}
.x-menu{
 position:absolute;
 background:url(menu.gif) repeat-y #f0f0f0;
 border:1px solid #718bb7;
 width:134px;
 display:none;
}
.x-menu .disabled a{
 color:#999;
}
.x-menu-list{padding:2px; overflow:hidden; margin:0;}
.x-menu-list li{padding:1px; white-space:nowrap; height:20px;}
.x-menu-list li.focus{backround:#09F;}
a.x-menu-item{
 display:block;
 cursor: pointer;  
    line-height: 18px;
 height:20px;
    outline-color: -moz-use-text-color;
    outline-style: none;
    outline-width: 0;
    width:100px;
 padding-left:27px;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
 font-size:12px;
 color:#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{
 position:absolute;
 z-index: 1500;
 background:#f0f0f0;
 border:1px solid #718bb7;
 width:134px;
 display:none;
}
.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;
}
</style>
</head>
<body>
1.排序 自定义排序方式
<br>
2.编辑
<br>
3.拖拽
<br>
4.分页
<br>
5.单选 多选(ctrl) 线性选(shift)
<br>
6.文字render  就是给文字着色  比如 大于0红色  小于0绿色
<br>
7.对列的显示隐藏
<br>
8.分组
<br>
<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 = this;
 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" : i; break; }
  }
  b.version = vMark && RegExp("(" + vMark + ")[\\/: ]([\\d.]+)").test(ua) "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; 
  return b;
 }(win.navigator.userAgent.toLowerCase());
 
 win.Sys.ie6&&doc.execCommand("BackgroundImageCache", false, true);
 
 win.$$ = function(id){
  return typeof id === 'string'
   "on" + e,fn);
 };
 win.addListener.guid = 1;
 win.removeListener = function(element,e,fn){
  var handlers = element.events[e],type;
  if(fn){
   for(type in handlers)
    if(handlers[type]===fn){
     element.removeEventListener"on" + e,fn);
     delete handlers[type];
    }
  }else{
   for(type in handlers){
    element.removeEventListener"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"opacity" && ie) {
     elem.style.filter = (elem.currentStyle.filter || "").replace( /alpha\([^)]*\)/, "" ) + "alpha(opacity=" + value * 100 + ")";
    }else if(name === "float"){
     elem.style[ ie "styleFloat" : "cssFloat" ] = value;
    }else{
     name = name.replace(/-([a-z])/ig, function(all, letter){
      return letter.toUpperCase();
     });
     elem.style[name] = value;
    }
   }
  },style);
 };
 win.setAttr = function(dom,attr){
  if(typeof attr !== 'object')
   return;
  for(var name in attr)
   dom.setAttribute(name,attr[name]);
 }
 
 var slice = Array.prototype.slice;
 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, options;
  if ( typeof target === "boolean" ) {
   deep = target;
   target = arguments[1] || {};
   i = 2;
  }
  if ( typeof target !== "object" && Object.prototype.toString.call(target)!="[object Function]")
   target = {};
  for(;i<length;i++){
   if ( (options = arguments[ i ]) != null )
    for(var name in options){
     var src = target[ name ], copy = options[ name ];
     if ( target === copy )
      continue;
     if ( deep && copy && typeof copy === "object" && !copy.nodeType ){
      target[ name ] = arguments.callee( deep, src || ( copy.length != null "left": left, "top": top, "right": right, "bottom": bottom };      
 };
 win.contains = function(k,j){
  return document.compareDocumentPosition
   "file://\\s|^)'+className+'(\\s|$)'">\\s|^)'+className+'(\\s|$)'));
 };
 win.addClass = function(element, className){
  if(!win.hasClass(element, className))
   element.className.replace(/\s/g,'')===''
    " "+className;
 };
 win.removeClass = function(element, className){
  win.hasClass(element, className)&&(element.className = element.className.replace(new RegExp('(\\s*|^)'+className+'(\\s*|$)'),' '));
 }
})(document);
(function(doc,undefined){
 var win      = this,
  uuid    = -1;
 /*  
  检查 字符串 中是否有key
  如果有 且key后面是-  返回-后面的东西 否则返回true
  检测不到返回false
 */
 function checkReg(str,key){
  var reg = new RegExp('("file://\\s|$)','i'">\\s|$)','i');
  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;
   title.className = 'title';
   this.primaryKey = options.primaryKey;
   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.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 = '<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 = 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 = '<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),
    li;
   each(options.fields,function(i,o){
    var td = $c('td',theadTr),
     width = o.width"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"javascript:;" class="x-menu-item x-m_a" ><input type="checkbox" checked="true"  cols="',
     i,
     '"/>',
     o.name,
     '</a>'
    ].join('');
    
    //生成列索引 的  每列的第一项
    self.columns[i] = [td];
    $c('td',self.copyTr).setAttribute('unselectable','on');
    //计算出 所显示的列索引 和 一共多少列num      
    self.isShowTrs.num++;
    self.isShowTrs.clos[i]=true;    
   });
   
   setAttr(this.table,{width:tWidth+options.fields.length+1})
   
   //生成tbody里面的tr 只是生成 tr 根据perPage生成 它是显示当前一共有多少条数据的配置项
   var i=0,
    trsLen = options.perPage,
    frag   = doc.createDocumentFragment(),
    arr    = new Array(options.fields.length),
    tr,
    tds;
   for(;i<trsLen;i++){
    tr  = this.copyTr.cloneNode(true);
    tds = $q('td',tr);
    each(arr,function(i){
     //生成列索引的所有项
     self.columns[i].push(tds[i]);
    });
    $c(tr,frag);
   }
   this.tbody.appendChild(frag);
   if(typeof dataConfig === 'object'){
    setTimeout(function(){self.getDataCallBack(dataConfig);},5);    
   }else{
    
   }
   /*
    表格拖拽
    表格排序
    等一些操作
   */
   addListener(this.thead,'click',bindAsEventListener(this,this.sortTable));
   addListener(this.thead,'mouseover',bindAsEventListener(this,this.theadOver));
   addListener(this.thead,'mouseout',bindAsEventListener(this,this.theadOut));
   addListener(this.thead,'mousedown',bindAsEventListener(this,this.dragWidth));
   
   /*
    绑定弹出层click事件  进行排序
    第2级菜单绑定  进行对列隐藏 显示
   */
   addListener(this.popMenu,'click',bindAsEventListener(this,this.menuClick));
   addListener(this.popMenu,'mouseover',bindAsEventListener(this,this.menuOver));
   addListener(this.subPopMenu,'click',bindAsEventListener(this,this.subMenuClick));
   
   /*
    放上去表格行的内容变粗
   */
   addListener(this.tbody,'mousemove',bindAsEventListener(this,this.rowHighlight,true));
   addListener(this.tbody,'mouseout',bindAsEventListener(this,this.rowHighlight,false));
   addListener(this.tbody,'mousedown',bindAsEventListener(this,this.selectRow,false));
   addListener(this.tbody,'dblclick',bindAsEventListener(this,this.editRow,false));
   
   addListener(btnC,'click',bindAsEventListener(this,this.modifyTr));
   
   addListener(this.top,'click',bindAsEventListener(this,this.pageBarClick));
   addListener(this.bottom,'click',bindAsEventListener(this,this.pageBarClick));
  },
  getDataCallBack : function(data){
   var options = this.defaults,
    self    = this,
    totla   = 0;
   
   this.data.length = 0;
   
   if(data.data){
    if(data.data[0].groupName){
     var grouphead = this.grouphead;
     grouphead.length = 0;
     
     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;
    }else{
     each(data.data,function(i,o){          
      self.data.push(o);     
     });
     this.showGroup=false;
    }
   }else{
    return;
   }
   total = data.total
     "p"){
    /*
     遍历 当前选中的列的 前面所有的列      
     如果没有 或 全部是隐藏的   则返回
    */
   
    for(var i=parseInt(elem.parentNode.parentNode.getAttribute('clos'))-1;i>=0;i--)
     if(this.isShowTrs.clos[i]===true)break;
    if(i<0)
     return;
    var options = this.defaults,
     self = this,    
     widthConfig = options.widthConfig,    
     td = elem.parentNode.parentNode;
     
     widthConfig.x = e.clientX;
     widthConfig.td = td;
     
     Sys.ie
      "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
    "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.x ;
   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.edit;
   etd.width  = obj.width
   input.type = 'text';
   input.setAttribute('index',i);
   !type
    &&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.parentNode;
    }
   }
   var tr = elem.parentNode;
   this.currentEditRow.index = tr.getAttribute('dataindex');
   this.currentEditRow.dom   = tr;
   if(tr.getAttribute('g'))
    return;
   var sTop  = ~~this.tabContainer.scrollTop,
    sLeft = ~~this.tabContainer.scrollLeft,
    cTds  = $q('td',tr);
    pTds  = $q('td',$q('tr',this.editTable)[0]),
    txt   = Sys.ie"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
 }); 
 
};
</script>
</body>
</html>

水平有限  请多指教

标签：
javascript,datagrid,数据表格
铁雪资源网 Design By www.gsvan.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
铁雪资源网 Design By www.gsvan.com

评论“原生javascript实现简单的datagrid数据表格”

暂无原生javascript实现简单的datagrid数据表格的评论...
www.gsvan.com 铁雪资源网
39,976影音资源
144,792福利资源
1,817软件资源
431,128技术资源
一句话新闻
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2024/12/24

这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。

一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。

另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
铁雪资源网 Design By www.gsvan.com