参考tablegrid和resize两个插件,写到现在的插件,希望多多交流,直接上代码
第一次写插件,大家多多拍砖,我家房子就有望了~~~
说明文档我就不放了,放出来是为了交流和希望有高手指点改进
看懂了的话自然就会用
DEMO没地方放,做了一个给大家下载吧,顺便说一下,列宽的拖动不太顺。还有我只在IE6下测试,FF也OK,其它没试过
哎,上传文件老是出错,到这个地址看demo吧,不能放太长时间的,默认双击事件是关闭的
http://mail.popdiamond.com/webactive/tablegrid/tablegrid.htm
第一次写插件,大家多多拍砖,我家房子就有望了~~~
1/*
22009-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);
22009-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);
说明文档我就不放了,放出来是为了交流和希望有高手指点改进
看懂了的话自然就会用
DEMO没地方放,做了一个给大家下载吧,顺便说一下,列宽的拖动不太顺。还有我只在IE6下测试,FF也OK,其它没试过
哎,上传文件老是出错,到这个地址看demo吧,不能放太长时间的,默认双击事件是关闭的
http://mail.popdiamond.com/webactive/tablegrid/tablegrid.htm