diff --git a/docs/api.md b/docs/api.md index 52b4dd5..d2b2fd0 100644 --- a/docs/api.md +++ b/docs/api.md @@ -106,11 +106,266 @@ import 'bee-table/build/Table.css'; | onTableKeyDown | 触发table的所有快捷键 | function| - | tabIndex | 设置焦点顺序 | number | 0 -{% include "mixin.md"%} +## mixin + +Table拓展功能方法。注：拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然在操作state会导致功能出现异常 + +## 如何引用 +需要单独的去引用相应的js文件，目录在lib文件夹，示例如下： + +```js +import multiSelect from "tinper-bee/lib/multiSelect.js"; +``` + +### multiSelect + + 选中功能组件 + + + +#### multiSelect 废弃部分的API + +| 参数 | 说明 | 类型 | 默认值 | +| ------------------- | -------------------------- | -------- | -------- | +| multiSelect | 全选功能的配置对象，属性参见下面 | obj | {} | +| multiSelect.type | 全选功能的类型，多选或单选（暂时只支持多选） | string | checkbox | +| multiSelect.param | 通过设置该参数来设计获取的数据数组，默认返还所有数据 | string | '' | +| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 | +| selectDisabled | 设置某一行数据无法被选中，使用类似于rowClassName | Function(record, index):bool | 无 | +| selectedRow | 设置某一行数据是否被选中，使用类似于rowClassName | Function(record, index):bool | 无 | + + + +#### multiSelect 新增API + +data 数据中新增参数 + +| 参数 | 说明 | 类型 | 默认值 | +| ------------------- | -------------------------- | -------- | -------- | +| _checked | 设置当前数据是否选中 | boolean | true/false | +| _disabled | 禁用当前选中数据 | boolean | true/false +| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 | -{% include "rendertype.md"%} +#### 使用 + +```js +import multiSelect from "tinper-bee/lib/multiSelect.js"; +import { Table, Checkbox } from 'tinper-bee'; + +const MultiSelectTable = multiSelect(Table, Checkbox); + +``` + +### sort + +排序功能 + +#### Column新增参数 + +| 参数 | 说明 | 类型 | 默认值 | +| ------ | ---------- | -------- | ---- | +| sorter | 排序函数，可以自定义 | Function | 无 | +| sorterClick | 排序钩子函数| Function | (coloum,type) | + +#### 使用 + +```js +import sort from "tinper-bee/lib/sort.js"; +import { Table, Icon } from 'tinper-bee'; + +const SortTable = sort(Table, Icon); + +``` + +### sum + +合计功能 + +#### Column新增参数 + +| 参数 | 说明 | 类型 | 默认值 | +| ------ | ---------- | -------- | ---- | +| sumCol | 该列设置为合计列，合计行中会显示合计数据 | boolean | false | + +#### 使用 + +```js +import sum from "tinper-bee/lib/sum.js"; +import { Table } from 'tinper-bee'; + +const SumTable = sum(Table); + +``` + +### dragColumn + +拖拽列功能 + +#### dragColumn新增参数 + +| 参数 | 说明 | 类型 | 默认值 | +| ------ | ---------- | -------- | ---- | +| dragborder | 拖拽调整列宽度 | boolean | false | +| draggable | 拖拽交换列 | boolean | false | +| onDrop | 拖拽释放回调函数(交换列) | function | () => {} | +| onDropBorder | 拖拽释放回调函数(调整列宽) | function | (e) => {} | + + +#### 使用 + +```js +import dragColumn from "tinper-bee/lib/dragColumn.js"; +import { Table } from 'tinper-bee'; + +const DragColumnTable = dragColumn(Table); + +``` + +### filterColumn + +过滤功能 + +#### filterColumn新增参数 + +无 + +#### 使用 + +```js +import filterColumn from "tinper-bee/lib/filterColumn.js"; +import { Table, Checkbox, Popover, Icon } from 'tinper-bee'; + +const DragColumnTable = filterColumn(Table, Checkbox, Popover, Icon); + +``` + + + +## rendertype +在表格中提供了多种rendertype可以供选择，比如下拉框，输入框，日期等 + +## 如何引用 +需要单独的去引用相应的js文件，目录在render文件夹，示例如下： + +```js +import renderInput from "tinper-bee/lib/InputRender.js"; + +``` + +### InputRender +输入框类型render + +#### 依赖的组件 +该render依赖于`Icon`,`FormControl`,`Form`,`Tooltip`。 + + +#### 配置 +| 参数 | 说明 | 类型 | 默认值 | +| ----------------- | ---------------------------------------- | ---------- | ------ | +| name | 该输入框获取数据时的key值，该值不能设置重复且必填 | string | - | +| placeholder | 输入框的提示信息 | string | - | +| value | 输入框中的显示值 | string | 无 | +| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false | +| onChange | 当值发生改变的时候触发的方法 | Function | 无 | +| format | 浏览态格式化类型，Currency:货币数字; | string | 无 | +| formItemClassName | FormItem的class | string | - | +| mesClassName | 校验错误信息的class | string | - | +| isRequire | 是否必填 | bool | false | +| check | 验证的回调函数，参数两个，第一个为校验是否成功`true/false` 第二个为验证结果对象`{name: "", verify: false, value: ""}` | function | - | +| method | 校验方式，change/blur | string | - | +| errorMessage | 错误提示信息 | dom/string | "校验失败" | +| htmlType | 数值类型，目前支持 email/tel/IDCard/chinese/password'类型 | string | - | +| reg | 校验正则，注：设置 htmlType 后 reg 无效 | regExp | - | + +#### 使用 + +```js +import renderInput from "tinper-bee/lib/InputRender.js"; +import { Icon, Form , FormControl } from 'tinper-bee'; +const InputRender = renderInput(Form, FormControl, Icon); + +``` + +### DateRender +日期类型render + +#### 依赖的组件 +该render依赖于`moment`, `Datepicker`, `Icon` + + +#### 配置 +| 参数 | 说明 | 类型 | 默认值 | +| ----------------- | ---------------------------------------- | ---------- | ------ | +| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false | +| type | 控制日期的显示格式，DatePicker、MonthPicker或者WeekPicker，暂时不支持RangePicker | string | "DatePicker" | + + +注:其他参数参见Datepicker组件参数配置 + +#### 使用 + +```js +import renderDate from "tinper-bee/lib/DateRender.js"; +import Datepicker from "tinper-bee/lib/Datepicker"; +import { Icon } from 'tinper-bee'; +const DateRender = renderDate(Datepicker, Icon); + +``` + + +### SelectRender +下拉框类型render + +#### 依赖的组件 +该render依赖于`Icon`,`Select` + + +#### 配置 +| 参数 | 说明 | 类型 | 默认值 | +| -------------- | ---------------------------------------- | ------- | ----- | +| isclickTrigger | 是否使用点击触发编辑状态 | boolean | false | +| dataSource | 数据的键值对，在表格浏览态的时候能显示真实的key值。比如`[{key:"张三",value:"01"}]` | array | - | + + + +注:其他参数参见Select组件参数配置 + +#### 使用 + +```js +import renderSelect from "tinper-bee/lib/SelectRender.js"; +import { Icon, Select } from 'tinper-bee'; +const SelectRender = renderSelect(Select, Icon); + +``` + +### CheckboxRender +复选框类型render + +#### 依赖的组件 +该render依赖于`Icon`,`Checkbox` + + +#### 配置 +| 参数 | 说明 | 类型 | 默认值 | +| -------------- | ---------------------------------------- | ------- | ----- | +| onChange | 修改后触发回调函数 | function | () => {} | +| value | 设置是否选中值 | boolean | false | + + + +注:其他参数参见Checkbox组件参数配置 + +#### 使用 + +```js +import renderCheckbox from "tinper-bee/lib/CheckboxRender.js"; +import { Icon, Checkbox } from 'tinper-bee'; +const CheckboxRender = renderCheckbox(Checkbox, Icon); + +``` ### 使用注意 diff --git a/src/Table.scss b/src/Table.scss index 3becc2b..9f8f1b7 100644 --- a/src/Table.scss +++ b/src/Table.scss @@ -45,6 +45,7 @@ $checkbox-height:16px; th { // background: $table-head-background-color; font-weight: bold; + text-align: left; // transition: background 0.3s ease; &[colspan] { text-align: center; diff --git a/src/lib/multiSelect.js b/src/lib/multiSelect.js index b78f793..81829f9 100644 --- a/src/lib/multiSelect.js +++ b/src/lib/multiSelect.js @@ -13,7 +13,8 @@ export default function multiSelect(Table, Checkbox) { return class NewMultiSelect extends Component { static defaultProps = { - prefixCls: "u-table-mult-select" + prefixCls: "u-table-mult-select", + getSelectedDataFunc:()=>{} } constructor(props) {