liuxiaolong
2019-05-09 0d1d88cdb668e75ea8609417ac18ae19947e9525
1
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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<section>
    <h1 class="blue" data-id="#plugins/tables"><i class="ace-icon fa fa-table grey"></i> Tables & Grids</h1>
 
    <div class="hr hr-double hr32"></div>
 
    <!-- #section:plugins/tables -->
    <div class="help-content">
        <h3 class="info-title smaller" data-id="#plugins/tables.datatables">dataTables</h3>
        <!-- #section:plugins/tables.datatables -->
        <div class="info-section">
         <ul class="info-list list-unstyled">
            <li>
                dataTables is a table plugin with many options and free or premium addons.
                <br />
                For more details see plugin's page: <a href="http://datatables.net/">datatables.net</a>
            </li>
            
            <li>
                To use it, you should include:
                <br />
                <code>assets/js/dataTables/jquery.dataTables.js</code>
                <br />
                <code>assets/js/dataTables/jquery.dataTables.bootstrap.js</code>
            </li>
            
            <li>
                To enable or disable pagination buttons such as 'next', 'prev', 'last' and 'first',
                you should edit <code>assets/js/dataTables/jquery.dataTables.bootstrap.js</code>
                and modify the part that says <span class="green">//Pagination Buttons</span>
            </li>
            
            <li>
                A basic example is as follows:
<pre data-language="javascript">
var myTable = 
 $('#my-table')
 .dataTable({
    /**
    sScrollY: "200px",//enable vertical scrolling
    sScrollX: "100%",
    sScrollXInner: "120%",//enable horizintal scrolling with its content 120% of its container
    bScrollCollapse: true,
    */
 
    bAutoWidth: false,//for better responsiveness
    aoColumns": [
      { "bSortable": false },
      null, null,null, null, null,
      { "bSortable": false }
    ]
 })
</pre>
                <code>aoColumns</code> is an array containing info and options for each table column
                and its element count should match the number of columns.
                <br />
                For more information about <code>aoColumns</code> and other options, please see the plugin's page.
            </li>
 
            
            <li>
                If you want to apply horizontal scrolling (sScrollX) on a bordered table (<code>.table-bordered</code>)
                you can wrap the table inside a <code>.dataTables_borderWrap</code> element first:
<pre data-language="javascript">
var myTable = 
 $('#my-table')
 .wrap("&lt;div class='dataTables_borderWrap' /&gt;")
 .dataTable({
    //options
 });
</pre>
            </li>
            
            <li>
                "buttons" and "select" extensions are also included.
                <br />
                To use "buttons" you should include the following files:
                <br />
                <code>assets/js/dataTables/extensions/buttons/dataTables.buttons.js</code>
                <br />
                <code>assets/js/dataTables/extensions/buttons/buttons.print.js</code> (for print button)
                <br />
                <code>assets/js/dataTables/extensions/buttons/buttons.html5.js</code> (for html5 buttons)
                <br />
                <code>assets/js/dataTables/extensions/buttons/buttons.flash.js</code> (for flash buttons)
                <br />
                <code>assets/js/dataTables/extensions/buttons/buttons.colVis.js</code>(for column visibility button)
                <br />
                <br />
                To use "select" you should include the following file:
                <br />
                <code>assets/js/dataTables/extensions/select/dataTables.select.js</code>
            </li>
            
            <li>
                If you want "html5" buttons to export table data to "PDF" or "Excel", you need extra plugins.
                <br />
                Please see <a href="https://datatables.net/extensions/buttons/examples/html5/simple.html" target="_blank">https://datatables.net/extensions/buttons/examples/html5/simple.html</a> for more info.
            </li>
            
            <li>
                For an example please see:
                <code data-open-file="javascript" class="open-file"><span class="brief-show">mustache/app/views/assets/scripts/</span>tables.js</code>
                <br />
                Note the changes dynamically done to make the extensions styling look like Ace.
            </li>
 
         </ul>
        </div>
        <!-- /section:plugins/tables.datatables -->
 
 
        <h3 class="info-title smaller" data-id="#plugins/tables.jqgrid">jqGrid</h3>
        <!-- #section:plugins/tables.jqgrid -->
        <div class="info-section">
         <ul class="info-list list-unstyled">
            <li>
                jqGrid is a table and grid plugin with advanced functionality and many different options
                <br />
                Please make sure you see its page, examples and documentation at:
                <a href="http://www.trirand.com">www.trirand.com</a>
            </li>
            
            <li>
                You can also a build a custom version depending on your needs:
                <a href="http://www.trirand.com/blog/?page_id=6">http://www.trirand.com/blog/?page_id=6</a>
            </li>
            
            <li>
                To use it, you should include:
                <br />
                <code>assets/css/ui.jqgrid.css</code>
                <br />
                <code>assets/js/jqGrid/jquery.jqGrid.src.js</code>
            </li>
            
            <li>            
                Please note that in our demo example,
                data source is a local static table but you can retrieve data dynamically from server:
                <br />
                <code data-open-file="javascript" class="open-file"><span class="brief-show">mustache/app/views/assets/scripts/</span>jqgrid.js</code>
            </li>
            
            <li>
                jqGrid has many options and you can choose a different icon for different buttons, etc.
                <br />
                But sometimes you need to dynamically style buttons, icons, checkboxes using Javascript
                for example when search dialog is displayed.
            </li>
            
            <li>
                If you want to style checkboxes dynamically using Javascript, please note that you shouldn't 
                wrap them inside <code>label</code> or jqGrid plugin will not send your data to server properly:
<pre data-language="javascript">
 //inside colModel we have a checkbox
 /**{name: 'stock', index: 'stock', width:70, editable: true, edittype: 'checkbox',
   editoptions: {value:"Yes:No"}, unformat: aceSwitch},*/
 //aceSwitch is the function which styles the checkbox  
 
 function aceSwitch( cellvalue, options, cell ) {
    setTimeout(function(){
        $(cell) .find('input[type=checkbox]')
          .addClass('ace ace-switch ace-switch-5')
          .after('&lt;span class="lbl">&lt;/span>');
    }, 0);
 }
</pre>
            </li>
            
            <li>
                To make the grid responsive, you can use the following code:
<pre data-language="javascript">
 var parent_column = $(grid_selector).closest('[class*="col-"]');
 $(window).on('resize.jqGrid', function () {
     $(grid_selector).jqGrid( 'setGridWidth', $(".page-content").width() );
 })
 //optional: resize on sidebar collapse/expand and container fixed/unfixed
 $(document).on('settings.ace.jqGrid' , function(ev, event_name, collapsed) {
    if( event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed' ) {
       $(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
    }
 })
</pre>
            </li>
         </ul>
        </div>
        <!-- /section:plugins/tables.jqgrid -->
 
    </div>
    <!-- /section:plugins/tables -->
</section>