var jzltimer, jzrtimer;
var jzDivList;
var jzlArray, jzrArray;
function ScrollLeft()
{
if(event != null)
{
jzDivList = null; // 页面切换时用到
}
OneLeftColMove();
jzltimer = setTimeout('ScrollLeft()', 1000); //这里20为滚动间隔时间(毫秒)
}
/*
* 滚动一次, 向左移动一列
*/
function ScrollRight()
{
if(event != null)
{
jzDivList = null; // 页面切换时用到
}
OneRightColMove();
jzrtimer = setTimeout('ScrollRight()', 1000); //这里20为滚动间隔时间(毫秒)
}
function InitScroll()
{
jzDivList = event.srcElement.parentElement.parentElement.previousSibling.cells(0).children(0);
if(jzDivList.innerHTML == "")
{
return;
}
var cols = jzDivList.children[0].rows[0].cells;
jzlArray = new Array();
jzrArray = new Array();
for(var i=1; i<cols.length; i=i+1)
{
if(jzDivList.children[0].rows[0].offsetWidth < jzDivList.offsetWidth + cols[i].offsetLeft)
{
jzlArray.push(jzDivList.children[0].rows[0].offsetWidth - jzDivList.offsetWidth);
break;
}
jzlArray.push(cols[i].offsetLeft);
}
jzrArray.push(jzDivList.children[0].rows[0].offsetWidth - jzDivList.offsetWidth);
for(var i=cols.length-1; i>=0; i=i-1)
{
jzrArray.push(cols[i].offsetLeft - jzDivList.offsetWidth);
if(jzrArray[jzrArray.length - 1] < 0)
{
jzrArray[jzrArray.length - 1] = 0;
break;
}
}
}
/*
* 滚动一次, 向右移动一列
*/
function StopScroll()
{
if(jzltimer != null)
{
clearTimeout(jzltimer);
}
if(jzrtimer != null)
{
clearTimeout(jzrtimer);
}
}
/*
* 点击一下, 向左移动一列
*/
function OneLeftColMove()
{
if(jzDivList == null)
{
InitScroll();
}
if(jzDivList.innerHTML == "") // 内容为空
{
return;
}
for(var i=0; i<jzlArray.length; i=i+1)
{
if(jzDivList.scrollLeft < jzlArray[i])
{
jzDivList.scrollLeft = jzlArray[i];
break;
}
}
}
/*
* 点击一下, 向右移动一列
*/
function OneRightColMove()
{
if(jzDivList == null)
{
InitScroll();
}
if(jzDivList.innerHTML == "") // 内容为空
{
return;
}
for(var i=0; i<jzrArray.length; i=i+1)
{
if(jzDivList.scrollLeft > jzrArray[i])
{
jzDivList.scrollLeft = jzrArray[i];
break;
}
}
}
在.NET中,一个GridView如果有多列数据,但又不想让它完全显示
也不想出现横向滚动条,当鼠标经过对象时移动一列
如图所示

- 大小: 39 KB

- 大小: 44.4 KB
分享到:
相关推荐
在本文中,我们将深入探讨...通过结合JavaScript和CSS,我们可以创建出直观且易于使用的用户界面,让用户能够方便地将div中的数据移动到表格中。这种技术在数据管理、任务列表、日历应用等多个场景中都有广泛的应用。
4. 重新组织内容:将表格中的文本和图像等内容复制到新的Div中。 5. 输出新代码:生成新的HTML代码,其中表格已被Div结构替代,并提供CSS文件来控制布局。 转换后的Div结构有以下优势: 1. 响应式设计:Div更容易...
在网页设计与开发中,处理大量数据展示时,表格是一个常用且有效的工具。然而,当表格数据过多,需要滚动查看时,表头和第一列往往会随着滚动而消失,导致用户在浏览下方数据时无法清晰地识别各列内容,用户体验大打...
然后,在`mousemove`事件中,通过计算鼠标当前位置与初始位置的差值来改变div的`top`和`left`样式属性,从而实现div的动态移动。同样,也需要在`mouseup`事件中处理结束操作,比如触发排序或者更新数据存储。 3. **...
- **内容迁移**:将表格内的文本、图像等元素转移到相应的div中。 - **样式调整**:调整边框、间距、对齐方式等,确保视觉效果与原表格一致。 - **测试与优化**:在不同设备和浏览器上测试,进行必要的调整,确保...
在HTML中,列可以通过`<td>`(表格数据单元格)或`<th>`(表头单元格)元素来表示。你可以使用CSS选择器,如ID选择器(`#id`)、类选择器(`.class`)或标签选择器(`tagname`)来定位它们。例如,如果你的列有一个...
表格(table)在HTML中主要用于数据展示,但其布局方式相对固定且难以调整,不适用于响应式设计和现代网页的灵活布局。而Div(division)配合CSS(Cascading Style Sheets)则能提供更强大的布局控制力,使得页面...
添加新`div`可以通过`append()`或`prepend()`方法,删除`div`用`remove()`,上下移动则可以调整其在DOM树中的位置。 1. 添加`div`: ```javascript $("#addButton").click(function() { var newDiv = $("<div ...
在网页开发中,jQuery Grid是一款强大的数据管理组件,它提供了丰富的功能,如数据分页、排序、搜索等。本文将详细讲解如何利用jQuery实现网格(Grid)中的列拖动功能,以及如何展示和压缩内容,以达到类似Excel的...
在IT领域,尤其是在Web开发和移动应用开发中,模拟Excel表格功能是一项常见的需求。"仿excel表格,固定一列可拉动"这样的设计旨在提供类似Excel的用户体验,允许用户查看和操作大量数据,同时保持一定的灵活性。这个...
在移动端开发中,数据展示是常见需求之一,而表格(table)作为一种结构化的数据呈现方式,经常被用于显示大量信息。然而,在手机或平板等小屏幕设备上,传统的表格布局会面临很多挑战,如滚动时表头无法固定、列宽...
在描述中提到的"asp多列显示源代码",通常是指一个ASP应用程序,它能够将数据以多列的形式在网页上呈现,这在展示列表或者表格数据时非常常见。 多列显示在网页设计中,尤其是在数据列表和表格的布局中,是一种有效...
在上述代码中,我们首先通过`table.render`方法初始化表格,其中`url`是数据接口的地址,`cols`定义了表格的列信息,`field`和`title`分别定义了数据字段和列标题,`width`和`align`定义了列的宽度和对齐方式。...
原创.将表格里面一行数据移动到一个div中显示时只显示一个标题并带有删除按钮当点击删除时将层中信息删除还原为表格数据方法已经封装好直接复制过去就可以使用
对于表格或列表数据,我们可能希望按列进行拖动排序。这需要在拖动时计算元素的位置和目标位置,然后调整元素的HTML结构。jQuery UI的`.sortable()`方法提供了这样的功能,只需指定排序容器,即可实现按列排序。 四...
在网页或应用程序中,GridView控件通常用于展示数据表格,特别是在大数据量的场景下。当数据行数过多时,滚动浏览可能会导致表头和部分关键列无法始终可见,影响用户阅读和理解数据。为了解决这个问题,我们可以实现...
它们允许内容独立于其他元素移动,是Web标准中不可或缺的部分。在Dreamweaver中,可以使用CSS样式来创建和控制层,实现精确的定位和动画效果。 总之,表格和层在网页设计中扮演着重要角色。Dreamweaver CS3提供了...
在传统的HTML表格中,当表格内容过多导致需要滚动时,表头通常会随着滚动条一起移动,这不利于用户在大量数据中快速定位。为了解决这个问题,我们可以采用CSS和JavaScript来模拟表头的固定效果。具体步骤如下: 1. ...
冻结列是指在表格中固定某些列的位置,使其不会随着水平滚动条的移动而消失;而冻结表头则是指在垂直滚动时保持表头始终在视口顶部,便于用户在浏览长列表时跟踪列对应的数据。 在ASP.NET WebForm中,我们可以利用...
在网页设计中,`div`元素是一个非常基础且重要的部分,它用于定义文档中的分区或区块。本主题将深入探讨如何使用jQuery库来实现`div`元素的展开和收缩效果,这种效果通常用于隐藏和显示详细信息,提高用户体验。...