syfed-table
intro component
| 参数名 | 说明 | 必填 | 类型 | 默认值 | 备注 |
|---|---|---|---|---|---|
本 Demo 演示一行文字的用法。
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import SyfedTable from 'syfed-table';
// 模拟数据
const dataSource = () => {
const result = [];
for (let i = 0; i < 5; i++) {
result.push({
index: i + 1,
AUTO_HINT_DMS: "FXDID_0_1",
AUTO_HINT_NUM: 1,
AUTO_ROWNUM: 1,
AUTO_SIZE: -1,
FXDID_0_1: 1,
AH: `1011610100005181871${i}`,
MC: `数据2819675${i}`,
NSRSBH: "61011606420589974",
ID: "1",
ID$MC: null,
MD: "aaa",
JGMC: "数据",
"FXDID_0_1.2342131": "21.81%",
"QSZNTS": `${12 + i}天`,
JGID: "--",
JGID$MC: null,
ZQ_ID: "20180000004",
});
}
return result;
},
columns = [{
"title": "序号",
"dataIndex": "INDEX",
"key": "INDEX",
"width": 80,
"className": "res-fixed-column",
"fixed": "left"
},
{
"title": "基本信息",
"key": 'baseCols',
"children": [
{
"code": "MD",
"format": null,
"index": 1,
"name": "代号",
"sfzs": "Y",
"vtype": "CHAR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"link": null,
"sort": null,
"ywlx": "NSR",
"title": "代号",
"dataIndex": "MD",
"key": "MD",
"fixed": "left",
"sorter": false,
"width": 140,
"className": "res-fixed-column",
"xh": 2,
"sortable": true,
"sfilter": true,
"sfilterprops": {
"type": 'txtRange',
"data": [
{
value: 'appale',
label: 'Appale',
}, {
value: 'pear',
label: 'Pear',
}, {
value: 'orange',
label: 'Orange',
}]
}
},
{
"code": "MC",
"format": null,
"index": 3,
"name": "数据名称",
"sfzs": "Y",
"vtype": "CHAR",
"ywlx": "NSR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"sort": null,
"title": "数据名称",
"dataIndex": "MC",
"key": "MC",
"fixed": "left",
"sorter": false,
"width": 140,
"className": "res-fixed-column",
"xh": 3,
"sfilter": true,
"sfilterprops": {
"type": 'checkbox',
"itemDirection":'ver',
"data": [
{
value: '数据',
label: '数据',
}, {
value: '2819',
label: '2819',
}, {
value: '6752',
label: '6752',
}]
}
},
{
"code": "AUTO_HINT_NUM",
"format": "NUMBER",
"index": 3,
"name": "风险数",
"sfzs": "Y",
"vtype": "NUMBER",
"ywlx": "NSR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"dataIndex": "AUTO_HINT_NUM",
"key": "AUTO_HINT_NUM",
"title": "风险数",
"width": 98,
"className": "res-fixed-column split-cell-r",
"fixed": "left"
}
],
},
{
"title": "数据2",
"className": " split-cell-r",
"key": 'FXDID_0_1',
"children": [
{
"fxdmc": "数据2",
"fxddm": "FXDID_0_1",
"fxzxms": "1",
"ywbid": "SSHS_NY_RKXX_ZB",
"id": "12312312",
"code": "12312312",
"name": "天数",
"ywlx": "ZB",
"vtype": "MONEY",
"ywfl": null,
"flfs": "MR",
"ywms": "天数",
"wlbbm": "",
"ysbm": "",
"mcsql": null,
"jgfwq": "2017-01-01",
"jgfw": "2017-2019",
"jgpl": "[\"ND\",\"YF\"]",
"jgplmc": "月/年",
"showyjz": "N",
"INDEX": 3,
"key": "QSZNTS",
"sorter": true,
"values": [
"1"
],
"operator": "LT",
"cslx": "GDZ",
"value": "1xy",
"dm": "12312312",
"mc": "天数",
"title": "天数",
"dataIndex": "QSZNTS",
"width": 197,
"filters": [{
label: '12天',
value: 12
},{
label: '13天',
value: 13
}, {
label: 'Nano 678',
value: 678,
children: [{
label: 'Nano 67',
value: 67,
children: [{
label: 'Nano 6',
value: 6
}, {
label: 'Nano 7',
value: 7
}]
}, {
label: 'Nano 8',
value: 8
}]
}, {
label: 'Other',
value: 'other',
children: [{
label: 'Nano 4',
value: 4
}, {
label: 'Nano 5',
value: 5
}]
}],
"filterMode": 'single',
},
{
"fxdmc": "数据2",
"fxddm": "FXDID_0_1",
"fxzxms": "1",
"ywbid": "ZB",
"id": "2342131",
"code": "2342131",
"name": "经营费用率",
"ywlx": "ZB",
"vtype": "PERCET",
"ywfl": null,
"flfs": "MR",
"ywms": "经营费用率",
"wlbbm": "",
"ysbm": "",
"mcsql": null,
"jgfwq": "2017-01-01",
"jgfw": "2017-2019",
"jgpl": "[\"ND\"]",
"jgplmc": "年",
"showyjz": "N",
"INDEX": 6,
"key": "FXDID_0_1.2342131",
"sorter": true,
"values": [],
"operator": "ISNULL",
"cslx": "GDZ",
"value": "4k",
"dm": "2342131",
"mc": "经营费用率",
"title": "经营费用率",
"dataIndex": "FXDID_0_1.2342131",
"className": "",
"width": 197
}
]
},
{
"title": "扩展信息",
"key": 'kzCols',
"children": [
{
"id": "JGID",
"code": "JGID",
"name": "机构类型",
"vtype": "WD",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "机构类型",
"dataIndex": "JGID$MC",
"key": "JGID",
"width": 154
},
{
"id": "JGMC",
"code": "JGMC",
"name": "机构名称",
"vtype": "CHAR",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "机构名称",
"dataIndex": "JGMC",
"key": "JGMC",
"width": 154
},
{
"id": "ID",
"code": "ID",
"name": "标志",
"vtype": "WD",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "标志",
"dataIndex": "ID$MC",
"key": "ID",
"width": 154
}
]
}
];
class App extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: dataSource()
};
}
// 过滤回调函数
onFilter(filterParams) {
console.log('filter 返回数据');
console.log(filterParams);
let ds = dataSource();
Object.keys(filterParams).forEach(key => {
const selectedKeys = filterParams[key].selectedKeys;
if (selectedKeys.length) {
ds = ds.filter(record => {
return selectedKeys.some(value => {
return record[key].indexOf(value) > -1;
});
});
}
});
this.setState({dataSource: ds});
}
render() {
return (
<div>
<SyfedTable
dataSource={ this.state.dataSource }
columns={ columns }
onFilter={ this.onFilter.bind(this) }
/>
</div>
);
}
}
ReactDOM.render((
<App />
), mountNode);表格单选框过滤。
col = {
...colProps, //表格列其他属性值
"sfilter": true, // 使用过滤
"sfilterprops": {
"type": 'radio', // 过滤类型
"data": [
{
value: 'appale',
label: 'Appale',
}, {
value: 'pear',
label: 'Pear',
}, {
value: 'orange',
label: 'Orange',
}], // 过滤设置数据
}
}
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import SyfedTable from 'syfed-table';
// 模拟数据
const dataSource = () => {
const result = [];
for (let i = 0; i < 5; i++) {
result.push({
index: i + 1,
AUTO_HINT_DMS: "FXDID_0_1",
AUTO_HINT_NUM: 1,
AUTO_ROWNUM: 1,
AUTO_SIZE: -1,
FXDID_0_1: 1,
AH: `1011610100005181871${i}`,
MC: `数据2819675${i}`,
NSRSBH: "61011606420589974",
ID: "1",
ID$MC: null,
MD: "aaa",
JGMC: "数据",
"FXDID_0_1.2342131": "21.81%",
"QSZNTS": `${12 + i}天`,
JGID: "--",
JGID$MC: null,
ZQ_ID: "20180000004",
});
}
return result;
},
columns = [
{
"title": "序号",
"dataIndex": "INDEX",
"key": "INDEX",
"width": 80,
"className": "res-fixed-column",
"fixed": "left"
},
{
"title": "基本信息",
"key": 'baseCols',
"children": [
{
"code": "MD",
"format": null,
"index": 1,
"name": "代号",
"sfzs": "Y",
"vtype": "CHAR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"link": null,
"sort": null,
"ywlx": "NSR",
"title": "代号",
"dataIndex": "MD",
"key": "MD",
"fixed": "left",
"sorter": false,
"width": 140,
"className": "res-fixed-column",
"xh": 2,
"sortable": true,
"sfilter": true,
"sfilterprops": {
"type": 'radio',
"data": [
{
value: 'appale',
label: 'Appale',
}, {
value: 'pear',
label: 'Pear',
}, {
value: 'orange',
label: 'Orange',
}]
}
},
{
"code": "MC",
"format": null,
"index": 3,
"name": "数据名称",
"sfzs": "Y",
"vtype": "CHAR",
"ywlx": "NSR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"sort": null,
"title": "数据名称",
"dataIndex": "MC",
"key": "MC",
"fixed": "left",
"sorter": false,
"width": 140,
"className": "res-fixed-column",
"xh": 3,
"sfilter": true,
"sfilterprops": {
"type": 'checkbox',
"itemDirection":'ver',
"data": [
{
value: '数据',
label: '数据',
}, {
value: '2819',
label: '2819',
}, {
value: '6752',
label: '6752',
}]
}
},
{
"code": "AUTO_HINT_NUM",
"format": "NUMBER",
"index": 3,
"name": "风险数",
"sfzs": "Y",
"vtype": "NUMBER",
"ywlx": "NSR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"dataIndex": "AUTO_HINT_NUM",
"key": "AUTO_HINT_NUM",
"title": "风险数",
"width": 98,
"className": "res-fixed-column split-cell-r",
"fixed": "left"
}
],
},
{
"title": "数据2",
"className": " split-cell-r",
"key": 'FXDID_0_1',
"children": [
{
"fxdmc": "数据2",
"fxddm": "FXDID_0_1",
"fxzxms": "1",
"ywbid": "SSHS_NY_RKXX_ZB",
"id": "12312312",
"code": "12312312",
"name": "天数",
"ywlx": "ZB",
"vtype": "MONEY",
"ywfl": null,
"flfs": "MR",
"ywms": "天数",
"wlbbm": "",
"ysbm": "",
"mcsql": null,
"jgfwq": "2017-01-01",
"jgfw": "2017-2019",
"jgpl": "[\"ND\",\"YF\"]",
"jgplmc": "月/年",
"showyjz": "N",
"INDEX": 3,
"key": "QSZNTS",
"sorter": true,
"values": [
"1"
],
"operator": "LT",
"cslx": "GDZ",
"value": "1xy",
"dm": "12312312",
"mc": "天数",
"title": "天数",
"dataIndex": "QSZNTS",
"width": 197,
"filters": [{
label: '12天',
value: 12
},{
label: '13天',
value: 13
}, {
label: 'Nano 678',
value: 678,
children: [{
label: 'Nano 67',
value: 67,
children: [{
label: 'Nano 6',
value: 6
}, {
label: 'Nano 7',
value: 7
}]
}, {
label: 'Nano 8',
value: 8
}]
}, {
label: 'Other',
value: 'other',
children: [{
label: 'Nano 4',
value: 4
}, {
label: 'Nano 5',
value: 5
}]
}],
"filterMode": 'single',
},
{
"fxdmc": "数据2",
"fxddm": "FXDID_0_1",
"fxzxms": "1",
"ywbid": "ZB",
"id": "2342131",
"code": "2342131",
"name": "经营费用率",
"ywlx": "ZB",
"vtype": "PERCET",
"ywfl": null,
"flfs": "MR",
"ywms": "经营费用率",
"wlbbm": "",
"ysbm": "",
"mcsql": null,
"jgfwq": "2017-01-01",
"jgfw": "2017-2019",
"jgpl": "[\"ND\"]",
"jgplmc": "年",
"showyjz": "N",
"INDEX": 6,
"key": "FXDID_0_1.2342131",
"sorter": true,
"values": [],
"operator": "ISNULL",
"cslx": "GDZ",
"value": "4k",
"dm": "2342131",
"mc": "经营费用率",
"title": "经营费用率",
"dataIndex": "FXDID_0_1.2342131",
"className": "",
"width": 197
}
]
},
{
"title": "扩展信息",
"key": 'kzCols',
"children": [
{
"id": "JGID",
"code": "JGID",
"name": "机构类型",
"vtype": "WD",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "机构类型",
"dataIndex": "JGID$MC",
"key": "JGID",
"width": 154
},
{
"id": "JGMC",
"code": "JGMC",
"name": "机构名称",
"vtype": "CHAR",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "机构名称",
"dataIndex": "JGMC",
"key": "JGMC",
"width": 154
},
{
"id": "ID",
"code": "ID",
"name": "标志",
"vtype": "WD",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "标志",
"dataIndex": "ID$MC",
"key": "ID",
"width": 154
}
]
}
];
class App extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: dataSource()
};
}
// 过滤回调函数
onFilter(filterParams) {
console.log('filter 返回数据');
console.log(filterParams);
let ds = dataSource();
Object.keys(filterParams).forEach(key => {
const selectedKeys = filterParams[key].selectedKeys;
if (selectedKeys.length) {
ds = ds.filter(record => {
return selectedKeys.some(value => {
return record[key].indexOf(value) > -1;
});
});
}
});
this.setState({dataSource: ds});
}
render() {
return (
<div>
<SyfedTable
dataSource={ this.state.dataSource }
columns={ columns }
onFilter={ this.onFilter.bind(this) }
/>
</div>
);
}
}
ReactDOM.render((
<App />
), mountNode);表格复选框过滤。
col = {
...colProps, //表格列其他属性值
"sfilter": true,
"sfilterprops": {
"type": 'checkbox',
"itemDirection":'ver',
"data": [
{
value: '数据',
label: '数据',
}, {
value: '2819',
label: '2819',
}, {
value: '6752',
label: '6752',
}]
}
}
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import SyfedTable from 'syfed-table';
// 模拟数据
const dataSource = () => {
const result = [];
for (let i = 0; i < 5; i++) {
result.push({
index: i + 1,
AUTO_HINT_DMS: "FXDID_0_1",
AUTO_HINT_NUM: 1,
AUTO_ROWNUM: 1,
AUTO_SIZE: -1,
FXDID_0_1: 1,
AH: `1011610100005181871${i}`,
MC: `数据2819675${i}`,
NSRSBH: "61011606420589974",
ID: "1",
ID$MC: null,
MD: "aaa",
JGMC: "数据",
"FXDID_0_1.2342131": "21.81%",
"QSZNTS": `${12 + i}天`,
JGID: "--",
JGID$MC: null,
ZQ_ID: "20180000004",
});
}
return result;
},
columns = [
{
"title": "序号",
"dataIndex": "INDEX",
"key": "INDEX",
"width": 80,
"className": "res-fixed-column",
"fixed": "left"
},
{
"title": "基本信息",
"key": 'baseCols',
"children": [
{
"code": "MD",
"format": null,
"index": 1,
"name": "代号",
"sfzs": "Y",
"vtype": "CHAR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"link": null,
"sort": null,
"ywlx": "NSR",
"title": "代号",
"dataIndex": "MD",
"key": "MD",
"fixed": "left",
"sorter": false,
"width": 140,
"className": "res-fixed-column",
"xh": 2,
"sortable": true,
},
{
"code": "MC",
"format": null,
"index": 3,
"name": "数据名称",
"sfzs": "Y",
"vtype": "CHAR",
"ywlx": "NSR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"sort": null,
"title": "数据名称",
"dataIndex": "MC",
"key": "MC",
"fixed": "left",
"sorter": false,
"width": 140,
"className": "res-fixed-column",
"xh": 3,
"sfilter": true,
"sfilterprops": {
"type": 'checkbox',
"itemDirection":'ver',
"data": [
{
value: '数据',
label: '数据',
}, {
value: '2819',
label: '2819',
}, {
value: '6752',
label: '6752',
}]
}
},
{
"code": "AUTO_HINT_NUM",
"format": "NUMBER",
"index": 3,
"name": "风险数",
"sfzs": "Y",
"vtype": "NUMBER",
"ywlx": "NSR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"dataIndex": "AUTO_HINT_NUM",
"key": "AUTO_HINT_NUM",
"title": "风险数",
"width": 98,
"className": "res-fixed-column split-cell-r",
"fixed": "left"
}
],
},
{
"title": "数据2",
"className": " split-cell-r",
"key": 'FXDID_0_1',
"children": [
{
"fxdmc": "数据2",
"fxddm": "FXDID_0_1",
"fxzxms": "1",
"ywbid": "SSHS_NY_RKXX_ZB",
"id": "12312312",
"code": "12312312",
"name": "天数",
"ywlx": "ZB",
"vtype": "MONEY",
"ywfl": null,
"flfs": "MR",
"ywms": "天数",
"wlbbm": "",
"ysbm": "",
"mcsql": null,
"jgfwq": "2017-01-01",
"jgfw": "2017-2019",
"jgpl": "[\"ND\",\"YF\"]",
"jgplmc": "月/年",
"showyjz": "N",
"INDEX": 3,
"key": "QSZNTS",
"sorter": true,
"values": [
"1"
],
"operator": "LT",
"cslx": "GDZ",
"value": "1xy",
"dm": "12312312",
"mc": "天数",
"title": "天数",
"dataIndex": "QSZNTS",
"width": 197,
"filters": [{
label: '12天',
value: 12
},{
label: '13天',
value: 13
}, {
label: 'Nano 678',
value: 678,
children: [{
label: 'Nano 67',
value: 67,
children: [{
label: 'Nano 6',
value: 6
}, {
label: 'Nano 7',
value: 7
}]
}, {
label: 'Nano 8',
value: 8
}]
}, {
label: 'Other',
value: 'other',
children: [{
label: 'Nano 4',
value: 4
}, {
label: 'Nano 5',
value: 5
}]
}],
"filterMode": 'single',
},
{
"fxdmc": "数据2",
"fxddm": "FXDID_0_1",
"fxzxms": "1",
"ywbid": "ZB",
"id": "2342131",
"code": "2342131",
"name": "经营费用率",
"ywlx": "ZB",
"vtype": "PERCET",
"ywfl": null,
"flfs": "MR",
"ywms": "经营费用率",
"wlbbm": "",
"ysbm": "",
"mcsql": null,
"jgfwq": "2017-01-01",
"jgfw": "2017-2019",
"jgpl": "[\"ND\"]",
"jgplmc": "年",
"showyjz": "N",
"INDEX": 6,
"key": "FXDID_0_1.2342131",
"sorter": true,
"values": [],
"operator": "ISNULL",
"cslx": "GDZ",
"value": "4k",
"dm": "2342131",
"mc": "经营费用率",
"title": "经营费用率",
"dataIndex": "FXDID_0_1.2342131",
"className": "",
"width": 197
}
]
},
{
"title": "扩展信息",
"key": 'kzCols',
"children": [
{
"id": "JGID",
"code": "JGID",
"name": "机构类型",
"vtype": "WD",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "机构类型",
"dataIndex": "JGID$MC",
"key": "JGID",
"width": 154
},
{
"id": "JGMC",
"code": "JGMC",
"name": "机构名称",
"vtype": "CHAR",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "机构名称",
"dataIndex": "JGMC",
"key": "JGMC",
"width": 154
},
{
"id": "ID",
"code": "ID",
"name": "标志",
"vtype": "WD",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "标志",
"dataIndex": "ID$MC",
"key": "ID",
"width": 154
}
]
}
];
class App extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: dataSource()
};
}
// 过滤回调函数
onFilter(filterParams) {
console.log('filter 返回数据');
console.log(filterParams);
let ds = dataSource();
Object.keys(filterParams).forEach(key => {
const selectedKeys = filterParams[key].selectedKeys;
if (selectedKeys.length) {
ds = ds.filter(record => {
return selectedKeys.some(value => {
return record[key].indexOf(value) > -1;
});
});
}
});
this.setState({dataSource: ds});
}
render() {
return (
<div>
<SyfedTable
dataSource={ this.state.dataSource }
columns={ columns }
onFilter={ this.onFilter.bind(this) }
/>
</div>
);
}
}
ReactDOM.render((
<App />
), mountNode);本 Demo 演示一行文字的用法。
import React, { Component } from 'react';
import { Table } from '@alifd/next';
const columns = [
{
"title": "序号",
"dataIndex": "INDEX",
"key": "INDEX",
"width": 80,
"className": "res-fixed-column",
"fixed": "left"
},
{
"title": "基本信息",
"key": 'baseCols',
"children": [
{
"code": "MD",
"format": null,
"index": 1,
"name": "代号",
"sfzs": "Y",
"vtype": "CHAR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"link": null,
"sort": null,
"ywlx": "NSR",
"title": "代号",
"dataIndex": "MD",
"key": "MD",
"fixed": "left",
"sorter": false,
"width": 140,
"className": "res-fixed-column",
"xh": 2,
"sortable": true,
"sfilter": true,
"sfilterprops": {
"type": 'radio',
}
},
{
"code": "MC",
"format": null,
"index": 3,
"name": "数据名称",
"sfzs": "Y",
"vtype": "CHAR",
"ywlx": "NSR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"sort": null,
"title": "数据名称",
"dataIndex": "MC",
"key": "MC",
"fixed": "left",
"sorter": false,
"width": 140,
"className": "res-fixed-column",
"xh": 3,
"sfilter": true,
"sfilterprops": {
"type": 'checkbox',
"itemDirection":'ver',
}
},
{
"code": "AUTO_HINT_NUM",
"format": "NUMBER",
"index": 3,
"name": "风险数",
"sfzs": "Y",
"vtype": "NUMBER",
"ywlx": "NSR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"dataIndex": "AUTO_HINT_NUM",
"key": "AUTO_HINT_NUM",
"title": "风险数",
"width": 98,
"className": "res-fixed-column split-cell-r",
"fixed": "left"
}
],
"className": "res-fixed-column split-cell-r",
"fixed": "left"
},
{
"title": "数据2",
"className": " split-cell-r",
"key": 'FXDID_0_1',
"children": [
{
"fxdmc": "数据2",
"fxddm": "FXDID_0_1",
"fxzxms": "1",
"ywbid": "SSHS_NY_RKXX_ZB",
"id": "12312312",
"code": "12312312",
"name": "天数",
"ywlx": "ZB",
"vtype": "MONEY",
"ywfl": null,
"flfs": "MR",
"ywms": "天数",
"wlbbm": "",
"ysbm": "",
"mcsql": null,
"jgfwq": "2017-01-01",
"jgfw": "2017-2019",
"jgpl": "[\"ND\",\"YF\"]",
"jgplmc": "月/年",
"showyjz": "N",
"INDEX": 3,
"key": "FXDID_0_1.12312312",
"ysId": 1,
"sorter": true,
"values": [
"1"
],
"operator": "LT",
"cslx": "GDZ",
"value": "1xy",
"dm": "12312312",
"mc": "天数",
"title": "天数",
"dataIndex": "FXDID_0_1.12312312",
"width": 197,
"filters": [{
label: 'Nano 3',
value: 3
}, {
label: 'Nano 678',
value: 678,
children: [{
label: 'Nano 67',
value: 67,
children: [{
label: 'Nano 6',
value: 6
}, {
label: 'Nano 7',
value: 7
}]
}, {
label: 'Nano 8',
value: 8
}]
}, {
label: 'Other',
value: 'other',
children: [{
label: 'Nano 4',
value: 4
}, {
label: 'Nano 5',
value: 5
}]
}],
"filterMode": 'single',
},
{
"fxdmc": "数据2",
"fxddm": "FXDID_0_1",
"fxzxms": "1",
"ywbid": "ZB",
"id": "2342131",
"code": "2342131",
"name": "经营费用率",
"ywlx": "ZB",
"vtype": "PERCET",
"ywfl": null,
"flfs": "MR",
"ywms": "经营费用率",
"wlbbm": "",
"ysbm": "",
"mcsql": null,
"jgfwq": "2017-01-01",
"jgfw": "2017-2019",
"jgpl": "[\"ND\"]",
"jgplmc": "年",
"showyjz": "N",
"INDEX": 6,
"key": "FXDID_0_1.2342131",
"ysId": 2,
"sorter": true,
"values": [],
"operator": "ISNULL",
"cslx": "GDZ",
"value": "4k",
"dm": "2342131",
"mc": "经营费用率",
"title": "经营费用率",
"dataIndex": "FXDID_0_1.2342131",
"className": "",
"width": 197
}
]
},
{
"title": "扩展信息",
"key": 'kzCols',
"children": [
{
"id": "JGID",
"code": "JGID",
"name": "机构类型",
"vtype": "WD",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "机构类型",
"dataIndex": "JGID$MC",
"key": "JGID",
"width": 154
},
{
"id": "JGMC",
"code": "JGMC",
"name": "机构名称",
"vtype": "CHAR",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "机构名称",
"dataIndex": "JGMC",
"key": "JGMC",
"width": 154
},
{
"id": "ID",
"code": "ID",
"name": "标志",
"vtype": "WD",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "标志",
"dataIndex": "ID$MC",
"key": "ID",
"width": 154
}
]
}
];
const tableMixTree = (
<Table
dataSource={columns}
primaryKey="key"
isTree
rowSelection={{
onChange: () => {}}
}
onExpandedRowClick={()=>{
alert(111)
}}
>
<Table.Column title="列名" dataIndex="title"/>
<Table.Column title="宽度（px）" dataIndex="width"/>
</Table>);
ReactDOM.render(<div className="mix-demo">
<div className="row">
<h4>tree & select</h4>
{tableMixTree}
</div>
</div>, mountNode);表格文本范围过滤。
col = {
...colProps, //表格列其他属性值
"sfilter": true, // 使用过滤
"sfilterprops": {
"type": 'textRange', // 过滤类型
}
}
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import SyfedTable from 'syfed-table';
// 模拟数据
const dataSource = () => {
const result = [];
for (let i = 0; i < 5; i++) {
result.push({
index: i + 1,
AUTO_HINT_DMS: "FXDID_0_1",
AUTO_HINT_NUM: 1,
AUTO_ROWNUM: 1,
AUTO_SIZE: -1,
FXDID_0_1: 1,
AH: `1011610100005181871${i}`,
MC: `数据2819675${i}`,
NSRSBH: "61011606420589974",
ID: "1",
ID$MC: null,
MD: "aaa",
JGMC: "数据",
"FXDID_0_1.2342131": "21.81%",
"QSZNTS": `${12 + i}天`,
JGID: "--",
JGID$MC: null,
ZQ_ID: "20180000004",
});
}
return result;
},
columns = [
{
"title": "序号",
"dataIndex": "INDEX",
"key": "INDEX",
"width": 80,
"className": "res-fixed-column",
"fixed": "left"
},
{
"title": "基本信息",
"key": 'baseCols',
"children": [
{
"code": "MD",
"format": null,
"index": 1,
"name": "代号",
"sfzs": "Y",
"vtype": "CHAR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"link": null,
"sort": null,
"ywlx": "NSR",
"title": "代号",
"dataIndex": "MD",
"key": "MD",
"fixed": "left",
"sorter": false,
"width": 140,
"className": "res-fixed-column",
"xh": 2,
"sortable": true,
"sfilter": true,
"sfilterprops": {
"type": 'textRange'
}
},
{
"code": "MC",
"format": null,
"index": 3,
"name": "数据名称",
"sfzs": "Y",
"vtype": "CHAR",
"ywlx": "NSR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"sort": null,
"title": "数据名称",
"dataIndex": "MC",
"key": "MC",
"fixed": "left",
"sorter": false,
"width": 140,
"className": "res-fixed-column",
"xh": 3,
},
{
"code": "AUTO_HINT_NUM",
"format": "NUMBER",
"index": 3,
"name": "风险数",
"sfzs": "Y",
"vtype": "NUMBER",
"ywlx": "NSR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"dataIndex": "AUTO_HINT_NUM",
"key": "AUTO_HINT_NUM",
"title": "风险数",
"width": 98,
"className": "res-fixed-column split-cell-r",
"fixed": "left"
}
],
},
{
"title": "数据2",
"className": " split-cell-r",
"key": 'FXDID_0_1',
"children": [
{
"fxdmc": "数据2",
"fxddm": "FXDID_0_1",
"fxzxms": "1",
"ywbid": "SSHS_NY_RKXX_ZB",
"id": "12312312",
"code": "12312312",
"name": "天数",
"ywlx": "ZB",
"vtype": "MONEY",
"ywfl": null,
"flfs": "MR",
"ywms": "天数",
"wlbbm": "",
"ysbm": "",
"mcsql": null,
"jgfwq": "2017-01-01",
"jgfw": "2017-2019",
"jgpl": "[\"ND\",\"YF\"]",
"jgplmc": "月/年",
"showyjz": "N",
"INDEX": 3,
"key": "QSZNTS",
"sorter": true,
"values": [
"1"
],
"operator": "LT",
"cslx": "GDZ",
"value": "1xy",
"dm": "12312312",
"mc": "天数",
"title": "天数",
"dataIndex": "QSZNTS",
"width": 197,
"filters": [{
label: '12天',
value: 12
},{
label: '13天',
value: 13
}, {
label: 'Nano 678',
value: 678,
children: [{
label: 'Nano 67',
value: 67,
children: [{
label: 'Nano 6',
value: 6
}, {
label: 'Nano 7',
value: 7
}]
}, {
label: 'Nano 8',
value: 8
}]
}, {
label: 'Other',
value: 'other',
children: [{
label: 'Nano 4',
value: 4
}, {
label: 'Nano 5',
value: 5
}]
}],
"filterMode": 'single',
},
{
"fxdmc": "数据2",
"fxddm": "FXDID_0_1",
"fxzxms": "1",
"ywbid": "ZB",
"id": "2342131",
"code": "2342131",
"name": "经营费用率",
"ywlx": "ZB",
"vtype": "PERCET",
"ywfl": null,
"flfs": "MR",
"ywms": "经营费用率",
"wlbbm": "",
"ysbm": "",
"mcsql": null,
"jgfwq": "2017-01-01",
"jgfw": "2017-2019",
"jgpl": "[\"ND\"]",
"jgplmc": "年",
"showyjz": "N",
"INDEX": 6,
"key": "FXDID_0_1.2342131",
"sorter": true,
"values": [],
"operator": "ISNULL",
"cslx": "GDZ",
"value": "4k",
"dm": "2342131",
"mc": "经营费用率",
"title": "经营费用率",
"dataIndex": "FXDID_0_1.2342131",
"className": "",
"width": 197
}
]
},
{
"title": "扩展信息",
"key": 'kzCols',
"children": [
{
"id": "JGID",
"code": "JGID",
"name": "机构类型",
"vtype": "WD",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "机构类型",
"dataIndex": "JGID$MC",
"key": "JGID",
"width": 154
},
{
"id": "JGMC",
"code": "JGMC",
"name": "机构名称",
"vtype": "CHAR",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "机构名称",
"dataIndex": "JGMC",
"key": "JGMC",
"width": 154
},
{
"id": "ID",
"code": "ID",
"name": "标志",
"vtype": "WD",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "标志",
"dataIndex": "ID$MC",
"key": "ID",
"width": 154
}
]
}
];
class App extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: dataSource()
};
}
// 过滤回调函数
onFilter(filterParams) {
console.log('filter 返回数据');
console.log(filterParams);
let ds = dataSource();
Object.keys(filterParams).forEach(key => {
const selectedKeys = filterParams[key].selectedKeys;
if (selectedKeys.length) {
ds = ds.filter(record => {
return selectedKeys.some(value => {
return record[key].indexOf(value) > -1;
});
});
}
});
this.setState({dataSource: ds});
}
render() {
return (
<div>
<SyfedTable
dataSource={ this.state.dataSource }
columns={ columns }
onFilter={ this.onFilter.bind(this) }
/>
</div>
);
}
}
ReactDOM.render((
<App />
), mountNode);日期范围过滤。
col = {
...colProps, //表格列其他属性值
"sfilter": true, // 使用过滤
"sfilterprops": {
"type": 'dateRange', // 过滤类型
"dateType": 'date' // 默认date 可选 month year
}
}
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import SyfedTable from 'syfed-table';
// 模拟数据
const dataSource = () => {
const result = [];
for (let i = 0; i < 5; i++) {
result.push({
index: i + 1,
AUTO_HINT_DMS: "FXDID_0_1",
AUTO_HINT_NUM: 1,
AUTO_ROWNUM: 1,
AUTO_SIZE: -1,
FXDID_0_1: 1,
AH: `1011610100005181871${i}`,
MC: `数据2819675${i}`,
NSRSBH: "61011606420589974",
ID: "1",
ID$MC: null,
MD: "aaa",
JGMC: "数据",
"FXDID_0_1.2342131": "21.81%",
"QSZNTS": `${12 + i}天`,
JGID: "--",
JGID$MC: null,
ZQ_ID: "20180000004",
});
}
return result;
},
columns = [
{
"title": "序号",
"dataIndex": "INDEX",
"key": "INDEX",
"width": 80,
"className": "res-fixed-column",
"fixed": "left"
},
{
"title": "基本信息",
"key": 'baseCols',
"children": [
{
"code": "MD",
"format": null,
"index": 1,
"name": "代号",
"sfzs": "Y",
"vtype": "CHAR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"link": null,
"sort": null,
"ywlx": "NSR",
"title": "代号",
"dataIndex": "MD",
"key": "MD",
"fixed": "left",
"sorter": false,
"width": 140,
"className": "res-fixed-column",
"xh": 2,
"sortable": true,
"sfilter": true, // 使用过滤
"sfilterprops": {
"type": 'dateRange', // 过滤类型
"dateType": 'date' // 默认date 可选 month year
}
},
{
"code": "MC",
"format": null,
"index": 3,
"name": "数据名称",
"sfzs": "Y",
"vtype": "CHAR",
"ywlx": "NSR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"sort": null,
"title": "数据名称",
"dataIndex": "MC",
"key": "MC",
"fixed": "left",
"sorter": false,
"width": 140,
"className": "res-fixed-column",
"xh": 3,
},
{
"code": "AUTO_HINT_NUM",
"format": "NUMBER",
"index": 3,
"name": "风险数",
"sfzs": "Y",
"vtype": "NUMBER",
"ywlx": "NSR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"dataIndex": "AUTO_HINT_NUM",
"key": "AUTO_HINT_NUM",
"title": "风险数",
"width": 98,
"className": "res-fixed-column split-cell-r",
"fixed": "left"
}
],
},
{
"title": "数据2",
"className": " split-cell-r",
"key": 'FXDID_0_1',
"children": [
{
"fxdmc": "数据2",
"fxddm": "FXDID_0_1",
"fxzxms": "1",
"ywbid": "SSHS_NY_RKXX_ZB",
"id": "12312312",
"code": "12312312",
"name": "天数",
"ywlx": "ZB",
"vtype": "MONEY",
"ywfl": null,
"flfs": "MR",
"ywms": "天数",
"wlbbm": "",
"ysbm": "",
"mcsql": null,
"jgfwq": "2017-01-01",
"jgfw": "2017-2019",
"jgpl": "[\"ND\",\"YF\"]",
"jgplmc": "月/年",
"showyjz": "N",
"INDEX": 3,
"key": "QSZNTS",
"sorter": true,
"values": [
"1"
],
"operator": "LT",
"cslx": "GDZ",
"value": "1xy",
"dm": "12312312",
"mc": "天数",
"title": "天数",
"dataIndex": "QSZNTS",
"width": 197,
"filters": [{
label: '12天',
value: 12
},{
label: '13天',
value: 13
}, {
label: 'Nano 678',
value: 678,
children: [{
label: 'Nano 67',
value: 67,
children: [{
label: 'Nano 6',
value: 6
}, {
label: 'Nano 7',
value: 7
}]
}, {
label: 'Nano 8',
value: 8
}]
}, {
label: 'Other',
value: 'other',
children: [{
label: 'Nano 4',
value: 4
}, {
label: 'Nano 5',
value: 5
}]
}],
"filterMode": 'single',
},
{
"fxdmc": "数据2",
"fxddm": "FXDID_0_1",
"fxzxms": "1",
"ywbid": "ZB",
"id": "2342131",
"code": "2342131",
"name": "经营费用率",
"ywlx": "ZB",
"vtype": "PERCET",
"ywfl": null,
"flfs": "MR",
"ywms": "经营费用率",
"wlbbm": "",
"ysbm": "",
"mcsql": null,
"jgfwq": "2017-01-01",
"jgfw": "2017-2019",
"jgpl": "[\"ND\"]",
"jgplmc": "年",
"showyjz": "N",
"INDEX": 6,
"key": "FXDID_0_1.2342131",
"sorter": true,
"values": [],
"operator": "ISNULL",
"cslx": "GDZ",
"value": "4k",
"dm": "2342131",
"mc": "经营费用率",
"title": "经营费用率",
"dataIndex": "FXDID_0_1.2342131",
"className": "",
"width": 197
}
]
},
{
"title": "扩展信息",
"key": 'kzCols',
"children": [
{
"id": "JGID",
"code": "JGID",
"name": "机构类型",
"vtype": "WD",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "机构类型",
"dataIndex": "JGID$MC",
"key": "JGID",
"width": 154
},
{
"id": "JGMC",
"code": "JGMC",
"name": "机构名称",
"vtype": "CHAR",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "机构名称",
"dataIndex": "JGMC",
"key": "JGMC",
"width": 154
},
{
"id": "ID",
"code": "ID",
"name": "标志",
"vtype": "WD",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "标志",
"dataIndex": "ID$MC",
"key": "ID",
"width": 154
}
]
}
];
class App extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: dataSource()
};
}
// 过滤回调函数
onFilter(filterParams) {
console.log('filter 返回数据');
console.log(filterParams);
let ds = dataSource();
Object.keys(filterParams).forEach(key => {
const selectedKeys = filterParams[key].selectedKeys;
if (selectedKeys.length) {
ds = ds.filter(record => {
return selectedKeys.some(value => {
return record[key].indexOf(value) > -1;
});
});
}
});
this.setState({dataSource: ds});
}
render() {
return (
<div>
<SyfedTable
dataSource={ this.state.dataSource }
columns={ columns }
onFilter={ this.onFilter.bind(this) }
/>
</div>
);
}
}
ReactDOM.render((
<App />
), mountNode);本 Demo 演示一行文字的用法。
showOrHideColumns:{
enable: true, // 开启隐藏/显示列功能 默认 false
trigger: showOrHideColumnsTrigger // 触发元素 默认'<span>隐藏/显示元素</span>'
}import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Button } from '@alifd/next';
import SyfedTable from 'syfed-table';
// 模拟数据
const dataSource = () => {
const result = [];
for (let i = 0; i < 5; i++) {
result.push({
index: i + 1,
AUTO_HINT_DMS: "FXDID_0_1",
AUTO_HINT_NUM: 1,
AUTO_ROWNUM: 1,
AUTO_SIZE: -1,
FXDID_0_1: 1,
AH: `1011610100005181871${i}`,
MC: `数据2819675${i}`,
NSRSBH: "61011606420589974",
ID: "1",
MD: "aaa",
JGMC: "数据",
"FXDID_0_1.2342131": "21.81%",
"QSZNTS": `${12 + i}天`,
JGID: "--",
ZQ_ID: "20180000004",
});
}
return result;
},
/* 必填项：title、dataIndex、key，其中dataIndex和key要一致并且是独一无二的 */
columns = [{
"title": "序号",
"dataIndex": "INDEX",
"key": "INDEX",
"width": 80,
"className": "res-fixed-column",
"fixed": "left"
},
{
"title": "基本信息",
"key": 'baseCols',
"dataIndex": 'baseCols',
"children": [
{
"code": "MD",
"visible": false, // 隐藏列
"format": null,
"index": 1,
"name": "代号",
"sfzs": "Y",
"vtype": "CHAR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"link": null,
"sort": null,
"ywlx": "NSR",
"title": "代号",
"dataIndex": "MD",
"key": "MD",
"fixed": "left",
"sorter": false,
"width": 140,
"className": "res-fixed-column",
"xh": 2,
"sortable": true,
"sfilter": true,
"sfilterprops": {
"type": 'txtRange',
"data": [
{
value: 'appale',
label: 'Appale',
}, {
value: 'pear',
label: 'Pear',
}, {
value: 'orange',
label: 'Orange',
}]
}
},
{
"code": "MC",
"format": null,
"index": 3,
"name": "数据名称",
"sfzs": "Y",
"vtype": "CHAR",
"ywlx": "NSR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"sort": null,
"title": "数据名称",
"dataIndex": "MC",
"key": "MC",
"fixed": "left",
"sorter": false,
"width": 140,
"className": "res-fixed-column",
"xh": 3,
"sfilter": true,
"sfilterprops": {
"type": 'checkbox',
"itemDirection":'ver',
"data": [
{
value: '数据',
label: '数据',
}, {
value: '2819',
label: '2819',
}, {
value: '6752',
label: '6752',
}]
}
},
{
"code": "AUTO_HINT_NUM",
"format": "NUMBER",
"index": 3,
"name": "风险数",
"sfzs": "Y",
"vtype": "NUMBER",
"ywlx": "NSR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"dataIndex": "AUTO_HINT_NUM",
"key": "AUTO_HINT_NUM",
"title": "风险数",
"width": 98,
"className": "res-fixed-column split-cell-r",
"fixed": "left"
}
],
},
{
"title": "数据2",
"className": " split-cell-r",
"key": 'FXDID_0_1',
"dataIndex": 'FXDID_0_1',
"children": [
{
"fxdmc": "数据2",
"fxddm": "FXDID_0_1",
"fxzxms": "1",
"ywbid": "SSHS_NY_RKXX_ZB",
"id": "12312312",
"code": "12312312",
"name": "天数",
"ywlx": "ZB",
"vtype": "MONEY",
"ywfl": null,
"flfs": "MR",
"ywms": "天数",
"wlbbm": "",
"ysbm": "",
"mcsql": null,
"jgfwq": "2017-01-01",
"jgfw": "2017-2019",
"jgpl": "[\"ND\",\"YF\"]",
"jgplmc": "月/年",
"showyjz": "N",
"INDEX": 3,
"key": "QSZNTS",
"sorter": true,
"values": [
"1"
],
"operator": "LT",
"cslx": "GDZ",
"value": "1xy",
"dm": "12312312",
"mc": "天数",
"title": "天数",
"dataIndex": "QSZNTS",
"width": 197,
"filters": [{
label: '12天',
value: 12
},{
label: '13天',
value: 13
}, {
label: 'Nano 678',
value: 678,
children: [{
label: 'Nano 67',
value: 67,
children: [{
label: 'Nano 6',
value: 6
}, {
label: 'Nano 7',
value: 7
}]
}, {
label: 'Nano 8',
value: 8
}]
}, {
label: 'Other',
value: 'other',
children: [{
label: 'Nano 4',
value: 4
}, {
label: 'Nano 5',
value: 5
}]
}],
"filterMode": 'single',
},
{
"fxdmc": "数据2",
"fxddm": "FXDID_0_1",
"fxzxms": "1",
"ywbid": "ZB",
"id": "2342131",
"code": "2342131",
"name": "经营费用率",
"ywlx": "ZB",
"vtype": "PERCET",
"ywfl": null,
"flfs": "MR",
"ywms": "经营费用率",
"wlbbm": "",
"ysbm": "",
"mcsql": null,
"jgfwq": "2017-01-01",
"jgfw": "2017-2019",
"jgpl": "[\"ND\"]",
"jgplmc": "年",
"showyjz": "N",
"INDEX": 6,
"key": "FXDID_0_1.2342131",
"sorter": true,
"values": [],
"operator": "ISNULL",
"cslx": "GDZ",
"value": "4k",
"dm": "2342131",
"mc": "经营费用率",
"title": "经营费用率",
"dataIndex": "FXDID_0_1.2342131",
"className": "",
"width": 197,
"children":[
{
"id": "SW1",
"code": "SW1",
"name": "数据1",
"vtype": "CHAR",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "数据1",
"dataIndex": "SW1",
"key": "SW1",
"width": 154,
"visible":false
},
{
"id": "SW2",
"code": "SW2",
"name": "数据2",
"vtype": "CHAR",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "数据2",
"dataIndex": "SW2",
"key": "SW2",
"width": 154
}
]
}
]
},
{
"title": "扩展信息",
"key": 'kzCols',
"dataIndex": 'kzCols',
"children": [
{
"id": "JGID",
"code": "JGID",
"name": "机构类型",
"vtype": "WD",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "机构类型",
"dataIndex": "JGID",
"key": "JGID",
"width": 154
},
{
"id": "JGMC",
"code": "JGMC",
"name": "机构名称",
"vtype": "CHAR",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "机构名称",
"dataIndex": "JGMC",
"key": "JGMC",
"width": 154
},
{
"id": "ID",
"code": "ID",
"name": "标志",
"vtype": "WD",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "标志",
"dataIndex": "ID",
"key": "ID",
"width": 154
}
]
}
];
// const columns=treeToListForTable(cols,0,[]);//cols-数据data，0-初始化的最外层的parentId，[]-空数组，初始化构造多表头
// console.log(columns);
class App extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: dataSource()
};
}
// 过滤回调函数
onFilter(filterParams) {
console.log('filter 返回数据');
console.log(filterParams);
let ds = dataSource();
Object.keys(filterParams).forEach(key => {
const selectedKeys = filterParams[key].selectedKeys;
if (selectedKeys.length) {
ds = ds.filter(record => {
return selectedKeys.some(value => {
return record[key].indexOf(value) > -1;
});
});
}
});
this.setState({dataSource: ds});
}
render() {
const showOrHideColumnsTrigger = (<p><Button >隐藏/显示列22</Button></p>);
return (
<div>
<SyfedTable
dataSource={ this.state.dataSource }
columns={ columns }
onFilter={ this.onFilter.bind(this) }
showOrHideColumns={
{
enable: true,
trigger: showOrHideColumnsTrigger
}
}
/>
</div>
);
}
}
ReactDOM.render((
<App />
), mountNode);表格单位切换
col = {
...colProps, //表格列其他属性值
"vtype": 'money', // 要切换单位的类型，可是其他类型
}
table属性
<SyfedTable
...
switchShow={true} //是否显示单位切换
switchType="money" //需要单位切换类型
switchData = {switchData} //自定义单位，非必填，默认元~亿元
defaultUnit="10000" //默认单位，非必填，不填默认switchData数组第一个值
showUnitText={true} //是否显示具体单位，默认false不显示
/>
switchData 里面数据
{ value: '1', label: '元',format:formatUnit }
format属性是单位切换方法
非必填，默认，单位切换保留2位小数，并千分位
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import SyfedTable from 'syfed-table';
// 模拟数据
const dataSource = () => {
const result = [];
for (let i = 0; i < 5; i++) {
result.push({
INDEX: i + 1,
AUTO_HINT_DMS: "FXDID_0_1",
AUTO_HINT_NUM: 1,
AUTO_ROWNUM: 1,
AUTO_SIZE: -1,
FXDID_0_1: 1,
AH: `1011610100005181871${i}`,
MC: `数据2819675${i}`,
NSRSBH: "61011606420589974",
ID: "1",
ID$MC: null,
MD: "aaa",
JGMC: "数据",
"FXDID_0_1.2342131": "21.81%",
"QSZNTS": `${1234242 + i}`,
JGID: "--",
JGID$MC: null,
ZQ_ID: "20180000004",
});
}
return result;
},columns = [{
"title": "序号",
"dataIndex": "INDEX",
"key": "INDEX",
"width": 80,
"className": "res-fixed-column",
"fixed": "left"
},
{
"title": "基本信息",
"key": 'baseCols',
"children": [
{
"code": "MD",
"format": null,
"index": 1,
"name": "代号",
"sfzs": "Y",
"vtype": "CHAR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"link": null,
"sort": null,
"ywlx": "NSR",
"title": "代号",
"dataIndex": "MD",
"key": "MD",
"fixed": "left",
"sorter": false,
"width": 140,
"className": "res-fixed-column",
"xh": 2,
"sortable": true,
"sfilter": true,
"sfilterprops": {
"type": 'txtRange',
"data": [
{
value: 'appale',
label: 'Appale',
}, {
value: 'pear',
label: 'Pear',
}, {
value: 'orange',
label: 'Orange',
}]
}
},
{
"code": "MC",
"format": null,
"index": 3,
"name": "数据名称",
"sfzs": "Y",
"vtype": "CHAR",
"ywlx": "NSR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"sort": null,
"title": "数据名称",
"dataIndex": "MC",
"key": "MC",
"fixed": "left",
"sorter": false,
"width": 140,
"className": "res-fixed-column",
"xh": 3,
"sfilter": true,
"sfilterprops": {
"type": 'checkbox',
"itemDirection":'ver',
"data": [
{
value: '数据',
label: '数据',
}, {
value: '2819',
label: '2819',
}, {
value: '6752',
label: '6752',
}]
}
},
{
"code": "AUTO_HINT_NUM",
"format": "NUMBER",
"index": 3,
"name": "风险数",
"sfzs": "Y",
"vtype": "NUMBER",
"ywlx": "NSR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"dataIndex": "AUTO_HINT_NUM",
"key": "AUTO_HINT_NUM",
"title": "风险数",
"width": 98,
"className": "res-fixed-column split-cell-r",
"fixed": "left"
}
],
},
{
"title": "数据2",
"className": " split-cell-r",
"key": 'FXDID_0_1',
"children": [
{
"fxdmc": "数据2",
"fxddm": "FXDID_0_1",
"fxzxms": "1",
"ywbid": "SSHS_NY_RKXX_ZB",
"id": "12312312",
"code": "12312312",
"name": "天数",
"ywlx": "ZB",
"vtype": "money",
"ywfl": null,
"flfs": "MR",
"ywms": "天数",
"wlbbm": "",
"ysbm": "",
"mcsql": null,
"jgfwq": "2017-01-01",
"jgfw": "2017-2019",
"jgpl": "[\"ND\",\"YF\"]",
"jgplmc": "月/年",
"showyjz": "N",
"INDEX": 3,
"key": "QSZNTS",
"sorter": true,
"values": [
"1"
],
"operator": "LT",
"cslx": "GDZ",
"value": "1xy",
"dm": "12312312",
"mc": "天数",
"title": "天数",
"dataIndex": "QSZNTS",
"width": 197,
"filters": [{
label: '12天',
value: 12
},{
label: '13天',
value: 13
}, {
label: 'Nano 678',
value: 678,
children: [{
label: 'Nano 67',
value: 67,
children: [{
label: 'Nano 6',
value: 6
}, {
label: 'Nano 7',
value: 7
}]
}, {
label: 'Nano 8',
value: 8
}]
}, {
label: 'Other',
value: 'other',
children: [{
label: 'Nano 4',
value: 4
}, {
label: 'Nano 5',
value: 5
}]
}],
"filterMode": 'single',
},
{
"fxdmc": "数据2",
"fxddm": "FXDID_0_1",
"fxzxms": "1",
"ywbid": "ZB",
"id": "2342131",
"code": "2342131",
"name": "经营费用率",
"ywlx": "ZB",
"vtype": "PERCET",
"ywfl": null,
"flfs": "MR",
"ywms": "经营费用率",
"wlbbm": "",
"ysbm": "",
"mcsql": null,
"jgfwq": "2017-01-01",
"jgfw": "2017-2019",
"jgpl": "[\"ND\"]",
"jgplmc": "年",
"showyjz": "N",
"INDEX": 6,
"key": "FXDID_0_1.2342131",
"sorter": true,
"values": [],
"operator": "ISNULL",
"cslx": "GDZ",
"value": "4k",
"dm": "2342131",
"mc": "经营费用率",
"title": "经营费用率",
"dataIndex": "FXDID_0_1.2342131",
"className": "",
"width": 197
}
]
},
{
"title": "扩展信息",
"key": 'kzCols',
"children": [
{
"id": "JGID",
"code": "JGID",
"name": "机构类型",
"vtype": "WD",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "机构类型",
"dataIndex": "JGID$MC",
"key": "JGID",
"width": 154
},
{
"id": "JGMC",
"code": "JGMC",
"name": "机构名称",
"vtype": "CHAR",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "机构名称",
"dataIndex": "JGMC",
"key": "JGMC",
"width": 154
},
{
"id": "ID",
"code": "ID",
"name": "标志",
"vtype": "WD",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "标志",
"dataIndex": "ID$MC",
"key": "ID",
"width": 154
}
]
}
];
const formatUnit = (str, switchUnit) => {
let beforeUnit = 1;
if (switchData && switchData.length > 0) {
beforeUnit = parseInt(switchData[0].value, 10);
}
const strs = ((str / switchUnit) * beforeUnit).toFixed(2);
// 判断是否有小数点
const s = strs.toString().indexOf('.');
if (s === -1) { // 是整数
return `${(strs || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')}.00`;
} else { // 是小数
const arr = strs.toString().split('.');
if (arr.length > 1 && arr[1].length < 2) { // 一位小数
return `${(arr[0] || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')}.${arr[1]}0`;
} else { // 两位小数
return `${(arr[0] || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')}.${arr[1]}`;
}
}
};
const switchData = [
{ value: '10000', label: '万元' },
{ value: '1000000', label: '百万'},
{ value: '100000000', label: '千万' ,format:formatUnit},
{ value: '1000000000', label: '亿元' ,format:formatUnit},
];
class App extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: dataSource()
};
}
render() {
return (
<div>
<SyfedTable
dataSource={ this.state.dataSource }
columns={ columns }
switchShow={true}
switchType="money"
defaultUnit="10000"
showUnitText={true}
// switchData = {switchData}
/>
</div>
);
}
}
ReactDOM.render((
<App />
), mountNode);可拖拽排序的表格。
<SyfedTable
...props,
dragSortable, // 可拖拽排序
/>import React, { Component } from 'react';
import { Table } from '@alifd/next';
import ReactDOM from 'react-dom';
import SyfedTable from 'syfed-table';
// 模拟数据
const dataSource = () => {
const result = [];
for (let i = 0; i < 5; i++) {
result.push({
index: i + 1,
AUTO_HINT_DMS: "FXDID_0_1",
AUTO_HINT_NUM: 1,
AUTO_ROWNUM: 1,
AUTO_SIZE: -1,
FXDID_0_1: 1,
AH: `1011610100005181871${i}`,
MC: `数据2819675${i}`,
NSRSBH: "61011606420589974",
ID: "1",
ID$MC: null,
MD: "aaa",
JGMC: "数据",
"FXDID_0_1.2342131": "21.81%",
"QSZNTS": `${12 + i}天`,
JGID: "--",
JGID$MC: null,
ZQ_ID: "20180000004",
});
}
return result;
},
columns = [{
"title": "序号",
"dataIndex": "index",
"key": "index",
"width": 80,
"className": "res-fixed-column",
"fixed": "left"
},
{
"title": "基本信息",
"key": 'baseCols',
"children": [
{
"code": "MD",
"format": null,
"index": 1,
"name": "代号",
"sfzs": "Y",
"vtype": "CHAR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"link": null,
"sort": null,
"ywlx": "NSR",
"title": "代号",
"dataIndex": "MD",
"key": "MD",
"fixed": "left",
"sorter": false,
"width": 140,
"className": "res-fixed-column",
"xh": 2,
"sortable": true,
"sfilter": true,
"sfilterprops": {
"type": 'txtRange',
"data": [
{
value: 'appale',
label: 'Appale',
}, {
value: 'pear',
label: 'Pear',
}, {
value: 'orange',
label: 'Orange',
}]
}
},
{
"code": "MC",
"format": null,
"index": 3,
"name": "数据名称",
"sfzs": "Y",
"vtype": "CHAR",
"ywlx": "NSR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"sort": null,
"title": "数据名称",
"dataIndex": "MC",
"key": "MC",
"fixed": "left",
"sorter": false,
"width": 140,
"className": "res-fixed-column",
"xh": 3,
"sfilter": true,
"sfilterprops": {
"type": 'checkbox',
"itemDirection":'ver',
"data": [
{
value: '数据',
label: '数据',
}, {
value: '2819',
label: '2819',
}, {
value: '6752',
label: '6752',
}]
}
},
{
"code": "AUTO_HINT_NUM",
"format": "NUMBER",
"index": 3,
"name": "风险数",
"sfzs": "Y",
"vtype": "NUMBER",
"ywlx": "NSR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"dataIndex": "AUTO_HINT_NUM",
"key": "AUTO_HINT_NUM",
"title": "风险数",
"width": 98,
"className": "res-fixed-column split-cell-r",
"fixed": "left"
}
],
},
{
"title": "数据2",
"className": " split-cell-r",
"key": 'FXDID_0_1',
"children": [
{
"fxdmc": "数据2",
"fxddm": "FXDID_0_1",
"fxzxms": "1",
"ywbid": "SSHS_NY_RKXX_ZB",
"id": "12312312",
"code": "12312312",
"name": "天数",
"ywlx": "ZB",
"vtype": "MONEY",
"ywfl": null,
"flfs": "MR",
"ywms": "天数",
"wlbbm": "",
"ysbm": "",
"mcsql": null,
"jgfwq": "2017-01-01",
"jgfw": "2017-2019",
"jgpl": "[\"ND\",\"YF\"]",
"jgplmc": "月/年",
"showyjz": "N",
"INDEX": 3,
"key": "QSZNTS",
"sorter": true,
"values": [
"1"
],
"operator": "LT",
"cslx": "GDZ",
"value": "1xy",
"dm": "12312312",
"mc": "天数",
"title": "天数",
"dataIndex": "QSZNTS",
"width": 197,
"filters": [{
label: '12天',
value: 12
},{
label: '13天',
value: 13
}, {
label: 'Nano 678',
value: 678,
children: [{
label: 'Nano 67',
value: 67,
children: [{
label: 'Nano 6',
value: 6
}, {
label: 'Nano 7',
value: 7
}]
}, {
label: 'Nano 8',
value: 8
}]
}, {
label: 'Other',
value: 'other',
children: [{
label: 'Nano 4',
value: 4
}, {
label: 'Nano 5',
value: 5
}]
}],
"filterMode": 'single',
},
{
"fxdmc": "数据2",
"fxddm": "FXDID_0_1",
"fxzxms": "1",
"ywbid": "ZB",
"id": "2342131",
"code": "2342131",
"name": "经营费用率",
"ywlx": "ZB",
"vtype": "PERCET",
"ywfl": null,
"flfs": "MR",
"ywms": "经营费用率",
"wlbbm": "",
"ysbm": "",
"mcsql": null,
"jgfwq": "2017-01-01",
"jgfw": "2017-2019",
"jgpl": "[\"ND\"]",
"jgplmc": "年",
"showyjz": "N",
"INDEX": 6,
"key": "FXDID_0_1.2342131",
"sorter": true,
"values": [],
"operator": "ISNULL",
"cslx": "GDZ",
"value": "4k",
"dm": "2342131",
"mc": "经营费用率",
"title": "经营费用率",
"dataIndex": "FXDID_0_1.2342131",
"className": "",
"width": 197
}
]
},
{
"title": "扩展信息",
"key": 'kzCols',
"children": [
{
"id": "JGID",
"code": "JGID",
"name": "机构类型",
"vtype": "WD",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "机构类型",
"dataIndex": "JGID$MC",
"key": "JGID",
"width": 154
},
{
"id": "JGMC",
"code": "JGMC",
"name": "机构名称",
"vtype": "CHAR",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "机构名称",
"dataIndex": "JGMC",
"key": "JGMC",
"width": 154
},
{
"id": "ID",
"code": "ID",
"name": "标志",
"vtype": "WD",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "标志",
"dataIndex": "ID$MC",
"key": "ID",
"width": 154
}
]
}
];
const result = [{
id: '001',
time: 1951,
title: {name: 'The Old Man and the Sea'},
}, {
id: '002',
time: 1925,
title: {name: 'the great gatsby'},
}, {
id: '003',
time: 1719,
title: {name: 'The adventures of Robinson Crusoe'},
}];
class App extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: dataSource()
};
}
// 过滤回调函数
onFilter(filterParams) {
console.log('filter 返回数据');
console.log(filterParams);
let ds = dataSource();
Object.keys(filterParams).forEach(key => {
const selectedKeys = filterParams[key].selectedKeys;
if (selectedKeys.length) {
ds = ds.filter(record => {
return selectedKeys.some(value => {
return record[key].indexOf(value) > -1;
});
});
}
});
this.setState({dataSource: ds});
}
render() {
return (
<div>
<SyfedTable
dragSortable
dataSource={ this.state.dataSource }
columns={ columns }
onFilter={ this.onFilter.bind(this) }
/>
</div>
);
}
}
ReactDOM.render((
<App />
), mountNode);表格季度过滤。
col = {
...colProps, //表格列其他属性值
"sfilter": true, // 使用过滤
"sfilterprops": {
"type": 'quarter', // 过滤类型季度
"dateData":[2016,2017,2018,2019] //年份显示非必填，不填就是显示所有年份
}
}
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import SyfedTable from 'syfed-table';
// 模拟数据
const dataSource = () => {
const result = [];
for (let i = 0; i < 5; i++) {
result.push({
index: i + 1,
AUTO_HINT_DMS: "FXDID_0_1",
AUTO_HINT_NUM: 1,
AUTO_ROWNUM: 1,
AUTO_SIZE: -1,
FXDID_0_1: 1,
AH: `1011610100005181871${i}`,
MC: `数据2819675${i}`,
NSRSBH: "61011606420589974",
ID: "1",
ID$MC: null,
MD: "aaa",
JGMC: "数据",
"FXDID_0_1.2342131": "21.81%",
"QSZNTS": `${12 + i}天`,
JGID: "--",
JGID$MC: null,
ZQ_ID: "20180000004",
});
}
return result;
},
columns = [
{
"title": "序号",
"dataIndex": "INDEX",
"key": "INDEX",
"width": 80,
"className": "res-fixed-column",
"fixed": "left"
},
{
"title": "基本信息",
"key": 'baseCols',
"children": [
{
"code": "MD",
"format": null,
"index": 1,
"name": "代号",
"sfzs": "Y",
"vtype": "CHAR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"link": null,
"sort": null,
"ywlx": "NSR",
"title": "代号",
"dataIndex": "MD",
"key": "MD",
"fixed": "left",
"sorter": false,
"width": 140,
"className": "res-fixed-column",
"xh": 2,
"sortable": true,
"sfilter": true,
"sfilterprops": {
"type": 'quarter',
"dateData":[2016,2017,2018,2019]
}
},
{
"code": "MC",
"format": null,
"index": 3,
"name": "数据名称",
"sfzs": "Y",
"vtype": "CHAR",
"ywlx": "NSR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"sort": null,
"title": "数据名称",
"dataIndex": "MC",
"key": "MC",
"fixed": "left",
"sorter": false,
"width": 140,
"className": "res-fixed-column",
"xh": 3,
},
{
"code": "AUTO_HINT_NUM",
"format": "NUMBER",
"index": 3,
"name": "风险数",
"sfzs": "Y",
"vtype": "NUMBER",
"ywlx": "NSR",
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"head": null,
"dataIndex": "AUTO_HINT_NUM",
"key": "AUTO_HINT_NUM",
"title": "风险数",
"width": 98,
"className": "res-fixed-column split-cell-r",
"fixed": "left"
}
],
},
{
"title": "数据2",
"className": " split-cell-r",
"key": 'FXDID_0_1',
"children": [
{
"fxdmc": "数据2",
"fxddm": "FXDID_0_1",
"fxzxms": "1",
"ywbid": "SSHS_NY_RKXX_ZB",
"id": "12312312",
"code": "12312312",
"name": "天数",
"ywlx": "ZB",
"vtype": "MONEY",
"ywfl": null,
"flfs": "MR",
"ywms": "天数",
"wlbbm": "",
"ysbm": "",
"mcsql": null,
"jgfwq": "2017-01-01",
"jgfw": "2017-2019",
"jgpl": "[\"ND\",\"YF\"]",
"jgplmc": "月/年",
"showyjz": "N",
"INDEX": 3,
"key": "QSZNTS",
"sorter": true,
"values": [
"1"
],
"operator": "LT",
"cslx": "GDZ",
"value": "1xy",
"dm": "12312312",
"mc": "天数",
"title": "天数",
"dataIndex": "QSZNTS",
"width": 197,
"filters": [{
label: '12天',
value: 12
},{
label: '13天',
value: 13
}, {
label: 'Nano 678',
value: 678,
children: [{
label: 'Nano 67',
value: 67,
children: [{
label: 'Nano 6',
value: 6
}, {
label: 'Nano 7',
value: 7
}]
}, {
label: 'Nano 8',
value: 8
}]
}, {
label: 'Other',
value: 'other',
children: [{
label: 'Nano 4',
value: 4
}, {
label: 'Nano 5',
value: 5
}]
}],
"filterMode": 'single',
},
{
"fxdmc": "数据2",
"fxddm": "FXDID_0_1",
"fxzxms": "1",
"ywbid": "ZB",
"id": "2342131",
"code": "2342131",
"name": "经营费用率",
"ywlx": "ZB",
"vtype": "PERCET",
"ywfl": null,
"flfs": "MR",
"ywms": "经营费用率",
"wlbbm": "",
"ysbm": "",
"mcsql": null,
"jgfwq": "2017-01-01",
"jgfw": "2017-2019",
"jgpl": "[\"ND\"]",
"jgplmc": "年",
"showyjz": "N",
"INDEX": 6,
"key": "FXDID_0_1.2342131",
"sorter": true,
"values": [],
"operator": "ISNULL",
"cslx": "GDZ",
"value": "4k",
"dm": "2342131",
"mc": "经营费用率",
"title": "经营费用率",
"dataIndex": "FXDID_0_1.2342131",
"className": "",
"width": 197
}
]
},
{
"title": "扩展信息",
"key": 'kzCols',
"children": [
{
"id": "JGID",
"code": "JGID",
"name": "机构类型",
"vtype": "WD",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "机构类型",
"dataIndex": "JGID$MC",
"key": "JGID",
"width": 154
},
{
"id": "JGMC",
"code": "JGMC",
"name": "机构名称",
"vtype": "CHAR",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "机构名称",
"dataIndex": "JGMC",
"key": "JGMC",
"width": 154
},
{
"id": "ID",
"code": "ID",
"name": "标志",
"vtype": "WD",
"ywlx": "NSR",
"jgfwq": null,
"sort": null,
"index": 0,
"sfkpx": null,
"sfkgl": null,
"sfkfz": null,
"sfzs": null,
"head": null,
"link": null,
"format": null,
"zzfxtj": null,
"title": "标志",
"dataIndex": "ID$MC",
"key": "ID",
"width": 154
}
]
}
];
class App extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: dataSource()
};
}
// 过滤回调函数
onFilter(filterParams) {
console.log('filter 返回数据');
console.log(filterParams);
let ds = dataSource();
Object.keys(filterParams).forEach(key => {
const selectedKeys = filterParams[key].selectedKeys;
if (selectedKeys.length) {
ds = ds.filter(record => {
return selectedKeys.some(value => {
return record[key].indexOf(value) > -1;
});
});
}
});
this.setState({dataSource: ds});
}
render() {
return (
<div>
<SyfedTable
dataSource={ this.state.dataSource }
columns={ columns }
onFilter={ this.onFilter.bind(this) }
/>
</div>
);
}
}
ReactDOM.render((
<App />
), mountNode);