当前位置：首 页 > 界面组件 > 文章内容
[原创]简单表格操作类，可以自定义键盘等等事件处理
来源：onlyaa.com 发布时间：2008-10-18 阅读次数：
[摘要]:

之所以简单就是减少了很多的表格的构造过程。往往以个功能越强， 构造的过程可能会更加复杂，提供的接口也很丰富。 短期内为了解决问题，也不可能自己写。

这里发布出来，供参考， 代码中有部分解释这里就不多说了， 但是每次创建时都要注册一下该表格组件（不明白可以看看关于JS经典UI管理器）， 你也可以去掉注册那几行，不过还是建议加上，这样可以在其他的地方访问尤其在字符串中做某元素的事件处理用起来很方便， 如果是用该组件对象的变量的话还得定义id。

下面是源代码：

/*--------------------------------------------------------------------------------
 $ 类名：__SimpleTableL
 $ 功能：通用表格操作
 $ 日期：2008-10-09 23:47
 $ 作者：LovelyLife
 $ 邮件：Life.qm###gmail.com
 $ 版权: 请勿擅自修改版权和作者
 $ powered by Javascript经典专区[http://onlyaa.com] All rights reservered.
----------------------------------------------------------------------------------*/


// this only constructor for creating other class
var __CLASS = {
 create: function() {
  return function() {
   this._initialize.apply(this, arguments); 
  };
 }
};

var TABLE_CAPTION  = 0x0001     // 表头栏目
var TABLE_DEFAULT  = TABLE_CAPTION
var TABLE_NOITEM   = -1         // 不存在该Item
var TABLE_SELECTEDITEM = -2     // 当前选中Item

function $CreateHTMLObject(tagName) {
    return document.createElement(tagName);
}

function IsStyle(cs, style){
    if( style == 0 ) {
        return false;  
    }
 return ((cs & style) == style)
}

// 创建可以带省略号(...)的字符串
function ICreateDivItem(parentNode, text, nWidth) {
 var d = $CreateHTMLObject('div');
 parentNode.appendChild(d);
 d.style.cssText = 'width: ' + nWidth + 'px; height: 100%; font-size: 12px;  overflow:hidden; text-overflow:ellipsis; white-space: nowrap;margin: 0; padding-left: 3px; padding-top: 2px;'
 d.innerHTML = text;
 return d;
}

var __SimpleTableL = __CLASS.create();
__SimpleTableL.prototype = {
 hwnd : null,    //表格table的container
 headctrl : null,    // 表头第一行为表头
 table : null,   // 表格对象
 statectrl : null,   // 统计栏对象
 selectedItem : -1,  // 选中的行（这里的行称为item）
 wstyle : null,  // 样式
 _initialize : function(parent, name, ws, width, height) {
     var _this  = this;
     // 注册该表格组件并可以用UI.component['name']的形式来访问
     if( name != '') {
         if(UI.registerComponent(name, this)) {
       alert(name + " register error! ");
       return;
      }
      this.name = name;
     }
     // 构造该组件
     this.wstyle = ws;
  this.hwnd  = $CreateHTMLObject('DIV');
  this.table = $CreateHTMLObject('TABLE');
  this.cellstyle = [];
  this.headctrl = this.table.insertRow(0); //第一行为表头
  this.hwnd.appendChild(this.table);
  parent.appendChild(this.hwnd)
  
  // initialize table style
  this.table.border = 0;
  this.table.cellSpacing = 1;
  this.table.style.background = '#CCC';
  this.table.width = '100%';
  this.headctrl.style.cssText = 'background: #E2E6F0; color: blue;position: static;layout-grid-type: fixed;';
  this.hwnd.style.cssText = 'width: '+width+'; height: '+height+'; cursor: default; border: 0px solid #999; overflow: auto;';
  if(!IsStyle(TABLE_CAPTION, ws)) {
      this.headctrl.style.display = 'none';
  }
  
  // 定义该组件的事件处理
  this.hwnd.onkeydown = function() { event.returnValue = false; return false; }
  this.hwnd.onselectstart = function() { return false; }
  // 实现上下键操作，并绑定了虚函数tableKeyDown(); 这样只要重载该函数即可做按键按下时额外的操作
  this.table.onkeydown = function() {
      _this.tableKeyDown(event);
      var parentNode = this.parentNode;
      if(event.keyCode == 38) { // up
       var prevItemIndex = Math.max(0, _this.selectedItem - 1);
       _this.scrollby(prevItemIndex, true); 
      } else if(event.keyCode == 40 ) { // down
       var nextItemIndex = Math.min(this.rows.length - 1, _this.selectedItem + 1);
       _this.scrollby(nextItemIndex, false);      
      }
  }
  // 同上按键松开时做的额外操作
  this.table.onkeyup = function() {
      _this.tableKeyUp(event);
  }  
 },
 
 // 插入表头字段
 insertColumn : function(nCol, szText, nWidth, szAlign) {
  var _this = this;
  var o = {width: nWidth, align: szAlign};
  this.cellstyle.push(o);
  
  var c = this.headctrl.insertCell(nCol);
  var d = ICreateDivItem(c, szText, nWidth);
  c.width = nWidth;
  d.Align = szAlign;
  if(this.table.rows.length > 1) { this.insertColumnItems(nCol); }
  return c.cellIndex;
 },
 
 // 插入一行， 这里只支持默认追加一行， 然后通过setItemText来设置该行的一些数据
 insertItem : function() {
     var _this = this;
  var rowItem = this.table.insertRow();
  rowItem.style.background = '#FFF';
  var len = this.headctrl.cells.length;
  for(var i = 0; i < len; i++) {
   var cell = rowItem.insertCell();
   var d = ICreateDivItem(cell, '', this.cellstyle[i].width);
   d.Align = this.cellstyle[i].align;
  }
  
  // 虚函数调用规则，尽量放在函数体内的第一行，这样才能保证一定能执行到，但是有些情况是不一样
  rowItem.onmouseover = function() {
      _this.itemMouseOver(this);
  }
  rowItem.onmouseout = function() {
   _this.itemMouseOut(this)
  }
  rowItem.onclick = function() {
   _this.itemClick(this);
   _this.selectedItem = this.rowIndex;
  }
  rowItem.ondblclick = function() {
      _this.itemDblClick(this);
      _this.selectedItem = this.rowIndex;
  }
  rowItem.oncontextmenu = function() {
      _this.itemClick(this);
      _this.selectedItem = this.rowIndex;
   _this.itemContextMenu(this);
   return false;
  }
  return rowItem.rowIndex;
 },
 
 // 设置nItem的columnIndex列的数据为innerText
 setItemText : function(nItem, columnIndex, text) {
  var row = this.getItem(nItem);
  row.cells(columnIndex).childNodes[0].innerText = text;
 },
 // 设置nItem的columnIndex列的数据为innerHTML
 setItemHtml : function(nItem, columnIndex, htmltext) {
  var row = this.getItem(nItem);
  row.cells(columnIndex).childNodes[0].innerHTML = htmltext;
 },
 // 绑定数据用
 setItemData : function(nItem, data) {
     var row = this.table.rows(nItem);
     row.data = data;
 },
 // 删除nItem
 deleteItem : function(nItem) {
     this.table.deleteRow(nItem);
 },
 // 获得某item的操作句柄
 getItem : function(nItem) {
     var returnItem = TABLE_NOITEM;
     if((nItem == TABLE_SELECTEDITEM)) {
         return this.table.rows(this.selectedItem);
     } else if(this.IsEffectItem(nItem)) {
         return this.table.rows(nItem);
     } else {
         return returnItem;
     }
    
 },
 // 获得绑定的数据
 getItemData : function(nItem) {
     var row = this.table.rows(nItem);
     return row.data;
 },
 // 统计行数
 getItemCount : function() {
     return this.table.rows.length - 1;  // 除去表头
 },

 insertColumnItems : function(nCol) {
  var rowsNum = this.table.rows.length;
  for( var i=1; i < rowsNum; i++ ){
   var row = this.table.rows(i);
   var cell = row.insertCell(nCol);
   var d = ICreateDivItem(cell, '', this.cellstyle[nCol].width);
   d.Align = this.cellstyle[nCol].align;
   cell.appendChild(d);
  }
 },
 // 清楚所有数据，只留表头
 clear : function() {
     while(this.table.rows.length > 1) {
         this.deleteItem(1);
     }
 },
 // 这个调整插入新列的时候，调整某列的宽度
 sizeItemToWidth : function(nCol, w) {
  var rowsNum = this.table.rows.length;
  for( var i=1; i < rowsNum; i++ ){
   var row = this.table.rows(i);
   var cell = row.cells(nCol);
   if( (cell.childNodes[0].offsetWidth + w) < 0 ) {
    return;
   }
   cell.childNodes[0].style.width = cell.childNodes[0].offsetWidth + w;
  }
 },
 // nItem是否在有效的表格行范围内
 IsEffectItem : function(nItem) {   
     return ((nItem > 0) && (nItem <= (this.table.rows.length - 1)) );
 },
 // nItem是否在有效的表格列范围内
 IsEffectColumn : function(columnIndex) {
     return ((columnIndex > 0) && (columnIndex < this.headctrl.cells.length));
 },
 // 列表滚动， 当IsUp的时候是向上，否则向下
 scrollby : function(nItem, IsUp) {
     IsUp = (IsUp) ? true : false;
     var _this = this;
     var parentNode = _this.table.parentNode;
     var rowItem = _this.table.rows( nItem );
     if( nItem != _this.selectedItem) {
         if(_this.selectedItem != TABLE_NOITEM) {
             _this.table.rows( _this.selectedItem ).fireEvent('onmouseout');
         }
     }
  var pos = $GetAbsPosition(rowItem);
  if( rowItem.offsetTop < parentNode.scrollTop) { // 顶部移动处理
      parentNode.scrollTop = rowItem.offsetTop;
  } else if( (rowItem.offsetTop + pos.height) > (parentNode.scrollTop + parentNode.offsetHeight)) { // 底部移动处理
      parentNode.scrollTop = rowItem.offsetTop - (parentNode.offsetHeight - pos.height);
  }
  if(_this.selectedItem == 1 && IsUp) {
      _this.table.rows( _this.selectedItem ).click();
      return;
     }
     rowItem.click();
 },
 
 // virtual function to be overrided
 itemClick       : function(item) {},
 itemDblClick    : function(item) {},
 itemContextMenu : function(item) {},
 itemMouseOver   : function(item) {},
 itemMouseOut    : function(item) {},
 itemMouseOver   : function(item) {},
 itemKeyUp       : function(item) {},
 tableKeyDown    : function(evt) {},
 tableKeyUp      : function(evt) {}
}

下面是个实例，你可以做些修改， 测试下是否是你想要的结果：


   提示：您可以先修改部分代码再运行

实例代码中的文件是跟其他的文件有关联，你也可以一起下载，提取下simpletable.js中用到的函数，大多数都是很独立的


由 LovelyLife 编辑  
» 进入JAVASCRIPT经典社区讨论 [收藏] [推荐] [返回顶部] [打印本页] [关闭窗口]
相关文章
网友评论 - (共有 0 位网友发表了评论)
发表评论
    用户名: 密码: 匿名评论
    云南旅游 评论内容：不能超过250字，需审核后才会公布 
     请您注意：
·不良评论请用报告管理员，以利管理员及时删除。
·尊重网上道德，遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容 
·您在本站发表的作品，本站有权在网站内转载或引用 
·参与本评论即表明您已经阅读并接受上述条款

赞助链接

热门文档

学院推荐