forgetest5
/
bee-table7
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

change demo

This commit is contained in:
BoyuZhou 2017-09-29 16:04:08 +08:00
parent ca7fcadd2e
commit b46877970d
12 changed files with 626 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.idea/bee-table.iml Normal file
View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

38
.idea/misc.xml Normal file
View File

@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="JavaScriptSettings">
<option name="languageLevel" value="JSX" />
</component>
<component name="JsFlowSettings">
<service-enabled>true</service-enabled>
<exe-path />
<annotation-enable>false</annotation-enable>
<other-services-enabled>true</other-services-enabled>
</component>
<component name="ProjectInspectionProfilesVisibleTreeState">
<entry key="Project Default">
<profile-state>
<expanded-state>
<State>
<id />
</State>
<State>
<id>CSS</id>
</State>
<State>
<id>Code quality toolsCSS</id>
</State>
<State>
<id>GeneralJavaScript</id>
</State>
<State>
<id>JavaScript</id>
</State>
<State>
<id>Node.jsJavaScript</id>
</State>
</expanded-state>
</profile-state>
</entry>
</component>
</project>

8
.idea/modules.xml Normal file
View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/bee-table.iml" filepath="$PROJECT_DIR$/.idea/bee-table.iml" />
</modules>
</component>
</project>

6
.idea/vcs.xml Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" />
</component>
</project>

278
.idea/workspace.xml Normal file
View File

@ -0,0 +1,278 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ChangeListManager">
<list default="true" id="fc6f46f1-46b7-479d-a1be-6709765e93ca" name="Default" comment="">
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/.idea/vcs.xml" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/build/Table.js" afterPath="$PROJECT_DIR$/build/Table.js" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/demolist/Demo10.js" afterPath="$PROJECT_DIR$/demo/demolist/Demo10.js" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/demolist/Demo7.js" afterPath="$PROJECT_DIR$/demo/demolist/Demo7.js" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/demolist/Demo8.js" afterPath="$PROJECT_DIR$/demo/demolist/Demo8.js" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/demolist/Demo9.js" afterPath="$PROJECT_DIR$/demo/demolist/Demo9.js" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/index.js" afterPath="$PROJECT_DIR$/demo/index.js" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/package.json" afterPath="$PROJECT_DIR$/package.json" />
</list>
<ignored path="$PROJECT_DIR$/.tmp/" />
<ignored path="$PROJECT_DIR$/temp/" />
<ignored path="$PROJECT_DIR$/tmp/" />
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="TRACKING_ENABLED" value="true" />
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="ExecutionTargetManager" SELECTED_TARGET="default_target" />
<component name="FileEditorManager">
<leaf>
<file leaf-file-name="Demo7.js" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo7.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="456">
<caret line="81" column="41" lean-forward="false" selection-start-line="81" selection-start-column="41" selection-end-line="81" selection-end-column="41" />
<folding>
<element signature="n#!!doc" expanded="true" />
<element signature="e#54#93#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
</file>
<file leaf-file-name="package.json" pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/package.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="560">
<caret line="41" column="22" lean-forward="false" selection-start-line="41" selection-start-column="22" selection-end-line="41" selection-end-column="22" />
<folding />
</state>
</provider>
</entry>
</file>
</leaf>
</component>
<component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
</component>
<component name="IdeDocumentHistory">
<option name="CHANGED_PATHS">
<list>
<option value="$PROJECT_DIR$/demo/demolist/Demo10.js" />
<option value="$PROJECT_DIR$/demo/demolist/Demo9.js" />
<option value="$PROJECT_DIR$/demo/demolist/Demo8.js" />
<option value="$PROJECT_DIR$/demo/demolist/Demo7.js" />
<option value="$PROJECT_DIR$/package.json" />
</list>
</option>
</component>
<component name="JsBuildToolGruntFileManager" detection-done="true" sorting="DEFINITION_ORDER" />
<component name="JsBuildToolPackageJson" detection-done="true" sorting="DEFINITION_ORDER">
<package-json value="$PROJECT_DIR$/package.json" />
</component>
<component name="JsGulpfileManager">
<detection-done>true</detection-done>
<sorting>DEFINITION_ORDER</sorting>
</component>
<component name="NodeModulesDirectoryManager">
<handled-path value="$PROJECT_DIR$/node_modules" />
</component>
<component name="ProjectFrameBounds">
<option name="x" value="-8" />
<option name="width" value="1920" />
<option name="height" value="1084" />
</component>
<component name="ProjectLevelVcsManager">
<ConfirmationsSetting value="2" id="Add" />
</component>
<component name="ProjectView">
<navigator currentView="ProjectPane" proportions="" version="1">
<flattenPackages />
<showMembers />
<showModules />
<showLibraryContents />
<hideEmptyPackages />
<abbreviatePackageNames />
<autoscrollToSource />
<autoscrollFromSource />
<sortByType />
<manualOrder />
<foldersAlwaysOnTop value="true" />
</navigator>
<panes>
<pane id="Scope" />
<pane id="Scratches" />
<pane id="ProjectPane">
<subPane>
<PATH>
<PATH_ELEMENT>
<option name="myItemId" value="bee-table" />
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
</PATH_ELEMENT>
<PATH_ELEMENT>
<option name="myItemId" value="bee-table" />
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
</PATH_ELEMENT>
</PATH>
<PATH>
<PATH_ELEMENT>
<option name="myItemId" value="bee-table" />
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
</PATH_ELEMENT>
<PATH_ELEMENT>
<option name="myItemId" value="bee-table" />
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
</PATH_ELEMENT>
<PATH_ELEMENT>
<option name="myItemId" value="demo" />
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
</PATH_ELEMENT>
</PATH>
<PATH>
<PATH_ELEMENT>
<option name="myItemId" value="bee-table" />
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
</PATH_ELEMENT>
<PATH_ELEMENT>
<option name="myItemId" value="bee-table" />
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
</PATH_ELEMENT>
<PATH_ELEMENT>
<option name="myItemId" value="demo" />
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
</PATH_ELEMENT>
<PATH_ELEMENT>
<option name="myItemId" value="demolist" />
<option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
</PATH_ELEMENT>
</PATH>
</subPane>
</pane>
</panes>
</component>
<component name="PropertiesComponent">
<property name="settings.editor.selected.configurable" value="Settings.JavaScript" />
<property name="JavaScriptPreferStrict" value="false" />
<property name="JavaScriptWeakerCompletionTypeGuess" value="true" />
<property name="WebServerToolWindowFactoryState" value="false" />
<property name="last_opened_file_path" value="$PROJECT_DIR$/../tinper-bee" />
<property name="HbShouldOpenHtmlAsHb" value="" />
<property name="nodejs_interpreter_path" value="C:/Program Files/nodejs/node" />
</component>
<component name="RunDashboard">
<option name="ruleStates">
<list>
<RuleState>
<option name="name" value="ConfigurationTypeDashboardGroupingRule" />
</RuleState>
<RuleState>
<option name="name" value="StatusDashboardGroupingRule" />
</RuleState>
</list>
</option>
</component>
<component name="RunManager">
<configuration default="true" type="NodeJSConfigurationType" factoryName="Node.js" path-to-node="project" working-dir="">
<method />
</configuration>
</component>
<component name="ShelveChangesManager" show_recycled="false">
<option name="remove_strategy" value="false" />
</component>
<component name="TaskManager">
<task active="true" id="Default" summary="Default task">
<changelist id="fc6f46f1-46b7-479d-a1be-6709765e93ca" name="Default" comment="" />
<created>1504076174885</created>
<option name="number" value="Default" />
<option name="presentableId" value="Default" />
<updated>1504076174885</updated>
<workItem from="1504076176405" duration="2701000" />
</task>
<servers />
</component>
<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="2701000" />
</component>
<component name="ToolWindowManager">
<frame x="-8" y="0" width="1920" height="1084" extended-state="0" />
<editor active="true" />
<layout>
<window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.24973433" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
<window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
<window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="true" content_ui="tabs" />
<window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
<window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
<window_info id="npm" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="true" content_ui="tabs" />
<window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
<window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="false" content_ui="tabs" />
<window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
<window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="-1" side_tool="true" content_ui="tabs" />
<window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
<window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
<window_info id="Message" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
<window_info id="Commander" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
<window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
<window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
<window_info id="Ant Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
</layout>
</component>
<component name="TypeScriptGeneratedFilesManager">
<option name="processedProjectFiles" value="true" />
</component>
<component name="VcsContentAnnotationSettings">
<option name="myLimit" value="2678400000" />
</component>
<component name="XDebuggerManager">
<breakpoint-manager />
<watches-manager />
</component>
<component name="editorHistoryManager">
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo9.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-910">
<caret line="28" column="23" lean-forward="true" selection-start-line="28" selection-start-column="23" selection-end-line="28" selection-end-column="23" />
<folding>
<element signature="n#!!doc" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo8.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="298">
<caret line="47" column="10" lean-forward="true" selection-start-line="47" selection-start-column="10" selection-end-line="47" selection-end-column="10" />
<folding>
<element signature="n#!!doc" expanded="true" />
<element signature="e#92#131#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo10.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="130">
<caret line="5" column="2" lean-forward="false" selection-start-line="5" selection-start-column="2" selection-end-line="5" selection-end-column="35" />
<folding>
<element signature="e#91#132#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo7.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="456">
<caret line="81" column="41" lean-forward="false" selection-start-line="81" selection-start-column="41" selection-end-line="81" selection-end-column="41" />
<folding>
<element signature="n#!!doc" expanded="true" />
<element signature="e#54#93#0" expanded="true" />
</folding>
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/package.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="560">
<caret line="41" column="22" lean-forward="false" selection-start-line="41" selection-start-column="22" selection-end-line="41" selection-end-column="22" />
<folding />
</state>
</provider>
</entry>
</component>
</project>

1
build/Table.js
View File

@ -805,7 +805,6 @@ var Table = function (_Component) {
className += ' ' + clsPrefix + '-scroll-position-' + this.state.scrollPosition;
var isTableScroll = this.columnManager.isAnyColumnsFixed() || props.scroll.x || props.scroll.y;
return _react2["default"].createElement(
'div',
{ className: className, style: props.style },

3
demo/demolist/Demo10.js
View File

@ -2,7 +2,8 @@
*
* @title 无数据时显示
* @description 无数据时显示效果展示
*
*
* import {Table} from 'tinper-bee';
*/
import React, { Component } from 'react';

138
demo/demolist/Demo7.js
View File

@ -1,88 +1,92 @@
/**
*
* @title 主子表
* @description 主表点击子表联动
*
*/
*
* @title 主子表
* @description 主表点击子表联动
*
*/
import React, { Component } from 'react';
import React, {Component} from 'react';
import Table from '../../src';
const columns7 = [
{ title: "用户名", dataIndex: "a", key: "a"},
{ id: "123", title: "性别", dataIndex: "b", key: "b"},
{ title: "年龄", dataIndex: "c", key: "c"},
{
title: "操作",
dataIndex: "",
key: "d",
render() {
return <a href="#">一些操作</a>;
{title: "班级", dataIndex: "a", key: "a"},
{title: "人数", dataIndex: "b", key: "b"},
{title: "班主任", dataIndex: "c", key: "c"},
{
title: "操作",
dataIndex: "",
key: "d",
render() {
return <a href="#">一些操作</a>;
}
}
}
];
const data7 = [
{ a: "令狐冲", b: "男", c: 41, key: "1" },
{ a: "杨过", b: "男", c: 67, key: "2" },
{ a: "郭靖", b: "男", c: 25, key: "3" }
{a: "02级一班", b: "2", c: "欧阳锋", key: "1"},
{a: "03级二班", b: "3", c: "归海一刀", key: "2"},
{a: "05级三班", b: "1", c: "一拳超人", key: "3"}
];
const columns7_1 = [
{ title: "用户名", dataIndex: "a", key: "a"},
{ id: "123", title: "班级", dataIndex: "b", key: "b"},
{ title: "系别", dataIndex: "c", key: "c"}
{title: "姓名", dataIndex: "a", key: "a"},
{title: "班级", dataIndex: "b", key: "b"},
{title: "系别", dataIndex: "c", key: "c"}
];
class Demo7 extends Component {
constructor(props){
super(props);
this.state = {
children_data : []
constructor(props) {
super(props);
this.state = {
children_data: []
}
}
}
rowclick = (record, index) => {
console.log(record)
console.log(index)
if(record.a === '令狐冲'){
this.setState({
children_data: [
{ a: "令狐冲", b: "01班", c: '文学系', key: "1" },
]
})
}else if(record.a === '杨过'){
this.setState({
children_data: [
{ a: "杨过", b: "01班", c: '外语系', key: "2" },
]
})
}else if(record.a === '郭靖'){
this.setState({
children_data: [
{ a: "郭靖", b: "02班", c: '美术系', key: "3" }
]
})
rowclick = (record, index) => {
if (record.a === '02级一班') {
this.setState({
children_data: [
{a: "郭靖", b: "02级一班", c: '文学系', key: "1"},
{a: "黄蓉", b: "02级一班", c: '文学系', key: "2"},
]
})
} else if (record.a === '03级二班') {
this.setState({
children_data: [
{a: "杨过", b: "03级二班", c: '外语系', key: "1"},
{a: "小龙女", b: "03级二班", c: '外语系', key: "2"},
{a: "傻姑", b: "03级二班", c: '外语系', key: "3"},
]
})
} else if (record.a === '05级三班') {
this.setState({
children_data: [
{a: "金圣叹", b: "05级三班", c: '美术系', key: "1"}
]
})
}
}
render() {
return (
<div>
<Table
columns={columns7}
data={data7}
onRowClick={this.rowclick}
title={currentData => <div>标题: 我是主表</div>}
/>
<Table
style={{ marginTop: 40 }}
columns={columns7_1}
data={this.state.children_data}
title={currentData => <div>标题: 我是子表</div>}
/>
</div>
);
}
}
render() {
return (
<div>
<Table
columns={columns7_1}
data={data7}
onRowClick={this.rowclick}
title={currentData => <div>标题: 我是主表</div>}
/>
<Table
columns={columns7}
data={this.state.children_data}
title={currentData => <div>标题: 我是子表</div>}
/>
</div>
);
}
}
export default Demo7;

125
demo/demolist/Demo8.js
View File

@ -1,78 +1,77 @@
/**
*
* @title 表格+分页
* @description 点击分页联动表格
*
*/
*
* @title 表格+分页
* @description 点击分页联动表格
*
*import {Table} from 'tinper-bee';
*/
import React, { Component } from 'react';
import React, {Component} from 'react';
import Table from '../../src';
import Pagination from 'bee-pagination';
const columns8 = [
{ title: "用户名", dataIndex: "a", key: "a", width: 100 },
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
{
title: "操作",
dataIndex: "",
key: "d",
render() {
return <a href="#">一些操作</a>;
{title: "用户名", dataIndex: "a", key: "a", width: 100},
{id: "123", title: "性别", dataIndex: "b", key: "b", width: 100},
{title: "年龄", dataIndex: "c", key: "c", width: 200},
{
title: "操作",
dataIndex: "",
key: "d",
render() {
return <a href="#">一些操作</a>;
}
}
}
];
const pageData = {
1: [
{a: "令狐冲", b: "男", c: 41, key: "1"},
{a: "杨过", b: "男", c: 67, key: "2"},
{a: "郭靖", b: "男", c: 25, key: "3"}
],
2: [
{a: "芙蓉姐姐", b: "女", c: 23, key: "1"},
{a: "芙蓉姐姐", b: "女", c: 23, key: "2"}
]
}
class Demo8 extends Component {
constructor(props) {
super(props);
this.state = {
data8: [
{ a: "令狐冲", b: "男", c: 41, key: "1" },
{ a: "杨过", b: "男", c: 67, key: "2" },
{ a: "郭靖", b: "男", c: 25, key: "3" }
],
activePage: 1
};
}
handleSelect(eventKey) {
if(eventKey === 1){
this.setState({
data8: [
{ a: "令狐冲", b: "男", c: 41, key: "1" },
{ a: "杨过", b: "男", c: 67, key: "2" },
{ a: "郭靖", b: "男", c: 25, key: "3" }
],
activePage: eventKey
});
}else{
this.setState({
data8: [
{ a: "芙蓉姐姐", b: "女", c: 23, key: "1" }
],
activePage: eventKey
});
constructor(props) {
super(props);
this.state = {
data: pageData[1],
activePage: 1
};
}
handleSelect(eventKey) {
this.setState({
data: pageData[eventKey],
activePage: eventKey
})
}
render() {
return (
<div>
<Table columns={columns8} data={this.state.data}/>
<Pagination
first
last
prev
next
boundaryLinks
items={2}
maxButtons={5}
activePage={this.state.activePage}
onSelect={this.handleSelect.bind(this)}/>
</div>
);
}
}
render() {
return (
<div>
<Table columns={columns8} data={this.state.data8} />
<Pagination
first
last
prev
next
boundaryLinks
items={2}
maxButtons={5}
activePage={this.state.activePage}
onSelect={this.handleSelect.bind(this)} />
</div>
);
}
}
export default Demo8;

257
demo/demolist/Demo9.js
View File

@ -1,132 +1,169 @@
/**
*
* @title 表格+搜索
* @description 搜索刷新表格数据
*
*/
*
* @title 表格+搜索
* @description 搜索刷新表格数据
*
*
* import {Table} from 'tinper-bee';
*/
import React, { Component } from 'react';
import React, {Component} from 'react';
import Table from '../../src';
import Icon from "bee-icon";
import InputGroup from 'bee-input-group';
import FormControl from 'bee-form-control';
class Search extends Component {
state = {
searchValue: "",
empty: false
};
state = {
searchValue: "",
empty: false
};
/**
* 搜索
*/
handleSearch = () => {
let { onSearch,handleToChange } = this.props;
handleToChange && handleToChange();
onSearch && onSearch(this.state.searchValue);
};
/**
* 搜索
*/
handleSearch = () => {
let {onSearch} = this.props;
this.setState({
empty: true
})
onSearch && onSearch(this.state.searchValue);
};
/**
* 捕获回车
* @param e
*/
handleKeyDown = e => {
if (e.keyCode === 13) {
this.handleSearch();
/**
* 捕获回车
* @param e
*/
handleKeyDown = e => {
if (e.keyCode === 13) {
this.handleSearch();
}
};
/**
* 输入框改变
* @param e
*/
handleChange = e => {
this.setState({
searchValue: e.target.value
});
};
/**
* 清空输入框
*/
emptySearch = () => {
let {onEmpty} = this.props;
this.setState({
searchValue: "",
empty: false
});
onEmpty && onEmpty();
};
render() {
return (
<InputGroup simple className="search-component">
<FormControl
onChange={this.handleChange}
value={this.state.searchValue}
onKeyDown={this.handleKeyDown}
placeholder="请输入用户名"
type="text"
/>
{this.state.empty
? <Icon
type="uf-close-c"
onClick={this.emptySearch}
className="empty-search"
/>
: null}
<InputGroup.Button onClick={this.handleSearch} shape="border">
<Icon type="uf-search"/>
</InputGroup.Button>
</InputGroup>
);
}
};
/**
* 输入框改变
* @param e
*/
handleChange = e => {
this.setState({
searchValue: e.target.value
});
};
/**
* 清空输入框
*/
emptySearch = () => {
let { onEmpty } = this.props;
this.setState({
searchValue: "",
empty: false
});
onEmpty && onEmpty();
};
render() {
return (
<InputGroup simple className="search-component">
<FormControl
onChange={this.handleChange}
value={this.state.searchValue}
onKeyDown={this.handleKeyDown}
type="text"
/>
{this.state.empty
? <Icon
type="uf-close-c"
onClick={this.emptySearch}
className="empty-search"
/>
: null}
<InputGroup.Button onClick={this.handleSearch} shape="border">
<Icon type="uf-search" />
</InputGroup.Button>
</InputGroup>
);
}
}
const columns9 = [
{ title: "用户名", dataIndex: "a", key: "a", width: 100 },
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
{
title: "操作",
dataIndex: "",
key: "d",
render() {
return <a href="#">一些操作</a>;
{
title: "用户名",
dataIndex: "a",
key: "a",
width: 100
},
{
title: "性别",
dataIndex: "b",
key: "b",
width: 100
},
{
title: "年龄",
dataIndex: "c",
key: "c",
width: 200
},
{
title: "操作",
dataIndex: "",
key: "d",
render() {
return <a href="#">一些操作</a>;
}
}
}
];
const userData = [
{a: "令狐冲", b: "男", c: 41, key: "1"},
{a: "杨过", b: "男", c: 67, key: "2"},
{a: "郭靖", b: "男", c: 25, key: "3"}
];
class Demo9 extends Component {
constructor(props) {
super(props);
this.state = {
data: [
{ a: "令狐冲", b: "男", c: 41, key: "1" },
{ a: "杨过", b: "男", c: 67, key: "2" },
{ a: "郭靖", b: "男", c: 25, key: "3" }
]
};
}
handleSearchToTable=()=>{
this.setState({
data: [
{ a: "令狐冲", b: "男", c: 41, key: "1" }
]
})
}
render() {
return (
<div>
<div className="clearfix">
<Search handleToChange={this.handleSearchToTable}/>
</div>
<Table columns={columns9} data={this.state.data} />
</div>
);
}
constructor(props) {
super(props);
this.state = {
data: userData
};
}
handleSearch = (value) => {
if(value === ''){
return this.setState({
data: userData
})
}
let regExp = new RegExp(value, 'ig');
let data = userData.filter((item) => regExp.test(item.a));
this.setState({
data
})
}
handleEmpty = () => {
this.setState({
data: userData
})
}
render() {
return (
<div>
<div className="clearfix">
<Search
onSearch={ this.handleSearch }
onEmpty={ this.handleEmpty }
/>
</div>
<Table columns={columns9} data={this.state.data}/>
</div>
);
}
}
export default Demo9;

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

3
package.json
View File

@ -1,6 +1,6 @@
{
"name": "bee-table",
"version": "0.1.2",
"version": "0.2.3",
"description": "Table ui component for react",
"keywords": [
"react",
@ -49,7 +49,6 @@
"bee-pagination": "^0.1.7",
"bee-panel": "latest",
"bee-popconfirm": "^0.2.2",
"bee-tools": "^0.3.0",
"chai": "^3.5.0",
"console-polyfill": "~0.2.1",
"enzyme": "^2.4.1",