paulwong
- 浏览: 74348 次
- 性别:
- 来自: 广州
-
文章分类
最新评论
-
godownget：
三大主流数据库神速上手（MySQL、MSSQL、Oracle） ...
WebSphere中流行数据库连接池的配置(Oracle、SQL Server、Sybase、MySQL) -
guoweihelloworld：
[b]: [引用b]文字 (alt+b)[/b][/b]htt ...
Struts-Menu结合角色权限的应用 -
fjkzn1102：
能否给个例子看看，正在学习这方面的集成开发
SSH JBPM ACEGI JBPM WEB CONSOLE -
liyingxu30：
非常感谢非常感谢非常感谢非常感谢非常感谢非常感谢非常感谢非常感 ...
WebSphere中流行数据库连接池的配置(Oracle、SQL Server、Sybase、MySQL) -
zhuqx1130：
securityContextHolderAwareReque ...
Struts-Menu结合角色权限的应用
<!---->
/*
表格
*/
.ResizedColTable
{
border-bottom : solid 2px #ACA899 ;
border-left : solid 2px #ACA899 ;
border-right : solid 2px #ACA899 ;
border-top : solid 2px #ACA899 ;
}
/* 标题行 */
.ResizedColTable .fieldTr
{
background-color : #ECE9D8 ;
}
/* 每个标题所在的单元格 */
.ResizedColTable .fieldTd
{
border-top : solid 1px #fff ;
border-bottom : solid 1px #C0C0C0 ;
border-left : solid 1px #fff ;
border-right : solid 1px #C0C0C0 ;
padding : 0 0 0 0 ;
}
/* 每个标题所在的标签 */
.ResizedColTable .fieldTd .fieldNowrapDiv
{
cursor : default ;
white-space : nowrap ;
overflow : hidden ;
text-overflow : ellipsis ;
padding : 3px 0px 0px 3px ;
}
/* 列宽调整标签，侦听onmousedown事件的那个div */
.ResizedColTable .fieldTd .dragDiv
{
cursor : e-resize ;
width : 100% ;
padding : 0 3px 0 0 ;
display : block ;
}
/* 偶数行样式 */
.ResizedColTable .dataRow0
{
background-color : #fafafa ;
}
/* 奇数行样式 */
.ResizedColTable .dataRow1
{
background-color : #f0f0f0 ;
}
/* 被选中行的样式 */
.ResizedColTable .dataRowSelected
{
background-color : #FFFFD8 ;
}
/* 数据单元格 */
.ResizedColTable .dataTd
{
border-top : solid 1px #fff ;
border-left : solid 1px #fff ;
border-right : solid 1px #C0C0C0 ;
border-bottom : solid 1px #C0C0C0 ;
padding : 0 3px 0 0 ;
height : 22px ;
}
/* 数据单元格里不允许换行的 Div */
.ResizedColTable .dataTd .dataNowrapDiv
{
white-space : nowrap ;
overflow : hidden ;
text-overflow : ellipsis ;
padding : 3px 0px 0px 3px ;
}
.ResizedColTable
{
border-bottom : solid 2px #ACA899 ;
border-left : solid 2px #ACA899 ;
border-right : solid 2px #ACA899 ;
border-top : solid 2px #ACA899 ;
}
/* 标题行 */
.ResizedColTable .fieldTr
{
background-color : #ECE9D8 ;
}
/* 每个标题所在的单元格 */
.ResizedColTable .fieldTd
{
border-top : solid 1px #fff ;
border-bottom : solid 1px #C0C0C0 ;
border-left : solid 1px #fff ;
border-right : solid 1px #C0C0C0 ;
padding : 0 0 0 0 ;
}
/* 每个标题所在的标签 */
.ResizedColTable .fieldTd .fieldNowrapDiv
{
cursor : default ;
white-space : nowrap ;
overflow : hidden ;
text-overflow : ellipsis ;
padding : 3px 0px 0px 3px ;
}
/* 列宽调整标签，侦听onmousedown事件的那个div */
.ResizedColTable .fieldTd .dragDiv
{
cursor : e-resize ;
width : 100% ;
padding : 0 3px 0 0 ;
display : block ;
}
/* 偶数行样式 */
.ResizedColTable .dataRow0
{
background-color : #fafafa ;
}
/* 奇数行样式 */
.ResizedColTable .dataRow1
{
background-color : #f0f0f0 ;
}
/* 被选中行的样式 */
.ResizedColTable .dataRowSelected
{
background-color : #FFFFD8 ;
}
/* 数据单元格 */
.ResizedColTable .dataTd
{
border-top : solid 1px #fff ;
border-left : solid 1px #fff ;
border-right : solid 1px #C0C0C0 ;
border-bottom : solid 1px #C0C0C0 ;
padding : 0 3px 0 0 ;
height : 22px ;
}
/* 数据单元格里不允许换行的 Div */
.ResizedColTable .dataTd .dataNowrapDiv
{
white-space : nowrap ;
overflow : hidden ;
text-overflow : ellipsis ;
padding : 3px 0px 0px 3px ;
}
<!---->
/*
**********************************
* 可变列宽的表格 V1.0 2006-11-18
* 样式风格:simple
********************************** */
/* 表格 */
.purpleTb
{
border-bottom : solid 1px #666666 ;
border-left : solid 1px #B5CAFF ;
border-right : solid 1px #666666 ;
border-top : solid 1px #B5CAFF ;
}
.purpleTb
{
font-size : 14px ;
}
/* 标题行 */
.purpleTb .fieldTr
{
background-color : #ECE9D8 ;
background-image : url(thbg.jpg) ;
}
/* 每个标题所在的单元格 */
.purpleTb .fieldTd
{
border-top : solid 2px #fff ;
border-bottom : solid 1px #C0C0C0 ;
border-left : solid 1px #fff ;
border-right : solid 1px #666666 ;
padding : 0 0 0 0 ;
}
/* 每个标题所在的标签 */
.purpleTb .fieldTd .fieldNowrapDiv
{
cursor : default ;
white-space : nowrap ;
overflow : hidden ;
text-overflow : ellipsis ;
padding : 3px 0px 0px 3px ;
}
/* 列宽调整标签，侦听onmousedown事件的那个Div */
.purpleTb .fieldTd .dragDiv
{
cursor : e-resize ;
width : 100% ;
padding : 0 3px 0 0 ;
display : block ;
}
/* 偶数行样式 */
.purpleTb .dataRow0
{
background-color : #fafafa ;
}
/* 奇数行样式 */
.purpleTb .dataRow1
{
background-color : #fff ;
}
/* 被选中行的样式 */
.purpleTb .dataRowSelected
{
background-color : #FFFFD8 ;
}
/* 数据单元格 */
.purpleTb .dataTd
{
border-top : solid 1px #fff ;
border-left : solid 1px #fff ;
border-right : solid 1px #B5CAFF ;
border-bottom : solid 1px #B5CAFF ;
padding : 0 3px 0 0 ;
height : 22px ;
}
/* 数据单元格里不允许换行的 Div */
.purpleTb .dataTd .dataNowrapDiv
{
white-space : nowrap ;
overflow : hidden ;
text-overflow : ellipsis ;
padding : 3px 0px 0px 3px ;
}
* 可变列宽的表格 V1.0 2006-11-18
* 样式风格:simple
********************************** */
/* 表格 */
.purpleTb
{
border-bottom : solid 1px #666666 ;
border-left : solid 1px #B5CAFF ;
border-right : solid 1px #666666 ;
border-top : solid 1px #B5CAFF ;
}
.purpleTb
{
font-size : 14px ;
}
/* 标题行 */
.purpleTb .fieldTr
{
background-color : #ECE9D8 ;
background-image : url(thbg.jpg) ;
}
/* 每个标题所在的单元格 */
.purpleTb .fieldTd
{
border-top : solid 2px #fff ;
border-bottom : solid 1px #C0C0C0 ;
border-left : solid 1px #fff ;
border-right : solid 1px #666666 ;
padding : 0 0 0 0 ;
}
/* 每个标题所在的标签 */
.purpleTb .fieldTd .fieldNowrapDiv
{
cursor : default ;
white-space : nowrap ;
overflow : hidden ;
text-overflow : ellipsis ;
padding : 3px 0px 0px 3px ;
}
/* 列宽调整标签，侦听onmousedown事件的那个Div */
.purpleTb .fieldTd .dragDiv
{
cursor : e-resize ;
width : 100% ;
padding : 0 3px 0 0 ;
display : block ;
}
/* 偶数行样式 */
.purpleTb .dataRow0
{
background-color : #fafafa ;
}
/* 奇数行样式 */
.purpleTb .dataRow1
{
background-color : #fff ;
}
/* 被选中行的样式 */
.purpleTb .dataRowSelected
{
background-color : #FFFFD8 ;
}
/* 数据单元格 */
.purpleTb .dataTd
{
border-top : solid 1px #fff ;
border-left : solid 1px #fff ;
border-right : solid 1px #B5CAFF ;
border-bottom : solid 1px #B5CAFF ;
padding : 0 3px 0 0 ;
height : 22px ;
}
/* 数据单元格里不允许换行的 Div */
.purpleTb .dataTd .dataNowrapDiv
{
white-space : nowrap ;
overflow : hidden ;
text-overflow : ellipsis ;
padding : 3px 0px 0px 3px ;
}
<!---->
<
html
>
< head >
< title > 可变列宽的表格 </ title >
< link rel =stylesheet href ="css/purple/style.css" >
< link rel =stylesheet href ="css/simple/style.css" >
< script src ="js/ResizedColTable.js" ></ script >
</ head >
< body >
可变列宽的表格
< table id =table1 cellpadding =0 cellspacing =0 border =0 class =purpleTb >
< tr class =fieldTr >
< th class =fieldTd >< div class =dragDiv fixed =true >< div title ="" style ='width:45;' onmousedown ='event.cancelBubble=true;' class =fieldNowrapDiv > 操作 </ div ></ div ></ th >
< th class =fieldTd >< div class =dragDiv fixed =false >< div title ="" style ='width:52;' onmousedown ='event.cancelBubble=true;' class =fieldNowrapDiv > 姓名 </ div ></ div ></ th >
< th class =fieldTd >< div class =dragDiv fixed =false >< div title ="" style ='width:52;' onmousedown ='event.cancelBubble=true;' class =fieldNowrapDiv > 性别 </ div ></ div ></ th >
< th class =fieldTd >< div class =dragDiv fixed =false >< div title ="" style ='width:52;' onmousedown ='event.cancelBubble=true;' class =fieldNowrapDiv > 年龄 </ div ></ div ></ th >
< th class =fieldTd >< div class =dragDiv fixed =false >< div title ="" style ='width:52;' onmousedown ='event.cancelBubble=true;' class =fieldNowrapDiv > 电话 </ div ></ div ></ th >
< th class =fieldTd >< div class =dragDiv fixed =false >< div title ="" style ='width:150;' onmousedown ='event.cancelBubble=true;' class =fieldNowrapDiv > email </ div ></ div ></ th >
< th width =100% ></ th ></ tr >
< tr >
< td class =dataTd >< div title ="" class =dataNowrapDiv >< input type ="button" value ="删除" ></ div ></ td >
< td class =dataTd >< div title ="" class =dataNowrapDiv > 张三 </ div ></ td >
< td class =dataTd >< div title ="" class =dataNowrapDiv > 男 </ div ></ td >
< td class =dataTd >< div style ='text-align:right;' title ="" class =dataNowrapDiv > 22 </ div ></ td >
< td class =dataTd >< div title ="" class =dataNowrapDiv > 1234566789 </ div ></ td >
< td class =dataTd >< div title ="" class =dataNowrapDiv > zs@gdcom.com </ div ></ td >
< td width =100% ></ td ></ tr >
< tr >
< td class =dataTd >< div title ="" class =dataNowrapDiv >< input type ="button" value ="删除" ></ div ></ td >
< td class =dataTd >< div title ="" class =dataNowrapDiv > 张三 </ div ></ td >
< td class =dataTd >< div title ="" class =dataNowrapDiv > 男 </ div ></ td >
< td class =dataTd >< div style ='text-align:right;' title ="" class =dataNowrapDiv > 22 </ div ></ td >
< td class =dataTd >< div title ="" class =dataNowrapDiv > 1234566789 </ div ></ td >
< td class =dataTd >< div title ="" class =dataNowrapDiv > zs@gdcom.com </ div ></ td >
< td width =100% ></ td ></ tr >
< tr >
< td class =dataTd >< div title ="" class =dataNowrapDiv >< input type ="button" value ="删除" ></ div ></ td >
< td class =dataTd >< div title ="" class =dataNowrapDiv > 张三 </ div ></ td >
< td class =dataTd >< div title ="" class =dataNowrapDiv > 男 </ div ></ td >
< td class =dataTd >< div style ='text-align:right;' title ="" class =dataNowrapDiv > 22 </ div ></ td >
< td class =dataTd >< div title ="" class =dataNowrapDiv > 1234566789 </ div ></ td >
< td class =dataTd >< div title ="" class =dataNowrapDiv > zs@gdcom.com </ div ></ td >
< td width =100% ></ td ></ tr >
< tr >
< td class =dataTd >< div title ="" class =dataNowrapDiv >< input type ="button" value ="删除" ></ div ></ td >
<</
< head >
< title > 可变列宽的表格 </ title >
< link rel =stylesheet href ="css/purple/style.css" >
< link rel =stylesheet href ="css/simple/style.css" >
< script src ="js/ResizedColTable.js" ></ script >
</ head >
< body >
可变列宽的表格
< table id =table1 cellpadding =0 cellspacing =0 border =0 class =purpleTb >
< tr class =fieldTr >
< th class =fieldTd >< div class =dragDiv fixed =true >< div title ="" style ='width:45;' onmousedown ='event.cancelBubble=true;' class =fieldNowrapDiv > 操作 </ div ></ div ></ th >
< th class =fieldTd >< div class =dragDiv fixed =false >< div title ="" style ='width:52;' onmousedown ='event.cancelBubble=true;' class =fieldNowrapDiv > 姓名 </ div ></ div ></ th >
< th class =fieldTd >< div class =dragDiv fixed =false >< div title ="" style ='width:52;' onmousedown ='event.cancelBubble=true;' class =fieldNowrapDiv > 性别 </ div ></ div ></ th >
< th class =fieldTd >< div class =dragDiv fixed =false >< div title ="" style ='width:52;' onmousedown ='event.cancelBubble=true;' class =fieldNowrapDiv > 年龄 </ div ></ div ></ th >
< th class =fieldTd >< div class =dragDiv fixed =false >< div title ="" style ='width:52;' onmousedown ='event.cancelBubble=true;' class =fieldNowrapDiv > 电话 </ div ></ div ></ th >
< th class =fieldTd >< div class =dragDiv fixed =false >< div title ="" style ='width:150;' onmousedown ='event.cancelBubble=true;' class =fieldNowrapDiv > email </ div ></ div ></ th >
< th width =100% ></ th ></ tr >
< tr >
< td class =dataTd >< div title ="" class =dataNowrapDiv >< input type ="button" value ="删除" ></ div ></ td >
< td class =dataTd >< div title ="" class =dataNowrapDiv > 张三 </ div ></ td >
< td class =dataTd >< div title ="" class =dataNowrapDiv > 男 </ div ></ td >
< td class =dataTd >< div style ='text-align:right;' title ="" class =dataNowrapDiv > 22 </ div ></ td >
< td class =dataTd >< div title ="" class =dataNowrapDiv > 1234566789 </ div ></ td >
< td class =dataTd >< div title ="" class =dataNowrapDiv > zs@gdcom.com </ div ></ td >
< td width =100% ></ td ></ tr >
< tr >
< td class =dataTd >< div title ="" class =dataNowrapDiv >< input type ="button" value ="删除" ></ div ></ td >
< td class =dataTd >< div title ="" class =dataNowrapDiv > 张三 </ div ></ td >
< td class =dataTd >< div title ="" class =dataNowrapDiv > 男 </ div ></ td >
< td class =dataTd >< div style ='text-align:right;' title ="" class =dataNowrapDiv > 22 </ div ></ td >
< td class =dataTd >< div title ="" class =dataNowrapDiv > 1234566789 </ div ></ td >
< td class =dataTd >< div title ="" class =dataNowrapDiv > zs@gdcom.com </ div ></ td >
< td width =100% ></ td ></ tr >
< tr >
< td class =dataTd >< div title ="" class =dataNowrapDiv >< input type ="button" value ="删除" ></ div ></ td >
< td class =dataTd >< div title ="" class =dataNowrapDiv > 张三 </ div ></ td >
< td class =dataTd >< div title ="" class =dataNowrapDiv > 男 </ div ></ td >
< td class =dataTd >< div style ='text-align:right;' title ="" class =dataNowrapDiv > 22 </ div ></ td >
< td class =dataTd >< div title ="" class =dataNowrapDiv > 1234566789 </ div ></ td >
< td class =dataTd >< div title ="" class =dataNowrapDiv > zs@gdcom.com </ div ></ td >
< td width =100% ></ td ></ tr >
< tr >
< td class =dataTd >< div title ="" class =dataNowrapDiv >< input type ="button" value ="删除" ></ div ></ td >
<</
分享到：
发表评论
-
Test
2006-05-06 12:29 703test -
JSP技巧篇---字符串日期格式转换
2006-05-18 22:07 7290有一些网友问我字符串转日期或日期转字符串要如何做，本 ... -
自定义集合中的排序
2006-05-19 11:33 7311、先自定义Comparator// 对象的比较器，如1 ... -
华为公司 java 面试题
2006-05-21 18:46 1096第一部分：选择题QUESTION NO: 11、 ... -
tomcat支持中文名的处理方式
2006-06-11 17:52 991在server.xml配置文件中，增加URIEncoding= ... -
進銷存系統有幾個資料庫？
2006-06-17 09:57 1066我在教授 軟體設計課程，尤其是以使用案例圖在說明架構設計時，每 ... -
Eclipse插件JSEclipse 1.5 发布
2006-06-18 12:35 977Eclipse插件JSEclipse 1.5 近日 ... -
如何在TOMCAT中调试JSP
2006-06-18 13:48 1222调试JSP时,在tomcat里改\conf\server.xm ... -
中文版API
2006-06-22 11:02 1056中文版API http://gceclub.s ... -
服务器在某些情况下需要进行的调整
2006-07-12 22:00 1558服务器在某些情况下需要进行的调整.============== ... -
采用输出内容
2006-07-16 22:45 867采用<JSP:FORWORD> 该方法是利用服务器 ... -
WebSphere中流行数据库连接池的配置(Oracle、SQL Server、Sybase、MySQL)
2006-07-24 16:15 6760本文介绍WebSphere下Oracle、SQL Serve ... -
MyEclipse+WebSphere 通过 JNDI 连接 Sybase 简介
2006-07-24 17:12 3580很久 ... -
Websphere Application Server心得
2006-07-28 10:27 1294Websphere Application Serve ... -
MyEclipse 5.0 M2 注册码及下载地址和Eclipse 3.2多国语言包
2006-07-30 12:13 2748MyEclipse 5.0 M2 注册码及下载地址 ... -
PrepareStatement中in中带问号的又一用法
2006-07-30 14:52 1191String strSQL = ... -
showModalDialog和showModelessDialog
2006-08-16 14:02 872一、showModalDialog和showModelessD ... -
Regular Expression in Java
2006-08-23 21:42 22151. Introduction 正規表示式(Regular E ... -
Reqular Expressions
2006-08-23 21:45 943雖然Reqular Expressions(以 ... -
图解eclipse+myelcipse开发EJB
2006-08-29 14:08 955http://www2.blogjava.net/rickhu ...
相关推荐
本主题将深入探讨“DataGrid可调整列宽的表格可排序”这一特性，以及与之相关的技术点。 首先，`DataGrid` 是一种网格布局控件，广泛应用于Windows Forms、WPF、ASP.NET、Xamarin.Forms等多个平台。它允许程序员以...
在“bootstrap-table拖拽表格改变列宽”这个主题中，我们将深入探讨如何实现用户可以动态调整表格列宽的功能，同时确保兼容主流浏览器，并保持表格的body部分与header部分对齐。 首先，我们需要引入必要的CSS和JS库...
7. **兼容性和性能优化**：在实现拖动列宽功能时，需要注意兼容不同浏览器的差异，并对性能进行优化，特别是在数据量大时，防止因频繁的交互导致页面响应变慢。 在提供的压缩包文件中，"GridViewPageable_51aspx...
同时，还需要处理浏览器的边界问题，防止列宽变得过小或过大。 "colResizable"这个名字很可能就是这个插件的名称，它可能是开源的JavaScript库，具有良好的可配置性和扩展性。使用这个插件，开发者可能需要在HTML中...
在这个特定的主题“可拖动列宽的GridView”中，我们关注的是如何实现用户可以自由调整GridView中列宽的功能，同时保持表格的无刷新特性，以及涉及到的精彩分页代码。 首先，让我们深入了解GridView的基本概念。...
左键拖动表头右边框出现垂直于表格内的虚线作为参照，按住鼠标左键可左右移动虚线也会跟着移动，拖动到合适位置松开左键，虚线消失，拖动的表格该列 变宽/变窄 到鼠标位置，最窄为50px，最宽为600px，限制可自行修改...
本demo使用jQuery包，实现表格列宽可拖拽功能，并实现页面reset时的重新布局。使用jQuery，方便函数的调用，给要处理的表格添加id 后，直接调用$("#id").movedTh()即可方便实现，修改了firfox的兼容性。
Flexigrid – Web 2.0 Javscript Grid for jQuery – 可变列宽，自动适应表头宽度，可通过 Ajax 连接 XML 数据源，类似 Ext Grid，但基于 jQuery 因此更轻量小巧。 Chromatable JQuery Plugin – 固定表头，可...
通过JavaScript实现一个可以改变列宽的表格是网页设计中的常见需求，这能够提供给用户更好的交互体验。本文主要介绍如何利用JavaScript对HTML中的table元素进行操作，以实现列宽调整的功能。在展开讨论具体实现方法...
在这个特定的问题中，我们关注的是如何使用jQuery来实现一个可拖动调整宽度的table表格，并在宽度调整到一定程度时隐藏其中的内容。 首先，我们需要理解HTML中的`<table>`元素，它是用来展示结构化数据的，通常由行...
因此，这个二次封装的组件AFTableColumn-master旨在实现列宽自适应，使得表格能根据内容动态调整列宽，提升用户体验。 首先，我们需要理解Element-UI的table组件基本结构和工作原理。它由多个table-column定义，每...
1. **添加表格**：在Word文档中，表格是一种常见且强大的布局工具，可用于展示数据或组织信息。PHPWord提供了添加表格的方法，例如`$section->addTable()`，可以指定列数、行数，以及单元格的样式。在最新的整合中，...
本文档详细介绍了利用jQuery实现鼠标可拖动调整表格列宽度的方法。 首先，我们需要了解如何引入必要的文件。为了实现表格列宽度的可拖动调整功能，我们需要引入jQuery核心库文件、store.js文件和一个名为jquery....
在网页开发中，数据展示是不可或缺的一部分，而表格（Table）作为常见的数据组织形式，能够清晰、有效地排列信息。在动态交互丰富的现代网页中，用户往往期望表格具有更好的可读性和用户体验，例如可以自由伸缩的...
总的来说，LaTeX的表格制作虽然需要一定的学习曲线，但一旦掌握，就能制作出高质量、可定制的表格，特别适合学术论文、报告和专业文档的编写。通过阅读“LaTeX中表格的制作.pdf”这样的教程文件，你可以进一步了解...
为了实现"bootstrap表格td宽度可自由拖动"的功能，我们需要借助额外的库或者自定义JavaScript代码来实现。在本场景中，我们关注的关键词是"表格td 自由拉伸"，这通常意味着我们需要实现列宽的动态调整。 首先，我们...
在C#编程环境中，开发人员经常需要处理表格数据，这在很多应用场景中是必不可少的，例如数据展示、数据分析以及报表生成等。标题“SheetCell.rar_C# 表格_C#表格_c# 表格_电子表格_表格”暗示了这个压缩包可能包含了...
描述中的“一款网页版表格可以将表格栏内进行拖动修改”进一步说明了这个表格应用的特点，即具备列宽可调整的特性。用户可以通过鼠标拖动列头边框来增大或缩小列宽，适应不同数据长度的显示需求，提高数据查看的舒适...
内容索引:脚本资源,Ajax/JavaScript,表格拖动 已经封装成HTC的表格列宽拖动效果的代码，可通过鼠标拖动调整表格单元格宽度，兼容IE、firefox等主流浏览器，另附两个只能在ie下使用的代码，用来参考学习、比较。...
对于表格，我们可以定义如边框、背景色、行高、列宽等样式，以实现视觉效果的提升。同时，CSS3引入了更多的特效，如渐变、阴影、过渡和动画，这些都可以用来增强表格的互动性和视觉吸引力。 在实际应用中，一个常见...