修改文档说明

This commit is contained in:
wanghaoo 2019-02-13 14:58:11 +08:00
commit 60c2f972fa
9 changed files with 23 additions and 15 deletions

View File

@ -69,6 +69,7 @@ var TableHeader = function (_Component) {
var currentCols = _this.table.cols[_this.drag.currIndex]; var currentCols = _this.table.cols[_this.drag.currIndex];
var diff = event.x - _this.drag.oldLeft; var diff = event.x - _this.drag.oldLeft;
var newWidth = _this.drag.oldWidth + diff; var newWidth = _this.drag.oldWidth + diff;
_this.drag.newWidth = newWidth;
// if(newWidth > this.drag.minWidth){ // if(newWidth > this.drag.minWidth){
if (newWidth > _this.minWidth) { if (newWidth > _this.minWidth) {
currentCols.style.width = newWidth + 'px'; currentCols.style.width = newWidth + 'px';
@ -123,8 +124,9 @@ var TableHeader = function (_Component) {
}; };
_this.onLineMouseUp = function (event) { _this.onLineMouseUp = function (event) {
var width = _this.drag.newWidth;
_this.clearDragBorder(event); _this.clearDragBorder(event);
_this.props.onDropBorder(event); _this.props.onDropBorder(event, width);
}; };
_this.bodyonLineMouseMove = function (event) { _this.bodyonLineMouseMove = function (event) {

View File

@ -61,8 +61,8 @@ class Demo23 extends Component {
dragborder={true} dragborder={true}
draggable={true} draggable={true}
onDropBorder ={(e)=>{ onDropBorder ={(e,width)=>{
console.log("调整列宽后触发事件",e.target); console.log(width+"--调整列宽后触发事件",e.target);
}} }}
/>; />;
} }

File diff suppressed because one or more lines are too long

10
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -74,7 +74,7 @@ import 'bee-table/build/Table.css';
|dataIndex| 显示数据记录的字段|String|-| |dataIndex| 显示数据记录的字段|String|-|
|width|宽度的特定比例根据列的宽度计算|String/Number|-| |width|宽度的特定比例根据列的宽度计算|String/Number|-|
|fixed| 当表水平滚动时此列将被固定true或'left'或'right'| true/'left'/'right'|-| |fixed| 当表水平滚动时此列将被固定true或'left'或'right'| true/'left'/'right'|-|
|sorter|前端列排序方法,只要列上有此属性就说明这列可排序。**注:默认是前端排序,排序方法书写时注意有些字段可能是undefined的情况需要转换成0**| function|-| |sorter|前端列排序方法,只要列上有此属性就说明这列可排序。**注:默认是前端排序,排序方法书写时注意有些字段的值可能是undefined的情况需要转换成0**| function|-|
|sorterClick|排序的回调函数|function|-| |sorterClick|排序的回调函数|function|-|
|render|cell的render函数有三个参数这个单元格的文本这行的记录这行的索引它返回一个对象{childrenvalueprops{colSpan1rowSpan1}} ==>'children'是这个单元格的文本props是这个单元格的一些设置可以设置单元格行/列合并|-| |render|cell的render函数有三个参数这个单元格的文本这行的记录这行的索引它返回一个对象{childrenvalueprops{colSpan1rowSpan1}} ==>'children'是这个单元格的文本props是这个单元格的一些设置可以设置单元格行/列合并|-|
|onCellClick|单击列的单元格时调用|Function(row, event)|-| |onCellClick|单击列的单元格时调用|Function(row, event)|-|
@ -115,3 +115,5 @@ import 'bee-table/build/Table.css';
- 在使用expandedRowRender属性扩展表格时如果同时使用了固定列。 - 在使用expandedRowRender属性扩展表格时如果同时使用了固定列。
需要给expandedRowRender中返回的对象添加`style=\{{height: xxx}\}`,来使扩展后的固定列扩展成一样高度。 需要给expandedRowRender中返回的对象添加`style=\{{height: xxx}\}`,来使扩展后的固定列扩展成一样高度。
> 当表格场景比较复杂时,可以使用[复杂表格ComplexGrid](http://bee.tinper.org/bee-complex-grid#bee-complex-grid)。ComplexGrid将常用的过滤、多选、分页、列交换、列拖拽等功能集成在一起。使用起来超级方便。

View File

@ -11,7 +11,7 @@ import multiSelect from "tinper-bee/lib/multiSelect.js";
### multiSelect ### multiSelect
> 选中功能组件 选中功能组件
<font color="#ccc"> <font color="#ccc">
@ -30,7 +30,7 @@ import multiSelect from "tinper-bee/lib/multiSelect.js";
#### multiSelect 新增API #### multiSelect 新增API
> data 数据中新增参数 data 数据中新增参数
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| ------------------- | -------------------------- | -------- | -------- | | ------------------- | -------------------------- | -------- | -------- |

View File

@ -1,6 +1,6 @@
{ {
"name": "bee-table", "name": "bee-table",
"version": "1.6.36", "version": "1.6.37",
"description": "Table ui component for react", "description": "Table ui component for react",
"keywords": [ "keywords": [
"react", "react",

View File

@ -174,6 +174,7 @@ class TableHeader extends Component {
let currentCols = this.table.cols[this.drag.currIndex]; let currentCols = this.table.cols[this.drag.currIndex];
let diff = (event.x - this.drag.oldLeft); let diff = (event.x - this.drag.oldLeft);
let newWidth = this.drag.oldWidth + diff; let newWidth = this.drag.oldWidth + diff;
this.drag.newWidth = newWidth;
// if(newWidth > this.drag.minWidth){ // if(newWidth > this.drag.minWidth){
if(newWidth > this.minWidth){ if(newWidth > this.minWidth){
currentCols.style.width = newWidth +'px'; currentCols.style.width = newWidth +'px';
@ -181,7 +182,7 @@ class TableHeader extends Component {
if(this.fixedTable.cols){ if(this.fixedTable.cols){
this.fixedTable.cols[this.drag.currIndex].style.width = newWidth + "px"; this.fixedTable.cols[this.drag.currIndex].style.width = newWidth + "px";
} }
//表头滚动条处理 //表头滚动条处理
if(headerScroll){ if(headerScroll){
let oldTableWidth = parseInt(this.table.table.style.width ?this.table.table.style.width:this.table.table.scrollWidth); let oldTableWidth = parseInt(this.table.table.style.width ?this.table.table.style.width:this.table.table.scrollWidth);
@ -234,8 +235,9 @@ class TableHeader extends Component {
* @memberof TableHeader * @memberof TableHeader
*/ */
onLineMouseUp = (event) => { onLineMouseUp = (event) => {
let width = this.drag.newWidth;
this.clearDragBorder(event); this.clearDragBorder(event);
this.props.onDropBorder(event) this.props.onDropBorder(event,width);
}; };
/** /**