参考tablegrid和resize两个插件,写到现在的插件,希望多多交流,直接上代码
第一次写插件,大家多多拍砖,我家房子就有望了~~~
说明文档我就不放了,放出来是为了交流和希望有高手指点改进
看懂了的话自然就会用
DEMO没地方放,做了一个给大家下载吧,顺便说一下,列宽的拖动不太顺。还有我只在IE6下测试,FF也OK,其它没试过
哎,上传文件老是出错,到这个地址看demo吧,不能放太长时间的,默认双击事件是关闭的
http://mail.popdiamond.com/webactive/tablegrid/tablegrid.htm
第一次写插件,大家多多拍砖,我家房子就有望了~~~
1
/*
2
2009-7-3修改
3
作者:Allen
4
版权没有,随便使用
5
参考自tablegrid和tableresizer
6
功能
7
1,奇偶行不同色,鼠标滑过颜色效果,点击高亮
8
2,列宽可拖动
9
3,双击事件,在每行第一列取a的href值
10
*/
11
(function($) {
12
13
$.fn.tablegrid = function(options){
14
$.fn.tablegrid.defaults = {
15
oddColor : '#C4E1FF',
16
evenColor : '#F2F9FD',
17
overColor : '#C7C7E2',
18
selColor : '#336666',
19
useClick : true,
20
useDblClick:false,
21
col_border : "solid 1px #B9B4A1"
22
};
23
var opts = $.extend({}, $.fn.tablegrid.defaults, options);
24
25
//拖动列宽
26
var resize_columns = function(root)
27
{
28
var tbl = root.children("table"); //找到table
29
var tr = tbl.find("tr:first"); //找到第一行
30
var header,newwidth;
31
var resize = false;
32
33
root.width(tbl.width()); //table的宽度
34
tr.children("th").css("border-right",opts.col_border); //给第一行的th加上一个css
35
var left_pos = root.offset().left;
36
37
endresize = function()
38
{
39
if(resize == true && header != null)
40
{
41
document.onselectstart=new Function ("return true");
42
resize = false;
43
root.children("table").css("cursor","");
44
}
45
};
46
47
tbl.mousemove(function(e)
48
{
49
var left = (e.clientX - left_pos);
50
51
if(resize)
52
{
53
var width = left - (header.offset().left - left_pos)
54
- parseInt(header.css("padding-left"))
55
- parseInt(header.css("padding-right"));
56
57
if(width > 1)
58
{
59
var current_width = header.width();
60
if(width > current_width)
61
{
62
var total = root.width() + ((width - header.width()));
63
root.width(total);
64
header.width(width);
65
}
66
else
67
{
68
header.width(width);
69
if(header.width() == width)
70
{
71
var total = root.width() + ((width - current_width));
72
root.width(total);
73
}
74
}
75
newwidth = width;
76
}
77
}
78
else
79
{
80
if(e.target.nodeName == "TH")
81
{
82
var tgt = $(e.target);
83
var dosize = (left-(tgt.offset().left-left_pos)
84
> tgt.width()-4);
85
$(this).css("cursor",dosize?"col-resize":"");
86
}
87
}
88
});
89
90
tbl.mouseup(function(e)
91
{
92
endresize();
93
});
94
95
tbl.bind("mouseleave",function(e)
96
{
97
endresize();
98
return false;
99
});
100
101
tr.mousedown(function(e)
102
{
103
if(e.target.nodeName == "TH"
104
&& $(this).css("cursor") == "col-resize")
105
{
106
header = $(e.target);
107
resize = true;
108
document.onselectstart=new Function ("return false");
109
}
110
return false;
111
});
112
113
tr.bind('mouseleave',function(e)
114
{
115
if(!resize)
116
root.children("table").css("cursor","");
117
});
118
};
119
120
return this.each(function() {
121
var root = $(this).wrap("<div class='roottbl' />").parent();
122
resize_columns(root);
123
124
//奇偶行上色
125
$(this).find('tr:odd > td').css('backgroundColor', opts.oddColor);
126
$(this).find('tr:even > td').css('backgroundColor', opts.evenColor);
127
128
$(this).find('tr').each(function(){
129
//--------------------------------------this为tr------------------------------------------
130
this.origColor = $(this).find('td').css('backgroundColor'); //未点击时的颜色
131
this.clicked = false; //初始状态,设置bool变量clicked,以click事件触发此变量的true or false
132
if (opts.useClick) {
133
$(this).click(function(){ //此处的this是tr
134
if (this.clicked) {
135
$(this).find('td').css('backgroundColor', this.origColor);
136
this.clicked = false;
137
} else {
138
$(this).find('td').css('backgroundColor', opts.selColor);
139
this.clicked = true;
140
}
141
//$(this).find('td > input[@type=checkbox]').attr('checked', this.clicked);
142
});
143
}
144
//鼠标滑过及滑出事件
145
$(this).mouseover(function(){
146
$(this).find('td').css('backgroundColor', opts.overColor);
147
});
148
$(this).mouseout(function(){
149
if (this.clicked) {
150
$(this).find('td').css('backgroundColor', opts.selColor);
151
} else {
152
$(this).find('td').css('backgroundColor', this.origColor);
153
}
154
});
155
156
//双击事件
157
if (opts.useDblClick)
158
{
159
var urls=$(this).children("td:first-child").find("a").attr("href");
160
$(this).dblclick(function(){
161
window.open (urls,'详细情况','height=540,width=1020,top=10,left=10,toolbar=no,menubar=no,scrollbars=yes, resizable=yes,location=no, status=no')
162
});
163
}
164
//--------------------------------------this为tr------------------------------------------
165
});
166
});
167
};
168
})(jQuery);
/*2
2009-7-3修改3
作者:Allen4
版权没有,随便使用5
参考自tablegrid和tableresizer6
功能7
1,奇偶行不同色,鼠标滑过颜色效果,点击高亮8
2,列宽可拖动9
3,双击事件,在每行第一列取a的href值10
*/11
(function($) {12

13
$.fn.tablegrid = function(options){14
$.fn.tablegrid.defaults = {15
oddColor : '#C4E1FF',16
evenColor : '#F2F9FD',17
overColor : '#C7C7E2',18
selColor : '#336666',19
useClick : true,20
useDblClick:false,21
col_border : "solid 1px #B9B4A1"22
};23
var opts = $.extend({}, $.fn.tablegrid.defaults, options);24
25
//拖动列宽26
var resize_columns = function(root)27
{ 28
var tbl = root.children("table"); //找到table29
var tr = tbl.find("tr:first"); //找到第一行30
var header,newwidth;31
var resize = false;32
33
root.width(tbl.width()); //table的宽度34
tr.children("th").css("border-right",opts.col_border); //给第一行的th加上一个css35
var left_pos = root.offset().left;36
37
endresize = function()38
{39
if(resize == true && header != null)40
{41
document.onselectstart=new Function ("return true");42
resize = false;43
root.children("table").css("cursor","");44
} 45
};46
47
tbl.mousemove(function(e)48
{49
var left = (e.clientX - left_pos);50
51
if(resize)52
{53
var width = left - (header.offset().left - left_pos)54
- parseInt(header.css("padding-left"))55
- parseInt(header.css("padding-right"));56
57
if(width > 1)58
{59
var current_width = header.width();60
if(width > current_width)61
{62
var total = root.width() + ((width - header.width()));63
root.width(total);64
header.width(width);65
}66
else67
{68
header.width(width);69
if(header.width() == width)70
{71
var total = root.width() + ((width - current_width));72
root.width(total);73
}74
}75
newwidth = width;76
}77
}78
else79
{80
if(e.target.nodeName == "TH")81
{82
var tgt = $(e.target);83
var dosize = (left-(tgt.offset().left-left_pos) 84
> tgt.width()-4);85
$(this).css("cursor",dosize?"col-resize":"");86
}87
} 88
});89
90
tbl.mouseup(function(e) 91
{92
endresize();93
});94
95
tbl.bind("mouseleave",function(e)96
{97
endresize();98
return false; 99
});100
101
tr.mousedown(function(e) 102
{103
if(e.target.nodeName == "TH" 104
&& $(this).css("cursor") == "col-resize")105
{106
header = $(e.target); 107
resize = true;108
document.onselectstart=new Function ("return false");109
} 110
return false;111
});112
113
tr.bind('mouseleave',function(e)114
{115
if(!resize)116
root.children("table").css("cursor","");117
});118
};119
120
return this.each(function() {121
var root = $(this).wrap("<div class='roottbl' />").parent();122
resize_columns(root);123
124
//奇偶行上色125
$(this).find('tr:odd > td').css('backgroundColor', opts.oddColor);126
$(this).find('tr:even > td').css('backgroundColor', opts.evenColor); 127
128
$(this).find('tr').each(function(){129
//--------------------------------------this为tr------------------------------------------130
this.origColor = $(this).find('td').css('backgroundColor'); //未点击时的颜色131
this.clicked = false; //初始状态,设置bool变量clicked,以click事件触发此变量的true or false132
if (opts.useClick) {133
$(this).click(function(){ //此处的this是tr134
if (this.clicked) {135
$(this).find('td').css('backgroundColor', this.origColor);136
this.clicked = false;137
} else {138
$(this).find('td').css('backgroundColor', opts.selColor);139
this.clicked = true;140
}141
//$(this).find('td > input[@type=checkbox]').attr('checked', this.clicked);142
});143
}144
//鼠标滑过及滑出事件145
$(this).mouseover(function(){146
$(this).find('td').css('backgroundColor', opts.overColor);147
});148
$(this).mouseout(function(){149
if (this.clicked) {150
$(this).find('td').css('backgroundColor', opts.selColor);151
} else {152
$(this).find('td').css('backgroundColor', this.origColor);153
}154
});155
156
//双击事件157
if (opts.useDblClick)158
{159
var urls=$(this).children("td:first-child").find("a").attr("href");160
$(this).dblclick(function(){161
window.open (urls,'详细情况','height=540,width=1020,top=10,left=10,toolbar=no,menubar=no,scrollbars=yes, resizable=yes,location=no, status=no')162
});163
}164
//--------------------------------------this为tr------------------------------------------165
});166
});167
};168
})(jQuery);说明文档我就不放了,放出来是为了交流和希望有高手指点改进
看懂了的话自然就会用
DEMO没地方放,做了一个给大家下载吧,顺便说一下,列宽的拖动不太顺。还有我只在IE6下测试,FF也OK,其它没试过
哎,上传文件老是出错,到这个地址看demo吧,不能放太长时间的,默认双击事件是关闭的
http://mail.popdiamond.com/webactive/tablegrid/tablegrid.htm


$.fn.tablegrid