', this.header.fields.length));
243 | }
244 |
245 | if (!this.options.cardView && this.options.detailView) {
246 | html.push('
',
247 | '',
248 | sprintf('', this.options.iconsPrefix, this.options.icons.detailOpen),
249 | '',
250 | ' | ');
251 | }
252 |
253 | $.each(this.header.fields, function(j, field) {
254 | var text = '',
255 | value_ = getItemField(item, field, that.options.escape),
256 | value = '',
257 | type = '',
258 | cellStyle = {},
259 | id_ = '',
260 | class_ = that.header.classes[j],
261 | data_ = '',
262 | rowspan_ = '',
263 | colspan_ = '',
264 | title_ = '',
265 | column = that.columns[j];
266 |
267 | if (that.fromHtml && typeof value_ === 'undefined') {
268 | return;
269 | }
270 |
271 | if (!column.visible) {
272 | return;
273 | }
274 |
275 | if (that.options.cardView && (!column.cardVisible)) {
276 | return;
277 | }
278 |
279 | if (column.escape) {
280 | value_ = escapeHTML(value_);
281 | }
282 |
283 | style = sprintf('style="%s"', csses.concat(that.header.styles[j]).join('; '));
284 |
285 | // handle td's id and class
286 | if (item['_' + field + '_id']) {
287 | id_ = sprintf(' id="%s"', item['_' + field + '_id']);
288 | }
289 | if (item['_' + field + '_class']) {
290 | class_ = sprintf(' class="%s"', item['_' + field + '_class']);
291 | }
292 | if (item['_' + field + '_rowspan']) {
293 | rowspan_ = sprintf(' rowspan="%s"', item['_' + field + '_rowspan']);
294 | }
295 | if (item['_' + field + '_colspan']) {
296 | colspan_ = sprintf(' colspan="%s"', item['_' + field + '_colspan']);
297 | }
298 | if (item['_' + field + '_title']) {
299 | title_ = sprintf(' title="%s"', item['_' + field + '_title']);
300 | }
301 | cellStyle = calculateObjectValue(that.header,
302 | that.header.cellStyles[j], [value_, item, i, field], cellStyle);
303 | if (cellStyle.classes) {
304 | class_ = sprintf(' class="%s"', cellStyle.classes);
305 | }
306 | if (cellStyle.css) {
307 | var csses_ = [];
308 | for (var key in cellStyle.css) {
309 | csses_.push(key + ': ' + cellStyle.css[key]);
310 | }
311 | style = sprintf('style="%s"', csses_.concat(that.header.styles[j]).join('; '));
312 | }
313 |
314 | value = calculateObjectValue(column,
315 | that.header.formatters[j], [value_, item, i], value_);
316 |
317 | if (item['_' + field + '_data'] && !$.isEmptyObject(item['_' + field + '_data'])) {
318 | $.each(item['_' + field + '_data'], function(k, v) {
319 | // ignore data-index
320 | if (k === 'index') {
321 | return;
322 | }
323 | data_ += sprintf(' data-%s="%s"', k, v);
324 | });
325 | }
326 |
327 | if (column.checkbox || column.radio) {
328 | type = column.checkbox ? 'checkbox' : type;
329 | type = column.radio ? 'radio' : type;
330 |
331 | text = [sprintf(that.options.cardView ?
332 | '
' : '
', column['class'] || ''),
333 | '',
344 | that.header.formatters[j] && typeof value === 'string' ? value : '',
345 | that.options.cardView ? '' : ' | '
346 | ].join('');
347 |
348 | item[that.header.stateField] = value === true || (value && value.checked);
349 | } else {
350 | value = typeof value === 'undefined' || value === null ?
351 | that.options.undefinedText : value;
352 | //渲染tree展开图标,下面text中添加了indent和icon。
353 | var indent, icon;
354 | if (that.options.treeView && column.field == that.options.treeField) {
355 | var indent = item.level == that.options.treeRootLevel ? '' : sprintf('
', (item.level - that.options.treeRootLevel) * 15);
356 | var child = $.grep(data, function (d, i) {
357 | return d.parentId == item[that.options.treeId] && !d.hidden;
358 | });
359 | icon = sprintf('
', child.length > 0 ? that.options.expandIcon : that.options.collapseIcon);
360 | if(item.isLeaf){
361 | icon = sprintf('
', that.options.leafIcon);
362 | }
363 | }
364 | //end
365 | text = that.options.cardView ? ['
',
366 | that.options.showHeader ? sprintf('%s', style,
367 | getPropertyFromOther(that.columns, 'field', 'title', field)) : '',
368 | sprintf('%s', value),
369 | '
'
370 | ].join('') : [sprintf('
',
371 | id_, class_, style, data_, rowspan_, colspan_, title_),
372 | indent,icon,
373 | value,
374 | ' | '
375 | ].join('');
376 |
377 | // Hide empty data on Card view when smartDisplay is set to true.
378 | if (that.options.cardView && that.options.smartDisplay && value === '') {
379 | // Should set a placeholder for event binding correct fieldIndex
380 | text = '
';
381 | }
382 | }
383 |
384 | html.push(text);
385 | });
386 |
387 | if (this.options.cardView) {
388 | html.push('