diff --git a/docs/api.md b/docs/api.md index fb66cde..58884e5 100644 --- a/docs/api.md +++ b/docs/api.md @@ -83,6 +83,7 @@ import 'bee-table/build/Table.css'; | [v2.2.2新增]showRowNum | 展示序号功能，false时不展示，true时展示默认情况，可传入自定义配置信息 | bool / obj:{name: '序号', key: '_index', // 在数据中存储的key值width: 50,base: 0,// 排序的基准值,为数字或者字母type:'number', // 排序类型,默认为number类型,支持单字母排序(type='ascii')} | false | | autoCheckedByClickRows | 设置为 false 时，表格行点击事件，不会自动勾选复选框 | bool | true | +| autoSelect | 树型表格勾选时，是否开启子节点的联动 | bool | false | > 快捷键部分参考示例 (快捷键在table中的简单使用应用) *注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id* @@ -137,11 +138,35 @@ import 'bee-table/build/Table.css'; | [v2.2.2新增]bgColor | 列背景颜色 | string | - | | [v2.2.2新增]titleAlign | 标题对齐方式 | 'left'\|'center'\|'right' | 'left' | | [v2.2.2新增]contentAlign | 内容对齐方式 | 'left'\|'center'\|'right' | 'left' | -| [v2.2.2新增]required | 必填项,列标题展示红色星号 | bool | false | +| [v2.2.2新增]required | 必填项的列标题展示红色星号 | bool | false | +| isShow | 是否展示该列数据 | bool | true | +| cellMenu | 渲染单元格内操作按钮 | object | - | + +#### [v2.2.x新增] cellMenu + +属性的参数说明如下: + +|名称|说明|类型|必填|默认值| +|---|---|---|---|---| +|menu|自定义的操作列表|array|是|[]| +|icon|自定义图标|string/element|否|三圆点图标``| +|iconSize|自定义图标时可能会出现右侧对齐的问题,需要手动调整图标大小|number|否|21| +|trigger|控制下拉菜单的出现方式|'hover'\|'click'|否|'hover'| +|className|下拉菜单的类名|string|否|-| + +其中,menu的配置如下: +|名称|说明|类型|必填|默认值| +|---|---|---|---|---| +|key|每一项需要的唯一的key值|string|true|-| +|text|每一项的标题|string|false|-| +|icon|每一项的图标信息|string/element|false|-| +|callback|点击行后的回调函数|Function(text,record,index)|false|-| #### [v2.2.2新增]fieldType -fieldType属性控制了不同类型数据的渲染方式,其优先级低于render属性。目前，已有`string`,`number`,`currency`,`bool`,`link`,`date`类型，支持自定义配置(`string`类型为默认类型)。 +fieldType属性控制了不同类型数据的渲染方式,其优先级低于render属性。目前，已有`string`,`number`,`currency`,`bool`,`link`,`date`,`select`,`stringChinese`类型，支持自定义配置(`string`类型为默认类型)。 + +- stringChinese类型的渲染同string,在配合高阶组件sort使用时,可支持中文拼音排序 - numberConfig @@ -194,6 +219,15 @@ fieldType属性控制了不同类型数据的渲染方式,其优先级低于rend *需要单独安装[moment.js](http://momentjs.cn/),并将moment对象传入* +- selectConfig + +|名称|说明|类型|必填项|默认值| +|---|---|---|---|---| +|options|下拉的key/value对应关系|object|是|-| +|defaultShow|找不到对应关系时的展示值|string|否|''| + +*无options时按string类型渲染* + ### 高阶函数 Table内部封装了七个高阶组件，接收基础 Table 组件作为输入，输出一个新的复杂 Table 组件。高阶组件让代码更具有复用性、逻辑性与抽象特征。 diff --git a/src/ColumnManager.js b/src/ColumnManager.js index d640cd2..b0c9073 100644 --- a/src/ColumnManager.js +++ b/src/ColumnManager.js @@ -24,12 +24,24 @@ export default class ColumnManager { columns = dragHandleColumn.concat(columns); } columns = this.addOrderColumn(columns,showRowNum); - + columns = this.deleteColumnNotShow(columns); this.columns = columns || this.normalize(elements); this.originWidth = originWidth; } + // delete the column which does not show + deleteColumnNotShow = (columns) => { + let len = columns.length; + for(let i=0; i < len; i++) { + if(columns && columns[i] && columns[i].isShow === false){ + columns.splice(i,1); + i--; + } + } + return columns; + } + // 向数据列中添加一列:序号 addOrderColumn = (columns, showRowNum) => { if(!showRowNum){ @@ -207,6 +219,7 @@ export default class ColumnManager { reset(columns, elements, showRowNum) { columns = this.addOrderColumn(columns,showRowNum); + columns = this.deleteColumnNotShow(columns); this.columns = columns || this.normalize(elements); this._cached = {}; } diff --git a/src/Table.scss b/src/Table.scss index 2a43b26..8db86d1 100644 --- a/src/Table.scss +++ b/src/Table.scss @@ -128,6 +128,31 @@ $icon-color:#505F79; margin: 0; } } + td.u-table-inline-icon{ + position: relative; + padding-right: 24px; + span.u-table-inline-op-icon{ + position: absolute; + right: 0; + .uf{ + display: block; + vertical-align: top; + } + } + span.u-table-inline-op-icon-hover{ + visibility: hidden; + } + } + } + tr.u-table-row-hover{ + td.u-table-inline-icon{ + span.u-table-inline-op-icon-hover{ + visibility: visible; + } + } + } + .u-table-inline-op-icon-hidden{ + visibility: hidden; } tr.tr-row-hover { background: $hover-bg-color-base; @@ -313,6 +338,7 @@ $icon-color:#505F79; } tr.u-table-row-hover{ background:unquote("rgb(#{$table-row-hover-bg-color})"); + } } &-expand-icon { @@ -1091,3 +1117,15 @@ $icon-color:#505F79; border-color: #F44336 !important; } } +.u-dropdown{ + ul.u-table-inline-op-dropdowm{ + li.u-dropdown-menu-item{ + padding: 0 20px 0 10px; + height: 30px; + line-height: 30px; + i.uf{ + font-size: 12px; + } + } + } +} diff --git a/src/TableCell.js b/src/TableCell.js index a0fae66..c645612 100644 --- a/src/TableCell.js +++ b/src/TableCell.js @@ -4,6 +4,9 @@ import objectPath from 'object-path'; import i18n from './lib/i18n'; import { getComponentLocale } from 'bee-locale/build/tool'; import { formatMoney } from './lib/utils'; +import Dropdown from 'bee-dropdown'; +import Menu from 'bee-menus'; +const { Item } = Menu; const propTypes = { record: PropTypes.object, clsPrefix: PropTypes.string, @@ -19,6 +22,9 @@ class TableCell extends Component{ super(props); this.isInvalidRenderCellText = this.isInvalidRenderCellText.bind(this); this.handleClick = this.handleClick.bind(this); + this.state = { + showDropdowm: false + } } isInvalidRenderCellText(text) { return text && !React.isValidElement(text) && @@ -108,13 +114,66 @@ class TableCell extends Component{ ; } - // 渲染时间类型 + // 渲染时间类型-l renderDate = ( data, config={}) => { const { moment, format } = config; if(!moment)return data; return moment(data).format(format || 'YYYY-MM-DD'); } + // 渲染下拉类型，主要为编辑表格铺垫 + renderSelect = ( data, config={}) => { + if(config.options){ + data = config.options[data] || config.defaultShow; + } + return data; + } + + + // 渲染行内菜单 + renderColumnMenu = (colMenu, text, record, index) => { + if (!colMenu) return null; + let { menu, trigger = 'hover', className = '', icon = , iconSize = 21 } = colMenu; + let items = []; + items = menu.map((item) => { + return { this.onClickColMenu(item.callback, text, record, index) }}> + {item.icon} + {item.text} + + }) + if (items.length === 0) return null; + className += ' u-table-inline-op-dropdowm' + let menus = {items}; + let top = `calc(50% - ${iconSize / 2}px)`; + let visibility = this.state.showDropdowm ? 'visible' : ''; + let iconClassName = `u-table-inline-op-icon u-table-inline-op-icon-hover`; + return + {{icon}} + + } + + // 下拉按钮状态改变，点击后保持图标常驻 + changeShowDropdowm = (val) => { + this.setState({ + showDropdowm: val + }) + } + + // 菜单点击事件 + onClickColMenu = (callback, text, record, index) => { + if (callback) { + callback(text, record, index); + } + this.setState({ + showDropdowm: false, + }) + } + render() { const { record, indentSize, clsPrefix, indent, index, expandIcon, column ,fixed,showSum, bodyDisplayInRow,lazyStartIndex,lazyEndIndex} = this.props; @@ -136,6 +195,7 @@ class TableCell extends Component{ } } + let colMenu = this.renderColumnMenu(column.cellMenu, text, record, index); // 根据 fieldType 来渲染数据 if(!render){ switch(column.fieldType){ @@ -173,6 +233,10 @@ class TableCell extends Component{ text = this.renderDate(text, column.dateConfig); break; } + case 'select':{ + text = this.renderSelect(text, column.selectConfig); + break; + } default : { break; } @@ -213,6 +277,9 @@ class TableCell extends Component{ if(expandIcon && expandIcon.props.expandable){ className = className+` ${clsPrefix}-has-expandIcon` } + if(colMenu){ + className += ' u-table-inline-icon' + } return ( {indentText} {expandIcon} {text} + {colMenu} ); }