JavaScript
/
bee-table
3
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

fix:querySelector容错处理

This commit is contained in:
yangchch6 2019-07-03 21:12:17 +08:00
parent aa69d8dfed
commit 8cb3aaee37
18 changed files with 364 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
build/Table.css
View File

@ -218,6 +218,15 @@
color: #1565c0; }
.u-table tr tr a:active {
color: #1565c0; }
.u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) {
display: flex;
flex-direction: row-reverse; }
.u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .expand-icon-con {
height: 15px; }
.u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .expand-icon-con .uf {
padding-left: 0; }
.u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .expand-icon-con .u-table-row-expand-icon {
width: 0; }
.u-table tr.tr-row-hover {
background: rgb(235, 236, 240); }
.u-table th,

3
build/TableCell.js
View File

@ -119,6 +119,9 @@ var TableCell = function (_Component) {
if (typeof text == 'string' && bodyDisplayInRow) {
title = text;
}
if (expandIcon && expandIcon.props.expandable) {
className = className + (' ' + clsPrefix + '-has-expandIcon');
}
return _react2["default"].createElement(
'td',
{

4
build/TableHeader.js
View File

@ -307,7 +307,7 @@ var TableHeader = function (_Component) {
if (!currentIndex || parseInt(currentIndex) === _this.drag.currIndex) return;
if (target.nodeName.toUpperCase() === "TH") {
// target.style.border = "2px dashed rgba(5,0,0,0.25)";
target.setAttribute("style", "border-right:2px dashed rgba(5,0,0,0.25)");
target.setAttribute("style", "border-right:2px dashed rgb(30, 136, 229)");
// target.style.backgroundColor = 'rgb(235, 236, 240)';
}
};
@ -515,7 +515,7 @@ var TableHeader = function (_Component) {
table.cols = tableDome.getElementsByTagName("col");
table.ths = tableDome.getElementsByTagName("th");
table.tr = tableDome.getElementsByTagName("tr");
table.tableBodyCols = contentTable.querySelector('.u-table-scroll .u-table-body').getElementsByTagName("col");
table.tableBodyCols = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body').getElementsByTagName("col");
}
table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');

2
build/TableRow.js
View File

@ -252,7 +252,7 @@ var TableRow = function (_Component) {
}
}
if (type) {
currentObj && currentObj.setAttribute("style", "border-bottom:2px dashed rgba(5,0,0,0.25)");
currentObj && currentObj.setAttribute("style", "border-bottom:2px dashed rgb(30, 136, 229)");
} else {
currentObj && currentObj.setAttribute("style", "");
}

1
build/lib/multiSelect.js
View File

@ -214,6 +214,7 @@ function multiSelect(Table, Checkbox) {
});
var _defaultColumns = [{
className: 'u-table-multiSelect-column',
title: _react2["default"].createElement(Checkbox, _extends({
className: "table-checkbox"
}, checkAttr, {

9
demo/demolist/Demo1101.js
View File

@ -9,8 +9,7 @@
import React, { Component } from "react";
import { Popconfirm,Icon } from 'tinper-bee';
import Table from "../../src";
import dragColumn from '../../src/lib/dragColumn';
const DragColumnTable = dragColumn(Table);
const columns16 = [
{
title: "操作",
@ -60,7 +59,6 @@ const data16 = [
{ a: "NU0391003", b: "2019-05-03", c: "zz供应商", d: "操作", key: "3" }
];
class Demo16 extends Component {
constructor(props){
super(props);
@ -111,14 +109,13 @@ class Demo16 extends Component {
}
render() {
return (
<DragColumnTable
<Table
className="expanded-table"
columns={columns16}
data={data16}
onExpand={this.getData}
expandedRowRender={this.expandedRowRender}
scroll={{x:true}}
dragborder={true}
draggable={true}
collapsedIcon={<Icon type='uf-anglearrowpointingtoright'/>}
expandedIcon={<Icon type='uf-treearrow-down'/>}
/>

5
demo/demolist/Demo1101.scss Normal file
View File

@ -0,0 +1,5 @@
.expanded-table{
.expand-icon-con .uf{
font-size: 12px;
}
}

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

14
dist/demo.css vendored
View File

@ -203,6 +203,17 @@
color: #1565c0; }
.u-table tr tr a:active {
color: #1565c0; }
.u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse; }
.u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .expand-icon-con {
height: 15px; }
.u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .expand-icon-con .uf {
padding-left: 0; }
.u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .expand-icon-con .u-table-row-expand-icon {
width: 0; }
.u-table tr.tr-row-hover {
background: rgb(235, 236, 240); }
.u-table th,
@ -1065,6 +1076,9 @@ th .drop-menu .uf {
th:hover .uf {
visibility: visible; }
.expanded-table .expand-icon-con .uf {
font-size: 12px; }
.demo8 .u-table {
margin-bottom: 11px; }

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

372
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

4
package.json
View File

@ -1,6 +1,6 @@
{
"name": "bee-table",
"version": "2.1.4-alpha.4",
"version": "2.1.4-alpha.5",
"description": "Table ui component for react",
"keywords": [
"react",
@ -93,4 +93,4 @@
"reqwest": "^2.0.5",
"tinper-bee": "latest"
}
}
}

13
src/Table.scss
View File

@ -102,6 +102,19 @@ $icon-color:#505F79;
color: #1565c0;
}
}
td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body){
display: flex;
flex-direction: row-reverse;
.expand-icon-con {
height: 15px;
.uf{
padding-left: 0;
}
.u-table-row-expand-icon {
width: 0;
}
}
}
}
tr.tr-row-hover {
background: $hover-bg-color-base;

3
src/TableCell.js
View File

@ -74,6 +74,9 @@ class TableCell extends Component{
if(typeof text == 'string' && bodyDisplayInRow){
title = text
}
if(expandIcon && expandIcon.props.expandable){
className = className+` ${clsPrefix}-has-expandIcon`
}
return (
<td
colSpan={colSpan}

4
src/TableHeader.js
View File

@ -76,7 +76,7 @@ class TableHeader extends Component {
table.cols = tableDome.getElementsByTagName("col");
table.ths = tableDome.getElementsByTagName("th");
table.tr = tableDome.getElementsByTagName("tr");
table.tableBodyCols = contentTable.querySelector('.u-table-scroll .u-table-body').getElementsByTagName("col");
table.tableBodyCols = contentTable.querySelector('.u-table-scroll .u-table-body') && contentTable.querySelector('.u-table-scroll .u-table-body').getElementsByTagName("col");
}
table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
@ -475,7 +475,7 @@ class TableHeader extends Component {
if(!currentIndex || parseInt(currentIndex) === this.drag.currIndex)return;
if(target.nodeName.toUpperCase() === "TH"){
// target.style.border = "2px dashed rgba(5,0,0,0.25)";
target.setAttribute("style","border-right:2px dashed rgba(5,0,0,0.25)");
target.setAttribute("style","border-right:2px dashed rgb(30, 136, 229)");
// target.style.backgroundColor = 'rgb(235, 236, 240)';
}
}

2
src/TableRow.js
View File

@ -290,7 +290,7 @@ class TableRow extends Component{
}
}
if(type){
currentObj && currentObj.setAttribute("style","border-bottom:2px dashed rgba(5,0,0,0.25)");
currentObj && currentObj.setAttribute("style","border-bottom:2px dashed rgb(30, 136, 229)");
}else{
currentObj && currentObj.setAttribute("style","");
}

3
src/lib/multiSelect.js
View File

@ -164,6 +164,7 @@ export default function multiSelect(Table, Checkbox) {
})
let _defaultColumns =[{
className: 'u-table-multiSelect-column',
title: (
<Checkbox
className="table-checkbox"
@ -174,7 +175,7 @@ export default function multiSelect(Table, Checkbox) {
),
key: "checkbox",
dataIndex: "checkbox",
fixed:"left",
fixed:"left",
width: 49,
render: (text, record, index) => {
let attr = {};