首页 >> 下载中心 >> JavaScript源码 >> JS表格控件 sfDataGrid下载

JS表格控件 sfDataGrid下载

作者:石头001 来源:无忧脚本时间:2008-5-30 网友评论条【大中小】

努力了两周，发现有了更好的东东，请哪位高人把iRow的代码格式化后给我，我来继续改进，增加标题行列锁定功能，分组等功能。

名称：sfDataGrid(表格控件)
目标：能够象EXCEL一样自由编辑,并可按行列进行权限控制，数据绑定简便。
功能:
   1、固定表头                                              (未实现，有资料需支援)
   2、左边固定序号列，排序后重新生成             (03.07实现)
   3、点击表头排序,，需使用HTC，请下载后试用 (03.05已实现，
                                                                     暂时取消改进中)
   4、箭头键，回车移动光标                            (03.07实现)
   5、获得焦点单元格可编辑                            (03.06实现)
   6、点击左边序号列选中行，可整行上下移动    (03.06实现，03.16改进)
   7、在最后一行回车加行                               (暂不实现，归到下键头)
   8、可调列宽                                              (03.15实现)
   9、有汇总行，对指定列进行汇总                   (03.10)
   10、可以设置列计算公式                               (编码中)
   11、可以分屏以固定左边某几列和顶上某几行。 (未实现)
   12、同一页面支持多个表格,互不干扰.             (03.11实现)

版本: 0.13
作者:  石头001
Mail:  rowland_stone@hotmail.com
参考资料:  FlashSoft的排序表格
            meixuexiang动态编辑表格
              月影可调整列宽表格,
创建日期: 2006-03-04
最新更新: 2004-03-16

使用说明:

排序内容仅包含TBODY标签里面的[支持多TBODY],THEAD,HFOOT标签不包含在内事件仅仅加载在THEAD标签内.

如果不指定THEAD里面的type类型,那么将以字符排序。现在可以指定的类型有String,CaseInsensitiveString,Number,Date，
数字型如要汇总则加上属性toSum=yes
实例:

     <thead\>
       <tr>
         <td type="String">String</td>
         <td type="CaseInsensitiveString">String</td>
         <td type="Number"  toSum=yes>Number</td>
         <td type="Date">Date</td>
       </tr>
     </thead>

附件中目前所用到两个文件：

datagrid.htm
datagrid.htc

在些感谢我所引有资料的各位大侠以及51js这个平台

<html> <head></head> <body style="font-family: verdana"> <table width="450" border="1" cellspacing="0" cellpadding="0"> <tr> <td> <input name=btnAddRow style="width: 100px;" type=button value="添加行" onClick="AddRow(oTbody)"><br> <input id=btnRemoveRow style="width: 100px;" type=button value="删除行" onclick="deleteRow()"><br> <input id=btnAddCell style="width: 100px;" type=button value="添加单元格" onclick="addCell()"><br> <input id=btnRemoveCell style="width: 100px;" type=button value="删除单元格" onclick="removeCell()"></td> <td> <input id=btnEditContents style="width: 100px;" type=button value="编辑内容" onclick="editContents();"> <input type=text style="display: none; width: 400px;" id=EditCell><br> <input id=btnEditStyle style="width: 100px;" type=button value="编辑样式" onclick="editStyle();"> <br> <input id=btnAddSample style="width: 100px;" type=button value="批量加行" onclick="AddManyRows()"><br> <input id=txtRows value=20> <input type=text style="display: none; width: 400px;" id=EditStyle></td> <td> <input id=btnMoveUp style="width:100px;" type=button value="行/光标上移" onclick="moveCursor('up')"><br> <input id=btnMoveDown style="width:100px;" type=button value="行/光标下移" onclick="moveCursor('down')"><br> <input id=btnMoveLeft style="width:100px;" type=button value="光标左移" onclick="moveCursor('left')"><br> <input id=btnMoveRight style="width:100px;" type=button value="光标右移" onclick="moveCursor('right')"><br> </tr> </table> <table class="borderoff" id="Table01" onclick=select() style="BEHAVIOR: url('datagrid.htc'); BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #eeeeee" bordercolor="#aaaaaa" cellspacing="0" cellpadding="2" width="100%" align="center" border="1"> <colgroup> <col width="30"></col> <col width="100"></col> <col width="200"></col> <col width="150"></col> <col width="150"></col> <col width="150" align=right></col> <col></col> </colgroup> <thead> <tr style="FONT-WEIGHT: bold; HEIGHT: 25px" bgcolor="#c5c1b9"> <td type="Number">No.</td> <td>解析域名</td> <td type="Number" toSum=yes>费用</td> <td type="Number" toSum=yes>人数</td> <td type="Date">日期</td> <td type="Number" toSum=yes>大小</td> <td> </td> </tr> </thead> <tbody> <tr id=TR00 height="10" style="display:none;"> <td>1</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td><input type="button" value="01删除" onclick="deleteRow(this)"></td> </tr> <tr id=TR01 height="10"> <td>1</td> <td>001www.91js.com</td> <td>10.21</td> <td>10</td> <td>2003-12-01</td> <td>100</td> <td><input type="button" value="01删除" onclick="deleteRow(this)"></td> </tr> <tr id=tr02 height="10"> <td>2</td> <td>002www.91js.com</td> <td>20.21</td> <td>20</td> <td>2005-02-02</td> <td>200</td> <td><input type="button" value="02删除" onclick="deleteRow(this)"></td> </tr> <tr id=TR03 height="10"> <td>3</td> <td>003www.91js.com</td> <td>30.21</td> <td>30</td> <td>2003-12-03</td> <td>300</td> <td><input type="button" value="03删除" onclick="deleteRow(this)"></td> </tr> <tr id=tr04 height="10"> <td>4</td> <td>004www.91js.com</td> <td>40.21</td> <td>40</td> <td>2005-02-04</td> <td>400</td> <td><input type="button" value="04删除" onclick="deleteRow(this)"></td> </tr> <tr id=sumRow height="10"> <td>SUM</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> 第二个表格<BR> <table class="borderoff" id="Table01" onclick=select() style="BEHAVIOR: url('datagrid.htc'); BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #eeeeee" bordercolor="#aaaaaa" cellspacing="0" cellpadding="2" width="100%" align="center" border="1"> <colgroup> <col width="30"></col> <col width="100"></col> <col width="200"></col> <col width="150"></col> <col width="150"></col> <col width="150" align=right></col> <col></col> </colgroup> <thead> <tr style="FONT-WEIGHT: bold; HEIGHT: 25px" bgcolor="#c5c1b9"> <td type="Number">No.</td> <td>解析域名</td> <td type="Number" toSum=yes>费用</td> <td type="Number" toSum=yes>人数</td> <td type="Date">日期</td> <td type="Number" toSum=yes>大小</td> <td> </td> </tr> </thead> <tbody> <tr id=TR00 height="10" style="display:none;"> <td>1</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> <td><input type="button" value="01删除" onclick="deleteRow(this)"></td> </tr> <tr id=TR01 height="10"> <td>1</td> <td>001www.91js.com</td> <td>10.21</td> <td>10</td> <td>2003-12-01</td> <td>100</td> <td><input type="button" value="01删除" onclick="deleteRow(this)"></td> </tr> <tr id=tr02 height="10"> <td>2</td> <td>002www.91js.com</td> <td>20.21</td> <td>20</td> <td>2005-02-02</td> <td>200</td> <td><input type="button" value="02删除" onclick="deleteRow(this)"></td> </tr> <tr id=TR03 height="10"> <td>3</td> <td>003www.91js.com</td> <td>30.21</td> <td>30</td> <td>2003-12-03</td> <td>300</td> <td><input type="button" value="03删除" onclick="deleteRow(this)"></td> </tr> <tr id=tr04 height="10"> <td>4</td> <td>004www.91js.com</td> <td>40.21</td> <td>40</td> <td>2005-02-04</td> <td>400</td> <td><input type="button" value="04删除" onclick="deleteRow(this)"></td> </tr> <tr id=sumRow height="10"> <td>SUM</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> <script> var oTable,oTbody,oThead,oTR,oTD,nCellIndex,nRowIndex; var lastSelection = null; document.onclick = cancelSelect; function document.onkeydown() { var nKeyCode = event.keyCode if(nKeyCode == 37){ //左箭头 moveCursor('left'); }else if(nKeyCode == 38){ //上箭头 moveCursor('up'); }else if(nKeyCode == 39){ //右箭头 moveCursor('right'); }else if(nKeyCode == 13){ //回车 moveCursor('right'); }else if(nKeyCode == 40){ //下箭头 moveCursor('down'); } } btnAddRow.setExpression("disabled", "nothingSelected(lastSelection)"); btnRemoveRow.setExpression("disabled", "!rowSelected(lastSelection)"); btnAddCell.setExpression("disabled","nothingSelected(lastSelection)"); btnRemoveCell.setExpression("disabled","!cellSelected(lastSelection)"); btnMoveUp.setExpression("disabled", "! (cellSelected(lastSelection)||rowSelected(lastSelection))"); btnMoveDown.setExpression("disabled","!(cellSelected(lastSelection)||rowSelected(lastSelection))"); btnMoveLeft.setExpression("disabled","! cellSelected(lastSelection)"); btnMoveRight.setExpression("disabled","! cellSelected(lastSelection)"); btnEditContents.setExpression("disabled","(! cellSelected(lastSelection))||(EditCell.style.display == '')"); btnEditStyle.setExpression("disabled", "(EditStyle.style.display == '')"); btnEditStyle.setExpression("value", "'编辑' + whatIsSelected(lastSelection) + '样式'"); //移动行 flag 可以是up,down function moveRow(flag){ var len=Table01.rows.length; if(len==1){ alert("只有一行，无法移动!"); return; } else if(curRow.rowIndex==len-1 && flag==1){ alert("最后一行，无法下移!"); return; } else if(curRow.rowIndex==0 && flag==-1){ alert("第一行，无法上移!"); return; } else{ var chgRow=oTbody.rows[curRow.rowIndex+flag]; for(var i=1;i<2;i++){ var strTd=curRow.cells[i].innerHTML; curRow.cells[i].innerHTML=chgRow.cells[i].innerHTML; chgRow.cells[i].innerHTML=strTd; } chgRow.click(); } } //选择对象 function select(element) { var e; if (element == null) { e = window.event.srcElement; } else { e = element; } if ((window.event.altKey) || (e.tagName == "TR")) { oTR = findRow(e); if (oTR != null) { if (lastSelection != null) { deselectRowOrCell(lastSelection); } selectRowOrCell(oTR); lastSelection = oTR; } } else { oTD = findCell(e); oTbody=findTbody(e); if (oTD != null) { if (lastSelection != null) { deselectRowOrCell(lastSelection); } selectRowOrCell(oTD); // EditTd(oTD); //直接切换到编辑状态有问题 lastSelection = oTD; } } window.event.cancelBubble = true; } //取消选择 function cancelSelect() { if (window.event.srcElement.tagName != "BODY") return; if (lastSelection != null) { deselectRowOrCell(lastSelection); lastSelection = null; } } //取消选中行或单元格 function deselectRowOrCell(r) { r.runtimeStyle.backgroundColor = ""; r.runtimeStyle.color = ""; //r.runtimeStyle.fontFamily = "Verdana"; } //选中行或单元格 function selectRowOrCell(r) { r.runtimeStyle.backgroundColor = "darkblue"; r.runtimeStyle.color = "white"; } //增加单元格 function addCell() { var r, p, c, nc, text; if (lastSelection == null) return false; r = lastSelection; if (r.tagName == "TD") { r = r.parentElement; c = lastSelection; } else { c = null; } nc = document.createElement("TD"); text = document.createTextNode("New Cell"); nc.insertBefore(text, null); r.insertBefore(nc, c); select(nc); return nc; } //删除单元格 function removeCell() { var c, p, nr; if (lastSelection == null) return false; c = lastSelection; if (c.tagName != "TD") { return null; } p = c.parentElement; p.removeChild(c); lastSelection = null; return c; } //编辑内容 function editContents() { var c, p, nr; if (lastSelection == null) return false; c = lastSelection; if (c.tagName != "TD") { return null; } EditCell.style.display = ""; EditCell.value = c.innerHTML; c.setExpression("innerHTML", "EditCell.value"); EditCell.focus(); EditCell.onblur = unhookContentsExpression; // oTbody=findTbody(c); // toSum(oTbody); } function unhookContentsExpression() { lastSelection.removeExpression("innerHTML"); EditCell.value = ''; EditCell.style.display = "none"; } //编辑样式 function editStyle() { var c; if (lastSelection == null) { c = Table01; } else { c = lastSelection; } EditStyle.style.display = ""; EditStyle.value = c.style.cssText; c.style.setExpression("cssText", "EditStyle.value"); EditStyle.focus(); EditStyle.onblur = unhookStyleExpression; } function unhookStyleExpression() { var c; if (lastSelection == null) { c = Table01; } else { c = lastSelection; } c.style.removeExpression("cssText"); EditStyle.value = ''; EditStyle.style.display = "none"; } //不选中任何单元格 function nothingSelected() { return (lastSelection == null); } //判断是否选中了行 function rowSelected() { var c; if (lastSelection == null) return false; c = lastSelection; return (c.tagName == "TR") } //判断是否选中了单元格 function cellSelected() { var c; if (lastSelection == null) return false; c = lastSelection; return (c.tagName == "TD") } function whatIsSelected() { if (lastSelection == null) return "Table"; if (lastSelection.tagName == "TD") return "Cell"; if (lastSelection.tagName == "TR") return "Row"; } //在表格中移动光标,flag参数可以为 left,right,up,down function moveCursor(flag){ var s, p, ls; if (lastSelection.tagName !="TD") return false; s = lastSelection; nCellIndex=s.cellIndex; oTR=s.parentElement; oTbody=findTbody(oTR); nRowIndex=oTR.rowIndex; if(flag=="up"){ //上移 if (nRowIndex==2) return; oTR=oTR.previousSibling; }else if(flag=="down"){ //下移 oTR=oTR.nextSibling; if (oTR.nextSibling==null){ oTR=AddRow(oTbody); } }else if(flag=="left"){ //左移 if (nCellIndex<2) return; nCellIndex--; }else if(flag=="right"){ //右移 if(nCellIndex==(oTR.children.length-2)) return; nCellIndex++; } if (oTR==null) return; ls=oTR.children[nCellIndex]; if (ls!=null){ select(ls); EditTd(ls); }else{ select(s); } } //添加行 function AddRow(oTbody){ var oTRclone = oTbody.rows[0]; var newTR = oTRclone.cloneNode(true); newTR.id="TR"+(oTbody.rows.length+1); oTbody.rows[oTbody.rows.length-1].insertAdjacentElement("beforeBegin",newTR); newTR.style.display=""; setNo(oTbody); return newTR; } //编辑单元格 function EditTd(e){ var src=""; if (e==null){ src=window.event.srcElement; }else{ src=e; } if(src.tagName!="TD") return; var strVal=src.innerText; src.innerHTML='<input type="text" style="width:100%" onblur="EditEnd(this)" value="'+strVal+'">'; src.children[0].focus(); } //编辑结束,复原单元格 function EditEnd(src){ var strVal=src.value; var objTd=src.parentElement; objTd.innerHTML=""; objTd.innerText=strVal; } //选择行 var curRow=null; function SelectRow(){ var clickrow=window.event.srcElement; while(clickrow.tagName!="TR"){ clickrow=clickrow.parentElement; } //alert(clickrow.tagName); if(curRow) curRow.style.backgroundColor ="#FFFFFF"; clickrow.style.backgroundColor ="#0099FF"; curRow=clickrow; } //删除行 e 为单元格内部的元素 function deleteRow(e){ oTR=findRow(e); oTbody=findTbody(e); oTR.removeNode(true); toSum(oTbody); setNo(oTbody); } //重新生成序号 function setNo(oTbody){ if (oTbody.tagName!="TBODY") return; for(var i=1;i<oTbody.children.length-1;i++){ oTbody.rows[i].cells[0].innerHTML=i; } } //定位到单元格 function findCell(e) { if (e.tagName == "TD") { return e; } else if (e.tagName == "BODY") { return null; } else { return findCell(e.parentElement); } } //定位到行 function findRow(e) { if (e.tagName == "TR") { return e; }else if (e.tagName == "BODY") { return null; } else { return findRow(e.parentElement); } } //定位到TBODY function findTbody(e) { if (e.tagName == "TBODY") { return e; } else if (e.tagName == "BODY") { return null; } else { return findTbody(e.parentElement); } } //汇总列 function toSum(oTbody){ var nSum,nTDInner; if (oTbody.tagName!="TBODY") return; oThead=oTbody.previousSibling; oTR=oThead.children[0]; for(var i=0;i<oTR.children.length;i++){ if(oTR.cells[i].toSum=="yes"){ nSum=0; for(var k=1;k<oTbody.rows.length-1;k++){ nTDInner = parseFloat(oTbody.rows[k].cells[i].innerHTML); nSum = nSum+nTDInner; } oTbody.children[oTbody.rows.length-1].cells[i].innerHTML=nSum; } } } //批量增加行 function AddManyRows(){ var nRows; nRows=txtRows.value; oTbody=findTbody(lastSelection); for(var i=0;i<nRows;i++){ AddRow(oTbody); } } </script> [提示：你可先修改部分代码，再按运行]

下载地址：datagrid0317.rar （81.87 KB）

【加入收藏】【报告错误】【投递文章】【复制地址】【返回顶部↑】

本文地址：http://www.aspxhome.com/download/javascript/20085/391830.htm

站长工具

请稍等，评论加载中...

热门点击排行今日点击排行本周点击排行本月点击排行最新访问排行热门评论排行

首页 - 关于站点 - 联系站长 - 免责声明 - 版权隐私 - 网站地图 - 友情链接 - 广告服务 - Top

闽ICP备06017341号

JS表格控件 sfDataGrid下载

Aspxhome.com. 中国Asp之家. 版权所有