DataGrid问题--锁定列和行

cwbboy 2003-10-24 01:23:27

我的datagrid碰到了问题,要实现这样的效果: 当上下滚动滚动条时,顶部的一行或几行静止不动,当左右拖动滚动条时,最左边的一行或几行也要不动.就像Excel内的一样,各位有没有什么好的解决办法?
以前我用javadcript可以达到效果,但速度太慢了,因为要循环设置单元格的宽度和高度,现在有两种想法,一是写active x ,另外就是用xml+javascript, 后一种好像见过.但具体实现不清楚,希望各位能提供思路,谢谢.
...全文
183 6 打赏 收藏 转发到动态 举报
写回复
用AI写文章
6 条回复
切换为时间正序
请发表友善的回复…
发表回复
cwbboy 2003-10-26
  • 打赏
  • 举报
 回复
可不可以用active x技术实现?, 用c/s方式中的那种datagrid,不知道vb中的datagrid是不是有锁定列的功能
sunicom 2003-10-26
  • 打赏
  • 举报
 回复
gz
孟子E章 2003-10-26
  • 打赏
  • 举报
 回复
http://lucky.myrice.com/temp/ft.htm
liuzxit 2003-10-24
  • 打赏
  • 举报
 回复
這樣加兩個scroll的話太不好看了吧﹐而且我那種實現方法几乎無需改原來的網頁內容﹐只需加上

<script language="javascript" src="locktable.js"></script>
和
<script language="javascript">
LockTable(tbl,1,1,1);
</script>
即可﹐不過效率問題也是我比較頭痛的問題
JK_10000 2003-10-24
  • 打赏
  • 举报
 回复
以前我用javadcript可以达到效果,但速度太慢了,因为要循环设置单元格的宽度和高度

-----------------

没有必要"循环设置单元格"啊

参见:


http://jkisjk.vip.sina.com/code/html/scrollbar1.htm
liuzxit 2003-10-24
  • 打赏
  • 举报
 回复
我自己的做法﹐不過是用循環﹐也希望能看到更好的

======locktable.htm======
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=big5">
<script language="javascript" src="locktable.js"></script>
</head>
<div style="MARGIN: 2pt; OVERFLOW: scroll;width:150px;height:100px;">
<table id="tbl" border=0 cellspacing="1" cellpadding="0" bgcolor=#660000>
<tr><td nowrap bgcolor=#bbbbbb>標題一</td><td nowrap bgcolor=#bbbbbb>標題二</td><td nowrap bgcolor=#bbbbbb>標題三</td><td nowrap bgcolor=#bbbbbb>標題四</td></tr>
<tr><td bgcolor=#bbbbbb>內容A</td><td bgcolor=#ffffff>內容B</td><td bgcolor=#ffffff>內容C</td><td bgcolor=#ffffff>內容D</td></tr>
<tr><td bgcolor=#bbbbbb>內容A</td><td bgcolor=#ffffff>內容B</td><td bgcolor=#ffffff>內容C</td><td bgcolor=#ffffff>內容D</td></tr>
<tr><td bgcolor=#bbbbbb>內容A</td><td bgcolor=#ffffff>內容B</td><td bgcolor=#ffffff>內容C</td><td bgcolor=#ffffff>內容D</td></tr>
<tr><td bgcolor=#bbbbbb>內容A</td><td bgcolor=#ffffff>內容B</td><td bgcolor=#ffffff>內容C</td><td bgcolor=#ffffff>內容D</td></tr>
<tr><td bgcolor=#bbbbbb>內容A</td><td bgcolor=#ffffff>內容B</td><td bgcolor=#ffffff>內容C</td><td bgcolor=#ffffff>內容D</td></tr>
<tr><td bgcolor=#bbbbbb>內容A</td><td bgcolor=#ffffff>內容B</td><td bgcolor=#ffffff>內容C</td><td bgcolor=#ffffff>內容D</td></tr>
<tr><td bgcolor=#bbbbbb>內容A</td><td bgcolor=#ffffff>內容B</td><td bgcolor=#ffffff>內容C</td><td bgcolor=#ffffff>內容D</td></tr>
<tr><td nowrap bgcolor=#bbbbbb>標題一</td><td nowrap bgcolor=#bbbbbb>標題二</td><td nowrap bgcolor=#bbbbbb>標題三</td><td nowrap bgcolor=#bbbbbb>標題四</td></tr>
</table>
</div>
<script language="javascript">
LockTable(tbl,1,1,1);
</script>

==========locktable.js==============
function DrawTable(scrTable,newTable,iStart,iEnd,jEnd){
var i,j,k=0,newTR,newTD,intWidth=0,intHeight=0;
newTable.mergeAttributes(scrTable);
for (i=iStart;i<iEnd;i++){
newTR=newTable.insertRow(k)
newTR.mergeAttributes(scrTable.rows[i]);
intHeight += scrTable.rows[i].offsetHeight;
intWidth=0;
for(j=0;j<(jEnd==-1?scrTable.rows[i].cells.length:jEnd);j++){
newTD=scrTable.rows[i].cells[j].cloneNode(true);
intWidth+= scrTable.rows[i].cells[j].offsetWidth;
newTR.insertBefore(newTD);
newTD.style.pixelWidth=scrTable.rows[i].cells[j].offsetWidth;
}
k++
}
newTable.style.pixelWidth=intWidth;
newTable.style.pixelHeight=intHeight;
}

function LockTable(arTable,ColNum,RowHead,RowFoot){
arTable.HeadRow=RowHead;
var objDivMaster=arTable.parentElement;
if(objDivMaster.tagName!='DIV')return;
if((arTable.offsetHeight > objDivMaster.offsetHeight)&&(arTable.offsetWidth > objDivMaster.offsetWidth)){
if((ColNum > 0) && (RowHead > 0)){
var objTableLH=document.createElement("TABLE");
var newTBody=document.createElement("TBODY");
objTableLH.insertBefore(newTBody);
objTableLH.id="objTableLH";
objDivMaster.parentElement.insertBefore(objTableLH);
DrawTable(arTable,objTableLH,0,RowHead,ColNum)
objTableLH.srcTable=arTable;
with(objTableLH.style){
zIndex=804;
position='absolute'
pixelLeft=objDivMaster.offsetLeft;
pixelTop=objDivMaster.offsetTop;
}
}

if((ColNum > 0) && (RowFoot > 0)){
var objTableLF=document.createElement("TABLE");
var newTBody=document.createElement("TBODY");
objTableLF.insertBefore(newTBody);
objTableLF.id="objTableLF";
objDivMaster.parentElement.insertBefore(objTableLF);
DrawTable(arTable,objTableLF,arTable.rows.length - RowFoot,arTable.rows.length,ColNum)
objTableLF.srcTable=arTable;
with(objTableLF.style){
zIndex=803;
position='absolute'
pixelLeft=objDivMaster.offsetLeft;
pixelTop=objDivMaster.offsetTop + objDivMaster.offsetHeight - objTableLF.offsetHeight - 16;
}
}
}

if((RowHead > 0) && (arTable.offsetHeight > objDivMaster.offsetHeight)){
var DivHead=document.createElement("DIV");
objDivMaster.parentElement.insertBefore(DivHead);
var objTableHead=document.createElement("TABLE");
var newTBody=document.createElement("TBODY");
objTableHead.id="HeadTar";
objTableHead.style.position="relative"
objTableHead.insertBefore(newTBody);
DivHead.insertBefore(objTableHead);
DrawTable(arTable,objTableHead,0,RowHead,-1)
HeadTar.srcTable=arTable;
with(DivHead.style){
overflow="hidden";
zIndex=802;
pixelWidth=objDivMaster.offsetWidth - 16
position='absolute';
pixelLeft=objDivMaster.offsetLeft;
pixelTop=objDivMaster.offsetTop;
}
objDivMaster.attachEvent("onscroll",divScroll1);
}

if((RowFoot > 0) && (arTable.offsetHeight > objDivMaster.offsetHeight)){
var DivFoot=document.createElement("DIV");
objDivMaster.parentElement.insertBefore(DivFoot);
var objTableFoot=document.createElement("TABLE");
var newTBody=document.createElement("TBODY");
objTableFoot.insertBefore(newTBody);
objTableFoot.id="FootTar";
objTableFoot.style.position="relative"
DivFoot.insertBefore(objTableFoot);
DrawTable(arTable,objTableFoot,arTable.rows.length - RowFoot,arTable.rows.length,-1)
objTableFoot.srcTable=arTable;
with(DivFoot.style){
overflow="hidden";
zIndex=801;
pixelWidth=objDivMaster.offsetWidth - 16
position='absolute'
pixelLeft=objDivMaster.offsetLeft;
pixelTop=objDivMaster.offsetTop + objDivMaster.offsetHeight - DivFoot.offsetHeight - 16;
}
objDivMaster.attachEvent("onscroll",divScroll2);
}

if((ColNum > 0) && (arTable.offsetWidth > objDivMaster.offsetWidth)){
var DivLeft=document.createElement("DIV");
objDivMaster.parentElement.insertBefore(DivLeft);
var objTableLeft=document.createElement("TABLE");
var newTBody=document.createElement("TBODY");
objTableLeft.insertBefore(newTBody);
objTableLeft.id="LeftTar";
objTableLeft.style.position="relative";
DivLeft.insertBefore(objTableLeft);
DrawTable(arTable,objTableLeft,0,arTable.rows.length,ColNum)
LeftTar.srcTable=arTable;
with(DivLeft.style){
overflow="hidden";
zIndex=800;
pixelWidth=objDivMaster.offsetWidth - 16
pixelHeight=objDivMaster.offsetHeight - 16
position='absolute'
pixelLeft=objDivMaster.offsetLeft;
pixelTop=objDivMaster.offsetTop;
}
objDivMaster.attachEvent("onscroll",divScroll3);
}
}

function divScroll1(){
var tbl=document.all('HeadTar').srcTable,parDiv=tbl.parentElement;
while(parDiv.tagName!='DIV')parDiv=parDiv.parentElement;
window.status=-parDiv.scrollLeft
document.all('HeadTar').style.pixelLeft= -parDiv.scrollLeft;
}

function divScroll2(){
var tbl=document.all('FootTar').srcTable,parDiv=tbl.parentElement;
while(parDiv.tagName!='DIV')parDiv=parDiv.parentElement;
window.status=-parDiv.scrollLeft
document.all('FootTar').style.pixelLeft= -parDiv.scrollLeft;
}

function divScroll3(){
var tbl=document.all('LeftTar').srcTable,parDiv=tbl.parentElement;
while(parDiv.tagName!='DIV')parDiv=parDiv.parentElement;
window.status=-parDiv.scrollLeft
document.all('LeftTar').style.pixelTop= -parDiv.scrollTop;
}
jquery-easyui拓展之datagrid复合表头列锁定/解锁和列隐藏/显示
http://blog.csdn.net/tianxiawudi0720/article/details/47401399
easyui datagrid 右冻结
NULL 博文链接：https://skyfar666.iteye.com/blog/1840145
Java整合JQueryEasyUI详解
这是一套技术比较全面的EasyUI视频,由浅入深的几乎涵盖了所有...熟练掌握datagrid组件增删改查详解 7.熟练掌握可编辑表格Combo组件详解 8.熟练掌握combo组件详解,省市县级联菜单 9.熟练掌握tree组件详解,拖拽,增删改查
datagride 固定列，自带分页
datagride 固定列，自带分页，文件中为源码
react-datagrid-getting-started:Flexicious React DataGrid的基本入门项目
欢迎使用React DataGrid 用于基于React的业务线应用程序的MOST功能强大的DataGrid / TreeGrid组件 打印，Word / Excel导出，服务器/客户端分页和筛选，可自定义的筛选器控件和摘要页脚，用户设置，首选项持久性 平滑滚动，嵌套层次树/子网格，左/右锁定列，延迟加载/虚拟滚动 指示 开始 npm install npm start 转到localhost:8080 运行示例：
JavaScript

87,904

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章