`)
- }
-
+ const tr = Utils.h('tr', {
+ ...attributes,
+ id: Array.isArray(item) ? undefined : item._id,
+ class: style && style.classes || (Array.isArray(item) ? undefined : item._class),
+ style: style && style.css || (Array.isArray(item) ? undefined : item._style),
+ 'data-index': i,
+ 'data-uniqueid': Utils.getItemField(item, this.options.uniqueId, false),
+ 'data-has-detail-view': this.options.detailView &&
+ Utils.calculateObjectValue(null, this.options.detailFilter, [i, item]) ? 'true' : undefined,
+ ...data_
+ })
+ const trChildren = []
let detailViewTemplate = ''
if (Utils.hasDetailViewIcon(this.options)) {
- detailViewTemplate = '
'
+ detailViewTemplate = Utils.h('td')
if (Utils.calculateObjectValue(null, this.options.detailFilter, [i, item])) {
- detailViewTemplate += `
-
- ${Utils.sprintf(this.constants.html.icon, this.options.iconsPrefix, this.options.icons.detailOpen)}
-
- `
+ detailViewTemplate.append(Utils.h('a', {
+ class: 'detail-icon',
+ href: '#',
+ html: Utils.sprintf(this.constants.html.icon, this.options.iconsPrefix, this.options.icons.detailOpen)
+ }))
}
-
- detailViewTemplate += ' | '
}
if (detailViewTemplate && this.options.detailViewAlign !== 'right') {
- html.push(detailViewTemplate)
+ trChildren.push(detailViewTemplate)
}
- this.header.fields.forEach((field, j) => {
+ const tds = this.header.fields.map((field, j) => {
const column = this.columns[j]
- let text = ''
const value_ = Utils.getItemField(item, field, this.options.escape, column.escape)
let value = ''
- let type = ''
- let cellStyle = {}
- let id_ = ''
- let class_ = this.header.classes[j]
- let style_ = ''
- let styleToAdd_ = ''
- let data_ = ''
- let rowspan_ = ''
- let colspan_ = ''
- let title_ = ''
+ const attrs = {
+ style: []
+ }
if ((this.fromHtml || this.autoMergeCells) && typeof value_ === 'undefined') {
if (!column.checkbox && !column.radio) {
@@ -1614,47 +1583,21 @@ class BootstrapTable {
return
}
- // Style concat
- if (csses.concat([this.header.styles[j]]).length) {
- styleToAdd_ += `${csses.concat([this.header.styles[j]]).join('; ')}`
- }
- if (item[`_${field}_style`]) {
- styleToAdd_ += `${item[`_${field}_style`]}`
+ // handle id and class of td
+ for (const item of ['id', 'class', 'rowspan', 'colspan', 'title']) {
+ attrs[item] = item[`_${field}_${item}`] || undefined
}
- if (styleToAdd_) {
- style_ = ` style="${styleToAdd_}"`
- }
- // Style concat
+ attrs.style.push(this.header.styles[j], item[`_${field}_style`])
+ const cellStyle = Utils.calculateObjectValue(this.header,
+ this.header.cellStyles[j], [value_, item, i, field], {})
- // handle id and class of td
- if (item[`_${field}_id`]) {
- id_ = Utils.sprintf(' id="%s"', item[`_${field}_id`])
- }
- if (item[`_${field}_class`]) {
- class_ = Utils.sprintf(' class="%s"', item[`_${field}_class`])
- }
- if (item[`_${field}_rowspan`]) {
- rowspan_ = Utils.sprintf(' rowspan="%s"', item[`_${field}_rowspan`])
- }
- if (item[`_${field}_colspan`]) {
- colspan_ = Utils.sprintf(' colspan="%s"', item[`_${field}_colspan`])
- }
- if (item[`_${field}_title`]) {
- title_ = Utils.sprintf(' title="%s"', item[`_${field}_title`])
- }
- cellStyle = Utils.calculateObjectValue(this.header,
- this.header.cellStyles[j], [value_, item, i, field], cellStyle)
if (cellStyle.classes) {
- class_ = ` class="${cellStyle.classes}"`
+ attrs.class = attrs.class || []
+ attrs.class.push(cellStyle.classes)
}
if (cellStyle.css) {
- const csses_ = []
-
- for (const [key, value] of Object.entries(cellStyle.css)) {
- csses_.push(`${key}: ${value}`)
- }
- style_ = ` style="${csses_.concat(this.header.styles[j]).join('; ')}"`
+ attrs.style.push(cellStyle.css)
}
value = Utils.calculateObjectValue(column,
@@ -1673,7 +1616,7 @@ class BootstrapTable {
) {
let searchText = this.searchText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
- if (this.options.searchAccentNeutralise) {
+ if (this.options.searchAccentNeutralise && typeof value === 'string') {
const indexRegex = new RegExp(`${Utils.normalizeAccent(searchText)}`, 'gmi')
const match = indexRegex.exec(Utils.normalizeAccent(value))
@@ -1694,64 +1637,80 @@ class BootstrapTable {
if (k === 'index') {
return
}
- data_ += ` data-${k}="${v}"`
+ attrs[`data-${k}`] = v
}
}
if (column.checkbox || column.radio) {
- type = column.checkbox ? 'checkbox' : type
- type = column.radio ? 'radio' : type
-
- const c = column['class'] || ''
+ const type = column.checkbox ? 'checkbox' : 'radio'
const isChecked = Utils.isObject(value) && value.hasOwnProperty('checked') ?
value.checked : (value === true || value_) && value !== false
const isDisabled = !column.checkboxEnabled || value && value.disabled
-
- text = [
- this.options.cardView ?
- `
` :
- `
`,
- ``,
- this.header.formatters[j] && typeof value === 'string' ? value : '',
- this.options.cardView ? '' : ' | '
- ].join('')
+ const valueNodes = this.header.formatters[j] && (
+ typeof value === 'string' || value instanceof Node || value instanceof $) ? Utils.htmlToNodes(value) : []
item[this.header.stateField] = value === true || (!!value_ || value && value.checked)
- } else if (this.options.cardView) {
- const cardTitle = this.options.showHeader ?
- `
${Utils.getFieldTitle(this.columns, field)}` : ''
- text = `
${cardTitle}${value}
`
+ return Utils.h(this.options.cardView ? 'div' : 'td', {
+ class: [this.options.cardView ? 'card-view' : 'bs-checkbox', column.class],
+ style: this.options.cardView ? undefined : attrs.style
+ }, [
+ Utils.h('label', {}, [
+ Utils.h('input', {
+ 'data-index': i,
+ name: this.options.selectItemName,
+ type,
+ value: item[this.options.idField],
+ checked: isChecked ? 'checked' : undefined,
+ disabled: isDisabled ? 'disabled' : undefined
+ }),
+ Utils.h('span')
+ ]),
+ ...valueNodes
+ ])
+ }
+ if (this.options.cardView) {
if (this.options.smartDisplay && value === '') {
- text = '
'
+ return Utils.h('div', { class: 'card-view' })
}
- } else {
- text = `
${value}