拖拽不同步问题,拖拽虚线错位问题
This commit is contained in:
jonyshi
parent
782a1d9532
commit
9d91636050
|
|
@ -98,7 +98,7 @@ var TableHeader = function (_Component) {
|
|||
_this.drag.tableWidth = parseInt(_this.table.table.style.width ? _this.table.table.style.width : _this.table.table.scrollWidth);
|
||||
console.log("====================", _this.drag);
|
||||
} else if (type != 'online' && _this.props.draggable) {
|
||||
if (!_this.props.draggable) return;
|
||||
if (!_this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
|
||||
targetEvent.setAttribute('draggable', true); //添加交换列效果
|
||||
_this.drag.option = 'dragAble';
|
||||
_this.currentDome = event.target;
|
||||
|
|
@ -232,8 +232,8 @@ var TableHeader = function (_Component) {
|
|||
console.log(" -------crt-------", crt);
|
||||
crt.style.backgroundColor = "#ebecf0";
|
||||
crt.style.width = _this.table.cols[currentIndex].style.width; //拖动后再交换列的时候，阴影效果可同步
|
||||
crt.style.height = "44px";
|
||||
// crt.style['line-height'] = "44px";
|
||||
crt.style.height = "40px";
|
||||
// crt.style['line-height'] = "40px";
|
||||
// document.body.appendChild(crt);
|
||||
document.getElementById(_this._table_none_cont_id).appendChild(crt);
|
||||
|
||||
|
|
@ -256,11 +256,7 @@ var TableHeader = function (_Component) {
|
|||
var event = _utils.Event.getEvent(e),
|
||||
target = _utils.Event.getTarget(event);
|
||||
_this.currentDome.setAttribute('draggable', false); //添加交换列效果
|
||||
var data = _this.getCurrentEventData(target);
|
||||
if (!data) return;
|
||||
if (!_this.currentObj || _this.currentObj.key == data.key) return;
|
||||
if (!_this.props.onDrop) return;
|
||||
_this.props.onDrop(event, { dragSource: _this.currentObj, dragTarg: data });
|
||||
console.log("-onDrop--target---", target);
|
||||
};
|
||||
|
||||
_this.onDragEnter = function (e) {
|
||||
|
|
@ -271,7 +267,9 @@ var TableHeader = function (_Component) {
|
|||
if (!currentIndex || parseInt(currentIndex) === _this.drag.currIndex) return;
|
||||
if (target.nodeName.toUpperCase() === "TH") {
|
||||
console.log("-onDragEnter-----", target);
|
||||
target.style.border = "2px dashed #000";
|
||||
target.style.border = "2px dashed rgba(5,0,0,0.25)";
|
||||
// target.style.backgroundColor = 'rgb(235, 236, 240)';
|
||||
// target.style['box-sizing'] = 'border-box';
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -283,6 +281,12 @@ var TableHeader = function (_Component) {
|
|||
// this.body.removeChild(document.getElementById(this._table_none_cont_id));
|
||||
console.log(_this.drag.newWidth + "--------------onDragEnd--target--", target);
|
||||
console.log("--------------onDragEnd----", _this._dragCurrent);
|
||||
|
||||
var data = _this.getCurrentEventData(_this._dragCurrent);
|
||||
if (!data) return;
|
||||
if (!_this.currentObj || _this.currentObj.key == data.key) return;
|
||||
if (!_this.props.onDrop) return;
|
||||
_this.props.onDrop(event, { dragSource: _this.currentObj, dragTarg: data });
|
||||
};
|
||||
|
||||
_this.onDragLeave = function (e) {
|
||||
|
|
@ -552,12 +556,12 @@ var TableHeader = function (_Component) {
|
|||
if (!this.drag || !this.drag.option) return;
|
||||
var rows = this.props.rows;
|
||||
|
||||
var data = { rows: rows[0], cols: this.table.cols, currIndex: this.drag.currIndex };
|
||||
this.props.afterDragColWidth && this.props.afterDragColWidth(data);
|
||||
this.drag = {
|
||||
option: ""
|
||||
};
|
||||
this.clearThsDr();
|
||||
var data = { rows: rows[0], cols: this.table.cols, currIndex: this.drag.currIndex };
|
||||
this.props.afterDragColWidth && this.props.afterDragColWidth(data);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -663,7 +667,7 @@ var TableHeader = function (_Component) {
|
|||
var _rowLeng = row.length - 1;
|
||||
return _react2["default"].createElement(
|
||||
"tr",
|
||||
{ key: index, style: rowStyle, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
|
||||
{ key: index, style: rowStyle, aaaa: true, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
|
||||
row.map(function (da, columIndex, arr) {
|
||||
var thHover = da.drgHover ? " " + clsPrefix + "-thead th-drag-hover" : "";
|
||||
delete da.drgHover;
|
||||
|
|
|
|||
BIN
build/归档.zip
BIN
build/归档.zip
Binary file not shown.
|
|
@ -1,20 +1,20 @@
|
|||
// @import "../node_modules/tinper-bee-core/scss/index.scss";
|
||||
// @import "../node_modules/bee-panel/src/Panel.scss";
|
||||
// @import "../node_modules/bee-layout/src/Layout.scss";
|
||||
// @import "../node_modules/bee-button/src/Button.scss";
|
||||
// @import "../node_modules/bee-transition/src/Transition.scss";
|
||||
// @import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
|
||||
// @import "../node_modules/bee-form-control/src/FormControl.scss";
|
||||
// @import "../node_modules/bee-pagination/src/Pagination.scss";
|
||||
// @import "../node_modules/bee-checkbox/src/Checkbox.scss";
|
||||
// @import "../node_modules/bee-select/src/Select.scss";
|
||||
@import "../node_modules/tinper-bee-core/scss/index.scss";
|
||||
@import "../node_modules/bee-panel/src/Panel.scss";
|
||||
@import "../node_modules/bee-layout/src/Layout.scss";
|
||||
@import "../node_modules/bee-button/src/Button.scss";
|
||||
@import "../node_modules/bee-transition/src/Transition.scss";
|
||||
@import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
|
||||
@import "../node_modules/bee-form-control/src/FormControl.scss";
|
||||
@import "../node_modules/bee-pagination/src/Pagination.scss";
|
||||
@import "../node_modules/bee-checkbox/src/Checkbox.scss";
|
||||
@import "../node_modules/bee-select/src/Select.scss";
|
||||
// @import "../node_modules/bee-form/src/Form.scss";
|
||||
// @import "../node_modules/bee-popover/src/Popover.scss";
|
||||
// @import "../node_modules/bee-tooltip/src/Tooltip.scss";
|
||||
// @import "../node_modules/bee-message/build/Message.css";
|
||||
// @import "../node_modules/bee-dropdown/build/Dropdown.css";
|
||||
// @import "../node_modules/bee-input-number/build/InputNumber.css";
|
||||
// @import "../node_modules/bee-modal/build/Modal.css";
|
||||
@import "../node_modules/bee-popover/src/Popover.scss";
|
||||
@import "../node_modules/bee-tooltip/src/Tooltip.scss";
|
||||
@import "../node_modules/bee-message/build/Message.css";
|
||||
@import "../node_modules/bee-dropdown/build/Dropdown.css";
|
||||
@import "../node_modules/bee-input-number/build/InputNumber.css";
|
||||
@import "../node_modules/bee-modal/build/Modal.css";
|
||||
@import "../src/Table.scss";
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -66,6 +66,7 @@ class Demo23 extends Component {
|
|||
dragborder={true}
|
||||
draggable={true}
|
||||
scroll={{y:200}}
|
||||
bordered={true}
|
||||
onDropBorder ={(e,width)=>{
|
||||
// console.log(width+"--调整列宽后触发事件",e.target);
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import Button from '../src';
|
|||
|
||||
|
||||
|
||||
var Demo92 = require("./demolist/Demo92");var DemoArray = [{"example":<Demo92 />,"title":" 拖拽改变列宽度","code":"/**\n*\n* @title 拖拽改变列宽度\n* @parent 列操作-拖拽 Drag\n* @description 注：不支持tree结构的表头、合并表头的table\n*/\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\nconst columns23 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: '200',\n fixed:'left'\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: '600'\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: '200',\n sumCol: true,\n sorter: (a, b) => a.c - b.c\n }, \n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 500,\n }\n];\n\nconst data23 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"31\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"21\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"11\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"32\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"22\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"12\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps23 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo23 extends Component {\n constructor(props) {\n super(props); \n }\n\n render() {\n return <DragColumnTable columns={columns23} data={data23} bordered\n dragborder={true} \n draggable={true} \n scroll={{y:200}}\n onDropBorder ={(e,width)=>{\n // console.log(width+\"--调整列宽后触发事件\",e.target);\n }}\n />;\n }\n}\nDemo23.defaultProps = defaultProps23;\n\n\n","desc":" 注：不支持tree结构的表头、合并表头的table"}]
|
||||
var Demo92 = require("./demolist/Demo92");var DemoArray = [{"example":<Demo92 />,"title":" 拖拽改变列宽度","code":"/**\n*\n* @title 拖拽改变列宽度\n* @parent 列操作-拖拽 Drag\n* @description 注：不支持tree结构的表头、合并表头的table\n*/\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\nconst columns23 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: '200',\n fixed:'left'\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: '600'\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: '200',\n sumCol: true,\n sorter: (a, b) => a.c - b.c\n }, \n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 500,\n }\n];\n\nconst data23 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"31\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"21\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"11\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"32\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"22\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"12\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps23 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo23 extends Component {\n constructor(props) {\n super(props); \n }\n\n render() {\n return <DragColumnTable columns={columns23} data={data23} bordered\n dragborder={true} \n draggable={true} \n scroll={{y:200}}\n bordered={true}\n onDropBorder ={(e,width)=>{\n // console.log(width+\"--调整列宽后触发事件\",e.target);\n }}\n />;\n }\n}\nDemo23.defaultProps = defaultProps23;\n\n\n","desc":" 注：不支持tree结构的表头、合并表头的table"}]
|
||||
|
||||
|
||||
class Demo extends Component {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
|
|
@ -8985,7 +8985,7 @@
|
|||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
||||
|
||||
var Demo92 = __webpack_require__(936);var DemoArray = [{ "example": _react2['default'].createElement(Demo92, null), "title": " 拖拽改变列宽度", "code": "/**\n*\n* @title 拖拽改变列宽度\n* @parent 列操作-拖拽 Drag\n* @description 注：不支持tree结构的表头、合并表头的table\n*/\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\nconst columns23 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: '200',\n fixed:'left'\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: '600'\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: '200',\n sumCol: true,\n sorter: (a, b) => a.c - b.c\n }, \n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 500,\n }\n];\n\nconst data23 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"31\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"21\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"11\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"32\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"22\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"12\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps23 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo23 extends Component {\n constructor(props) {\n super(props); \n }\n\n render() {\n return <DragColumnTable columns={columns23} data={data23} bordered\n dragborder={true} \n draggable={true} \n scroll={{y:200}}\n onDropBorder ={(e,width)=>{\n // console.log(width+\"--调整列宽后触发事件\",e.target);\n }}\n />;\n }\n}\nDemo23.defaultProps = defaultProps23;\n\n\n", "desc": " 注：不支持tree结构的表头、合并表头的table" }];
|
||||
var Demo92 = __webpack_require__(936);var DemoArray = [{ "example": _react2['default'].createElement(Demo92, null), "title": " 拖拽改变列宽度", "code": "/**\n*\n* @title 拖拽改变列宽度\n* @parent 列操作-拖拽 Drag\n* @description 注：不支持tree结构的表头、合并表头的table\n*/\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\nconst columns23 = [\n {\n title: \"名字\",\n dataIndex: \"a\",\n key: \"a\",\n width: '200',\n fixed:'left'\n },\n {\n title: \"性别\",\n dataIndex: \"b\",\n key: \"b\",\n width: '600'\n },\n {\n title: \"年龄\",\n dataIndex: \"c\",\n key: \"c\",\n width: '200',\n sumCol: true,\n sorter: (a, b) => a.c - b.c\n }, \n {\n title: \"武功级别\",\n dataIndex: \"d\",\n key: \"d\",\n width: 500,\n }\n];\n\nconst data23 = [\n { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"31\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"21\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"11\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"32\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"22\" },\n { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"12\" },\n { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps23 = {\n prefixCls: \"bee-table\"\n};\n\nclass Demo23 extends Component {\n constructor(props) {\n super(props); \n }\n\n render() {\n return <DragColumnTable columns={columns23} data={data23} bordered\n dragborder={true} \n draggable={true} \n scroll={{y:200}}\n bordered={true}\n onDropBorder ={(e,width)=>{\n // console.log(width+\"--调整列宽后触发事件\",e.target);\n }}\n />;\n }\n}\nDemo23.defaultProps = defaultProps23;\n\n\n", "desc": " 注：不支持tree结构的表头、合并表头的table" }];
|
||||
|
||||
var Demo = function (_Component) {
|
||||
_inherits(Demo, _Component);
|
||||
|
|
@ -44170,7 +44170,7 @@
|
|||
_this.drag.tableWidth = parseInt(_this.table.table.style.width ? _this.table.table.style.width : _this.table.table.scrollWidth);
|
||||
console.log("====================", _this.drag);
|
||||
} else if (type != 'online' && _this.props.draggable) {
|
||||
if (!_this.props.draggable) return;
|
||||
if (!_this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
|
||||
targetEvent.setAttribute('draggable', true); //添加交换列效果
|
||||
_this.drag.option = 'dragAble';
|
||||
_this.currentDome = event.target;
|
||||
|
|
@ -44304,8 +44304,8 @@
|
|||
console.log(" -------crt-------", crt);
|
||||
crt.style.backgroundColor = "#ebecf0";
|
||||
crt.style.width = _this.table.cols[currentIndex].style.width; //拖动后再交换列的时候，阴影效果可同步
|
||||
crt.style.height = "44px";
|
||||
// crt.style['line-height'] = "44px";
|
||||
crt.style.height = "40px";
|
||||
// crt.style['line-height'] = "40px";
|
||||
// document.body.appendChild(crt);
|
||||
document.getElementById(_this._table_none_cont_id).appendChild(crt);
|
||||
|
||||
|
|
@ -44328,11 +44328,7 @@
|
|||
var event = _utils.Event.getEvent(e),
|
||||
target = _utils.Event.getTarget(event);
|
||||
_this.currentDome.setAttribute('draggable', false); //添加交换列效果
|
||||
var data = _this.getCurrentEventData(target);
|
||||
if (!data) return;
|
||||
if (!_this.currentObj || _this.currentObj.key == data.key) return;
|
||||
if (!_this.props.onDrop) return;
|
||||
_this.props.onDrop(event, { dragSource: _this.currentObj, dragTarg: data });
|
||||
console.log("-onDrop--target---", target);
|
||||
};
|
||||
|
||||
_this.onDragEnter = function (e) {
|
||||
|
|
@ -44343,7 +44339,9 @@
|
|||
if (!currentIndex || parseInt(currentIndex) === _this.drag.currIndex) return;
|
||||
if (target.nodeName.toUpperCase() === "TH") {
|
||||
console.log("-onDragEnter-----", target);
|
||||
target.style.border = "2px dashed #000";
|
||||
target.style.border = "2px dashed rgba(5,0,0,0.25)";
|
||||
// target.style.backgroundColor = 'rgb(235, 236, 240)';
|
||||
// target.style['box-sizing'] = 'border-box';
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -44355,6 +44353,12 @@
|
|||
// this.body.removeChild(document.getElementById(this._table_none_cont_id));
|
||||
console.log(_this.drag.newWidth + "--------------onDragEnd--target--", target);
|
||||
console.log("--------------onDragEnd----", _this._dragCurrent);
|
||||
|
||||
var data = _this.getCurrentEventData(_this._dragCurrent);
|
||||
if (!data) return;
|
||||
if (!_this.currentObj || _this.currentObj.key == data.key) return;
|
||||
if (!_this.props.onDrop) return;
|
||||
_this.props.onDrop(event, { dragSource: _this.currentObj, dragTarg: data });
|
||||
};
|
||||
|
||||
_this.onDragLeave = function (e) {
|
||||
|
|
@ -44624,12 +44628,12 @@
|
|||
if (!this.drag || !this.drag.option) return;
|
||||
var rows = this.props.rows;
|
||||
|
||||
var data = { rows: rows[0], cols: this.table.cols, currIndex: this.drag.currIndex };
|
||||
this.props.afterDragColWidth && this.props.afterDragColWidth(data);
|
||||
this.drag = {
|
||||
option: ""
|
||||
};
|
||||
this.clearThsDr();
|
||||
var data = { rows: rows[0], cols: this.table.cols, currIndex: this.drag.currIndex };
|
||||
this.props.afterDragColWidth && this.props.afterDragColWidth(data);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -44735,7 +44739,7 @@
|
|||
var _rowLeng = row.length - 1;
|
||||
return _react2["default"].createElement(
|
||||
"tr",
|
||||
{ key: index, style: rowStyle, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
|
||||
{ key: index, style: rowStyle, aaaa: true, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
|
||||
row.map(function (da, columIndex, arr) {
|
||||
var thHover = da.drgHover ? " " + clsPrefix + "-thead th-drag-hover" : "";
|
||||
delete da.drgHover;
|
||||
|
|
@ -88291,6 +88295,8 @@
|
|||
|
||||
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
||||
|
||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
|
@ -88348,14 +88354,15 @@
|
|||
}
|
||||
|
||||
Demo23.prototype.render = function render() {
|
||||
return _react2['default'].createElement(DragColumnTable, { columns: columns23, data: data23, bordered: true,
|
||||
var _React$createElement;
|
||||
|
||||
return _react2['default'].createElement(DragColumnTable, (_React$createElement = { columns: columns23, data: data23, bordered: true,
|
||||
dragborder: true,
|
||||
draggable: true,
|
||||
scroll: { y: 200 },
|
||||
onDropBorder: function onDropBorder(e, width) {
|
||||
// console.log(width+"--调整列宽后触发事件",e.target);
|
||||
}
|
||||
});
|
||||
scroll: { y: 200 }
|
||||
}, _defineProperty(_React$createElement, 'bordered', true), _defineProperty(_React$createElement, 'onDropBorder', function onDropBorder(e, width) {
|
||||
// console.log(width+"--调整列宽后触发事件",e.target);
|
||||
}), _React$createElement));
|
||||
};
|
||||
|
||||
return Demo23;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -5,7 +5,7 @@
|
|||
<title>neoui-react-button</title>
|
||||
<link rel="stylesheet" href="./demo/atom-one-dark.css">
|
||||
<link rel="stylesheet" href="./dist/demo.css">
|
||||
<link href="//design.yonyoucloud.com/static/tinper-bee/latest/assets/tinper-bee.css" rel="stylesheet" media="screen" />
|
||||
<!-- <link href="//design.yonyoucloud.com/static/tinper-bee/latest/assets/tinper-bee.css" rel="stylesheet" media="screen" /> -->
|
||||
|
||||
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -173,7 +173,7 @@ class TableHeader extends Component {
|
|||
this.drag.tableWidth = parseInt(this.table.table.style.width ?this.table.table.style.width:this.table.table.scrollWidth);
|
||||
console.log("====================",this.drag);
|
||||
}else if(type != 'online' && this.props.draggable){
|
||||
if (!this.props.draggable) return;
|
||||
if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
|
||||
targetEvent.setAttribute('draggable',true);//添加交换列效果
|
||||
this.drag.option = 'dragAble';
|
||||
this.currentDome = event.target;
|
||||
|
|
@ -267,12 +267,12 @@ class TableHeader extends Component {
|
|||
mouseClear(){
|
||||
if(!this.drag || !this.drag.option)return;
|
||||
let {rows} = this.props;
|
||||
let data = {rows:rows[0],cols:this.table.cols,currIndex:this.drag.currIndex};
|
||||
this.props.afterDragColWidth && this.props.afterDragColWidth(data);
|
||||
this.drag = {
|
||||
option:""
|
||||
};
|
||||
this.clearThsDr();
|
||||
let data = {rows:rows[0],cols:this.table.cols,currIndex:this.drag.currIndex};
|
||||
this.props.afterDragColWidth && this.props.afterDragColWidth(data);
|
||||
}
|
||||
|
||||
clearThsDr =()=>{
|
||||
|
|
@ -351,8 +351,8 @@ class TableHeader extends Component {
|
|||
console.log(" -------crt-------",crt);
|
||||
crt.style.backgroundColor = "#ebecf0";
|
||||
crt.style.width = this.table.cols[currentIndex].style.width;//拖动后再交换列的时候，阴影效果可同步
|
||||
crt.style.height = "44px";
|
||||
// crt.style['line-height'] = "44px";
|
||||
crt.style.height = "40px";
|
||||
// crt.style['line-height'] = "40px";
|
||||
// document.body.appendChild(crt);
|
||||
document.getElementById(this._table_none_cont_id).appendChild(crt);
|
||||
|
||||
|
|
@ -377,11 +377,7 @@ class TableHeader extends Component {
|
|||
let event = Event.getEvent(e) ,
|
||||
target = Event.getTarget(event);
|
||||
this.currentDome.setAttribute('draggable',false);//添加交换列效果
|
||||
let data = this.getCurrentEventData(target);
|
||||
if(!data)return;
|
||||
if (!this.currentObj || this.currentObj.key == data.key) return;
|
||||
if(!this.props.onDrop)return;
|
||||
this.props.onDrop(event,{dragSource:this.currentObj,dragTarg:data});
|
||||
console.log("-onDrop--target---",target);
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -393,7 +389,9 @@ class TableHeader extends Component {
|
|||
if(!currentIndex || parseInt(currentIndex) === this.drag.currIndex)return;
|
||||
if(target.nodeName.toUpperCase() === "TH"){
|
||||
console.log("-onDragEnter-----",target);
|
||||
target.style.border = "2px dashed #000";
|
||||
target.style.border = "2px dashed rgba(5,0,0,0.25)";
|
||||
// target.style.backgroundColor = 'rgb(235, 236, 240)';
|
||||
// target.style['box-sizing'] = 'border-box';
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -405,6 +403,12 @@ class TableHeader extends Component {
|
|||
// this.body.removeChild(document.getElementById(this._table_none_cont_id));
|
||||
console.log(this.drag.newWidth+"--------------onDragEnd--target--",target);
|
||||
console.log("--------------onDragEnd----",this._dragCurrent);
|
||||
|
||||
let data = this.getCurrentEventData(this._dragCurrent);
|
||||
if(!data)return;
|
||||
if (!this.currentObj || this.currentObj.key == data.key) return;
|
||||
if(!this.props.onDrop)return;
|
||||
this.props.onDrop(event,{dragSource:this.currentObj,dragTarg:data});
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -590,7 +594,7 @@ class TableHeader extends Component {
|
|||
<thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' ref={_thead=>this._thead = _thead} >
|
||||
{rows.map((row, index) => {
|
||||
let _rowLeng = (row.length-1);
|
||||
return(<tr key={index} style={rowStyle} className={(filterable && index == rows.length - 1)?'filterable':''}>
|
||||
return(<tr key={index} style={rowStyle} aaaa className={(filterable && index == rows.length - 1)?'filterable':''}>
|
||||
{row.map((da, columIndex, arr) => {
|
||||
let thHover = da.drgHover
|
||||
? ` ${clsPrefix}-thead th-drag-hover`
|
||||
|
|
|
|||
Loading…
Reference in New Issue