corrade-nucleus-nucleons – Blame information for rev 24
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
20 | office | 1 | /** |
2 | * @author vincent loh <vincent.ml@gmail.com> |
||
3 | * @version: v1.0.0 |
||
4 | * https://github.com/vinzloh/bootstrap-table/ |
||
5 | * Sticky header for bootstrap-table |
||
6 | */ |
||
7 | |||
8 | (function ($) { |
||
9 | 'use strict'; |
||
10 | |||
11 | var sprintf = $.fn.bootstrapTable.utils.sprintf; |
||
12 | $.extend($.fn.bootstrapTable.defaults, { |
||
13 | stickyHeader: false |
||
14 | }); |
||
15 | |||
16 | var BootstrapTable = $.fn.bootstrapTable.Constructor, |
||
17 | _initHeader = BootstrapTable.prototype.initHeader; |
||
18 | |||
19 | BootstrapTable.prototype.initHeader = function () { |
||
20 | var that = this; |
||
21 | _initHeader.apply(this, Array.prototype.slice.apply(arguments)); |
||
22 | |||
23 | if (!this.options.stickyHeader) { |
||
24 | return; |
||
25 | } |
||
26 | |||
27 | var table = this.$tableBody.find('table'), |
||
28 | table_id = table.attr('id'), |
||
29 | header_id = table.attr('id') + '-sticky-header', |
||
30 | sticky_header_container_id = header_id +'-sticky-header-container', |
||
31 | anchor_begin_id = header_id +'_sticky_anchor_begin', |
||
32 | anchor_end_id = header_id +'_sticky_anchor_end'; |
||
33 | // add begin and end anchors to track table position |
||
34 | |||
35 | table.before(sprintf('<div id="%s" class="hidden"></div>', sticky_header_container_id)); |
||
36 | table.before(sprintf('<div id="%s"></div>', anchor_begin_id)); |
||
37 | table.after(sprintf('<div id="%s"></div>', anchor_end_id)); |
||
38 | |||
39 | table.find('thead').attr('id', header_id); |
||
40 | |||
41 | // clone header just once, to be used as sticky header |
||
42 | // deep clone header. using source header affects tbody>td width |
||
43 | this.$stickyHeader = $($('#'+header_id).clone(true, true)); |
||
44 | // avoid id conflict |
||
45 | this.$stickyHeader.removeAttr('id'); |
||
46 | |||
47 | // render sticky on window scroll or resize |
||
48 | $(window).on('resize.'+table_id, table, render_sticky_header); |
||
49 | $(window).on('scroll.'+table_id, table, render_sticky_header); |
||
50 | // render sticky when table scroll left-right |
||
51 | table.closest('.fixed-table-container').find('.fixed-table-body').on('scroll.'+table_id, table, match_position_x); |
||
52 | |||
53 | this.$el.on('all.bs.table', function (e) { |
||
54 | that.$stickyHeader = $($('#'+header_id).clone(true, true)); |
||
55 | that.$stickyHeader.removeAttr('id'); |
||
56 | }); |
||
57 | |||
58 | function render_sticky_header(event) { |
||
59 | var table = event.data; |
||
60 | var table_header_id = table.find('thead').attr('id'); |
||
61 | // console.log('render_sticky_header for > '+table_header_id); |
||
62 | if (table.length < 1 || $('#'+table_id).length < 1){ |
||
63 | // turn off window listeners |
||
64 | $(window).off('resize.'+table_id); |
||
65 | $(window).off('scroll.'+table_id); |
||
66 | table.closest('.fixed-table-container').find('.fixed-table-body').off('scroll.'+table_id); |
||
67 | return; |
||
68 | } |
||
69 | // get header height |
||
70 | var header_height = '0'; |
||
71 | if (that.options.stickyHeaderOffsetY) header_height = that.options.stickyHeaderOffsetY.replace('px',''); |
||
72 | // window scroll top |
||
73 | var t = $(window).scrollTop(); |
||
74 | // top anchor scroll position, minus header height |
||
75 | var e = $("#"+anchor_begin_id).offset().top - header_height; |
||
76 | // bottom anchor scroll position, minus header height, minus sticky height |
||
77 | var e_end = $("#"+anchor_end_id).offset().top - header_height - $('#'+table_header_id).css('height').replace('px',''); |
||
78 | // show sticky when top anchor touches header, and when bottom anchor not exceeded |
||
79 | if (t > e && t <= e_end) { |
||
80 | // ensure clone and source column widths are the same |
||
81 | $.each( that.$stickyHeader.find('tr').eq(0).find('th'), function (index, item) { |
||
82 | $(item).css('min-width', $('#'+table_header_id+' tr').eq(0).find('th').eq(index).css('width')); |
||
83 | }); |
||
84 | // match bootstrap table style |
||
85 | $("#"+sticky_header_container_id).removeClass('hidden').addClass("fix-sticky fixed-table-container") ; |
||
86 | // stick it in position |
||
87 | $("#"+sticky_header_container_id).css('top', header_height + 'px'); |
||
88 | // create scrollable container for header |
||
89 | var scrollable_div = $('<div style="position:absolute;width:100%;overflow-x:hidden;" />'); |
||
90 | // append cloned header to dom |
||
91 | $("#"+sticky_header_container_id).html(scrollable_div.append(that.$stickyHeader)); |
||
92 | // match clone and source header positions when left-right scroll |
||
93 | match_position_x(event); |
||
94 | } else { |
||
95 | // hide sticky |
||
96 | $("#"+sticky_header_container_id).removeClass("fix-sticky").addClass('hidden'); |
||
97 | } |
||
98 | |||
99 | } |
||
100 | function match_position_x(event){ |
||
101 | var table = event.data; |
||
102 | var table_header_id = table.find('thead').attr('id'); |
||
103 | // match clone and source header positions when left-right scroll |
||
104 | $("#"+sticky_header_container_id).css( |
||
105 | 'width', +table.closest('.fixed-table-body').css('width').replace('px', '') + 1 |
||
106 | ); |
||
107 | $("#"+sticky_header_container_id+" thead").parent().scrollLeft(Math.abs($('#'+table_header_id).position().left)); |
||
108 | } |
||
109 | }; |
||
110 | |||
111 | })(jQuery); |