corrade-nucleus-nucleons – Blame information for rev 20

Subversion Repositories:
Rev:
Rev Author Line No. Line
20 office 1 # Column options []({{ site.repo }}/blob/develop/docs/_i18n/{{ site.lang }}/documentation/column-options.md)
2  
3 ---
4  
5 The column options is defined in `jQuery.fn.bootstrapTable.columnDefaults`.
6  
7 <table class="table"
8 id="c"
9 data-search="true"
10 data-show-toggle="true"
11 data-show-columns="true"
12 data-mobile-responsive="true">
13 <thead>
14 <tr>
15 <th>Name</th>
16 <th>Attribute</th>
17 <th>Type</th>
18 <th>Default</th>
19 <th>Description</th>
20 </tr>
21 </thead>
22 <tbody>
23 <tr>
24 <td>radio</td>
25 <td>data-radio</td>
26 <td>Boolean</td>
27 <td>false</td>
28 <td>True to show a radio. The radio column has fixed width.</td>
29 </tr>
30 <tr>
31 <td>checkbox</td>
32 <td>data-checkbox</td>
33 <td>Boolean</td>
34 <td>false</td>
35 <td>True to show a checkbox. The checkbox column has fixed width.</td>
36 </tr>
37 <tr>
38 <td>field</td>
39 <td>data-field</td>
40 <td>String</td>
41 <td>undefined</td>
42 <td>The column field name.</td>
43 </tr>
44 <tr>
45 <td>title</td>
46 <td>data-title</td>
47 <td>String</td>
48 <td>undefined</td>
49 <td>The column title text.</td>
50 </tr>
51 <tr>
52 <td>titleTooltip</td>
53 <td>data-title-tooltip</td>
54 <td>String</td>
55 <td>undefined</td>
56 <td>The column title tooltip text. This option also support the title HTML attribute.</td>
57 </tr>
58 <tr>
59 <td>class</td>
60 <td>class / data-class</td>
61 <td>String</td>
62 <td>undefined</td>
63 <td>The column class name.</td>
64 </tr>
65 <tr>
66 <td>rowspan</td>
67 <td>rowspan / data-rowspan</td>
68 <td>Number</td>
69 <td>undefined</td>
70 <td>Indicate how many rows a cell should take up.</td>
71 </tr>
72 <tr>
73 <td>colspan</td>
74 <td>colspan / data-colspan</td>
75 <td>Number</td>
76 <td>undefined</td>
77 <td>Indicate how many columns a cell should take up.</td>
78 </tr>
79 <tr>
80 <td>align</td>
81 <td>data-align</td>
82 <td>String</td>
83 <td>undefined</td>
84 <td>Indicate how to align the column data. 'left', 'right', 'center' can be used.</td>
85 </tr>
86 <tr>
87 <td>halign</td>
88 <td>data-halign</td>
89 <td>String</td>
90 <td>undefined</td>
91 <td>Indicate how to align the table header. 'left', 'right', 'center' can be used.</td>
92 </tr>
93 <tr>
94 <td>falign</td>
95 <td>data-falign</td>
96 <td>String</td>
97 <td>undefined</td>
98 <td>Indicate how to align the table footer. 'left', 'right', 'center' can be used.</td>
99 </tr>
100 <tr>
101 <td>valign</td>
102 <td>data-valign</td>
103 <td>String</td>
104 <td>undefined</td>
105 <td>Indicate how to align the cell data. 'top', 'middle', 'bottom' can be used.</td>
106 </tr>
107 <tr>
108 <td>width</td>
109 <td>data-width</td>
110 <td>Number {Pixels or Percentage}</td>
111 <td>undefined</td>
112 <td>The width of column. If not defined, the width will auto expand to fit its contents. Though if the table is left responsive and sized too small this 'width' might be ignored (use min/max-width via class or such then). Also you can add '%' to your number and the bootstrapTable will use the percentage unit, otherwise, leave as number (or add 'px') to make it use pixels.</td>
113 </tr>
114 <tr>
115 <td>sortable</td>
116 <td>data-sortable</td>
117 <td>Boolean</td>
118 <td>false</td>
119 <td>True to allow the column can be sorted.
120 </td>
121 </tr>
122 <tr>
123 <td>order</td>
124 <td>data-order</td>
125 <td>String</td>
126 <td>'asc'</td>
127 <td>The default sort order, can only be 'asc' or 'desc'.</td>
128 </tr>
129 <tr>
130 <td>visible</td>
131 <td>data-visible</td>
132 <td>Boolean</td>
133 <td>true</td>
134 <td>False to hide the columns item.</td>
135 </tr>
136 <tr>
137 <td>cardVisible</td>
138 <td>data-card-visible</td>
139 <td>Boolean</td>
140 <td>true</td>
141 <td>False to hide the columns item in card view state.</td>
142 </tr>
143 <tr>
144 <td>switchable</td>
145 <td>data-switchable</td>
146 <td>Boolean</td>
147 <td>true</td>
148 <td>False to disable the switchable of columns item.</td>
149 </tr>
150 <tr>
151 <td>clickToSelect</td>
152 <td>data-click-to-select</td>
153 <td>Boolean</td>
154 <td>true</td>
155 <td>True to select checkbox or radio when the column is clicked.</td>
156 </tr>
157 <tr>
158 <td>formatter</td>
159 <td>data-formatter</td>
160 <td>Function</td>
161 <td>undefined</td>
162 <td>
163 The context (this) is the column Object. <br>
164 The cell formatter function, take three parameters: <br>
165 value: the field value. <br>
166 row: the row record data.<br>
167 index: the row index.</td>
168 </tr>
169 <tr>
170 <td>footerFormatter</td>
171 <td>data-footer-formatter</td>
172 <td>Function</td>
173 <td>undefined</td>
174 <td>
175 The context (this) is the column Object. <br>
176 The function, take one parameter: <br>
177 data: Array of all the data rows. <br>
178 the function should return a string with the text to show in the footer cell.
179 </tr>
180 <tr>
181 <td>events</td>
182 <td>data-events</td>
183 <td>Object</td>
184 <td>undefined</td>
185 <td>
186 The cell events listener when you use formatter function, take four parameters: <br>
187 event: the jQuery event. <br>
188 value: the field value. <br>
189 row: the row record data.<br>
190 index: the row index. <br>
191 Example code:
192 <code>&lt;th .. data-events="operateEvent"&gt;</code>
193 <code>var operateEvents = {'click .like': function (e, value, row, index) {}};</code>
194 </td>
195 </tr>
196 <tr>
197 <td>sorter</td>
198 <td>data-sorter</td>
199 <td>Function</td>
200 <td>undefined</td>
201 <td>
202 The custom field sort function that used to do local sorting, take two parameters: <br>
203 a: the first field value.<br>
204 b: the second field value.
205 </td>
206 </tr>
207 <tr>
208 <td>sortName</td>
209 <td>data-sort-name</td>
210 <td>String</td>
211 <td>undefined</td>
212 <td>Provide a customizable sort-name, not the default sort-name in the header, or the field name
213 of the column. For example, a column might display the value of fieldName of "html" such as
214 "&lt;b&gt;&lt;span style="color:red"&gt;abc&lt;/span&gt;&lt;/b&gt;", but a fieldName to sort is "content" with the value of "abc".
215 </td>
216 </tr>
217 <tr>
218 <td>cellStyle</td>
219 <td>data-cell-style</td>
220 <td>Function</td>
221 <td>undefined</td>
222 <td>
223 The cell style formatter function, take three parameters: <br>
224 value: the field value.<br>
225 row: the row record data.<br>
226 index: the row index.<br>
227 field: the row field.<br>
228 Support classes or css. Example usage:<br>
229 <pre>
230 function cellStyle(value, row, index, field) {
231 return {
232 classes: 'text-nowrap another-class',
233 css: {"color": "blue", "font-size": "50px"}
234 };
235 }
236 </pre>
237 </td>
238 </tr>
239 <tr>
240 <td>searchable</td>
241 <td>data-searchable</td>
242 <td>Boolean</td>
243 <td>true</td>
244 <td>
245 True to search data for this column.
246 </td>
247 </tr>
248 <tr>
249 <td>searchFormatter</td>
250 <td>data-search-formatter</td>
251 <td>Boolean</td>
252 <td>true</td>
253 <td>
254 True to search use formated data.
255 </td>
256 </tr>
257 <tr>
258 <td>escape</td>
259 <td>data-escape</td>
260 <td>Boolean</td>
261 <td>false</td>
262 <td>
263 Escapes a string for insertion into HTML, replacing &, <, >, ", `, and ' characters.
264 </td>
265 </tr>
266 </tbody>
267 </table>