From 197ad06236b30d431495f159b53796b643b5cefc Mon Sep 17 00:00:00 2001 From: jonyshi Date: Mon, 4 Jun 2018 15:13:05 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=BA=E5=AE=9A=E5=88=97demo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/demolist/Demo24.js | 136 ++++++++++++++++++++++++++++------------ 1 file changed, 95 insertions(+), 41 deletions(-) diff --git a/demo/demolist/Demo24.js b/demo/demolist/Demo24.js index a814d9d..d7f42a9 100644 --- a/demo/demolist/Demo24.js +++ b/demo/demolist/Demo24.js @@ -2,58 +2,98 @@ * * @title 动态设置固、取消固定列 * @description 动态设置固、取消固定列 +* @description 动态固定列设置 一个table动态设置一个方向【fixed: "left",fixed: "right"】。 * */ import React, { Component } from 'react'; import Table from '../../src'; +// const columns24 = [ +// { +// title: "Full Name", +// width: 100, +// dataIndex: "name", +// key: "name", +// fixed: "left", +// }, +// { title: "Age", width: 100, dataIndex: "age", key: "age", fixed: "left" }, +// { title: "Column 1", dataIndex: "address", key: "1" }, +// { title: "Column 2", dataIndex: "address2", key: "2" }, +// { title: "Column 3", dataIndex: "address", key: "3" }, +// { title: "Column 4", dataIndex: "address", key: "4" }, +// { title: "Column 24", dataIndex: "address", key: "24" }, +// { title: "Column 6", dataIndex: "address", key: "6" }, +// { title: "Column 7", dataIndex: "address", key: "7" }, +// { title: "Column 8", dataIndex: "address", key: "8" } +// ]; + + const columns24 = [ { - title: "Full Name", + title: "名字", + dataIndex: "a", + key: "a", width: 100, - dataIndex: "name", - key: "name", fixed: "left", }, - { title: "Age", width: 100, dataIndex: "age", key: "age", fixed: "left" }, - { title: "Column 1", dataIndex: "address", key: "1" , fixed: "left" }, - { title: "Column 2", dataIndex: "address", key: "2" }, - { title: "Column 3", dataIndex: "address", key: "3" }, - { title: "Column 4", dataIndex: "address", key: "4" }, - { title: "Column 24", dataIndex: "address", key: "24" }, - { title: "Column 6", dataIndex: "address", key: "6" }, - { title: "Column 7", dataIndex: "address", key: "7" }, - { title: "Column 8", dataIndex: "address", key: "8" } + { + title: "性别", + dataIndex: "b", + key: "b", + width: 100, + fixed: "left", + }, + { + title: "年龄", + dataIndex: "c", + key: "c", + width: 100, + }, + { + title: "武功级别", + dataIndex: "d", + key: "d", + width: 150 + }, + { + title: "对手", + dataIndex: "e", + key: "e", + width: 100 + }, + { + title: "帮派", + dataIndex: "f", + key: "f", + width: 100 + }, + { + title: "武功类型", + dataIndex: "g", + key: "g", + width: 100 + }, + { + title: "师傅", + dataIndex: "k", + key: "k", + // width: 100 + }, + { + title: "攻击系数", + dataIndex: "h", + key: "h", + width: 100 + } ]; const data24 = [ - { - key: "1", - name: "John Brown", - age: 32, - address: "New York Park" - }, - { - key: "2", - name: "Jim Green", - age: 40, - address: "London Park" - }, - { - key: "3", - name: "Jim Green", - age: 40, - address: "London Park" - }, - { - key: "4", - name: "Jim Green", - age: 40, - address: "London Park" - } -]; - + { a: "杨过", b: "男", c: 30,d:'内行',e:'黄荣',f:'古墓派',g:'剑术',k:'小龙女',h:'0.5', key: "1" }, + { a: "令狐冲", b: "男", c: 41,d:'剑客',e:'自己',f:'无',g:'剑术',k:'无',h:'0.5', key: "2" }, + { a: "郭靖", b: "男", c: 25,d:'大侠',e:'黄荣',f:'朝廷',g:'内容',k:'外侵势力',h:'0.6', key: "3" } +]; + class Demo24 extends Component { constructor(props) { @@ -67,11 +107,25 @@ class Demo24 extends Component { } onHeadCellClick=(data,event)=>{ + let fixed = "left"; + let fixedIndex = 0; const {columns:_columns} = this.state; + _columns.find((da,i)=>{ + da.fixed?fixed=da.fixed:"left"; + da.fixed?fixedIndex = i:""; + }); let columns = []; Object.assign(columns,_columns); - let currObj = columns.find(da=>da.key == data.key); - currObj.fixed?delete currObj.fixed:currObj.fixed = "left"; + let fixedCols = []; + let nonColums = []; + let currObj = columns.find(da=>{ + if(da.key == data.key){ + da.fixed?delete da.fixed:da.fixed = fixed; + } + da.fixed?fixedCols.push(da):nonColums.push(da); + }); + columns = fixed=="left"?[...fixedCols,...nonColums]:[...nonColums,...fixedCols] + console.log(columns); this.setState({ columns }); @@ -79,7 +133,7 @@ class Demo24 extends Component { render() { const {columns} = this.state; - return ; + return
; } }