javascript表格控件：Chgrid，簡化型

2019-11-21 02:09:41

字體：大中小

來源：轉載

供稿：網友

本著自由共享的精神，把代碼帖出來，同時大家也可以一起來測試以及添加新功能，請大家根據網友提出的問題，把自己修改好的版本都帖出來跟在下面，最后作為一款比較全面的表格軟件。
Chgrid的簡單功能介紹：
1：支持自定義排序
2：支持列寬度的拖放
3：支持自定義函數
4：支持分頁
5：支持自動編號
6：多瀏覽器支持，支持ie6,ie7,ff,opera
7：div布局

已知問題：
1：由于使用的div布局，如果使用margin或者padding會改變定義的列寬度，所以目前文字只能居中或者靠左或靠右，不能使用padding控制位置
目前解決辦法是可以在每個div里面再附加一個div，用這個div的margin屬性來控制其位置。
2：內容在超出容器寬度的時候，拖動會有點小問題，。

怎樣修改樣式：
如果不改變風格，大家只要對如下部分代碼調整就可以
Chgrid_column0{ width:20px;}
.Chgrid_column1{ width:100px;}
.Chgrid_column2{ width:80px;}
.Chgrid_column3{ width:120px;}
.Chgrid_column4{ width:100px;}
每多一列就再加一行比如.Chgrid_column5{ width:100px;}
注意：最后一列是不用定義寬度的，程序會自動調整

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>無標題文檔</title> <style type="text/css"> #Chgrid_container{ font:12px "宋體"; width:600px; height:100%; color:#827200;} .Chgrid_head_row{ width:100%;  border-top:1px solid #ffb517; border-bottom:1px solid #ffb517; background-color:#ffe6b3 ; height:20px;} .Chgrid_row{ width:100%; border-bottom:1px solid #ffb517; height:20px; background-color:#fff} .Chgrid_row_interval{width:100%;  border-bottom:1px solid #ffb517; height:20px; background-color:#fff2d9} .Chgrid_row_hilight{width:100%;  border-bottom:1px solid #ffb517; height:20px; background-color:#ffe6b3} .Chgrid_column{ float:left; height:20px; overflow:hidden; line-height:20px; text-align: center;} .Chgrid_column_sort_desc{ float:left; height:20px; overflow:hidden; line-height:20px; text-align: center;background-image:url(http://bbs.blueidea.com/attachments/2007/3/15/20070315_2402590937239704896fuxTNS4SQ9xDC.gif); background-position:right center;background-repeat:no-repeat;} .Chgrid_column_sort_asc{ float:left; height:20px; overflow:hidden; line-height:20px; text-align: center;background-image:url(http://bbs.blueidea.com/attachments/2007/3/15/20070315_6f504cdc131612d66f08J1jtbM8fwxHJ.gif); background-position:right center;background-repeat:no-repeat;} .Chgrid_head_split{float:left; height:20px; width:2px;  background-image:url(http://bbs.blueidea.com/attachments/2007/3/15/20070315_2aedec010331a8ccc38caDdGOQhsA048.gif); background-position:center;background-repeat:no-repeat; cursor: e-resize; cursor: col-resize; } .Chgrid_table_cell0{ float:left; height:20px; line-height:20px; overflow:hidden; text-align: center;} .Chgrid_table_cell{ float:left; height:20px; line-height:20px; overflow:hidden; text-align: center; border-left:1px solid #ffb517;} .Chgrid_column0{ width:20px;} .Chgrid_column1{ width:100px;} .Chgrid_column2{ width:80px;} .Chgrid_column3{ width:120px;} .Chgrid_column4{ width:100px;} .button{ font:12px "宋體"; color:#827200; padding-left:12px; padding-right:12px; background-color:#ffe6b3; border-left:2px solid #fff;border-top:2px solid #fff;border-right:2px solid #ffb517;border-bottom:2px solid #ffb517;}  </style> <script type="text/javascript"> var Chgrid = {     dragobj : null,     cloneobj : null,     init : function(id,ps,minirows,show,inter,hili,sortby,columnArr,dataArr,sortable){         this.container = $(id);  //容器對象，字符串         this.pageSize = ps; //分頁大小,整數         this.minirows = minirows; //最少行數，整數         this.rowInterval = inter; //是否隔行,boolean值         this.hilight = hili; //是否高亮,boolean值         this.showAutoGridNum = show; //是否顯示自動編號,boolean值         this.sortBy = sortby; //排序規則，0表示降序或1表示升序         this.column = columnArr; //欄目，數組         this.data = dataArr; //數據，數組         this.selectedRowIndex = 0; //當前選中行的索引，整數         this.startPage = 0; //當前分頁號，整數         Chgrid.setSortAble(sortable); //確定哪些列可以排序，數組         Chgrid.drawGrid();         document.onmousemove = Chgrid.drag;         document.onmouseup = Chgrid.end;     },     setSortAble : function(){         this.sortColumn = [];         if(sortable){             this.sortColumn = sortable;         }else{             this.sortColumn[0] = false;             for(var i=0;i<this.column.length;i++){                 this.sortColumn[i] = true;             }         }     },     start:function(e){         if(!e) e = window.event;         var obj = Chgrid.getTarget(e);         var objOffsetLeft = Chgrid.getRealPosition(obj).x;         var objOffsetTop = Chgrid.getRealPosition(obj).y;         Chgrid.dragobj = obj.cloneNode(true);         Chgrid.cloneobj = obj;         Chgrid.dragobj.style.position = "absolute";         Chgrid.dragobj.style.left = objOffsetLeft + "px";         Chgrid.dragobj.style.top = objOffsetTop + "px";         obj.parentNode.appendChild(Chgrid.dragobj);         Chgrid.initMouseX = Chgrid.getMousePosition(e);     },     drag : function(e) {         if(Chgrid.cloneobj==null)return;         if(!e) e = window.event;         Chgrid.finalMouseX = Chgrid.getMousePosition(e);         var objPrevOffsetLeft = Chgrid.getRealPosition(Chgrid.cloneobj.previousSibling).x;         var objNextOffsetLeft = Chgrid.getRealPosition(Chgrid.cloneobj.nextSibling).x;         var realOffset = Chgrid.finalMouseX - Chgrid.initMouseX;         if(Chgrid.finalMouseX < objPrevOffsetLeft +2){             Chgrid.finalMouseX = objPrevOffsetLeft + 2;         }else if(Chgrid.finalMouseX > objNextOffsetLeft + Chgrid.cloneobj.nextSibling.offsetWidth - 2){             Chgrid.finalMouseX = objNextOffsetLeft + Chgrid.cloneobj.nextSibling.offsetWidth - 2;         }         Chgrid.dragobj.style.left = Chgrid.finalMouseX + "px";     },     end : function(e) {         if(Chgrid.cloneobj==null)return;         var obj = Chgrid.cloneobj;         obj.previousSibling.style.width = obj.previousSibling.offsetWidth + (Chgrid.finalMouseX - Chgrid.initMouseX) + "px";         obj.nextSibling.style.width = obj.nextSibling.offsetWidth - (Chgrid.finalMouseX - Chgrid.initMouseX) + "px";         Chgrid.resizeWidth(obj);         Chgrid.cloneobj = null;         Chgrid.dragobj.parentNode.removeChild(Chgrid.dragobj);     },     resizeWidth : function(obj){         var j = this.getObjectIndex(this.header,obj);         for(var i=1;i<this.container.childNodes.length;i++){             if(j==1){                 this.container.childNodes[i].childNodes[(j-1)/2].style.width = this.container.childNodes[0].childNodes[j-1].offsetWidth + "px";             }else{                 this.container.childNodes[i].childNodes[(j-1)/2].style.width = this.container.childNodes[0].childNodes[j-1].offsetWidth + 1 + "px";             }             this.container.childNodes[i].childNodes[(j-1)/2+1].style.width = this.container.childNodes[0].childNodes[j+1].offsetWidth + 1 + "px";             }     },     drawGrid : function(){         Chgrid.drawHeader();     },     drawHeader : function(){         var oDiv = document.createElement("div");         this.container.appendChild(oDiv);         this.header = oDiv;         oDiv.className = "Chgrid_head_row";         oDiv.id = "Chgrid_head_row";         Chgrid.drawColumn();     },     drawColumn : function(){         var totalWidth = 0;         for(var i=0;i<this.column.length;i++){             if(i==0){                 var oDiv = document.createElement("div");                     this.header.appendChild(oDiv);                 oDiv.className = "Chgrid_column Chgrid_column0";                 oDiv.id = "Chgrid_head_column0";                 oDiv.innerHTML = this.column[0];                 totalWidth += oDiv.offsetWidth;             }else{                 var oDiv = document.createElement("div");                 this.header.appendChild(oDiv);                 oDiv.className = "Chgrid_head_split";                 oDiv.onmousedown = Chgrid.start;                 totalWidth += oDiv.offsetWidth;                 oDiv = document.createElement("div");                 this.header.appendChild(oDiv);                 oDiv.className = "Chgrid_column Chgrid_column" + i;                 oDiv.id = "Chgrid_head_column" + i;                 oDiv.innerHTML = this.column[i];                 //if(i < this.column.length - 1)                 totalWidth += oDiv.offsetWidth;             }             if(this.sortColumn[i]){                 oDiv.onmouseover = function(){                     if(Chgrid.sortBy==0)                         this.className = this.className.replace(/Chgrid_column /,"Chgrid_column_sort_desc ");                     else                         this.className = this.className.replace(/Chgrid_column /,"Chgrid_column_sort_asc ");                 }                 oDiv.onmouseout =  function(){                         this.className = this.className.replace(/Chgrid_column_sort_desc /,"Chgrid_column ");                     this.className = this.className.replace(/Chgrid_column_sort_asc /,"Chgrid_column ");                 };                 oDiv.onclick = function(){                     var col = Chgrid.getObjectIndex(this.parentNode,this)/2;                     Chgrid.data.sort(function(a,b){return (Chgrid.sortBy ? (a[col]>b[col] ? 1:(a[col]<b[col] ? -1:0)) : (a[col]<b[col] ? 1:(a[col]>b[col] ? -1:0)));});                     Chgrid.fillData(Chgrid.startPage);                     if(Chgrid.sortBy==0)                         this.className = this.className.replace(/Chgrid_column /,"Chgrid_column_sort_asc ");                     else                         this.className = this.className.replace(/Chgrid_column /,"Chgrid_column_sort_desc ");                     Chgrid.sortBy = (Chgrid.sortBy == 0 ? 1 : 0);                 };             }         }         if(totalWidth>this.header.offsetWidth){             this.header.style.width  = totalWidth + "px";         }else{             if(totalWidth < this.header.offsetWidth - 2){                 this.header.lastChild.style.width = this.header.offsetWidth + this.header.lastChild.offsetWidth - totalWidth + "px";             }                 }         Chgrid.drawDataRow();         Chgrid.fillData(1);     },     fillData : function(startPage){         var pageNum = this.data.length/this.pageSize;         if(pageNum > parseInt(pageNum))pageNum=parseInt(pageNum)+1;         if(startPage<=0 || startPage>pageNum)return;         this.startPage = startPage;         Chgrid.removeData();         var endNum = startPage * this.pageSize;         if(endNum > this.data.length) endNum = this.data.length;         var oRow = this.container.childNodes[1];         for(var i=(startPage-1)*this.pageSize;i<endNum;i++){             if(this.showAutoGridNum){                 oRow.childNodes[0].innerHTML = i+1;             }else{                 oRow.childNodes[0].innerHTML = this.data[0][0];             }             for(var j=1 ;j < this.data[i].length; j++){                 oRow.childNodes[j].innerHTML = this.data[i][j];             }             if(oRow.nextSibling)oRow=oRow.nextSibling;         }     },     removeData : function(){         for(var i=1;i<this.container.childNodes.length;i++){             for(var j=0;j<this.container.childNodes[i].childNodes.length;j++){                 this.container.childNodes[i].childNodes[j].innerHTML = "";             }         }     },     updateData : function(i,j,value){         this.data[i][j] = value;     },     drawDataRow : function(){         var endNum = this.minirows;         if (endNum < this.pageSize) endNum = this.pagesiz;         for(var i=0;i<endNum;i++){             var oRow = document.createElement("div");             this.container.appendChild(oRow);             if(this.rowInterval && i%2!=0)                 oRow.className = "Chgrid_row_interval";                 else                 oRow.className = "Chgrid_row";             oRow.style.width = this.header.offsetWidth + "px";             oRow.id = "Chgrid_row"+i;             oRow.oldClass = oRow.className;             Chgrid.drawDataCell(oRow,i);             oRow.onclick = Chgrid.hilightHandle;         }     },     drawDataCell : function(oRow,j){         for(var i=0;i<this.column.length;i++){             var oCell = document.createElement("div");             oRow.appendChild(oCell);             if(i==0){                 oCell.className = "Chgrid_table_cell0";                 oCell.style.width = this.header.childNodes[i*2].offsetWidth + "px";             }else{                 oCell.className = "Chgrid_table_cell";                     oCell.style.width = this.header.childNodes[i*2].offsetWidth + 1 + "px";             }             oCell.id = "Chgrid_row"+j+"_column" + i;         }     },     hilightHandle : function(){         if(Chgrid.hilight){             var k = Chgrid.selectedRowIndex;             if(k>0){                 Chgrid.container.childNodes[k].className = Chgrid.container.childNodes[k].oldClass;              }             this.className = "Chgrid_row_hilight";         }                  var j= Chgrid.getObjectIndex(Chgrid.container,this);         Chgrid.selectedRowIndex = j;     },     getObjectIndex : function(parent,obj){         var j = 0;         for(var i=0;i<parent.childNodes.length;i++){             if(parent.childNodes[i] == obj){                 j = i;             }         }         return j;     },     getChgridRow : function(i){         return Chgrid.childNodes[i];     },     getTarget : function(e){         return e.target || e.srcElement;     },     getRealPosition : function(o){         var l = 0; t = 0;             while(o){             l += o.offsetLeft - o.scrollLeft;             t += o.offsetTop - o.scrollTop;             o = o.offsetParent;         }         return {x:l,y:t};     },     getMousePosition : function(e){         var x = 0;         if(e.pageX){             x = e.pageX;         }else{             x = e.clientX + document.body.scrollLeft - document.body.clientLeft;         }         return x;     },     registerCallBack : function(evtname,arr,evthandle){         /*注冊返回函數         參數含義:         evtname:事件名稱，如click,mouseover,注意，前面不要加on         arr:要注冊到的對象索引，為數組，第一個為行號，第一個為列號，如果為-1，表示整行或者整欄         evthandle:外部定義好的函數名         */         var objCollection = Chgrid.getObjectCollection(arr);         for(var i=0;i<objCollection.length;i++){             if(window.attachEvent)                 objCollection[i].attachEvent("on"+evtname,evthandle);             else if(window.addEventListener)                 objCollection[i].addEventListener(evtname,evthandle,false);         }     },     getObjectCollection : function(arr){         var objArr = [];         if(arr[0]==0)arr[0]==1;         if(arr[0]!=-1 && !this.container.childNodes[arr[0]])return objArr;         if(arr[0]==-1 && arr[1]==-1){             for(var i=1;i<this.container.childNodes.length;i++){                 for(var j=0;j<this.container.childNodes[i].childNodes.length;j++){                     objArr[objArr.length++]=this.container.childNodes[i].childNodes[j];                 }             }         }else if(arr[0]!=-1 && arr[1]==-1){             for(var j=0;j<this.container.childNodes[arr[0]].childNodes.length;j++){                 objArr[objArr.length++]=this.container.childNodes[arr[0]].childNodes[j];             }         }else if(arr[0]==-1 && arr[1]!=-1){             for(var i=1;i<this.container.childNodes.length;i++){                 if(this.container.childNodes[i].childNodes[arr[1]])                     objArr[objArr.length++]=this.container.childNodes[i].childNodes[arr[1]];             }         }else{             objArr[objArr.length++]=this.container.childNodes[arr[0]].childNodes[arr[1]];         }         return objArr;     } } function renewData(e){     if(!e) e = window.event;     var obj = e.target || e.srcElement;     //if(!obj.editStatus){         //alert("你點擊的是第"+Chgrid.getObjectIndex(obj.parentNode.parentNode,obj.parentNode)+"行第"+(Chgrid.getObjectIndex(obj.parentNode,obj)+1)+"列數據");         var i = (Chgrid.startPage-1)*Chgrid.pageSize+Chgrid.getObjectIndex(obj.parentNode.parentNode,obj.parentNode)-1;         if(i+1 > Chgrid.startPage*Chgrid.pageSize || !data[i])return;         var promp = prompt("請輸入新的值","");         if(promp!=null){             var j = Chgrid.getObjectIndex(obj.parentNode,obj);             obj.innerHTML = promp;             Chgrid.updateData(i,j,promp);         }         //obj.editStatus = true;     //} } function $(id){     return document.getElementById(id); } var column = ["編號","姓名","性別","職位","電話","住址"]; var sortable = [false,true,true,true] var data = [["","cityvoice","帥哥","Javascript Programmer","13300000000","康定路112弄4號"],["","melody","美女","UI Programmer","13400000000","南京西路112弄4號"],["","jeson","帥哥","Board","13500000000","北京路112弄4號"],["","yanguo","帥哥","Project Manager","13600000000","武定路112弄4號"],["","duanyu","帥哥","C# Programmer","13700000000","河南南路112弄4號"],["","xiaolonglv","美女","ASP Programmer","13800000000","陜西北路112弄4號"],["","rose","美女","Java Programmer","13900000000","西康路112弄4號"],["","cityvoice","帥哥","Javascript Programmer","13300000000","康定路112弄4號"],["","melody","美女","UI Programmer","13400000000","南京西路112弄4號"],["","jeson","帥哥","Board","13500000000","北京路112弄4號"],["","yanguo","帥哥","Project Manager","13600000000","武定路112弄4號"],["","duanyu","帥哥","C# Programmer","13700000000","河南南路112弄4號"],["","xiaolonglv","美女","ASP Programmer","13800000000","陜西北路112弄4號"],["","rose","美女","Java Programmer","13900000000","西康路112弄4號"],["","cityvoice","帥哥","Javascript Programmer","13300000000","康定路112弄4號"],["","melody","美女","UI Programmer","13400000000","南京西路112弄4號"],["","jeson","帥哥","Board","13500000000","北京路112弄4號"],["","yanguo","帥哥","Project Manager","13600000000","武定路112弄4號"],["","duanyu","帥哥","C# Programmer","13700000000","河南南路112弄4號"],["","xiaolonglv","美女","ASP Programmer","13800000000","陜西北路112弄4號"],["","rose","美女","Java Programmer","13900000000","西康路112弄4號"],["","cityvoice","帥哥","Javascript Programmer","13300000000","康定路112弄4號"],["","melody","美女","UI Programmer","13400000000","南京西路112弄4號"],["","jeson","帥哥","Board","13500000000","北京路112弄4號"],["","yanguo","帥哥","Project Manager","13600000000","武定路112弄4號"],["","duanyu","帥哥","C# Programmer","13700000000","河南南路112弄4號"],["","xiaolonglv","美女","ASP Programmer","13800000000","陜西北路112弄4號"],["","rose","美女","Java Programmer","13900000000","西康路112弄4號"],["","cityvoice","帥哥","Javascript Programmer","13300000000","康定路112弄4號"],["","melody","美女","UI Programmer","13400000000","南京西路112弄4號"],["","jeson","帥哥","Board","13500000000","北京路112弄4號"],["","yanguo","帥哥","Project Manager","13600000000","武定路112弄4號"],["","duanyu","帥哥","C# Programmer","13700000000","河南南路112弄4號"],["","xiaolonglv","美女","ASP Programmer","13800000000","陜西北路112弄4號"],["","rose","美女","Java Programmer","13900000000","西康路112弄4號"],["","cityvoice","帥哥","Javascript Programmer","13300000000","康定路112弄4號"],["","melody","美女","UI Programmer","13400000000","南京西路112弄4號"],["","jeson","帥哥","Board","13500000000","北京路112弄4號"],["","yanguo","帥哥","Project Manager","13600000000","武定路112弄4號"],["","duanyu","帥哥","C# Programmer","13700000000","河南南路112弄4號"],["","xiaolonglv","美女","ASP Programmer","13800000000","陜西北路112弄4號"],["","rose","美女","Java Programmer","13900000000","西康路112弄4號"],["","cityvoice","帥哥","Javascript Programmer","13300000000","康定路112弄4號"],["","melody","美女","UI Programmer","13400000000","南京西路112弄4號"],["","jeson","帥哥","Board","13500000000","北京路112弄4號"],["","yanguo","帥哥","Project Manager","13600000000","武定路112弄4號"]]</script> </head> <body onload="Chgrid.init('Chgrid_container',20,20,true,true,true,1,column,data,sortable);"> <div   id="iwvjtn8m0"   class="Chgrid_container" id="Chgrid_container"></div> <input type="button" value="前一頁" onclick="Chgrid.fillData(Chgrid.startPage-1)" class="button" /><input type="button" value="后一頁" onclick="Chgrid.fillData(Chgrid.startPage+1)" class="button" /><input type="button" value="注冊事件" onclick="Chgrid.registerCallBack('click',[-1,2],renewData)" class="button" /> </body> </html>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

其它優秀的grid控件參考：
http://www.activewidgets.com
http://www.yui-ext.com/deploy/ext-1.0-alpha3/docs/

請千萬不要把我這款控件跟它們比較，差距較大，不過我也有優勢，使用起來比較簡單，速度也快：）
本來想多加點數據，結果發現超過限制了，大家測試的時候自己多搞點數據測試其速度如何。

[ 本帖最后由 cityvoice 于 2007-3-15 16:52 編輯 ]

上一篇：詰屈聱牙之javascript中國象棋

下一篇：仿豆瓣分頁原型(Javascript版)