https://lk.spacenet.ru/lbweb-client/js/grid.js

1$(document).ready(function(){
2    window.App = new function() {
3        this.url = function(url) {
4            return $('meta[name="application-url"]').attr("content") + '/' + url;
5        };
6        this.Tpl = function() {
7            var args = Array.prototype.slice.call(arguments, 0),
8                tpl = args.length == 1 ? args[0] : args.join('');
9            this.render = function(data) {
10                var str = tpl,
11                    i;
12                for ( i in data ) {
13                    str = str.split('{'+i+'}').join(data[i]);
14                }
15                return str;
16            };
17        };
18        this.Grid = function(container) {
19            var renderers = {},
20                head = new App.Tpl('<th class="{cls}">{value}</th>'),
21                cell = new App.Tpl('<td data-label="{datalabel}" class="{cls}">{value}</td>'),
22                row = new App.Tpl('<tr class="{id} {cls}">{cells}</tr>'),
23                empty = new App.Tpl('<tr class="panel-grid-row-odd"><td class="col-empty" colspan="{colspan}">{message}</td></tr>'),
24                page = new App.Tpl(
25                    '<li class="page{page_selected}">',
26                        '<a class="vgroups-pager-link vgroups-pager-link-page">{page_number}</a>',
27                    '</li>'
28                ),
29                pager = new App.Tpl(
30                    '<div class="pager">',
31                        '<ul class="yiiPager">',
32                            '<li class="first{first_hidden}">',
33                                '<a class="vgroups-pager-link vgroups-pager-link-first">&lt;&lt;</a>',
34                            '</li>',
35                            '<li class="previous{previous_hidden}">',
36                                '<a class="vgroups-pager-link vgroups-pager-link-previous">&lt;</a>',
37                            '</li>',
38                            '{pages}',
39                            '<li class="next{next_hidden}">',
40                                '<a class="vgroups-pager-link vgroups-pager-link-next">&gt;</a>',
41                            '</li>',
42                            '<li class="last{last_hidden}">',
43                                '<a class="vgroups-pager-link vgroups-pager-link-last">&gt;&gt;</a>',
44                            '</li>',
45                        '</ul>',
46                    '</div>'
47                ),
48                title = new App.Tpl('<h4>{title}</h4>'),
49                table = new App.Tpl('<table class="panel panel-grid grid-inner"><thead>{head}</thead><tbody>{body}</tbody></table>{pager}'),
50                hidden = true,
51                pagerData,
52                pagesData,
53                loadHandler = { callback: function() {}, scope: {} },
54                img = new App.Tpl('<img src="{src}" />');
55            this.getContainer = function() {
56                return container;
57            };
58            this.isHidden = function() {
59                return hidden;
60            };
61            this.show = function() {
62                container.removeClass('panel-grid-cell-collapsed');
63                container.addClass('panel-grid-cell-expanded');
64                hidden = false;
65            };
66            this.hide = function() {
67                container.removeClass('panel-grid-cell-expanded');
68                container.addClass('panel-grid-cell-collapsed');
69                container.html('');
70                hidden = true;
71            };
72            this.hide();
73            this.bindLoadHandler = function(callback, scope) {
74                callback = callback || function() {},
75                scope = scope || {};
76                loadHandler = { callback: callback, scope: scope }
77            };
78            this.loadingIcon = function() {
79                return img.render({ src: App.url("i/ajax-loader.gif") });
80            };
81            this.load = function(url, callback, scope, data) {
82                if ( this.loading ) { return; }
83                if (!url || url == '') { return; }
84                var me = this,
85                    callback = callback || function() {},
86                    scope = scope || {};
87                this.show();
88                container.html( this.loadingIcon() );
89                this.loading = true;
90
91                if(!data) {
92                    data = {'YII_CSRF_TOKEN' : $('.show-vgroups').attr('crf')};
93                }
94                $.post(url, data, function(data) {
95                    data = $.parseJSON(data);
96                    if (data.unauthorized) { window.location.reload(); return; }
97                    container.html( me.render(data) );
98                    callback.call(scope);
99                    loadHandler.callback.call(loadHandler.scope);
100                    me.setPagerEventHandlers();
101                    me.loading = false;

102                });
103            };
104            this.setPagerEventHandlers = function() {
105                var me = this,
106                    i,
107                    pages;
108                if (!pagerData || !pagesData) { return; }
109                container.find('.vgroups-pager-link-first').click(function() {me.visitFirst();});
110                container.find('.vgroups-pager-link-previous').click(function() {me.visitPrevious();});
111                container.find('.vgroups-pager-link-next').click(function() {me.visitNext();});
112                container.find('.vgroups-pager-link-last').click(function() {me.visitLast();});
113                pages = container.find('.vgroups-pager-link-page');
114                for ( i = 0; i < pages.length; i ++ ) {
115                    this.bindPageClickHandler(pages, i);
116                }
117            };
118            this.bindPageClickHandler = function(pages, i) {
119                var me = this;
120                $(pages[i]).click(function() {me.visitPage(i)});
121            };
122            this.visitPage = function(i) {
123                this.load( pagesData[i].page_href );
124            };
125            this.visitLast = function() {
126                this.load( pagerData.last_href );
127            };
128            this.visitNext = function() {
129                this.load( pagerData.next_href );
130            };
131            this.visitFirst = function() {
132                this.load( pagerData.first_href );
133            };
134            this.visitPrevious = function() {
135                this.load( pagerData.previous_href );
136            };
137            this.head = function(data) {
138                return row.render({ id: 'grid-head-row', cls: 'grid-head', cells: this.row(data, head, 0, data) })
139            };
140            this.empty = function(data) {
141                return empty.render({ message: data.empty, colspan: data.head.length });
142            };
143            this.body = function( data ) {
144                var rows = '',
145                    i,
146                    odd = true,
147                    id;
148                if (data.body.length == 0) { return this.empty(data); }
149                datalabel = data.head;
150                data = data.body;
151                for ( i = 0; i < data.length; i ++ ) {
152                    id = 'vgroups-grid-row-' + i;
153                    rows = rows + row.render({ id: id, cls: (odd ? 'panel-grid-row-odd' : ''), cells: this.row(data[i], cell, id, datalabel) });
154                    odd = !odd;
155                }
156                return rows;
157            };
158            this.addColumnRenderer = function( prop, renderer ) {
159                renderers[prop] = renderer;
160            };
161            this.row = function(data, tpl, id, datalabel) {
162                var i,
163                    row = '',
164                    k=0,
165                    first = true;
166                for ( i in data ) {
167                    row = row + tpl.render({ datalabel: datalabel[k], cls: (first ? 'first_col' : ''), value: (i in renderers) ? renderers[i](data[i], id) : data[i] });
168                    k++;
169                    first = false;
170                }
171                return row;
172            };
173            this.render = function(data) {
174                var html = table.render({ head: this.head(data.head), body: this.body(data), pager: this.getPager(data.pager) });
175                if (data.title) { html = title.render({ title: data.title }) + html; }
176                return html;
177            };
178            this.getPager = function(data) {
179                var i,
180                    pages;
181                if (!data) { return ''; }
182                pagerData = data;
183                pagesData = data.pages;
184                data.pages = this.getPages(data.pages);
185                return pager.render(data);
186            };
187            this.getPages = function(data) {
188                var pages = '',
189                    i;
190                for (i = 0; i < data.length; i ++) {
191                    if (data[i].next) {
192                        data[i].page_number = '...';
193                    }
194                    pages = pages + page.render(data[i]);
195                }
196                return pages;
197            };
198        };
199    };
200});