参考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

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

说明文档我就不放了,放出来是为了交流和希望有高手指点改进
看懂了的话自然就会用
DEMO没地方放,做了一个给大家下载吧,顺便说一下,列宽的拖动不太顺。还有我只在IE6下测试,FF也OK,其它没试过
哎,上传文件老是出错,到这个地址看demo吧,不能放太长时间的,默认双击事件是关闭的
http://mail.popdiamond.com/webactive/tablegrid/tablegrid.htm