`

[原创]可以让table支持手动调节列宽的js(ie only)

阅读更多
这是几个月前写的东西了
现在看起来真差
但还是发上来吧


这个project可以让你的 [现有] 的列表table 在[几乎不用修改]的情况下,
自动支持手动调节列宽的功能。完全基于DHTML前台技术,与服务器端无关。
 
通常情况下 你真正要做的工作只是(当然还有更高级的用法,说明晚些时候奉上)

1 引入脚本
<SCRIPT language="javascript" src="mycommon.js"></SCRIPT>
<SCRIPT language="javascript" src="mylisttable.js"></SCRIPT>
2 在页面初始化方法里执行:
新建 MyListTableManager 对象,并初始化:
window.demoManager=new MyListTableManager();
demoManager.initDefaultStyle();
将你自己的table id告诉刚刚创建的 MyListTableManager 对象:
demoManager.addNewMyListTable("你的列表table的id");



注意:
0 目前只支持IE 6。 IE其他版本未测试。暂时不支持FireFox浏览器。
1 不管如今AJAX RIA RCP这些东西如何流行,用js来实现的展现层不可能达到用C写的GUI程序的水平,所以期望值不要太高:)。
2 测试中,肯定还有很多bug...
分享到:
评论
14 楼 cherami 2007-04-06  
忘了说了,支持IE和FF
13 楼 cherami 2007-04-06  
呵呵,我也写过一个:
http://www.jiehoo.com/resizable-frame-and-table.htm
12 楼 l0979365428 2006-11-17  
lz的效果看不到阿,

不过这个说得还不错啊

引用
看看这个:
http://makoomba.altervista.org/grid/
基于jquery的。不错。可惜没文档,难直接重用。
我拿来用了,并且做了些修改,变得更实用,而且也可以重复使用。等做完之后,贴个修改的版本上来。


就是不知道能不能作为一个独立的控件来用呢,可不可以一个页面上面显示多个表格呢,这个我觉得还是挺重要的问题
11 楼 fins 2006-11-08  
正则这东西确实是把双忍剑
本身效率就不高 再加上正则表达式的写法也是比较有学问的
对大规模的字符串进行操作 正则确实不是好办法啊
10 楼 gp03d 2006-11-07  
liuyxit 写道
[quote="gp03d]
怀疑这段代码的效率

一段简化的startsWith
String.prototype.startsWith = function(pf) {
    pf = typeof(pf) != "string" ? "" + pf : pf;
    return this.indexOf(pf) == 0;
}


事实上我只是看到LZ的ignoreSHIFT方法上注明准备用正则,我就随手写了一个。
呵呵,startsWith的改写是我顺手用正则表达式改了一下。
至于效率你测试了你的比我的快了吗?

当然,放到String.prototype是一个好的方法!


前几天我整理公司js的时候,测试过的~
用一个1W次的循环测试indexOf与RegExp的效率,发现indexOf能比RegExp方式节省近一半的时间。
不知道是否还有其他更加可靠的办法,如果有请告诉我:)
9 楼 fins 2006-11-05  
startsWith
等方法实际上在这个组件中没有用上
8 楼 liuyxit 2006-11-04  
[quote="gp03d]
怀疑这段代码的效率

一段简化的startsWith
String.prototype.startsWith = function(pf) {
    pf = typeof(pf) != "string" ? "" + pf : pf;
    return this.indexOf(pf) == 0;
}


事实上我只是看到LZ的ignoreSHIFT方法上注明准备用正则,我就随手写了一个。
呵呵,startsWith的改写是我顺手用正则表达式改了一下。
至于效率你测试了你的比我的快了吗?

当然,放到String.prototype是一个好的方法!
7 楼 我想我是海 2006-11-04  
看看这个:
http://makoomba.altervista.org/grid/
基于jquery的。不错。可惜没文档,难直接重用。
我拿来用了,并且做了些修改,变得更实用,而且也可以重复使用。等做完之后,贴个修改的版本上来。
6 楼 gp03d 2006-11-04  
function startsWith(str,start,iCase,iShift){
		if (isValid(iShift) && iShift)
		{
			str=ignoreSHIFT(str);
			start=ignoreSHIFT(start);
		}
		var flags ="";		
		if (isValid(iCase) && iCase)
		{
			flags = "i";
		}

		var reg = new RegExp("^"+start+".*",flags);
		return reg.test(str);
}
function ignoreSHIFT(str){
	var mapping={
		"!" : "1",
		"@" : "2",
		"#" : "3",
		"\\$" : "4",
		"%" : "5",
		"\\^" : "6",
		"&" : "7",
		"\\*" : "8",
		"\\(" : "9",
		"\\)" : "0",
		"~" : "`",
		"_" : "-",
		"\\+" : "=",
		"\\{" : "[",
		"}" : "]",
		":" : ";",
		">" : ".",
		"<" : ",",
		"\\?" : "/",
		"\\\"" : "'",
		"\\|" : "\\"
	};
	
	
	var reg = new RegExp("","");
	for (var k in mapping){		
		reg.compile(k,"g");
		str = str.replace(reg,mapping[k]);	
	}
	return str;
	/* 考虑用正则表达式 */
	/*
	var newStr="";
	for (var i=0;i<str.length ;i++ ){
		var c=str.charAt(i);
		for (var k in mapping){
			if (c==k){
				c=mapping[k];
				break;
			}
		}
		newStr+=c;
	}	
	return newStr;
	*/
	
}
alert(ignoreSHIFT("~!@#$%^&*()_+|{}:\"<>?"));


怀疑这段代码的效率

一段简化的startsWith
String.prototype.startsWith = function(pf) {
    pf = typeof(pf) != "string" ? "" + pf : pf;
    return this.indexOf(pf) == 0;
}
5 楼 liuyxit 2006-11-04  
呵呵,怎跟我计划写的东东一个方向的。

支持一下:
function startsWith(str,start,iCase,iShift){
		if (isValid(iShift) && iShift)
		{
			str=ignoreSHIFT(str);
			start=ignoreSHIFT(start);
		}
		var flags ="";		
		if (isValid(iCase) && iCase)
		{
			flags = "i";
		}

		var reg = new RegExp("^"+start+".*",flags);
		return reg.test(str);
}
function ignoreSHIFT(str){
	var mapping={
		"!" : "1",
		"@" : "2",
		"#" : "3",
		"\\$" : "4",
		"%" : "5",
		"\\^" : "6",
		"&" : "7",
		"\\*" : "8",
		"\\(" : "9",
		"\\)" : "0",
		"~" : "`",
		"_" : "-",
		"\\+" : "=",
		"\\{" : "[",
		"}" : "]",
		":" : ";",
		">" : ".",
		"<" : ",",
		"\\?" : "/",
		"\\\"" : "'",
		"\\|" : "\\"
	};
	
	
	var reg = new RegExp("","");
	for (var k in mapping){		
		reg.compile(k,"g");
		str = str.replace(reg,mapping[k]);	
	}
	return str;
	/* 考虑用正则表达式 */
	/*
	var newStr="";
	for (var i=0;i<str.length ;i++ ){
		var c=str.charAt(i);
		for (var k in mapping){
			if (c==k){
				c=mapping[k];
				break;
			}
		}
		newStr+=c;
	}	
	return newStr;
	*/
	
}
alert(ignoreSHIFT("~!@#$%^&*()_+|{}:\"<>?"));


上述代码没经长细测试,所以如果有bug实属正常:)。
4 楼 zhoujunsheng168 2006-11-03  
下载了下来,非常不错。向高手致敬.
3 楼 icekzl 2006-11-03  
学习学习...
2 楼 karna 2006-11-03  
好东西,支持
1 楼 stone 2006-11-02  
呵呵,喜欢原创.

相关推荐

    实现bootstrap table可设置列宽和可拖动列宽

    - `bootstrap-table-colresize.min.js`:拖动列宽插件的 JavaScript 文件,实现拖动功能。 - 示例 HTML 文件:展示如何在实际代码中应用以上设置和插件。 - 示例数据文件:可能包含用于填充表格的数据。 总之,实现...

    bootstrap-table拖拽表格改变列宽

    在“bootstrap-table拖拽表格改变列宽”这个主题中,我们将深入探讨如何实现用户可以动态调整表格列宽的功能,同时确保兼容主流浏览器,并保持表格的body部分与header部分对齐。 首先,我们需要引入必要的CSS和JS库...

    html表格table调整列宽的例子

    jQuery作为一个强大的JavaScript库,提供了丰富的插件来增强HTML表格的功能,其中包括能够允许用户手动拖动调整列宽的插件。 本例中提到的插件名为ZTable,它是一个基于jQuery的扩展,专门针对HTML表格的列宽调整...

    拖动table单元格改变列宽或行高

    通过JavaScript和适当的事件处理,我们可以构建出强大的表格设计器,让用户能够自由调整表格布局,以适应各种数据展示需求。结合合适的JS插件,开发者可以轻松实现这一功能,提升应用的用户体验。

    bootstrapTable实现列宽可拖动

    "bootstrapTable 实现列宽可拖动"的特性就是为了解决这个问题,让用户可以通过鼠标拖动来动态调整表格列的宽度。 要实现这个功能,首先你需要确保在项目中已经引入了 BootstrapTable 的基础库和相应的 CSS、JS 文件...

    table得列宽拖拽插件

    "table得列宽拖拽插件"正是这样一个工具,它允许用户通过拖拽操作来调整表格(table)中的列宽,以便更好地展示或隐藏内容。这种功能在处理数据密集型的表格时尤为实用,用户可以根据自身需求自由调整列宽,使得重要...

    鼠标拖动调整table列宽实例

    在HTML文件`resizable.htm`中,我们需要一个包含数据的`&lt;table&gt;`元素,并为其应用特定的CSS类或ID,以便JavaScript可以识别并应用拖动调整列宽的功能。CSS可能用于设置边框、光标等视觉效果,使用户能清楚地看到可...

    基于ElementUI二次封装的支持自适应列宽的tablecolumn列组件

    本项目"基于ElementUI二次封装的支持自适应列宽的table-column列组件"正是针对Element-UI的table组件进行了一次深度定制,以解决在数据展示过程中列宽自动适应的问题。 Element-UI的table组件在默认情况下,列宽...

    table实现列宽的拖动效果

    "table实现列宽的拖动效果"是一个常见的需求,特别是在数据展示或者数据分析的应用中,用户可能需要自定义表格列的宽度以更好地查看和理解数据。这篇博客文章 "https://jifeng3321.iteye.com/blog/2403674" 提到的...

    可调整列宽TABLE

    在网页设计中,"可调整列宽TABLE"是一种常见的交互式数据展示技术,它使得用户可以根据需要自由调整表格中列的宽度。这种功能通常应用于数据量大、信息丰富的表格,以便用户能更清晰地查看和理解数据。下面将详细...

    html种table_td 列宽左右可拉伸_搜索条件可展开隐藏demo.rar

    HTML中的表格(`&lt;table&gt;`)是用于展示结构化数据的标准元素,而在这个"html种table_td 列宽左右可拉伸_搜索条件可展开隐藏demo"中,开发者分享了一个功能丰富的示例,实现了表格列宽的动态调整以及搜索条件的展开与...

    LabVIEW表格列宽自动调节.rar

    在默认情况下,LabVIEW的表格列宽是固定的,可以通过手动拖动列头边框来改变宽度。但这种方式并不适用于动态数据变化的情况。为此,我们可以编写代码来动态调整列宽。 1. **编程接口(API)**: - 使用`Get Table ...

    JS手动改变table的宽度

    在网页设计中,JavaScript(JS)是一种常用的客户端脚本语言,用于增强用户的交互体验和动态更新页面内容。本文将深入探讨如何使用JavaScript手动改变HTML表格(table)的宽度,并结合鼠标选中文字查询功能,为用户...

    bootstrap-table-fixed-columns冻结列,并完善排序、列宽和合并行

    `bootstrap-table-fixed-columns.js` 是JavaScript文件,包含了修复和优化的代码逻辑,实现了上述的增强功能。 为了在项目中使用这个优化过的插件,你需要在HTML中引入Bootstrap Table的核心库和这个扩展的CSS和JS...

    js页面表格,能拉动列宽,排序。拉动列宽以后能alert处相应的列宽

    js页面表格,能拉动列宽,排序。拉动列宽以后能alert处相应的列宽

    vue-easytable@2.16.3版本 拖动列 动态改变列宽大小实现

    vue-easytable表格老版本有表格列宽拖功能,但是最新版插件反而不存在该功能,但是大部分表格数据存在...若将ve-table封装以组件形式引用,可全局实现拖动表格列 改变列宽大小效果。如何封装我也会在资源内详细说明。

    table自动宽度拉伸

    通过百分比宽度实现基本的自适应,再利用jQuery插件提供手动调整列宽的功能,可以极大地提升用户的交互体验,尤其在数据密集型的网页应用中。同时,这样的设计也符合现代网页开发的响应式设计理念,确保了在不同设备...

    Table 列宽拖动

    当鼠标在table两列头之间时,鼠标变成双箭头,拖动鼠标可以调节table列的宽度。

Global site tag (gtag.js) - Google Analytics