树状表API
树状表样式
使用说明
树状表API
let datas = {"data": {"gird1": {"pageInfo": {"pageIndex": "0","pageSize": "10","total": "23","totalPage": "3"},"rows": [{"status": 0,"isleaf":false, //异步时需要添加isleaf字段。false：有子节点；true：没有子节点"values": {"refpk":{"display": null,"scale": 0,"value": "a",},"pk":{"display": null,"scale": 0,"value": "a",},"name": {"display": null,"scale": 0,"value": "老大",},"age": {"display": null,"scale": 0,"value": "66"},"address": {"display": null,"scale": 0,"value": "中国"},}},// {// "status": 0,// "values": {// "pid":{// "display": null,// "scale": 0,// "value": "a",// },// "pk":{// "display": null,// "scale": 0,// "value": "a1",// },// "refpk":{// "display": null,// "scale": 0,// "value": "a1",// },// "name": {// "display": null,// "scale": 0,// "value": "老二"// },// "age": {// "display": null,// "scale": 0,// "value": "55"// },// "address": {// "display": null,// "scale": 0,// "value": "中国山东"// },//// }// },// {// "status": 0,// "values": {// "pid":{// "display": null,// "scale": 0,// "value": "a",// },// "pk":{// "display": null,// "scale": 0,// "value": "a2",// },// "refpk":{// "display": null,// "scale": 0,// "value": "a2",// },// "name": {// "display": null,// "scale": 0,// "value": "老三"// },// "age": {// "display": null,// "scale": 0,// "value": "44"// },// "address": {// "display": null,// "scale": 0,// "value": "中国新疆"// },//// }// },{"status": 0,"isleaf":false, //"values": {"refpk":{"display": null,"scale": 0,"value": "b",},"pk":{"display": null,"scale": 0,"value": "b",},"name": {"display": null,"scale": 0,"value": "北京",},"age": {"display": null,"scale": 0,"value": "66666"},"address": {"display": null,"scale": 0,"value": "中国"},}},// {// "status": 0,// "values": {// "pid":{// "display": null,// "scale": 0,// "value": "b",// },// "pk":{// "display": null,// "scale": 0,// "value": "b1",// },// "refpk":{// "display": null,// "scale": 0,// "value": "b1",// },// "name": {// "display": null,// "scale": 0,// "value": "北京东城区"// },// "age": {// "display": null,// "scale": 0,// "value": "55"// },// "address": {// "display": null,// "scale": 0,// "value": "中国山东"// },//// }// },// {// "status": 0,// "values": {// "pid":{// "display": null,// "scale": 0,// "value": "b",// },// "pk":{// "display": null,// "scale": 0,// "value": "b2",// },// "refpk":{// "display": null,// "scale": 0,// "value": "b2",// },// "name": {// "display": null,// "scale": 0,// "value": "北京西城区"// },// "age": {// "display": null,// "scale": 0,// "value": "44"// },// "address": {// "display": null,// "scale": 0,// "value": "中国新疆"// },//// }// },{"status": 0,"values": {"refpk":{"display": null,"scale": 0,"value": "c",},"pk":{"display": null,"scale": 0,"value": "c",},"name": {"display": null,"scale": 0,"value": "新世界",},"age": {"display": null,"scale": 0,"value": "66"},"address": {"display": null,"scale": 0,"value": "中国"},}},]}},"error": null,"success": true};console.log(datas.data.gird1.rows);//同步时，将数据转换成组件需要的数据结构。需要先添加refpk(值为自身主键的值)、pid(值为父元素主键的值)两个字段。// this.newdata = this.props.treeTableManyCol.createNewData(datas.data.gird1.rows);//异步时，需要添加isleaf字段，表示当前行有子节点this.newdata = datas.data.gird1.rows;console.log(this.newdata)expandEve (item){console.log(item)let child = {"rows": [{"status": 0,"values": {"pid":{"display": null,"scale": 0,"value": item.refpk,},"refpk":{"display": null,"scale": 0,"value": "1111",},"pk":{"display": null,"scale": 0,"value": "1111",},"name": {"display": null,"scale": 0,"value": "老二"},"age": {"display": null,"scale": 0,"value": "55"},"address": {"display": null,"scale": 0,"value": "中国山东"},}},{"status": 0,"values": {"pid":{"display": null,"scale": 0,"value": item.refpk,},"refpk":{"display": null,"scale": 0,"value": "2222",},"pk":{"display": null,"scale": 0,"value": "2222",},"name": {"display": null,"scale": 0,"value": "老三"},"age": {"display": null,"scale": 0,"value": "44"},"address": {"display": null,"scale": 0,"value": "中国新疆"},}},]}setTimeout(() => {this.props.treeTableManyCol.setChildNode('treeTableCol', child.rows, item)},1000)render() {const {table, button, search, form, editTable, treeTableManyCol, modal } = this.props;let { treeTableCol } = treeTableManyCol;let { createModal } = modal;return (<div className="treeTableCol"><div className="leftBox">{ treeTableCol( 'treeTableCol',{expandEve: this.expandEve.bind(this) ,//异步执行，点击加号展开子节点collapandEve:this.collapandEve.bind(this) ,//异步执行，点击加号收起子节点async:true， //数据同步加载为false,异步加载为trueeditNodeCallBack:this.editNodeCallBack.bind(this), //编辑 回调addNodeCallBack:this.addNodeCallBack.bind(this), //新增回调delNodeCallBack:this.delNodeCallBack.bind(this), // 删除回调checkboxChange:this.checkboxChange.bind(this), //新增勾选onChange事件showCheckBox:true, // 是否显示复选框 ,默认false不显示checkedType:'radio', // 勾选方式，单选radio,多选 checkbox； 默认多选scrollConfig:{x:'130%',y:'80px'},ncOnRowDoubleClick:this.ncOnRowDoubleClick.bind(this),isDrag : true, //设置表格可拖拽 默认trueadaptionHeight: true //表格高度是否自适应，默认true} ) }</div></div>)}
树表前端数据查询
searchHandle() {
this.props.treeTableManyCol.searchTreeTable({moduleId: 'treeTableCol', searchValue: this.searchValue.value, filters: ['dataoriginflag', 'name']});
}
| 方法 | 参数描述/类型 | 名称 |
|---|---|---|
| treeTableCol（id,{ expandEve collapandEve async editNodeCallBack, addNodeCallBack, delNodeCallBack, }） |
id:组件id（string） expandEve:异步时，点加号展开子节点事件（fun）; async:同步加载\异步加载（false, true） |
创建树状表 |
| initTreeTableData(moduleId, data, rowId, defaultExpandAllRows, expandedRowKeys) | data: 数据; rowId: 表示当前行pk的字段名; defaultExpandAllRows:是否默认展开全部，默认值false; expandedRowKeys:Array, 指定展开节点 |
初始化组件 |
| setChildNode(moduleId, child, parent) | child:子元素数据； parent:当前行信息 |
异步加载时，设置子表数据 |
| editRowEve(moduleId, newData) | newData:编辑成功后的新数据 | 修改行 |
| checkboxChange(record, index, e) | record:勾选项数据 | 勾选onChange事件 |
| addChildRowEve(moduleId, newData, parent) | newData:新增行数据； parent:当前行信息 |
新增子元素 |
| addBrotherRow(moduleId, newData, brother) | newData:新增行数据； brother:当前行信息 |
新增兄弟行 |
| delRowByPk(moduleId, record) | record:当前行信息； | 删除行 |
| createNewData (data) | data:业务组数据，格式参考上方示例说明 | 同步时，组装树状表所需要的数据结构。异步加载不需要调用该方法 |
| getAllValue(moduleId) | moduleId:组件id | 获取当前表格所有数据 |
| getValueByRowId(moduleId, rowId) | rowId:行id； | 获取某行数据 |
| emptyAllData( moduleId ) | 清空表格数据 | |
| openRow( moduleId, key ) | key: 行数据中的主键值 | 展开某行 |
| closeRow( moduleId, key ) | key: 行数据中的主键值 | 收起某行 |
| getSelectedRow( moduleId ) | 获取勾选的选中行 | |
| scrollConfig | Obj | 配置表格滚动条 |
| isDrag | 布尔 | 设置表格可拖拽 默认true |
| ncOnRowDoubleClick(record, index, event) | record, index, event | 双击行事件 |
| searchTreeTable({ moduleId: XmoduleId, searchValue: XsearchValue, filters: Xfilters, expanded: true, defaultExpandAllRows: false}) | 传入参数是个对象，filters是数组或者null,为null标识全部字段查询 | 收起某行 |
| adaptionHeight | 布尔 | 表格高度是否自适应 默认 true |
若有收获，就点个赞吧
0 人点赞
