|
74 | 74 | return flag ? str : '' |
75 | 75 | }, |
76 | 76 |
|
77 | | - getPropertyFromOther (list, from, to, value) { |
78 | | - for (let item in list) { |
79 | | - if (item[from] === value) { |
80 | | - return item[to] |
| 77 | + getFieldTitle (list, value) { |
| 78 | + for (let item of list) { |
| 79 | + if (item.field === value) { |
| 80 | + return item.title |
81 | 81 | } |
82 | 82 | } |
83 | 83 | return '' |
|
1638 | 1638 |
|
1639 | 1639 | if (attributes) { |
1640 | 1640 | for (key in attributes) { |
1641 | | - htmlAttributes.push(Utils.sprintf('%s="%s"', key, Utils.escapeHTML(attributes[key]))) |
| 1641 | + htmlAttributes.push(`${key}="${Utils.escapeHTML(attributes[key])}"`) |
1642 | 1642 | } |
1643 | 1643 | } |
1644 | 1644 |
|
|
1648 | 1648 | if (k === 'index') { |
1649 | 1649 | return |
1650 | 1650 | } |
1651 | | - data_ += Utils.sprintf(' data-%s="%s"', k, v) |
| 1651 | + data_ += ` data-${k}="${v}"` |
1652 | 1652 | }) |
1653 | 1653 | } |
1654 | 1654 |
|
1655 | 1655 | html.push('<tr', |
1656 | 1656 | Utils.sprintf(' %s', htmlAttributes.length ? htmlAttributes.join(' ') : undefined), |
1657 | 1657 | Utils.sprintf(' id="%s"', $.isArray(item) ? undefined : item._id), |
1658 | 1658 | Utils.sprintf(' class="%s"', style.classes || ($.isArray(item) ? undefined : item._class)), |
1659 | | - Utils.sprintf(' data-index="%s"', i), |
| 1659 | + ` data-index="${i}"`, |
1660 | 1660 | Utils.sprintf(' data-uniqueid="%s"', item[this.options.uniqueId]), |
1661 | 1661 | Utils.sprintf('%s', data_), |
1662 | 1662 | '>' |
|
1672 | 1672 | if (Utils.calculateObjectValue(null, this.options.detailFilter, [i, item])) { |
1673 | 1673 | html.push(` |
1674 | 1674 | <a class="detail-icon" href="#"> |
1675 | | - <i class="${this.options.iconsPrefix} ${this.options.icons.detailOpen}"></i>, |
| 1675 | + <i class="${this.options.iconsPrefix} ${this.options.icons.detailOpen}"></i> |
1676 | 1676 | </a> |
1677 | 1677 | `) |
1678 | 1678 | } |
|
1688 | 1688 | let cellStyle = {} |
1689 | 1689 | let id_ = '' |
1690 | 1690 | let class_ = this.header.classes[j] |
| 1691 | + let style_ = '' |
1691 | 1692 | let data_ = '' |
1692 | 1693 | let rowspan_ = '' |
1693 | 1694 | let colspan_ = '' |
|
1712 | 1713 | value_ = Utils.escapeHTML(value_) |
1713 | 1714 | } |
1714 | 1715 |
|
1715 | | - style = Utils.sprintf('style="%s"', csses.concat(this.header.styles[j]).join('; ')) |
1716 | | - |
| 1716 | + if (csses.concat([this.header.styles[j]]).length) { |
| 1717 | + style_ = ` style="${csses.concat([this.header.styles[j]]).join('; ')}"` |
| 1718 | + } |
1717 | 1719 | // handle td's id and class |
1718 | 1720 | if (item[`_${field}_id`]) { |
1719 | 1721 | id_ = Utils.sprintf(' id="%s"', item[`_${field}_id`]) |
|
1733 | 1735 | cellStyle = Utils.calculateObjectValue(this.header, |
1734 | 1736 | this.header.cellStyles[j], [value_, item, i, field], cellStyle) |
1735 | 1737 | if (cellStyle.classes) { |
1736 | | - class_ = Utils.sprintf(' class="%s"', cellStyle.classes) |
| 1738 | + class_ = ` class="${cellStyle.classes}"` |
1737 | 1739 | } |
1738 | 1740 | if (cellStyle.css) { |
1739 | 1741 | const csses_ = [] |
1740 | 1742 | for (const key in cellStyle.css) { |
1741 | 1743 | csses_.push(`${key}: ${cellStyle.css[key]}`) |
1742 | 1744 | } |
1743 | | - style = Utils.sprintf('style="%s"', csses_.concat(this.header.styles[j]).join('; ')) |
| 1745 | + style_ = ` style="${csses_.concat(this.header.styles[j]).join('; ')}"` |
1744 | 1746 | } |
1745 | 1747 |
|
1746 | 1748 | value = Utils.calculateObjectValue(column, |
|
1752 | 1754 | if (k === 'index') { |
1753 | 1755 | return |
1754 | 1756 | } |
1755 | | - data_ += Utils.sprintf(' data-%s="%s"', k, v) |
| 1757 | + data_ += ` data-${k}="${v}"` |
1756 | 1758 | }) |
1757 | 1759 | } |
1758 | 1760 |
|
1759 | 1761 | if (column.checkbox || column.radio) { |
1760 | 1762 | type = column.checkbox ? 'checkbox' : type |
1761 | 1763 | type = column.radio ? 'radio' : type |
1762 | 1764 |
|
| 1765 | + const c = column['class'] || '' |
1763 | 1766 | text = [ |
1764 | | - Utils.sprintf( |
1765 | | - this.options.cardView ? '<div class="card-view %s">' : '<td class="bs-checkbox %s">', |
1766 | | - column['class'] || '') |
1767 | | - ] |
1768 | | - text.push(` |
1769 | | - <input |
1770 | | - ${Utils.sprintf(' data-index="%s"', i)} |
1771 | | - ${Utils.sprintf(' name="%s"', this.options.selectItemName)} |
1772 | | - ${Utils.sprintf(' type="%s"', type)} |
1773 | | - ${Utils.sprintf(' value="%s"', item[this.options.idField])} |
1774 | | - ${Utils.sprintf(' checked="%s"', value === true || (value_ || (value && value.checked)) ? 'checked' : undefined)} |
1775 | | - ${Utils.sprintf(' disabled="%s"', !column.checkboxEnabled || (value && value.disabled) ? 'disabled' : undefined)} /> |
1776 | | - `) |
1777 | | - text.push(this.header.formatters[j] && typeof value === 'string' ? value : '') |
1778 | | - text.push(this.options.cardView ? '</div>' : '</td>') |
| 1767 | + this.options.cardView |
| 1768 | + ? `<div class="card-view ${c}">` |
| 1769 | + : `<td class="bs-checkbox ${c}">`, |
| 1770 | + `<input |
| 1771 | + data-index="${i}" |
| 1772 | + name="${this.options.selectItemName}" |
| 1773 | + type="${type}" |
| 1774 | + value="${item[this.options.idField]}" |
| 1775 | + ${value === true || (value_ || (value && value.checked)) ? 'checked="checked"' : ''} |
| 1776 | + ${!column.checkboxEnabled || (value && value.disabled) ? 'disabled="disabled"' : ''} />`, |
| 1777 | + this.header.formatters[j] && typeof value === 'string' ? value : '', |
| 1778 | + this.options.cardView ? '</div>' : '</td>' |
| 1779 | + ].join('') |
1779 | 1780 |
|
1780 | 1781 | item[this.header.stateField] = value === true || (!!value_ || (value && value.checked)) |
1781 | 1782 | } else { |
1782 | 1783 | value = typeof value === 'undefined' || value === null |
1783 | 1784 | ? this.options.undefinedText : value |
1784 | 1785 |
|
1785 | | - text = this.options.cardView ? [ |
1786 | | - '<div class="card-view">', |
1787 | | - this.options.showHeader ? Utils.sprintf('<span class="title" %s>%s</span>', style, Utils.getPropertyFromOther(this.columns, 'field', 'title', field)) : '', |
1788 | | - Utils.sprintf('<span class="value">%s</span>', value), |
1789 | | - '</div>' |
1790 | | - ].join('') : [Utils.sprintf('<td%s %s %s %s %s %s %s>', |
1791 | | - id_, class_, style, data_, rowspan_, colspan_, title_), |
1792 | | - value, |
1793 | | - '</td>' |
1794 | | - ].join('') |
| 1786 | + if (this.options.cardView) { |
| 1787 | + const cardTitle = this.options.showHeader |
| 1788 | + ? `<span class="title"${style}>${Utils.getFieldTitle(this.columns, field)}</span>` : '' |
1795 | 1789 |
|
1796 | | - // Hide empty data on Card view when smartDisplay is set to true. |
1797 | | - if (this.options.cardView && this.options.smartDisplay && value === '') { |
1798 | | - // Should set a placeholder for event binding correct fieldIndex |
1799 | | - text = '<div class="card-view"></div>' |
| 1790 | + text = `<div class="card-view">${cardTitle}<span class="value">${value}</span></div>` |
| 1791 | + |
| 1792 | + if (this.options.smartDisplay && value === '') { |
| 1793 | + text = '<div class="card-view"></div>' |
| 1794 | + } |
| 1795 | + } else { |
| 1796 | + text = `<td${id_}${class_}${style_}${data_}${rowspan_}${colspan_}${title_}>${value}</td>` |
1800 | 1797 | } |
1801 | 1798 | } |
1802 | 1799 |
|
|
1952 | 1949 | } |
1953 | 1950 |
|
1954 | 1951 | for (const key in events) { |
1955 | | - this.$body.find('>tr:not(.no-records-found)').each(function () { |
1956 | | - const $tr = $(this) |
| 1952 | + this.$body.find('>tr:not(.no-records-found)').each(e => { |
| 1953 | + const $tr = $(e.currentTarget) |
1957 | 1954 | const $td = $tr.find(this.options.cardView ? '.card-view' : 'td').eq(fieldIndex) |
1958 | 1955 | const index = key.indexOf(' ') |
1959 | 1956 | const name = key.substring(0, index) |
|
2309 | 2306 |
|
2310 | 2307 | $footerTd = this.$tableFooter.find('td') |
2311 | 2308 |
|
2312 | | - this.$body.find('>tr:first-child:not(.no-records-found) > *').each(function (i) { |
2313 | | - const $this = $(this) |
| 2309 | + this.$body.find('>tr:first-child:not(.no-records-found) > *').each((i, el) => { |
| 2310 | + const $this = $(el) |
2314 | 2311 |
|
2315 | 2312 | $footerTd.eq(i).find('.fht-cell').width($this.innerWidth()) |
2316 | 2313 | }) |
|
0 commit comments