在Web上的Grid表格(提供锁定)

原创 2004年07月07日 16:37:00

<html><head><title>DefineGrid</title>
<meta http-equiv=Content-Type content="text/html; charset=gb2312">
<style type=text/css>
BODY{font-size:9pt;}
TD{font-size:9pt;}
.Header{border-right:#555 1px solid;padding-right:4px;border-top:#FFF 1px solid;padding-left: 4px;background:#CCC;padding-bottom:4px;overflow:hidden;border-left:#FFF 1px solid;cursor:hand;padding-top:4px;border-bottom:#555 1px solid;white-space:nowrap}
.Cell{border-right:#DDD 1px solid;padding-right:3px;border-top:#FFF 1px solid;padding-left:3px;background:#FFF;padding-bottom:3px;overflow:hidden;boder-left:#FFF 1px solid;padding-top:3px;border-bottom:#DDD 1px solid;white-space:nowrap}
</style>

<script>
//栏位标题(栏位名称#栏位宽度#资料对齐)
var Header=new Array();
for(iIndex=0;iIndex<10;iIndex++)
{
 Header[iIndex]="字段"+iIndex+"#100#left";
}
//栏位资料(二维阵列)
var CellArray=new Array();
for(iIndex=0;iIndex<20;iIndex++)
{
 var Cell=new Array();
 for(kIndex=0;kIndex<10;kIndex++)
 {
  Cell[kIndex]="行:"+iIndex+"字段:"+kIndex+">值";
 }
 CellArray[iIndex]=Cell;
}
</script>
<script>
var GridWidth=480;//资料表显示宽度(不含卷轴)
var ShowLine=10;//资料表显示列数
var CellHeight=21;//资料列高度
var LockColumn=1;//要锁定的栏位数(由左至右)

function WriteTable()
{
 //写入表格
 var iGridWidth=GridWidth;
 var NewHTML="<table border=/"0/" cellpadding=/"0/" cellspacing=/"0/"><tr><td><div style=/"width:100%;overflow-x:scroll/"><table border=/"0/" cellpadding=/"0/" cellspacing=/"0/"><tr>";
 for(iIndex=0;iIndex<Header.length;iIndex++)
 {
  if(iIndex<LockColumn)
  {
   var strHeader=Header[iIndex].split("#");
   iGridWidth-=strHeader[1];
   var LockInfo=((iIndex+1)==LockColumn)?"解除锁定":"锁定此栏位";
   NewHTML+="<td><div class=/"Header/" style=/"width:"+strHeader[1]+"px;height:"+CellHeight+"px/" title=/""+LockInfo+"/" onclick=/"ResetTable("+iIndex+")/">"+strHeader[0]+"</div></td>";
  }
 }
 NewHTML+="</tr><tr><td colspan=/""+LockColumn+"/"><div id=/"DataFrame1/" style=/"position:relative;width:100%;overflow:hidden/"><div id=/"DataGroup1/" style=/"position:relative/"></div></div></td></tr></table></div></td><td valign=/"top/"><div style=/"width:"+iGridWidth+"px;overflow-x:scroll/"><table border=/"0/" cellpadding=/"0/" cellspacing=/"0/"><tr>";
 for(iIndex=0;iIndex<Header.length;iIndex++)
 {
  if(iIndex>=LockColumn)
  {
   var strHeader=Header[iIndex].split("#");
   NewHTML+="<td><div class=/"Header/" style=/"width:"+strHeader[1]+"px;height:"+CellHeight+"px/" title=/"锁定此栏位/" onclick=/"ResetTable("+iIndex+")/">"+strHeader[0]+"</div></td>";
  }
 }
 NewHTML+="</tr><tr><td colspan=/""+(Header.length-LockColumn)+"/"><div id=/"DataFrame2/" style=/"position:relative;width:100%;overflow:hidden/"><div id=/"DataGroup2/" style=/"position:relative/"></div></div></td></tr></table></div></td><td valign=/"top/"><div id=/"DataFrame3/" style=/"position:relative;background:#000;overflow-y:scroll/" onscroll=/"SYNC_Roll()/"><div id=/"DataGroup3/" style=/"position:relative;width:1px;visibility:hidden/"></div></div></td></tr></table>";
 DefineGrid.innerHTML=NewHTML;
 ApplyData();
}

function ApplyData()
{
 //写入资料
 var NewHTML="<table border=/"0/" cellpadding=/"0/" cellspacing=/"0/">";
 for(iIndex=0;iIndex<CellArray.length;iIndex++)
 {
  NewHTML+="<tr>";
  for(kIndex=0;kIndex<Header.length;kIndex++)
  {
   if(kIndex<LockColumn)
   {
    var strHeader=Header[kIndex].split("#");
    NewHTML+="<td><div class=/"Cell/" style=/"width:"+strHeader[1]+"px;height:"+CellHeight+"px;text-align:"+strHeader[2]+"/">"+CellArray[iIndex][kIndex]+"</div></td>";
   }
  }
  NewHTML+="</tr>";
 }
 NewHTML+="</table>";
 DataGroup1.innerHTML=NewHTML;
 var NewHTML="<table border=/"0/" cellpadding=/"0/" cellspacing=/"0/">";
 for(iIndex=0;iIndex<CellArray.length;iIndex++)
 {
  NewHTML+="<tr>";
  for(kIndex=0;kIndex<Header.length;kIndex++)
  {
   if(kIndex>=LockColumn)
   {
    var strHeader=Header[kIndex].split("#");
    NewHTML+="<td><div class=/"Cell/" style=/"width:"+strHeader[1]+"px;height:"+CellHeight+"px;text-align:"+strHeader[2]+"/">"+CellArray[iIndex][kIndex]+"</div></td>";
   }
  }
  NewHTML+="</tr>";
 }
 NewHTML+="</table>";
 DataGroup2.innerHTML=NewHTML;
 DataFrame1.style.pixelHeight=CellHeight*ShowLine;
 DataFrame2.style.pixelHeight=CellHeight*ShowLine;
 DataFrame3.style.pixelHeight=CellHeight*ShowLine+CellHeight;
 DataGroup3.style.pixelHeight=CellHeight*(CellArray.length+1);
}

function ResetTable(n)
{
 var iGridWidth=0;
 for(iIndex=0;iIndex<Header.length;iIndex++)
 {
  if(iIndex<(n+1))
  {
   var strHeader=Header[iIndex].split("#");
   iGridWidth+=parseInt(strHeader[1]);
  }
 }
 if(iGridWidth>GridWidth)
 {
  var Sure=confirm("/n锁定栏位的宽度大於资料表显示的宽/n/n度,这可能会造成版面显示不正常./n/n/n您确定要继续吗?");
 }
 else
 {
  Sure=true;
 }
 if(Sure)
 {
  LockColumn=(LockColumn==n+1)?0:n+1;
  WriteTable();
 }
}

function SYNC_Roll()
{
 DataGroup1.style.posTop=-DataFrame3.scrollTop;
 DataGroup2.style.posTop=-DataFrame3.scrollTop;
}
window.onload=WriteTable;
</script>

</head>
<body>
<center>
<table cellspacing=0 cellpadding=0 border=0>
  <tr>
    <td
    style="border-right:white 2px inset;border-top:white 2px inset;border-left: white 2px inset; border-bottom:white 2px inset;background-color:scrollbar">
      <div id=DefineGrid></div>
    </td>
  </tr>
</table>
</center>

WebGrid固定列(Fixed-Coloum)的设定

        有时候WebGrid表格中列的数目比较多 ,若表格的宽度不足以显示所有列,当我们拉动左右滚动条就有可能看不见关键列。我们希望关键列不随着滚动条的移动而移动。    比如我们创建如下Ta...
  • codingtaoist
  • codingtaoist
  • 2007-03-19 20:46:00
  • 1424

extjs_06_grid(列锁定&列分组)

extjs_06_grid(列锁定&列分组)
  • adam_zs
  • adam_zs
  • 2014-06-25 22:06:11
  • 2112

Web表格控件 SlickGrid

SlickGrid 是一个JavaScript编写的数据控件,其采用数据虚拟显示的特性备受后来的Grid推崇,如ExtJS DataGrid,其架构设计优秀,UI交互功能非常丰富,插件化的可扩展功能开...
  • sweetgirl520
  • sweetgirl520
  • 2016-05-26 15:25:32
  • 3373

Ext实现表格列头冻结效果,锁定列头

这段时间我们的项目中采用了Coolite来做富客户端,Coolite目前的版本是0.8.1,它所采用的Ext版本是2.2.1,因此下面主要是说明在这个版本下所实现的锁定列和多行表头,需要说明的是Ext...
  • e_wsq
  • e_wsq
  • 2013-09-08 18:26:34
  • 2972

ligerui 表格滚动条放在表格里,固定表头

1、表格里的内容条数太多,这个时候就需要滚动条了,但是滚动条的位置影响着美观,这里建议把滚动条放在表格里 例如原来这样改后的样式是这样的修改方法 enabledEdit : false, ...
  • cc_yy_zh
  • cc_yy_zh
  • 2017-11-17 15:32:26
  • 197

Extjs4.0可编辑表格拖拽列头后列不能对齐问题

Ext.grid.RowEditor.prototype.errorsText='错误', Ext.grid.RowEditor.prototype.dirtyText='你必须提交或取消更改', ...
  • Alicedetears
  • Alicedetears
  • 2014-09-08 08:42:09
  • 1335

利用webgrid实现数据的批处理(添加和修改)

       利用webgrid实现数据的批处理(添加和修改)1.原理及使用的技术  (1) webgrid的允许添加、允许修改的功能实现即时的更新(DataSet)  (2) 利用SqlDataAd...
  • bccu
  • bccu
  • 2004-09-17 10:37:00
  • 673

Ligerui表格基本操作(三)

//var ht = "编辑&nbsp;&nbsp;删除"         var col = [{ display: "部门名称", name: "Name", frozen: true...
  • u012962099
  • u012962099
  • 2015-11-12 10:58:30
  • 444

Ext Grid 锁定列+多表头的设计与实现(二)

上一次实现了锁定列,我是用的是Ext3.2扩展包里面的lockingGridView插件,实现起来还是很简单的。此外Grid还需要多表头,我从网上下到了几个关于多表头的插件,单独使用没有问题,但是将多...
  • JustCoding_
  • JustCoding_
  • 2013-01-18 12:49:45
  • 3152

EXT3.4关于Grid锁定指定列固定多选框的实现

1    总体解决方案 1.1  创建CheckboxSelectionModel对象 1,新建空的EOS6.3的工程,新建com.towngas.tcis. gridlock构件包; 2,在c...
  • maoxiao1229
  • maoxiao1229
  • 2014-04-03 17:38:59
  • 4641
收藏助手
不良信息举报
您举报文章:在Web上的Grid表格(提供锁定)
举报原因:
原因补充:

(最多只允许输入30个字)