Compare commits
1 Commits
| Author | SHA1 | Date |
|---|---|---|
 tongChong
|
73dc23e8e7 |
|
|
@ -1,46 +0,0 @@
|
|||
on:
|
||||
push:
|
||||
tags:
|
||||
- 'v*'
|
||||
name: Publish
|
||||
jobs:
|
||||
# test:
|
||||
# runs-on: ubuntu-latest
|
||||
# steps:
|
||||
# - uses: actions/checkout@v2
|
||||
# - uses: actions/setup-node@v1
|
||||
# with:
|
||||
# node-version: 10
|
||||
# - run: npm i -g bee-tools-test
|
||||
# - run: npm i
|
||||
# - run: npm test
|
||||
|
||||
publish:
|
||||
# needs: test
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 10
|
||||
registry-url: https://registry.npmjs.org/
|
||||
- run: npm i -g bee-tools
|
||||
- run: npm i
|
||||
- run: npm publish
|
||||
env:
|
||||
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
|
||||
- uses: iuap-design/actions-ynpm-sync@master
|
||||
|
||||
github-release:
|
||||
needs: publish
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 10
|
||||
registry-url: https://registry.npmjs.org/
|
||||
- run: npm i -g github-release-from-changelog
|
||||
- run: github-release-from-changelog
|
||||
env:
|
||||
GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
|
||||
|
|
@ -2,8 +2,7 @@
|
|||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
.DS_Store
|
||||
.idea
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
|
|
@ -38,10 +37,3 @@ jspm_packages
|
|||
|
||||
coverage
|
||||
.*.swp
|
||||
package-lock.json
|
||||
demo/.DS_Store
|
||||
demo/demolist/.DS_Store
|
||||
|
||||
# vsCode
|
||||
.history
|
||||
.docker
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -0,0 +1,774 @@
|
|||
<?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="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/build/Table.css" afterPath="$PROJECT_DIR$/build/Table.css" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/build/lib/dragColumn.js" afterPath="$PROJECT_DIR$/build/lib/dragColumn.js" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/build/lib/filterColumn.js" afterPath="$PROJECT_DIR$/build/lib/filterColumn.js" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/build/lib/multiSelect.js" afterPath="$PROJECT_DIR$/build/lib/multiSelect.js" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/build/lib/sort.js" afterPath="$PROJECT_DIR$/build/lib/sort.js" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/build/render/CheckboxRender.js" afterPath="$PROJECT_DIR$/build/render/CheckboxRender.js" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/build/render/DateRender.js" afterPath="$PROJECT_DIR$/build/render/DateRender.js" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/build/render/InputRender.js" afterPath="$PROJECT_DIR$/build/render/InputRender.js" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/build/render/SelectRender.js" afterPath="$PROJECT_DIR$/build/render/SelectRender.js" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/demolist/Demo13.js" afterPath="$PROJECT_DIR$/demo/demolist/Demo13.js" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/demolist/Demo14.js" afterPath="$PROJECT_DIR$/demo/demolist/Demo14.js" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/demolist/Demo16.js" afterPath="$PROJECT_DIR$/demo/demolist/Demo16.js" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/demolist/Demo19.js" afterPath="$PROJECT_DIR$/demo/demolist/Demo19.js" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/demolist/Demo21.js" afterPath="$PROJECT_DIR$/demo/demolist/Demo21.js" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/index.js" afterPath="$PROJECT_DIR$/demo/index.js" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/dist/demo.js" afterPath="$PROJECT_DIR$/dist/demo.js" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/dist/demo.js.map" afterPath="$PROJECT_DIR$/dist/demo.js.map" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/docs/mixin.md" afterPath="$PROJECT_DIR$/docs/mixin.md" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/docs/rendertype.md" afterPath="$PROJECT_DIR$/docs/rendertype.md" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/lib/dragColumn.js" afterPath="$PROJECT_DIR$/src/lib/dragColumn.js" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/lib/filterColumn.js" afterPath="$PROJECT_DIR$/src/lib/filterColumn.js" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/lib/sort.js" afterPath="$PROJECT_DIR$/src/lib/sort.js" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/render/CheckboxRender.js" afterPath="$PROJECT_DIR$/src/render/CheckboxRender.js" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/render/InputRender.js" afterPath="$PROJECT_DIR$/src/render/InputRender.js" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/src/render/SelectRender.js" afterPath="$PROJECT_DIR$/src/render/SelectRender.js" />
|
||||
</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="FileEditorManager">
|
||||
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
|
||||
<file leaf-file-name="InputRender.js" pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/src/render/InputRender.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="216">
|
||||
<caret line="10" column="53" lean-forward="true" selection-start-line="10" selection-start-column="36" selection-end-line="10" selection-end-column="53" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file leaf-file-name="mixin.md" pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/docs/mixin.md">
|
||||
<provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
|
||||
<state split_layout="SPLIT">
|
||||
<first_editor relative-caret-position="391">
|
||||
<caret line="108" column="1" lean-forward="true" selection-start-line="108" selection-start-column="1" selection-end-line="108" selection-end-column="1" />
|
||||
<folding>
|
||||
<marker date="1526987804056" expanded="true" signature="907:1002" ph="..." />
|
||||
<marker date="1526987804056" expanded="true" signature="1247:1324" ph="..." />
|
||||
<marker date="1526987804056" expanded="true" signature="1251:1324" ph="..." />
|
||||
<marker date="1526987804056" expanded="true" signature="1561:1630" ph="..." />
|
||||
<marker date="1526987804056" expanded="true" signature="1564:1595" ph="..." />
|
||||
<marker date="1526987804056" expanded="true" signature="2089:2172" ph="..." />
|
||||
<marker date="1526987804056" expanded="true" signature="2099:2172" ph="..." />
|
||||
<marker date="1526987804056" expanded="true" signature="2295:2407" ph="..." />
|
||||
</folding>
|
||||
</first_editor>
|
||||
<second_editor />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file leaf-file-name="rendertype.md" pinned="false" current-in-tab="true">
|
||||
<entry file="file://$PROJECT_DIR$/docs/rendertype.md">
|
||||
<provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
|
||||
<state split_layout="SPLIT">
|
||||
<first_editor relative-caret-position="341">
|
||||
<caret line="110" column="0" lean-forward="true" selection-start-line="110" selection-start-column="0" selection-end-line="110" selection-end-column="0" />
|
||||
<folding>
|
||||
<marker date="1526989065954" expanded="true" signature="1731:1835" ph="..." />
|
||||
<marker date="1526989065954" expanded="true" signature="2397:2531" ph="..." />
|
||||
<marker date="1526989065954" expanded="true" signature="3046:3140" ph="..." />
|
||||
<marker date="1526989065954" expanded="true" signature="3578:3678" ph="..." />
|
||||
</folding>
|
||||
</first_editor>
|
||||
<second_editor />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file leaf-file-name="CheckboxRender.js" pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/src/render/CheckboxRender.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="417">
|
||||
<caret line="20" column="35" lean-forward="false" selection-start-line="20" selection-start-column="27" selection-end-line="20" selection-end-column="35" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file leaf-file-name="SelectRender.js" pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/src/render/SelectRender.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="72">
|
||||
<caret line="4" column="8" lean-forward="false" selection-start-line="4" selection-start-column="8" selection-end-line="4" selection-end-column="8" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file leaf-file-name="DateRender.js" pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/src/render/DateRender.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="120">
|
||||
<caret line="6" column="25" lean-forward="false" selection-start-line="6" selection-start-column="15" selection-end-line="6" selection-end-column="25" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
</leaf>
|
||||
</component>
|
||||
<component name="FindInProjectRecents">
|
||||
<findStrings>
|
||||
<find>&nbsp;</find>
|
||||
<find>getExpandedRow</find>
|
||||
<find>fixed</find>
|
||||
<find>content</find>
|
||||
<find>indexOf</find>
|
||||
<find>remove</find>
|
||||
<find>Icon</find>
|
||||
<find>moment</find>
|
||||
<find>src/lib</find>
|
||||
<find>dragColumn</find>
|
||||
<find>Tooltip</find>
|
||||
<find>multiSelect</find>
|
||||
<find>sort</find>
|
||||
<find>CheckboxRender</find>
|
||||
<find>DateRender</find>
|
||||
<find>build/render</find>
|
||||
<find>InputRender</find>
|
||||
<find>filterColumn</find>
|
||||
<find>sortBy</find>
|
||||
<find>props</find>
|
||||
</findStrings>
|
||||
<dirStrings>
|
||||
<dir>$PROJECT_DIR$/src</dir>
|
||||
<dir>$PROJECT_DIR$/demo</dir>
|
||||
<dir>$PROJECT_DIR$/demo/demolist</dir>
|
||||
</dirStrings>
|
||||
</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/Demo7.js" />
|
||||
<option value="$PROJECT_DIR$/demo/demolist/Demo8.js" />
|
||||
<option value="$PROJECT_DIR$/demo/demolist/Demo9.js" />
|
||||
<option value="$PROJECT_DIR$/demo/index.js" />
|
||||
<option value="$PROJECT_DIR$/index.html" />
|
||||
<option value="$PROJECT_DIR$/demo/demolist/Demo5.js" />
|
||||
<option value="$PROJECT_DIR$/src/Table.js" />
|
||||
<option value="$PROJECT_DIR$/package.json" />
|
||||
<option value="$PROJECT_DIR$/docs/api.md" />
|
||||
<option value="$PROJECT_DIR$/src/lib/multiSelect.js" />
|
||||
<option value="$PROJECT_DIR$/src/render/DateRender.js" />
|
||||
<option value="$PROJECT_DIR$/src/render/SelectRender.js" />
|
||||
<option value="$PROJECT_DIR$/demo/demolist/Demo23.js" />
|
||||
<option value="$PROJECT_DIR$/demo/demolist/Demo21.js" />
|
||||
<option value="$PROJECT_DIR$/demo/demolist/Demo16.js" />
|
||||
<option value="$PROJECT_DIR$/src/lib/sort.js" />
|
||||
<option value="$PROJECT_DIR$/demo/demolist/Demo13.js" />
|
||||
<option value="$PROJECT_DIR$/demo/demolist/Demo14.js" />
|
||||
<option value="$PROJECT_DIR$/src/render/InputRender.js" />
|
||||
<option value="$PROJECT_DIR$/demo/demolist/Demo19.js" />
|
||||
<option value="$PROJECT_DIR$/src/lib/dragColumn.js" />
|
||||
<option value="$PROJECT_DIR$/src/lib/filterColumn.js" />
|
||||
<option value="$PROJECT_DIR$/docs/mixin.md" />
|
||||
<option value="$PROJECT_DIR$/src/render/CheckboxRender.js" />
|
||||
<option value="$PROJECT_DIR$/docs/rendertype.md" />
|
||||
</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" extendedState="6">
|
||||
<option name="x" value="-8" />
|
||||
<option name="y" value="-8" />
|
||||
<option name="width" value="1936" />
|
||||
<option name="height" value="1056" />
|
||||
</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="Scratches" />
|
||||
<pane id="Scope" />
|
||||
<pane id="ProjectPane">
|
||||
<subPane>
|
||||
<expand>
|
||||
<path>
|
||||
<item name="bee-table" type="b2602c69:ProjectViewProjectNode" />
|
||||
<item name="bee-table" type="462c0819:PsiDirectoryNode" />
|
||||
</path>
|
||||
<path>
|
||||
<item name="bee-table" type="b2602c69:ProjectViewProjectNode" />
|
||||
<item name="bee-table" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="demo" type="462c0819:PsiDirectoryNode" />
|
||||
</path>
|
||||
<path>
|
||||
<item name="bee-table" type="b2602c69:ProjectViewProjectNode" />
|
||||
<item name="bee-table" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="docs" type="462c0819:PsiDirectoryNode" />
|
||||
</path>
|
||||
<path>
|
||||
<item name="bee-table" type="b2602c69:ProjectViewProjectNode" />
|
||||
<item name="bee-table" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="src" type="462c0819:PsiDirectoryNode" />
|
||||
</path>
|
||||
<path>
|
||||
<item name="bee-table" type="b2602c69:ProjectViewProjectNode" />
|
||||
<item name="bee-table" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="src" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="lib" type="462c0819:PsiDirectoryNode" />
|
||||
</path>
|
||||
<path>
|
||||
<item name="bee-table" type="b2602c69:ProjectViewProjectNode" />
|
||||
<item name="bee-table" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="src" type="462c0819:PsiDirectoryNode" />
|
||||
<item name="render" type="462c0819:PsiDirectoryNode" />
|
||||
</path>
|
||||
</expand>
|
||||
<select />
|
||||
</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$" />
|
||||
<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" />
|
||||
<workItem from="1506672272278" duration="1303000" />
|
||||
<workItem from="1523426107901" duration="1270000" />
|
||||
<workItem from="1526984426793" duration="4564000" />
|
||||
</task>
|
||||
<servers />
|
||||
</component>
|
||||
<component name="TimeTrackingManager">
|
||||
<option name="totallyTimeSpent" value="16939000" />
|
||||
</component>
|
||||
<component name="ToolWindowManager">
|
||||
<frame x="0" y="23" width="1680" height="946" extended-state="6" />
|
||||
<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.24954791" 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="7" side_tool="true" 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="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="7" 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="2" 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="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.32902467" sideWeight="0.5" order="7" 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="2" side_tool="true" 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="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="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="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="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="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>
|
||||
<layout-to-restore>
|
||||
<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="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="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="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="7" side_tool="true" 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="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="8" 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="2" 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="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="9" side_tool="false" content_ui="tabs" />
|
||||
<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="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="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="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="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" />
|
||||
<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="3" side_tool="true" 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" />
|
||||
</layout-to-restore>
|
||||
</component>
|
||||
<component name="TypeScriptGeneratedFilesManager">
|
||||
<option name="version" value="1" />
|
||||
</component>
|
||||
<component name="VcsContentAnnotationSettings">
|
||||
<option name="myLimit" value="2678400000" />
|
||||
</component>
|
||||
<component name="XDebuggerManager">
|
||||
<breakpoint-manager>
|
||||
<option name="time" value="1" />
|
||||
</breakpoint-manager>
|
||||
<watches-manager />
|
||||
</component>
|
||||
<component name="editorHistoryManager">
|
||||
<entry file="file://$PROJECT_DIR$/demo/index.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="1632">
|
||||
<caret line="72" column="1" lean-forward="false" selection-start-line="72" selection-start-column="1" selection-end-line="72" selection-end-column="1" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/index.html">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="456">
|
||||
<caret line="19" column="84" lean-forward="false" selection-start-line="19" selection-start-column="84" selection-end-line="19" selection-end-column="84" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/README.md" />
|
||||
<entry file="file://$PROJECT_DIR$/src/lib/multiSelect.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="24">
|
||||
<caret line="165" column="26" lean-forward="false" selection-start-line="165" selection-start-column="26" selection-end-line="165" selection-end-column="26" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo8.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="192">
|
||||
<caret line="8" column="0" lean-forward="false" selection-start-line="8" selection-start-column="0" selection-end-line="8" selection-end-column="0" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo7.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="0">
|
||||
<caret line="0" column="0" lean-forward="true" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo17.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="0">
|
||||
<caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo15.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="528">
|
||||
<caret line="22" column="16" lean-forward="false" selection-start-line="22" selection-start-column="16" selection-end-line="22" selection-end-column="16" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo11.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="0">
|
||||
<caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo10.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="120">
|
||||
<caret line="5" column="2" lean-forward="false" selection-start-line="5" selection-start-column="2" selection-end-line="5" selection-end-column="35" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo9.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="441">
|
||||
<caret line="150" column="0" lean-forward="false" selection-start-line="150" selection-start-column="0" selection-end-line="150" selection-end-column="0" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo5.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="459">
|
||||
<caret line="66" column="21" lean-forward="true" selection-start-line="66" selection-start-column="21" selection-end-line="66" selection-end-column="21" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo7.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="1896">
|
||||
<caret line="85" column="0" lean-forward="true" selection-start-line="85" selection-start-column="0" selection-end-line="85" selection-end-column="0" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo8.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="48">
|
||||
<caret line="8" column="0" lean-forward="false" selection-start-line="8" selection-start-column="0" selection-end-line="8" selection-end-column="0" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo9.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="24">
|
||||
<caret line="8" column="0" lean-forward="false" selection-start-line="8" selection-start-column="0" selection-end-line="8" selection-end-column="0" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/demo/index.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="1632">
|
||||
<caret line="72" column="1" lean-forward="true" selection-start-line="72" selection-start-column="1" selection-end-line="72" selection-end-column="1" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/package.json">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="1320">
|
||||
<caret line="55" column="22" lean-forward="true" selection-start-line="55" selection-start-column="22" selection-end-line="55" selection-end-column="22" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/index.html">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="456">
|
||||
<caret line="19" column="84" lean-forward="false" selection-start-line="19" selection-start-column="84" selection-end-line="19" selection-end-column="84" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo7.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="2106">
|
||||
<caret line="81" column="32" lean-forward="true" selection-start-line="81" selection-start-column="32" selection-end-line="81" selection-end-column="32" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/package.json">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="1066">
|
||||
<caret line="41" column="22" lean-forward="false" selection-start-line="41" selection-start-column="22" selection-end-line="41" selection-end-column="22" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo10.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="120">
|
||||
<caret line="5" column="2" lean-forward="false" selection-start-line="5" selection-start-column="2" selection-end-line="5" selection-end-column="35" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo7.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="1896">
|
||||
<caret line="85" column="0" lean-forward="false" selection-start-line="85" selection-start-column="0" selection-end-line="85" selection-end-column="0" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo8.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="48">
|
||||
<caret line="8" column="0" lean-forward="false" selection-start-line="8" selection-start-column="0" selection-end-line="8" selection-end-column="0" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/demo/index.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="1632">
|
||||
<caret line="72" column="1" lean-forward="false" selection-start-line="72" selection-start-column="1" selection-end-line="72" selection-end-column="1" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/index.html">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="456">
|
||||
<caret line="19" column="84" lean-forward="false" selection-start-line="19" selection-start-column="84" selection-end-line="19" selection-end-column="84" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo9.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="1219">
|
||||
<caret line="150" column="0" lean-forward="false" selection-start-line="150" selection-start-column="0" selection-end-line="150" selection-end-column="0" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/Table.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="6816">
|
||||
<caret line="293" column="5" lean-forward="false" selection-start-line="293" selection-start-column="5" selection-end-line="293" selection-end-column="5" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/package.json">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="-261">
|
||||
<caret line="21" column="28" lean-forward="false" selection-start-line="21" selection-start-column="28" selection-end-line="21" selection-end-column="28" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/docs/mixin_en.md" />
|
||||
<entry file="file://$PROJECT_DIR$/build/index.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="234">
|
||||
<caret line="9" column="23" lean-forward="false" selection-start-line="9" selection-start-column="23" selection-end-line="9" selection-end-column="23" />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/lib/util.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="0">
|
||||
<caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
|
||||
<folding>
|
||||
<element signature="n#!!doc" expanded="false" />
|
||||
</folding>
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/render/RadioRender.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="0">
|
||||
<caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo23.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="72">
|
||||
<caret line="7" column="30" lean-forward="false" selection-start-line="7" selection-start-column="30" selection-end-line="7" selection-end-column="30" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo16.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="125">
|
||||
<caret line="38" column="0" lean-forward="false" selection-start-line="38" selection-start-column="0" selection-end-line="38" selection-end-column="0" />
|
||||
<folding>
|
||||
<element signature="e#70#111#0" expanded="false" />
|
||||
</folding>
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo13.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="218">
|
||||
<caret line="58" column="51" lean-forward="false" selection-start-line="58" selection-start-column="51" selection-end-line="58" selection-end-column="51" />
|
||||
<folding>
|
||||
<element signature="e#92#133#0" expanded="false" />
|
||||
</folding>
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo12.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="-1372">
|
||||
<caret line="8" column="7" lean-forward="false" selection-start-line="8" selection-start-column="7" selection-end-line="8" selection-end-column="7" />
|
||||
<folding>
|
||||
<element signature="e#89#130#0" expanded="false" />
|
||||
</folding>
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo14.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="281">
|
||||
<caret line="18" column="0" lean-forward="false" selection-start-line="18" selection-start-column="0" selection-end-line="24" selection-end-column="48" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo19.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="247">
|
||||
<caret line="17" column="62" lean-forward="true" selection-start-line="17" selection-start-column="62" selection-end-line="17" selection-end-column="62" />
|
||||
<folding>
|
||||
<element signature="e#87#119#0" expanded="false" />
|
||||
</folding>
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/lib/multiSelect.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="297">
|
||||
<caret line="24" column="35" lean-forward="false" selection-start-line="24" selection-start-column="24" selection-end-line="24" selection-end-column="35" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/docs/api.md">
|
||||
<provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
|
||||
<state split_layout="SPLIT">
|
||||
<first_editor relative-caret-position="-1339">
|
||||
<caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
|
||||
<folding />
|
||||
</first_editor>
|
||||
<second_editor />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/lib/sort.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="0">
|
||||
<caret line="0" column="41" lean-forward="false" selection-start-line="0" selection-start-column="41" selection-end-line="0" selection-end-column="41" />
|
||||
<folding>
|
||||
<marker date="1526985060619" expanded="true" signature="43:107" ph="/** 参数：prefixCls，默认bee-table,用于设置图标的样式 ...*/" />
|
||||
</folding>
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/lib/sum.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="0">
|
||||
<caret line="0" column="26" lean-forward="true" selection-start-line="0" selection-start-column="26" selection-end-line="0" selection-end-column="26" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/lib/dragColumn.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="-1842">
|
||||
<caret line="11" column="14" lean-forward="false" selection-start-line="11" selection-start-column="14" selection-end-line="11" selection-end-column="14" />
|
||||
<folding>
|
||||
<element signature="e#0#41#0" expanded="true" />
|
||||
</folding>
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/demo/demolist/Demo21.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="204">
|
||||
<caret line="50" column="6" lean-forward="false" selection-start-line="50" selection-start-column="6" selection-end-line="50" selection-end-column="6" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/lib/filterColumn.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="216">
|
||||
<caret line="9" column="36" lean-forward="false" selection-start-line="9" selection-start-column="24" selection-end-line="9" selection-end-column="36" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/docs/mixin.md">
|
||||
<provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
|
||||
<state split_layout="SPLIT">
|
||||
<first_editor relative-caret-position="391">
|
||||
<caret line="108" column="1" lean-forward="true" selection-start-line="108" selection-start-column="1" selection-end-line="108" selection-end-column="1" />
|
||||
<folding>
|
||||
<marker date="1526987804056" expanded="true" signature="907:1002" ph="..." />
|
||||
<marker date="1526987804056" expanded="true" signature="1247:1324" ph="..." />
|
||||
<marker date="1526987804056" expanded="true" signature="1251:1324" ph="..." />
|
||||
<marker date="1526987804056" expanded="true" signature="1561:1630" ph="..." />
|
||||
<marker date="1526987804056" expanded="true" signature="1564:1595" ph="..." />
|
||||
<marker date="1526987804056" expanded="true" signature="2089:2172" ph="..." />
|
||||
<marker date="1526987804056" expanded="true" signature="2099:2172" ph="..." />
|
||||
<marker date="1526987804056" expanded="true" signature="2295:2407" ph="..." />
|
||||
</folding>
|
||||
</first_editor>
|
||||
<second_editor />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/render/DateRender.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="120">
|
||||
<caret line="6" column="25" lean-forward="false" selection-start-line="6" selection-start-column="15" selection-end-line="6" selection-end-column="25" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/render/InputRender.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="216">
|
||||
<caret line="10" column="53" lean-forward="true" selection-start-line="10" selection-start-column="36" selection-end-line="10" selection-end-column="53" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/render/SelectRender.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="72">
|
||||
<caret line="4" column="8" lean-forward="false" selection-start-line="4" selection-start-column="8" selection-end-line="4" selection-end-column="8" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/src/render/CheckboxRender.js">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="417">
|
||||
<caret line="20" column="35" lean-forward="false" selection-start-line="20" selection-start-column="27" selection-end-line="20" selection-end-column="35" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/docs/rendertype.md">
|
||||
<provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
|
||||
<state split_layout="SPLIT">
|
||||
<first_editor relative-caret-position="341">
|
||||
<caret line="110" column="0" lean-forward="true" selection-start-line="110" selection-start-column="0" selection-end-line="110" selection-end-column="0" />
|
||||
<folding>
|
||||
<marker date="1526989065954" expanded="true" signature="1731:1835" ph="..." />
|
||||
<marker date="1526989065954" expanded="true" signature="2397:2531" ph="..." />
|
||||
<marker date="1526989065954" expanded="true" signature="3046:3140" ph="..." />
|
||||
<marker date="1526989065954" expanded="true" signature="3578:3678" ph="..." />
|
||||
</folding>
|
||||
</first_editor>
|
||||
<second_editor />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</component>
|
||||
</project>
|
||||
|
|
@ -26,8 +26,3 @@ sea-modules
|
|||
spm_modules
|
||||
.cache
|
||||
coverage
|
||||
demo
|
||||
docs
|
||||
test
|
||||
dist
|
||||
.npmignore
|
||||
|
|
@ -17,6 +17,6 @@ before_install:
|
|||
- npm install -g bee-tools
|
||||
|
||||
script: npm test
|
||||
|
||||
😂
|
||||
after_script:
|
||||
- npm run coveralls
|
||||
|
|
|
|||
368
CHANGELOG.md
368
CHANGELOG.md
|
|
@ -1,280 +1,200 @@
|
|||
## [2.3.14](https://github.com/tinper-bee/bee-table/compare/v2.3.13...v2.3.14) (2021-02-21)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 固定列中，元素高度保留两位小数 ([8166170](https://github.com/tinper-bee/bee-table/commit/816617051a38029c59138001416541163b855962))
|
||||
|
||||
|
||||
|
||||
## [2.3.13](https://github.com/tinper-bee/bee-table/compare/v2.3.12...v2.3.13) (2021-02-03)
|
||||
|
||||
|
||||
|
||||
## [2.3.12](https://github.com/tinper-bee/bee-table/compare/v2.3.11...v2.3.12) (2021-02-03)
|
||||
|
||||
|
||||
|
||||
## [2.3.11](https://github.com/tinper-bee/bee-table/compare/v2.3.10...v2.3.11) (2021-02-03)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* scroll.Y变化时重新计算scrollTop ([5906420](https://github.com/tinper-bee/bee-table/commit/5906420fc4fdf130b2ffd456a853c83130eb262b))
|
||||
|
||||
|
||||
|
||||
## [2.3.10](https://github.com/tinper-bee/bee-table/compare/v2.3.9...v2.3.10) (2021-02-03)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 加入ignoreScrollYChange参数 ([dcbb145](https://github.com/tinper-bee/bee-table/commit/dcbb145328f75b70cd804cddf30b9e102342c70c))
|
||||
|
||||
|
||||
|
||||
## [2.3.9](https://github.com/tinper-bee/bee-table/compare/v2.3.7...v2.3.9) (2021-02-03)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 固定列在主表渲染引起的渲染多次问题 ([390a8a4](https://github.com/tinper-bee/bee-table/commit/390a8a4e5f0bff40817c22c1d4520dc05c8856e4))
|
||||
* 懒加载时修改table的scrollTop ([69d6a22](https://github.com/tinper-bee/bee-table/commit/69d6a2216b7994f5152f524b6eb2b6ec35805ae1))
|
||||
|
||||
|
||||
|
||||
## [2.3.8](https://github.com/tinper-bee/bee-table/compare/v2.3.7...v2.3.8) (2021-01-14)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 固定列在主表渲染引起的渲染多次问题 ([390a8a4](https://github.com/tinper-bee/bee-table/commit/390a8a4e5f0bff40817c22c1d4520dc05c8856e4))
|
||||
|
||||
|
||||
|
||||
## [2.3.7](https://github.com/tinper-bee/bee-table/compare/v2.3.5...v2.3.7) (2021-01-12)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* provide more parameters for getting multi-sort value ([b487e67](https://github.com/tinper-bee/bee-table/commit/b487e67f45f4db3af2574c90554e1348f0861e2e))
|
||||
|
||||
|
||||
|
||||
## [2.3.6](https://github.com/tinper-bee/bee-table/compare/v2.3.5...v2.3.6) (2021-01-11)
|
||||
|
||||
|
||||
|
||||
## [2.3.5](https://github.com/tinper-bee/bee-table/compare/v2.3.4...v2.3.5) (2021-01-11)
|
||||
|
||||
|
||||
|
||||
## [2.3.4](https://github.com/tinper-bee/bee-table/compare/v2.3.3...v2.3.4) (2021-01-11)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 传入不同的scroll.y时，重置scrollTop ([f5f381c](https://github.com/tinper-bee/bee-table/commit/f5f381c3f185ad72432a4f462d376d3b21c8105f))
|
||||
|
||||
|
||||
|
||||
## [2.3.3](https://github.com/tinper-bee/bee-table/compare/v2.3.1...v2.3.3) (2021-01-07)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 多排序字段处理 ([a19770b](https://github.com/tinper-bee/bee-table/commit/a19770beeefd7c2acf974790248b448b2bffc64f))
|
||||
|
||||
|
||||
|
||||
## [2.3.2](https://github.com/tinper-bee/bee-table/compare/v2.3.1...v2.3.2) (2021-01-07)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 多排序字段处理 ([a19770b](https://github.com/tinper-bee/bee-table/commit/a19770beeefd7c2acf974790248b448b2bffc64f))
|
||||
|
||||
|
||||
|
||||
## [2.3.1](https://github.com/tinper-bee/bee-table/compare/v2.3.0...v2.3.1) (2021-01-04)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* issues/655 表格拖拽没办法拖拽到第一行 ([b7a75a3](https://github.com/tinper-bee/bee-table/commit/b7a75a3a1e86337375703b02d5233fdc071bc5ba))
|
||||
|
||||
|
||||
|
||||
# [2.3.0](https://github.com/tinper-bee/bee-table/compare/v2.2.85...v2.3.0) (2020-12-28)
|
||||
<a name="1.1.7"></a>
|
||||
## [1.1.7](https://github.com/tinper-bee/bee-table/compare/v1.1.6...v1.1.7) (2018-05-14)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* 固定列支持拖拽改变列宽 ([c2cf138](https://github.com/tinper-bee/bee-table/commit/c2cf13800073970f5f42723e20ec7e1404df655b))
|
||||
* **发布拖拽表头列的宽度:** 发布拖拽表头列的宽度 ([67688d5](https://github.com/tinper-bee/bee-table/commit/67688d5))
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* **发布拖拽表头列的宽度:** 发布拖拽表头列的宽度
|
||||
|
||||
|
||||
|
||||
## [2.2.85](https://github.com/tinper-bee/bee-table/compare/v2.2.84...v2.2.85) (2020-12-24)
|
||||
<a name="1.1.6"></a>
|
||||
## [1.1.6](https://github.com/tinper-bee/bee-table/compare/v1.1.5...v1.1.6) (2018-05-14)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* #JCJS-6424 表格展开高度计算bug ([00f282c](https://github.com/tinper-bee/bee-table/commit/00f282ca7ee00e69268d43a5540a16bcfe15858d)), closes [#JCJS-6424](https://github.com/tinper-bee/bee-table/issues/JCJS-6424)
|
||||
* demo在官网解析报错 ([67483a5](https://github.com/tinper-bee/bee-table/commit/67483a5))
|
||||
* 文档 ([b266837](https://github.com/tinper-bee/bee-table/commit/b266837))
|
||||
|
||||
|
||||
|
||||
## [2.2.84](https://github.com/tinper-bee/bee-table/compare/v2.2.83...v2.2.84) (2020-12-23)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* ie 下展开表格当含有height时不再动态获取该表格高度 ([8a0bba1](https://github.com/tinper-bee/bee-table/commit/8a0bba14ddbb9383371ffda96112d08778538322))
|
||||
|
||||
|
||||
|
||||
## [2.2.83](https://github.com/tinper-bee/bee-table/compare/v2.2.82...v2.2.83) (2020-12-15)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* update时判断表格数据 ([9e7b9f7](https://github.com/tinper-bee/bee-table/commit/9e7b9f763dc4c556a13d12902b9b0baa56b1a217))
|
||||
|
||||
|
||||
|
||||
## [2.2.82](https://github.com/tinper-bee/bee-table/compare/v2.2.81...v2.2.82) (2020-12-10)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 浏览器IE拖拽不好使 ([b581de4](https://github.com/tinper-bee/bee-table/commit/b581de4fe90cc6b63850fb548300b90fce231527))
|
||||
|
||||
|
||||
|
||||
## [2.2.81](https://github.com/tinper-bee/bee-table/compare/v2.2.80...v2.2.81) (2020-12-10)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 排序时data 为空处理 ([4ec5557](https://github.com/tinper-bee/bee-table/commit/4ec55575983537e50940cfb03150310dac65887b))
|
||||
|
||||
|
||||
|
||||
## [2.2.80](https://github.com/tinper-bee/bee-table/compare/v2.2.79...v2.2.80) (2020-12-01)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 嵌套表格兼容问题 ([aaed13e](https://github.com/tinper-bee/bee-table/commit/aaed13e95991c793a29371a30496265892e743d7))
|
||||
|
||||
|
||||
|
||||
## [2.2.79](https://github.com/tinper-bee/bee-table/compare/v2.2.78...v2.2.79) (2020-11-24)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 表格横向滚动条拖拽时右侧固定列style ([3acd6ea](https://github.com/tinper-bee/bee-table/commit/3acd6ea33e0d2048feacca18e2fd723abd458239))
|
||||
|
||||
|
||||
|
||||
## [2.2.78](https://github.com/tinper-bee/bee-table/compare/v2.2.77...v2.2.78) (2020-11-23)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 拖拽下的表格含有固定列的场景右侧固定列box-shaow bug ([f8ff20f](https://github.com/tinper-bee/bee-table/commit/f8ff20f30a4ca328e32fbbca5e0c6220f40b4815))
|
||||
|
||||
|
||||
|
||||
## [2.2.77](https://github.com/tinper-bee/bee-table/compare/v2.2.76...v2.2.77) (2020-11-20)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* currentIndex 为-1 比较判断 ([8d87472](https://github.com/tinper-bee/bee-table/commit/8d87472b4e258fb2accb3bd30f14e5069af0285e))
|
||||
|
||||
|
||||
|
||||
## [2.2.76](https://github.com/tinper-bee/bee-table/compare/v2.2.75...v2.2.76) (2020-11-19)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 优化onBodyMouseLeave调用 ([3b1ffec](https://github.com/tinper-bee/bee-table/commit/3b1ffecacde80da6bf6808b9a1f3c5b0b6298f29))
|
||||
|
||||
|
||||
|
||||
## [2.2.75](https://github.com/tinper-bee/bee-table/compare/v2.2.74...v2.2.75) (2020-11-18)
|
||||
<a name="1.1.5"></a>
|
||||
## [1.1.5](https://github.com/tinper-bee/bee-table/compare/v1.1.4...v1.1.5) (2018-05-11)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* 增加onBodyMouseLeave回调函数 ([cb40026](https://github.com/tinper-bee/bee-table/commit/cb40026e8c3c42418a23cb4bdb23cdb5d9ec1be1))
|
||||
* **表格拖拽交换列、表头过滤、issues的示例:** 表格拖拽交换列、表头过滤、issues的示例 ([903d1a8](https://github.com/tinper-bee/bee-table/commit/903d1a8))
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* **表格拖拽交换列、表头过滤、issues的示例:** 表格拖拽交换列、表头过滤、issues的示例
|
||||
|
||||
|
||||
|
||||
## [2.2.74](https://github.com/tinper-bee/bee-table/compare/v2.2.73...v2.2.74) (2020-11-12)
|
||||
<a name="1.1.4"></a>
|
||||
## [1.1.4](https://github.com/tinper-bee/bee-table/compare/v1.1.3...v1.1.4) (2018-05-02)
|
||||
|
||||
|
||||
|
||||
<a name="1.1.3"></a>
|
||||
## [1.1.3](https://github.com/tinper-bee/bee-table/compare/v1.1.2...v1.1.3) (2018-05-02)
|
||||
|
||||
|
||||
|
||||
<a name="1.1.2"></a>
|
||||
## [1.1.2](https://github.com/tinper-bee/bee-table/compare/v1.1.1...v1.1.2) (2018-04-24)
|
||||
|
||||
|
||||
|
||||
<a name="1.1.1"></a>
|
||||
## [1.1.1](https://github.com/tinper-bee/bee-table/compare/v1.1.0...v1.1.1) (2018-04-18)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **合并标题后的合计,且支持多字段统计:** 合并标题后的合计,且支持多字段统计 ([64d4059](https://github.com/tinper-bee/bee-table/commit/64d4059))
|
||||
|
||||
|
||||
### BREAKING CHANGES
|
||||
|
||||
* **合并标题后的合计,且支持多字段统计:** 合并标题后的合计,且支持多字段统计
|
||||
|
||||
|
||||
|
||||
<a name="1.1.0"></a>
|
||||
# [1.1.0](https://github.com/tinper-bee/bee-table/compare/v1.0.18...v1.1.0) (2018-04-16)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **bee-table:** 展开行和固定列同时使用支持固定列展开同样高度 ([141eb5c](https://github.com/tinper-bee/bee-table/commit/141eb5c))
|
||||
|
||||
|
||||
|
||||
<a name="1.0.18"></a>
|
||||
## [1.0.18](https://github.com/tinper-bee/bee-table/compare/v1.0.17...v1.0.18) (2018-04-11)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 特殊场景this.flatTreeData为空引起报错 ([6c260cd](https://github.com/tinper-bee/bee-table/commit/6c260cd227e13e2f8da2769693c0ce3b90792d8f))
|
||||
* **bee-table:** fix 全选功能透传问题 ([f8c1d1c](https://github.com/tinper-bee/bee-table/commit/f8c1d1c))
|
||||
|
||||
|
||||
|
||||
## [2.2.73](https://github.com/tinper-bee/bee-table/compare/v2.2.72...v2.2.73) (2020-11-02)
|
||||
<a name="1.0.17"></a>
|
||||
## [1.0.17](https://github.com/tinper-bee/bee-table/compare/v1.0.16...v1.0.17) (2018-04-02)
|
||||
|
||||
|
||||
|
||||
<a name="1.0.16"></a>
|
||||
## [1.0.16](https://github.com/tinper-bee/bee-table/compare/v1.0.15...v1.0.16) (2018-04-02)
|
||||
|
||||
|
||||
|
||||
<a name="1.0.15"></a>
|
||||
## [1.0.15](https://github.com/tinper-bee/bee-table/compare/v1.0.14...v1.0.15) (2018-04-02)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 默认前端排序点击分页后数据不更新 ([b236218](https://github.com/tinper-bee/bee-table/commit/b2362185f58df51a28254f6ebefabacc860621b9))
|
||||
* fix change this.props to props ([c3bc24d](https://github.com/tinper-bee/bee-table/commit/c3bc24d))
|
||||
|
||||
|
||||
|
||||
## [2.2.72](https://github.com/tinper-bee/bee-table/compare/v2.2.71...v2.2.72) (2020-10-30)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* 支持表格初始化时根据soter属性进行默认排序 ([f346d7a](https://github.com/tinper-bee/bee-table/commit/f346d7a45cf998dc4d924af99a2b806c601daa9f))
|
||||
|
||||
|
||||
|
||||
## [2.2.71](https://github.com/tinper-bee/bee-table/compare/v2.2.70...v2.2.71) (2020-10-30)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* 增加getCellClassNameAPI支持自定义单元格样式 ([05d175a](https://github.com/tinper-bee/bee-table/commit/05d175a94f72f5ac5fb45a805ab1a24ccb4b9864))
|
||||
|
||||
|
||||
|
||||
## [2.2.70](https://github.com/tinper-bee/bee-table/compare/v2.2.68...v2.2.70) (2020-10-21)
|
||||
<a name="1.0.14"></a>
|
||||
## [1.0.14](https://github.com/tinper-bee/bee-table/compare/v1.0.13...v1.0.14) (2018-03-28)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* #JCJS-4815 表格没有数据滚动滚动条后,grid页头的隐藏无法操作 ([43266f2](https://github.com/tinper-bee/bee-table/commit/43266f2f0bbaf382d2e203cfc3927eaf81a28a2a)), closes [#JCJS-4815](https://github.com/tinper-bee/bee-table/issues/JCJS-4815)
|
||||
* **Demo16.js:** change the demo about api of the expandedRowRender ([b33c036](https://github.com/tinper-bee/bee-table/commit/b33c036))
|
||||
* **multiSelect.js:** fix initCheckedObj will change selIds ([cf10950](https://github.com/tinper-bee/bee-table/commit/cf10950))
|
||||
|
||||
|
||||
|
||||
<a name="1.0.13"></a>
|
||||
## [1.0.13](https://github.com/tinper-bee/bee-table/compare/v1.0.12...v1.0.13) (2018-01-31)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* 提供column.sumThousandth属性，用于设置合计行是否开启千分位功能 ([0a8f8c3](https://github.com/tinper-bee/bee-table/commit/0a8f8c362b2294104957daeb56cfdb986aff1ff1))
|
||||
* **Table.js:** add loading param ([92c6468](https://github.com/tinper-bee/bee-table/commit/92c6468)), closes [#10](https://github.com/tinper-bee/bee-table/issues/10)
|
||||
* feat haveExpandIcon to control hidden expandIcon ([98a403d](https://github.com/tinper-bee/bee-table/commit/98a403d))
|
||||
|
||||
|
||||
|
||||
## [2.2.69](https://github.com/tinper-bee/bee-table/compare/v2.2.68...v2.2.69) (2020-10-14)
|
||||
<a name="1.0.12"></a>
|
||||
## [1.0.12](https://github.com/tinper-bee/bee-table/compare/v1.0.11...v1.0.12) (2018-01-16)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **multiSelect.js:** 修复全选功能中使用rowKey参数bug ([5f30910](https://github.com/tinper-bee/bee-table/commit/5f30910))
|
||||
|
||||
|
||||
|
||||
<a name="1.0.11"></a>
|
||||
## [1.0.11](https://github.com/tinper-bee/bee-table/compare/v1.0.10...v1.0.11) (2018-01-16)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* 提供column.sumThousandth属性，用于设置合计行是否开启千分位功能 ([0a8f8c3](https://github.com/tinper-bee/bee-table/commit/0a8f8c362b2294104957daeb56cfdb986aff1ff1))
|
||||
* **DateRender.js:** 新增type参数支持控制日期的不同展现方式，并完善示例和文档 ([0b814f8](https://github.com/tinper-bee/bee-table/commit/0b814f8))
|
||||
* **demo.js:** 修改demo显示效果 ([e6b3eb9](https://github.com/tinper-bee/bee-table/commit/e6b3eb9))
|
||||
|
||||
|
||||
|
||||
|
||||
<a name="2.2.68"></a>
|
||||
## 2.2.68 (2020-10-09)
|
||||
<a name="1.0.10"></a>
|
||||
## [1.0.10](https://github.com/tinper-bee/bee-table/compare/v1.0.9...v1.0.10) (2018-01-03)
|
||||
|
||||
|
||||
|
||||
<a name="1.0.9"></a>
|
||||
## [1.0.9](https://github.com/tinper-bee/bee-table/compare/69e0751...v1.0.9) (2018-01-03)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 优化合计组件语法 ([3d4a400](https://github.com/tinper-bee/bee-table/commit/3d4a400))
|
||||
* 修改checkbox属性修改 ([2398040](https://github.com/tinper-bee/bee-table/commit/2398040))
|
||||
* 修改onRowClick的api ([d5e85d1](https://github.com/tinper-bee/bee-table/commit/d5e85d1))
|
||||
* 修改合计行宽度没有对齐的bug ([e26f3b5](https://github.com/tinper-bee/bee-table/commit/e26f3b5))
|
||||
* 修改方法名 ([350dc43](https://github.com/tinper-bee/bee-table/commit/350dc43))
|
||||
* 删除多余demo，修改样式和优化合计功能代码 ([b01d24d](https://github.com/tinper-bee/bee-table/commit/b01d24d))
|
||||
* 更新日期组件版本和提取dateRender组件 ([06e0091](https://github.com/tinper-bee/bee-table/commit/06e0091))
|
||||
* 解决合计行与排序组合使用时的问题 ([6f6abe5](https://github.com/tinper-bee/bee-table/commit/6f6abe5))
|
||||
* **DateRender.js:** 修复日期render中设置空字符串出错bug ([b7c1961](https://github.com/tinper-bee/bee-table/commit/b7c1961))
|
||||
* **multiSelect.js:** 修复全选功能在更新数据时bug ([b9de7de](https://github.com/tinper-bee/bee-table/commit/b9de7de))
|
||||
* **sort.js:** 修复使用排序功能时，更新数据不生效bug ([b63541c](https://github.com/tinper-bee/bee-table/commit/b63541c))
|
||||
* **sum.js:** 修复合计功能会忽略其他参数，并导致render不生效的bug ([e2d6be5](https://github.com/tinper-bee/bee-table/commit/e2d6be5))
|
||||
* **table.scss:** 修改demo中涉及到组件的样式转移到组件中 ([1f5a43f](https://github.com/tinper-bee/bee-table/commit/1f5a43f))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* 为合计功能增加列可配置，并且完善文档 ([c9f839b](https://github.com/tinper-bee/bee-table/commit/c9f839b))
|
||||
* 抽离下拉框为selectRender ([b2acc8e](https://github.com/tinper-bee/bee-table/commit/b2acc8e))
|
||||
* 提交edittype组件render ([9c05647](https://github.com/tinper-bee/bee-table/commit/9c05647))
|
||||
* 新增demo ([269e6f1](https://github.com/tinper-bee/bee-table/commit/269e6f1))
|
||||
* 新增多选示例 ([3a3df49](https://github.com/tinper-bee/bee-table/commit/3a3df49))
|
||||
* 新增嵌套子表格功能和demo，文档。修复rowRef参数bug ([87a81b2](https://github.com/tinper-bee/bee-table/commit/87a81b2))
|
||||
* 新增排序和全选高阶组件，并增加使用示例 ([f8a00fe](https://github.com/tinper-bee/bee-table/commit/f8a00fe))
|
||||
* 新增组件示例 ([69e0751](https://github.com/tinper-bee/bee-table/commit/69e0751))
|
||||
* **multiSelect.js:** 新增selectDisabled可以设置某一行数据无法被全选 ([d2d6d09](https://github.com/tinper-bee/bee-table/commit/d2d6d09))
|
||||
* **multiSelect.js:** 新增selectedRow参数来控制某一行数据是否选中 ([3f0c3be](https://github.com/tinper-bee/bee-table/commit/3f0c3be))
|
||||
* **package.json:** 增加changelog和完善提交机制 ([6069320](https://github.com/tinper-bee/bee-table/commit/6069320))
|
||||
* **SelectRender.js:** 增加键值对参数能在浏览态的时候显示key值 ([4f5cb9b](https://github.com/tinper-bee/bee-table/commit/4f5cb9b))
|
||||
* **Table.js:** 新增# bee-table ([8117b1c](https://github.com/tinper-bee/bee-table/commit/8117b1c))
|
||||
* **Table.js:** 新增footerScroll参数来让表尾和表体公用同一个横向滚动条 ([e79234f](https://github.com/tinper-bee/bee-table/commit/e79234f))
|
||||
* **table.js && table.scss:** 修改固定表头的滚动条默认样式为auto ([e8bc09f](https://github.com/tinper-bee/bee-table/commit/e8bc09f))
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
108
README.md
108
README.md
|
|
@ -8,25 +8,11 @@
|
|||
[](http://isitmaintained.com/project/tinper-bee/bee-table "Average time to resolve an issue")
|
||||
[](http://isitmaintained.com/project/tinper-bee/bee-table "Percentage of issues still open")
|
||||
|
||||
react bee-table component for tinper-bee
|
||||
|
||||
react bee-table component for tinper-bee
|
||||
some description...
|
||||
|
||||
该table组件除了基本表格功能之外，还提供了一下功能。
|
||||
* 动态设置过滤列
|
||||
* 排序合计
|
||||
* 多选
|
||||
* 主子表
|
||||
* 固定表头
|
||||
* 拖拽表头进行列交换
|
||||
* 拖拽调整列宽度
|
||||
* 嵌套子表格
|
||||
* 行、列合并
|
||||
|
||||
具体示例代码参考[!这里](http://bee.tinper.org/bee-table/)
|
||||
|
||||
<font color="#dd0000">为了响应大家对bee-table的需求，我们新增加了表格的高级组件 [bee-complex-grid](http://bee.tinper.org/bee-complex-grid/)</font>
|
||||
|
||||
## 安装
|
||||
## install
|
||||
|
||||
[](https://npmjs.org/package/bee-table)
|
||||
|
||||
|
|
@ -79,6 +65,7 @@ class Demo extends Component {
|
|||
| defaultExpandAllRows | 默认是否展开所有行 | bool | false |
|
||||
| expandedRowKeys | 展开的行，控制属性 | array | - |
|
||||
| defaultExpandedRowKeys | 初始扩展行键 | array | [] |
|
||||
| useFixedHeader | 是否使用固定表头 | bool | false |
|
||||
| bodyStyle | 添加到tablebody上的style | object | {} |
|
||||
| style | 添加到table上的style | object | {} |
|
||||
| rowKey | 如果rowKey是字符串，`record [rowKey]`将被用作键。如果rowKey是function，`rowKey（record, index）`的返回值将被用作键。 | string or Function(record, index):string | 'key' |
|
||||
|
|
@ -95,7 +82,7 @@ class Demo extends Component {
|
|||
| title | 表格标题 | Function | - |
|
||||
| footer | 表格尾部 | Function | - |
|
||||
| emptyText | 无数据时显示的内容 | Function | () => 'No Data' |
|
||||
| scroll | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度| `{ x: number / 百分比, y: number }` | {} |
|
||||
| scroll | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度：{ x: true, y: 300 } | object | {} |
|
||||
| rowRef | 获取行的ref | Function(record, index, indent):string | () => null |
|
||||
| getBodyWrapper | 添加对table body的包装 | Function(body) | body => body |
|
||||
| expandedRowRender | 额外的展开行 | Function(record, index, indent):node | - |
|
||||
|
|
@ -104,23 +91,6 @@ class Demo extends Component {
|
|||
| footerScroll | 表尾和body是否公用同一个横向滚动条。（ 如果footer中也是一个table组件，并且也具有滚动条，那么也需要加入footerScroll参数。 ） | bool | false |
|
||||
| loading | 表格是否加载中 | bool|object(详情可以参考上面示例) | false |
|
||||
| haveExpandIcon | 控制是否显示行展开icon.**注：该参数只有在和expandedRowRender同时使用才生效** | Function(record, index):bool | () =>false |
|
||||
| filterable | 是否开启根据条件来过滤数据 | bool | false
|
||||
| filterDelay | 触发过滤输入的时候的ms延迟时间 | number | 300
|
||||
| onFilterChange | 触发过滤输入操作以及下拉条件的回调 | function | (field,value,condition) => ()
|
||||
| onFilterClear | 清除过滤条件的回调函数，回调参数为清空的字段 | function | (field) => ()
|
||||
| headerScroll | 表头下是否显示滚动条 | bool| false
|
||||
| syncHover | 是否同步Hover状态到左侧Checkbox，关闭此功能有助于提升性能 | bool| true
|
||||
| onKeyTab | tab快捷键，可以处理默认选中第一条数据 | function| -
|
||||
| onKeyUp | up快捷键，可以处理table的上一条数据 | function| -
|
||||
| onKeyDown | up快捷键，可以处理table的下一条数据 | function| -
|
||||
| onTableKeyDown | 触发table的快捷键 | function| -
|
||||
| tabIndex | 设置焦点顺序 | number | 0
|
||||
| loadBuffer | 使用BigData高阶组件实现大数据加载时，上下加载的缓存 | number| 5
|
||||
| height | 自定义表格行高 | number | - |
|
||||
| headerHeight | 自定义表头行高 | number | - |
|
||||
| size | 表格大小 | `sm | md | lg` | 'md' |
|
||||
|
||||
> 快捷键部分参考示例 (快捷键在table中的简单使用应用)
|
||||
|
||||
*注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
|
||||
|
||||
|
|
@ -139,28 +109,12 @@ class Demo extends Component {
|
|||
|render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置|-|
|
||||
|onCellClick|单击列的单元格时调用|Function(row, event)|-|
|
||||
|onHeadCellClick|单击表头的单元格时调用|Function(row, event)|row 当前行的数据|
|
||||
| order | 设置排序 | string（"descend"、"ascend"） | - |
|
||||
| filterType | 过滤下拉的类型.可选`text(文本框)`,`dropdown(下拉)`,`date(日期)`,`daterange(日期范围)`,`number(数值)` | string | text |
|
||||
| filterDropdown | 是否显示过滤下拉.可选`show`,`hide` | string | show |
|
||||
| format | 针对过滤下拉设置日期类的格式 | string | YYYY-MM-DD |
|
||||
| filterDropdownAuto | 设置下拉条件是否自动设置选项，`auto`自动根据当前数据生成，`manual`手动传入，可以使用`filterDropdownData`来传入自定义数据 | string | auto |
|
||||
| filterDropdownData | 下拉条件自定义数据，filterDropdownAuto=manual生效，传入格式：[{ key : "自定义", value : "自定义" }] | array | [] |
|
||||
| filterDropdownFocus | 触发点击下拉条件的回调，一般用于异步点击请求数据使用 | function | () => () |
|
||||
| filterDropdownType | 下拉条件类型，分为 string 和 number 条件类型 | string | string
|
||||
| filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
|
||||
| filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
|
||||
|notRowDrag| rowDraggAble 为true时表示这个表格是可以行拖拽改变顺序的，notRowDrag为true可以实现某一列来控制这行是否可以拖拽|bool| 默认为false的，不会控制当前行是否拖拽。
|
||||
|
||||
## 快捷键API
|
||||
|
||||
| 快捷键 | 快捷键说明 | 类型 | 默认值 |
|
||||
| --- | :--- | --- |--- |
|
||||
| onKeyTab | tab快捷键，可以处理默认选中第一条数据 | function| -
|
||||
| onKeyUp | ↑(上箭) 快捷键，可以处理table的上一条数据 | function| -
|
||||
| onKeyDown | ↓(下箭)快捷键，可以处理table的下一条数据 | function| -
|
||||
| onTableKeyDown | 触发table的所有快捷键 | function| -
|
||||
| tabIndex | 设置焦点顺序 | number | 0
|
||||
|
||||
## mixin
|
||||
|
||||
Table拓展功能方法。注：拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然在操作state会导致功能出现异常
|
||||
|
||||
## 如何引用
|
||||
需要单独的去引用相应的js文件，目录在lib文件夹，示例如下：
|
||||
|
|
@ -168,39 +122,33 @@ class Demo extends Component {
|
|||
* 在tinper-bee中引用
|
||||
|
||||
```js
|
||||
|
||||
import {Table} from 'tinper-bee'
|
||||
|
||||
import multiSelect from "tinper-bee/lib/multiSelect.js"
|
||||
```
|
||||
|
||||
* 单独安装bee-table 方式
|
||||
|
||||
```js
|
||||
|
||||
import Table from 'bee-table'
|
||||
|
||||
import multiSelect from "bee-table/build/lib/multiSelect.js"
|
||||
```
|
||||
|
||||
## 如何引用增强功能(multiSelect,sort,sum)
|
||||
|
||||
|
||||
```js
|
||||
|
||||
import multiSelect from "bee-table/lib/multiSelect.js";
|
||||
|
||||
```
|
||||
|
||||
### multiSelect
|
||||
|
||||
全选功能
|
||||
|
||||
#### data 数据中新增参数
|
||||
#### Table新增参数
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------- | -------------------------- | -------- | -------- |
|
||||
| _checked | 设置当前数据是否选中 | boolean | true/false |
|
||||
| _disabled | 禁用当前选中数据 | boolean | true/false
|
||||
| multiSelect | 全选功能的配置对象，属性参见下面 | obj | {} |
|
||||
| multiSelect.type | 全选功能的类型，多选或单选（暂时只支持多选） | string | checkbox |
|
||||
| multiSelect.param | 通过设置该参数来设计获取的数据数组，默认返还所有数据 | string | '' |
|
||||
| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 |
|
||||
| selectDisabled | 设置某一行数据无法被选中，使用类似于rowClassName | Function(record, index):bool | 无 |
|
||||
| selectedRow | 设置某一行数据是否被选中，使用类似于rowClassName | Function(record, index):bool | 无 |
|
||||
|
||||
|
||||
|
||||
### sort
|
||||
|
||||
|
|
@ -211,8 +159,6 @@ import multiSelect from "bee-table/lib/multiSelect.js";
|
|||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------ | ---------- | -------- | ---- |
|
||||
| sorter | 排序函数，可以自定义 | Function | 无 |
|
||||
| sorterClick | 排序钩子函数| Function | (coloum,type) |
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -240,14 +186,18 @@ import multiSelect from "bee-table/lib/multiSelect.js";
|
|||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------ | ---------- | -------- | ---- |
|
||||
| draggable | 可拖拽交换列 | boolean | false |
|
||||
| dragborder | 可拖拽改变列宽 | boolean | false |
|
||||
| checkMinSize | 当前表格显示最少列数 | boolean | false |
|
||||
| onDragEnd | 交换列后的回调函数 | function | (event,data,columns) |
|
||||
| onDrop | 交换列的回调函数 | function | (event,data,columns) |
|
||||
| draggable | 当前表格可拖拽 | boolean | false |
|
||||
|
||||
|
||||
### 拖拽变更宽度
|
||||
|
||||
目前支持此功能只支持普通表格【注：不支持tree结构的表头、不支持和表头拖拽交互列一起使用】[示例](https://github.com/tinper-bee/bee-table/tree/master/demo/demolist/Demo23.js)
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------ | ---------- | -------- | ---- |
|
||||
| dragborder | 当前表格可拖拽改变宽度 | boolean | false |
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## rendertype
|
||||
|
|
@ -338,6 +288,4 @@ $ npm install
|
|||
$ npm run dev
|
||||
```
|
||||
|
||||
##change
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -28,9 +28,7 @@ var propTypes = {
|
|||
width: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string]),
|
||||
fixed: _propTypes2["default"].oneOf([true, 'left', 'right']),
|
||||
render: _propTypes2["default"].func,
|
||||
onCellClick: _propTypes2["default"].func,
|
||||
ifshow: _propTypes2["default"].bool,
|
||||
fieldType: _propTypes2["default"].string // 类型
|
||||
onCellClick: _propTypes2["default"].func
|
||||
};
|
||||
|
||||
var Column = function (_Component) {
|
||||
|
|
@ -45,11 +43,6 @@ var Column = function (_Component) {
|
|||
return Column;
|
||||
}(_react.Component);
|
||||
|
||||
Column.defaultProps = {
|
||||
ifshow: true
|
||||
};
|
||||
|
||||
|
||||
Column.propTypes = propTypes;
|
||||
|
||||
exports["default"] = Column;
|
||||
|
|
|
|||
|
|
@ -18,10 +18,6 @@ var _ColumnGroup = require('./ColumnGroup');
|
|||
|
||||
var _ColumnGroup2 = _interopRequireDefault(_ColumnGroup);
|
||||
|
||||
var _beeIcon = require('bee-icon');
|
||||
|
||||
var _beeIcon2 = _interopRequireDefault(_beeIcon);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
|
||||
|
|
@ -29,29 +25,16 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
|
|||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
//行控制管理
|
||||
|
||||
var ColumnManager = function () {
|
||||
function ColumnManager(columns, elements, originWidth, rowDraggAble, showRowNum) {
|
||||
function ColumnManager(columns, elements) {
|
||||
_classCallCheck(this, ColumnManager);
|
||||
|
||||
_initialiseProps.call(this);
|
||||
this._cached = {};
|
||||
|
||||
columns = this.addDragHandleColumn(columns, rowDraggAble);
|
||||
columns = this.addOrderColumn(columns, showRowNum);
|
||||
columns = this.deleteColumnNotShow(columns);
|
||||
this.columns = columns || this.normalize(elements);
|
||||
|
||||
this.originWidth = originWidth;
|
||||
}
|
||||
|
||||
// 向数据列中添加一列:行拖拽标识
|
||||
|
||||
|
||||
// delete the column which does not show
|
||||
|
||||
|
||||
// 向数据列中添加一列:序号
|
||||
|
||||
|
||||
ColumnManager.prototype.isAnyColumnsFixed = function isAnyColumnsFixed() {
|
||||
var _this = this;
|
||||
|
||||
|
|
@ -102,53 +85,35 @@ var ColumnManager = function () {
|
|||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.centerColumns = function centerColumns() {
|
||||
ColumnManager.prototype.leafColumns = function leafColumns() {
|
||||
var _this6 = this;
|
||||
|
||||
return this._cache('centerColumns', function () {
|
||||
return _this6.groupedColumns().filter(function (column) {
|
||||
return !column.fixed;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.leafColumns = function leafColumns() {
|
||||
var _this7 = this;
|
||||
|
||||
return this._cache('leafColumns', function () {
|
||||
return _this7._leafColumns(_this7.columns);
|
||||
return _this6._leafColumns(_this6.columns);
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.leftLeafColumns = function leftLeafColumns() {
|
||||
var _this8 = this;
|
||||
var _this7 = this;
|
||||
|
||||
return this._cache('leftLeafColumns', function () {
|
||||
return _this8._leafColumns(_this8.leftColumns());
|
||||
return _this7._leafColumns(_this7.leftColumns());
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.rightLeafColumns = function rightLeafColumns() {
|
||||
var _this9 = this;
|
||||
var _this8 = this;
|
||||
|
||||
return this._cache('rightLeafColumns', function () {
|
||||
return _this9._leafColumns(_this9.rightColumns());
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.centerLeafColumns = function centerLeafColumns() {
|
||||
var _this10 = this;
|
||||
|
||||
return this._cache('centerLeafColumns', function () {
|
||||
return _this10._leafColumns(_this10.centerColumns());
|
||||
return _this8._leafColumns(_this8.rightColumns());
|
||||
});
|
||||
};
|
||||
|
||||
// add appropriate rowspan and colspan to column
|
||||
|
||||
|
||||
ColumnManager.prototype.groupedColumns = function groupedColumns(type) {
|
||||
var _this11 = this;
|
||||
ColumnManager.prototype.groupedColumns = function groupedColumns() {
|
||||
var _this9 = this;
|
||||
|
||||
return this._cache('groupedColumns', function () {
|
||||
var _groupColumns = function _groupColumns(columns) {
|
||||
|
|
@ -167,17 +132,7 @@ var ColumnManager = function () {
|
|||
}
|
||||
};
|
||||
columns.forEach(function (column, index) {
|
||||
var defaultOpt = {
|
||||
ifshow: true
|
||||
};
|
||||
if (!_this11.originWidth) {
|
||||
defaultOpt.width = 200;
|
||||
}
|
||||
//获取非固定列
|
||||
if (type == 'nofixed' && column.fixed) {
|
||||
return false;
|
||||
}
|
||||
var newColumn = _extends({}, defaultOpt, column);
|
||||
var newColumn = _extends({}, column);
|
||||
rows[currentRow].push(newColumn);
|
||||
parentColumn.colSpan = parentColumn.colSpan || 0;
|
||||
if (newColumn.children && newColumn.children.length > 0) {
|
||||
|
|
@ -198,22 +153,22 @@ var ColumnManager = function () {
|
|||
});
|
||||
return grouped;
|
||||
};
|
||||
return _groupColumns(_this11.columns);
|
||||
return _groupColumns(_this9.columns);
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.normalize = function normalize(elements) {
|
||||
var _this12 = this;
|
||||
var _this10 = this;
|
||||
|
||||
var columns = [];
|
||||
_react2["default"].Children.forEach(elements, function (element) {
|
||||
if (!_this12.isColumnElement(element)) return;
|
||||
if (!_this10.isColumnElement(element)) return;
|
||||
var column = _extends({}, element.props);
|
||||
if (element.key) {
|
||||
column.key = element.key;
|
||||
}
|
||||
if (element.type === _ColumnGroup2["default"]) {
|
||||
column.children = _this12.normalize(column.children);
|
||||
column.children = _this10.normalize(column.children);
|
||||
}
|
||||
columns.push(column);
|
||||
});
|
||||
|
|
@ -224,73 +179,11 @@ var ColumnManager = function () {
|
|||
return element && (element.type === _Column2["default"] || element.type === _ColumnGroup2["default"]);
|
||||
};
|
||||
|
||||
ColumnManager.prototype.reset = function reset(columns, elements, showRowNum, rowDraggAble) {
|
||||
columns = this.addDragHandleColumn(columns, rowDraggAble);
|
||||
columns = this.addOrderColumn(columns, showRowNum);
|
||||
columns = this.deleteColumnNotShow(columns);
|
||||
ColumnManager.prototype.reset = function reset(columns, elements) {
|
||||
this.columns = columns || this.normalize(elements);
|
||||
this._cached = {};
|
||||
};
|
||||
|
||||
ColumnManager.prototype.getColumnWidth = function getColumnWidth(contentWidth) {
|
||||
var columns = this.leafColumns();
|
||||
var res = { computeWidth: 0, lastShowIndex: -1 };
|
||||
columns.forEach(function (col, index) {
|
||||
//如果列显示
|
||||
if (col.ifshow) {
|
||||
var width = col.width;
|
||||
if (typeof width == 'string' && width.includes('%')) {
|
||||
width = contentWidth * parseInt(col.width) / 100;
|
||||
}
|
||||
res.computeWidth += parseInt(width);
|
||||
if (!col.fixed) {
|
||||
res.lastShowIndex = index;
|
||||
}
|
||||
}
|
||||
});
|
||||
return res;
|
||||
};
|
||||
|
||||
ColumnManager.prototype.getLeftColumnsWidth = function getLeftColumnsWidth() {
|
||||
var _this13 = this;
|
||||
|
||||
var contentWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
|
||||
|
||||
return this._cache('leftColumnsWidth', function () {
|
||||
var leftColumnsWidth = 0;
|
||||
_this13.groupedColumns().forEach(function (column) {
|
||||
if (column.fixed === 'left' || column.fixed === true) {
|
||||
var width = column.width;
|
||||
if (typeof width == 'string' && width.includes('%')) {
|
||||
width = contentWidth * parseInt(column.width) / 100;
|
||||
}
|
||||
leftColumnsWidth += parseInt(width);
|
||||
}
|
||||
});
|
||||
return leftColumnsWidth;
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype.getRightColumnsWidth = function getRightColumnsWidth() {
|
||||
var _this14 = this;
|
||||
|
||||
var contentWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
|
||||
|
||||
return this._cache('rightColumnsWidth', function () {
|
||||
var rightColumnsWidth = 0;
|
||||
_this14.groupedColumns().forEach(function (column) {
|
||||
if (column.fixed === 'right') {
|
||||
var width = column.width;
|
||||
if (typeof width == 'string' && width.includes('%')) {
|
||||
width = contentWidth * parseInt(column.width) / 100;
|
||||
}
|
||||
rightColumnsWidth += parseInt(width);
|
||||
}
|
||||
});
|
||||
return rightColumnsWidth;
|
||||
});
|
||||
};
|
||||
|
||||
ColumnManager.prototype._cache = function _cache(name, fn) {
|
||||
if (name in this._cached) {
|
||||
return this._cached[name];
|
||||
|
|
@ -299,27 +192,15 @@ var ColumnManager = function () {
|
|||
return this._cached[name];
|
||||
};
|
||||
|
||||
//todo 含有children的宽度计算
|
||||
|
||||
|
||||
ColumnManager.prototype._leafColumns = function _leafColumns(columns) {
|
||||
var _this15 = this;
|
||||
var _this11 = this;
|
||||
|
||||
var leafColumns = [];
|
||||
|
||||
columns.forEach(function (column) {
|
||||
if (!column.children) {
|
||||
|
||||
var defaultOpt = {
|
||||
ifshow: true
|
||||
};
|
||||
if (!_this15.originWidth) {
|
||||
defaultOpt.width = 200;
|
||||
}
|
||||
var newColumn = _extends({}, defaultOpt, column);
|
||||
leafColumns.push(newColumn);
|
||||
leafColumns.push(column);
|
||||
} else {
|
||||
leafColumns.push.apply(leafColumns, _toConsumableArray(_this15._leafColumns(column.children)));
|
||||
leafColumns.push.apply(leafColumns, _toConsumableArray(_this11._leafColumns(column.children)));
|
||||
}
|
||||
});
|
||||
return leafColumns;
|
||||
|
|
@ -328,79 +209,5 @@ var ColumnManager = function () {
|
|||
return ColumnManager;
|
||||
}();
|
||||
|
||||
var _initialiseProps = function _initialiseProps() {
|
||||
this._cached = {};
|
||||
|
||||
this.addDragHandleColumn = function (columns, rowDraggAble) {
|
||||
if (!rowDraggAble) {
|
||||
return columns;
|
||||
}
|
||||
var dragHandleColumn = [{
|
||||
className: "drag-handle-column",
|
||||
title: "",
|
||||
key: "dragHandle",
|
||||
dataIndex: "dragHandle",
|
||||
width: 49,
|
||||
draggable: true,
|
||||
render: function render() {
|
||||
return _react2["default"].createElement(_beeIcon2["default"], { type: 'uf-navmenu' });
|
||||
}
|
||||
}];
|
||||
columns = dragHandleColumn.concat(columns);
|
||||
return columns;
|
||||
};
|
||||
|
||||
this.deleteColumnNotShow = function (columns) {
|
||||
var len = columns.length;
|
||||
for (var i = 0; i < len; i++) {
|
||||
if (columns && columns[i] && columns[i].isShow === false) {
|
||||
columns.splice(i, 1);
|
||||
i--;
|
||||
}
|
||||
}
|
||||
return columns;
|
||||
};
|
||||
|
||||
this.addOrderColumn = function (columns, showRowNum) {
|
||||
if (!showRowNum) {
|
||||
return columns;
|
||||
}
|
||||
var key = showRowNum.key,
|
||||
fixed = showRowNum.fixed,
|
||||
width = showRowNum.width,
|
||||
name = showRowNum.name,
|
||||
type = showRowNum.type,
|
||||
base = showRowNum.base;
|
||||
|
||||
var order = {
|
||||
dataIndex: key || '_index',
|
||||
key: '_index',
|
||||
fixed: fixed || 'left',
|
||||
width: width || 50,
|
||||
title: name || '序号',
|
||||
render: function render(text, record, index) {
|
||||
switch (type) {
|
||||
case 'ascii':
|
||||
{
|
||||
return String.fromCharCode((base || 'a').charCodeAt() + index);
|
||||
}
|
||||
case 'number':
|
||||
default:
|
||||
{
|
||||
return (base || 0) + index;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
if (columns.length > 0 && columns[0].dataIndex !== 'checkbox' && columns[0].dataIndex !== 'radio') {
|
||||
// 多选表格/单选表格时放在第二列,其他情况放到第一列
|
||||
columns = [order].concat(columns);
|
||||
} else {
|
||||
columns.splice(1, 0, order); // splice方法改变原数组,返回切割出的数组,此处为[]
|
||||
}
|
||||
return columns;
|
||||
};
|
||||
};
|
||||
|
||||
exports["default"] = ColumnManager;
|
||||
module.exports = exports['default'];
|
||||
|
|
@ -41,16 +41,7 @@ var ExpandIcon = function (_Component) {
|
|||
function ExpandIcon(props) {
|
||||
_classCallCheck(this, ExpandIcon);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_this.onExpand = function (status, record, e) {
|
||||
var onExpand = _this.props.onExpand;
|
||||
|
||||
e.stopPropagation();
|
||||
onExpand(status, record, e);
|
||||
};
|
||||
|
||||
return _this;
|
||||
return _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
}
|
||||
|
||||
ExpandIcon.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
|
||||
|
|
@ -58,8 +49,6 @@ var ExpandIcon = function (_Component) {
|
|||
};
|
||||
|
||||
ExpandIcon.prototype.render = function render() {
|
||||
var _this2 = this;
|
||||
|
||||
var _props = this.props,
|
||||
expandable = _props.expandable,
|
||||
clsPrefix = _props.clsPrefix,
|
||||
|
|
@ -67,27 +56,16 @@ var ExpandIcon = function (_Component) {
|
|||
needIndentSpaced = _props.needIndentSpaced,
|
||||
expanded = _props.expanded,
|
||||
record = _props.record,
|
||||
isHiddenExpandIcon = _props.isHiddenExpandIcon,
|
||||
expandedIcon = _props.expandedIcon,
|
||||
collapsedIcon = _props.collapsedIcon;
|
||||
isHiddenExpandIcon = _props.isHiddenExpandIcon;
|
||||
|
||||
if (expandable && !isHiddenExpandIcon) {
|
||||
var expandClassName = expanded ? 'expanded' : 'collapsed';
|
||||
var currentIcon = _react2["default"].createElement('span', {
|
||||
className: clsPrefix + '-expand-icon ' + clsPrefix + '-' + expandClassName
|
||||
return _react2["default"].createElement('span', {
|
||||
className: clsPrefix + '-expand-icon ' + clsPrefix + '-' + expandClassName,
|
||||
onClick: function onClick(e) {
|
||||
return onExpand(!expanded, record, e);
|
||||
}
|
||||
});
|
||||
if (expanded && expandedIcon) {
|
||||
currentIcon = expandedIcon;
|
||||
} else if (!expanded && collapsedIcon) {
|
||||
currentIcon = collapsedIcon;
|
||||
}
|
||||
return _react2["default"].createElement(
|
||||
'span',
|
||||
{ onClick: function onClick(e) {
|
||||
return _this2.onExpand(!expanded, record, e);
|
||||
}, className: 'expand-icon-con' },
|
||||
currentIcon
|
||||
);
|
||||
} else if (needIndentSpaced || isHiddenExpandIcon) {
|
||||
return _react2["default"].createElement('span', { className: clsPrefix + '-expand-icon ' + clsPrefix + '-spaced' });
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,320 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _propTypes = require('prop-types');
|
||||
|
||||
var _propTypes2 = _interopRequireDefault(_propTypes);
|
||||
|
||||
var _beeDropdown = require('bee-dropdown');
|
||||
|
||||
var _beeDropdown2 = _interopRequireDefault(_beeDropdown);
|
||||
|
||||
var _beeMenus = require('bee-menus');
|
||||
|
||||
var _beeMenus2 = _interopRequireDefault(_beeMenus);
|
||||
|
||||
var _beeButton = require('bee-button');
|
||||
|
||||
var _beeButton2 = _interopRequireDefault(_beeButton);
|
||||
|
||||
var _beeIcon = require('bee-icon');
|
||||
|
||||
var _beeIcon2 = _interopRequireDefault(_beeIcon);
|
||||
|
||||
var _i18n = require('./lib/i18n');
|
||||
|
||||
var _i18n2 = _interopRequireDefault(_i18n);
|
||||
|
||||
var _tool = require('bee-locale/build/tool');
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); } /**
|
||||
* 过滤行功能内的下拉条件
|
||||
*/
|
||||
|
||||
var Item = _beeMenus2["default"].Item;
|
||||
|
||||
var FilterDropDown = function (_Component) {
|
||||
_inherits(FilterDropDown, _Component);
|
||||
|
||||
function FilterDropDown() {
|
||||
_classCallCheck(this, FilterDropDown);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this));
|
||||
|
||||
_this.onSelectDropdown = function (item) {
|
||||
var _this$props = _this.props,
|
||||
onSelectDropdown = _this$props.onSelectDropdown,
|
||||
filterDropdownType = _this$props.filterDropdownType;
|
||||
|
||||
if (onSelectDropdown) {
|
||||
if (filterDropdownType == 'string') {
|
||||
_this.setState({
|
||||
selectValue: [item.key]
|
||||
}, function () {
|
||||
onSelectDropdown(item);
|
||||
});
|
||||
}
|
||||
if (filterDropdownType == 'number') {
|
||||
_this.setState({
|
||||
selectNumberValue: [item.key]
|
||||
}, function () {
|
||||
onSelectDropdown(item);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
_this.onClickClear = function () {
|
||||
var onClickClear = _this.props.onClickClear;
|
||||
|
||||
if (onClickClear) {
|
||||
_this.setState({
|
||||
// selectValue: [],
|
||||
// selectNumberValue: []
|
||||
}, function () {
|
||||
onClickClear();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
_this.getMenu = function () {
|
||||
var _this$state = _this.state,
|
||||
selectValue = _this$state.selectValue,
|
||||
selectNumberValue = _this$state.selectNumberValue;
|
||||
var _this$props2 = _this.props,
|
||||
filterDropdownType = _this$props2.filterDropdownType,
|
||||
filterDropdownIncludeKeys = _this$props2.filterDropdownIncludeKeys;
|
||||
|
||||
var locale = (0, _tool.getComponentLocale)(_this.props, _this.context, 'Table', function () {
|
||||
return _i18n2["default"];
|
||||
});
|
||||
var stringEnum = {
|
||||
LIKE: 'include',
|
||||
ULIKE: 'exclusive',
|
||||
EQ: 'equal',
|
||||
UEQ: 'unequal',
|
||||
START: 'begin',
|
||||
END: 'end'
|
||||
};
|
||||
var numberEnum = {
|
||||
GT: 'greater_than',
|
||||
GTEQ: 'great_than_equal_to',
|
||||
LT: 'less_than',
|
||||
LTEQ: 'less_than_equal_to',
|
||||
EQ: 'be_equal_to',
|
||||
UEQ: 'not_equal_to'
|
||||
};
|
||||
if (filterDropdownIncludeKeys != undefined) {
|
||||
switch (filterDropdownType) {
|
||||
case 'string':
|
||||
return _react2["default"].createElement(
|
||||
_beeMenus2["default"],
|
||||
{
|
||||
onClick: _this.onSelectDropdown,
|
||||
selectedKeys: selectValue
|
||||
},
|
||||
filterDropdownIncludeKeys.map(function (item) {
|
||||
return _react2["default"].createElement(
|
||||
Item,
|
||||
{ key: item },
|
||||
locale[stringEnum[item]]
|
||||
);
|
||||
})
|
||||
);
|
||||
case 'number':
|
||||
return _react2["default"].createElement(
|
||||
_beeMenus2["default"],
|
||||
{
|
||||
onClick: _this.onSelectDropdown,
|
||||
selectedKeys: selectNumberValue
|
||||
},
|
||||
filterDropdownIncludeKeys.map(function (item) {
|
||||
return _react2["default"].createElement(
|
||||
Item,
|
||||
{ key: item },
|
||||
locale[numberEnum[item]]
|
||||
);
|
||||
})
|
||||
);
|
||||
default:
|
||||
return _react2["default"].createElement('div', null);
|
||||
}
|
||||
} else {
|
||||
switch (filterDropdownType) {
|
||||
case 'string':
|
||||
return _react2["default"].createElement(
|
||||
_beeMenus2["default"],
|
||||
{
|
||||
onClick: _this.onSelectDropdown,
|
||||
selectedKeys: selectValue
|
||||
},
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'LIKE' },
|
||||
locale['include']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'ULIKE' },
|
||||
locale['exclusive']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'EQ' },
|
||||
locale['equal']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'UEQ' },
|
||||
locale['unequal']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'RLIKE' },
|
||||
locale['begin']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'LLIKE' },
|
||||
locale['end']
|
||||
)
|
||||
);
|
||||
case 'number':
|
||||
return _react2["default"].createElement(
|
||||
_beeMenus2["default"],
|
||||
{
|
||||
onClick: _this.onSelectDropdown,
|
||||
selectedKeys: selectNumberValue
|
||||
},
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'GT' },
|
||||
locale['greater_than']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'GTEQ' },
|
||||
locale['great_than_equal_to']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'LT' },
|
||||
locale['less_than']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'LTEQ' },
|
||||
locale['less_than_equal_to']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'EQ' },
|
||||
locale['be_equal_to']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'UEQ' },
|
||||
locale['not_equal_to']
|
||||
)
|
||||
);
|
||||
default:
|
||||
return _react2["default"].createElement('div', null);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
_this.state = {
|
||||
selectValue: ['LIKE'],
|
||||
selectNumberValue: ['EQ']
|
||||
};
|
||||
return _this;
|
||||
}
|
||||
/**
|
||||
* 点击下拉菜单
|
||||
*
|
||||
* @param {*} s 选中的selectRecord
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 清除事件
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 根据props来获得指定的Menu,分为String和Number
|
||||
*
|
||||
* @returns JSX Menu
|
||||
*/
|
||||
|
||||
|
||||
FilterDropDown.prototype.render = function render() {
|
||||
var isShowCondition = this.props.isShowCondition;
|
||||
|
||||
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: 'filter-btns' },
|
||||
isShowCondition == 'show' && _react2["default"].createElement(
|
||||
_beeDropdown2["default"],
|
||||
{
|
||||
overlayClassName: 'u-filter-dropdown-menu-wrap',
|
||||
trigger: ['click'],
|
||||
overlay: this.getMenu(),
|
||||
animation: 'slide-up'
|
||||
},
|
||||
_react2["default"].createElement(
|
||||
_beeButton2["default"],
|
||||
{
|
||||
shape: 'border',
|
||||
style: { marginLeft: "2px", minWidth: "0px", width: "26px", lineHeight: "24px", padding: 0 }
|
||||
},
|
||||
_react2["default"].createElement(_beeIcon2["default"], { style: { padding: 0, color: '#585858' }, type: 'uf-filter' })
|
||||
)
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
_beeButton2["default"],
|
||||
{
|
||||
onClick: this.onClickClear,
|
||||
shape: 'border',
|
||||
style: { marginLeft: "2px", minWidth: "0px", width: "26px", lineHeight: "24px", padding: 0, "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }
|
||||
},
|
||||
_react2["default"].createElement(_beeIcon2["default"], { style: { padding: 0, color: '#585858', "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }, type: 'uf-filterno' })
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
return FilterDropDown;
|
||||
}(_react.Component);
|
||||
|
||||
FilterDropDown.propTypes = {
|
||||
isShowCondition: _propTypes2["default"].string,
|
||||
filterDropdownType: _propTypes2["default"].oneOf(['string', 'number'])
|
||||
};
|
||||
|
||||
FilterDropDown.defaultProps = {
|
||||
isShowCondition: 'show',
|
||||
filterDropdownType: 'string'
|
||||
};
|
||||
|
||||
FilterDropDown.contextTypes = {
|
||||
beeLocale: _propTypes2["default"].object
|
||||
};
|
||||
exports["default"] = FilterDropDown;
|
||||
module.exports = exports['default'];
|
||||
|
|
@ -1,499 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _propTypes = require('prop-types');
|
||||
|
||||
var _propTypes2 = _interopRequireDefault(_propTypes);
|
||||
|
||||
var _beeDatepicker = require('bee-datepicker');
|
||||
|
||||
var _beeDatepicker2 = _interopRequireDefault(_beeDatepicker);
|
||||
|
||||
var _zh_CN = require('bee-datepicker/build/locale/zh_CN');
|
||||
|
||||
var _zh_CN2 = _interopRequireDefault(_zh_CN);
|
||||
|
||||
var _beeFormControl = require('bee-form-control');
|
||||
|
||||
var _beeFormControl2 = _interopRequireDefault(_beeFormControl);
|
||||
|
||||
var _beeSelect = require('bee-select');
|
||||
|
||||
var _beeSelect2 = _interopRequireDefault(_beeSelect);
|
||||
|
||||
var _beeInputNumber = require('bee-input-number');
|
||||
|
||||
var _beeInputNumber2 = _interopRequireDefault(_beeInputNumber);
|
||||
|
||||
var _FilterDropDown = require('./FilterDropDown');
|
||||
|
||||
var _FilterDropDown2 = _interopRequireDefault(_FilterDropDown);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
||||
|
||||
var RangePicker = _beeDatepicker2["default"].RangePicker,
|
||||
YearPicker = _beeDatepicker2["default"].YearPicker,
|
||||
MonthPicker = _beeDatepicker2["default"].MonthPicker,
|
||||
WeekPicker = _beeDatepicker2["default"].WeekPicker;
|
||||
|
||||
|
||||
var propTypes = {
|
||||
filterDropdown: _propTypes2["default"].string
|
||||
};
|
||||
|
||||
var FilterType = function (_Component) {
|
||||
_inherits(FilterType, _Component);
|
||||
|
||||
function FilterType(props) {
|
||||
_classCallCheck(this, FilterType);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_this.clearFilter = function () {
|
||||
var _this$props = _this.props,
|
||||
onFilterClear = _this$props.onFilterClear,
|
||||
dataIndex = _this$props.dataIndex;
|
||||
|
||||
if (_this.state.value !== "") {
|
||||
_this.setState({
|
||||
value: "", //清空值
|
||||
condition: _this.props.filterDropdownType == 'string' ? 'LIKE' : 'EQ' //切回默认查询条件
|
||||
}, function () {
|
||||
//调用清除方法参数为当前字段的field
|
||||
onFilterClear && onFilterClear(dataIndex);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
_this.changeText = function (val) {
|
||||
var _this$props2 = _this.props,
|
||||
onFilterChange = _this$props2.onFilterChange,
|
||||
dataIndex = _this$props2.dataIndex;
|
||||
|
||||
_this.setState({
|
||||
value: val
|
||||
}, function () {
|
||||
onFilterChange(dataIndex, val, _this.state.condition);
|
||||
});
|
||||
};
|
||||
|
||||
_this.changeTextCall = function (e) {
|
||||
var _this$props3 = _this.props,
|
||||
onFilterChange = _this$props3.onFilterChange,
|
||||
dataIndex = _this$props3.dataIndex;
|
||||
|
||||
if (e.keyCode == 13) {
|
||||
e.target.value !== "" && onFilterChange(dataIndex, e.target.value, _this.state.condition);
|
||||
}
|
||||
};
|
||||
|
||||
_this.changeValue = function () {
|
||||
_this.setState({
|
||||
value: ""
|
||||
});
|
||||
};
|
||||
|
||||
_this.onSelectDropdown = function (item) {
|
||||
var _this$props4 = _this.props,
|
||||
onFilterChange = _this$props4.onFilterChange,
|
||||
dataIndex = _this$props4.dataIndex;
|
||||
|
||||
_this.setState({
|
||||
condition: item.key
|
||||
}, function () {
|
||||
_this.state.value !== "" && onFilterChange && onFilterChange(dataIndex, _this.state.value, _this.state.condition);
|
||||
});
|
||||
};
|
||||
|
||||
_this.changeNumber = function (value) {
|
||||
var _this$props5 = _this.props,
|
||||
onFilterChange = _this$props5.onFilterChange,
|
||||
dataIndex = _this$props5.dataIndex;
|
||||
|
||||
_this.setState({
|
||||
value: value
|
||||
}, function () {
|
||||
onFilterChange(dataIndex, value, _this.state.condition);
|
||||
});
|
||||
};
|
||||
|
||||
_this.clearNumber = function () {
|
||||
var onChange = _this.props.onChange;
|
||||
|
||||
onChange && onChange("");
|
||||
_this.setState({
|
||||
value: ""
|
||||
});
|
||||
};
|
||||
|
||||
_this.changeTextCallBlur = function (val) {
|
||||
var onChange = _this.props.onChange;
|
||||
|
||||
onChange && onChange(val);
|
||||
};
|
||||
|
||||
_this.changeSelect = function (value) {
|
||||
var _this$props6 = _this.props,
|
||||
onFilterChange = _this$props6.onFilterChange,
|
||||
dataIndex = _this$props6.dataIndex;
|
||||
|
||||
if (onFilterChange) {
|
||||
onFilterChange(dataIndex, value, _this.state.condition);
|
||||
_this.setState({
|
||||
value: value
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
_this.clearSelectValue = function () {
|
||||
_this.setState({
|
||||
selectValue: ""
|
||||
}, function () {
|
||||
_this.changeSelect("");
|
||||
});
|
||||
};
|
||||
|
||||
_this.clearDateValue = function () {
|
||||
_this.setState({
|
||||
dateValue: ""
|
||||
}, function () {
|
||||
_this.changeDate("");
|
||||
});
|
||||
};
|
||||
|
||||
_this.changeDate = function (value) {
|
||||
var _this$props7 = _this.props,
|
||||
onFilterChange = _this$props7.onFilterChange,
|
||||
dataIndex = _this$props7.dataIndex;
|
||||
|
||||
if (onFilterChange) {
|
||||
onFilterChange(dataIndex, value, _this.state.condition);
|
||||
_this.setState({
|
||||
value: value,
|
||||
open: false
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
_this.renderControl = function (rendertype) {
|
||||
var _this$props8 = _this.props,
|
||||
filterInputNumberOptions = _this$props8.filterInputNumberOptions,
|
||||
filterDropdownIncludeKeys = _this$props8.filterDropdownIncludeKeys,
|
||||
dataIndex = _this$props8.dataIndex,
|
||||
filterDropdown = _this$props8.filterDropdown,
|
||||
filterDropdownType = _this$props8.filterDropdownType,
|
||||
format = _this$props8.format,
|
||||
className = _this$props8.className,
|
||||
onChange = _this$props8.onChange,
|
||||
onSelectDropdown = _this$props8.onSelectDropdown,
|
||||
clsPrefix = _this$props8.clsPrefix,
|
||||
locale = _this$props8.locale;
|
||||
|
||||
switch (rendertype) {
|
||||
case 'text':
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: clsPrefix + ' filter-wrap' },
|
||||
_react2["default"].createElement(_beeFormControl2["default"], {
|
||||
value: _this.state.value,
|
||||
className: className,
|
||||
onChange: _this.changeText,
|
||||
onKeyDown: _this.changeTextCall
|
||||
//onBlur={this.changeTextCallBlur}
|
||||
}),
|
||||
_react2["default"].createElement(_FilterDropDown2["default"], {
|
||||
locale: locale,
|
||||
dataIndex: dataIndex,
|
||||
dataText: _this.state.value,
|
||||
onSelectDropdown: _this.onSelectDropdown,
|
||||
onClickClear: _this.clearFilter,
|
||||
isShowClear: _this.state.value,
|
||||
isShowCondition: filterDropdown,
|
||||
filterDropdownType: filterDropdownType,
|
||||
filterDropdownIncludeKeys: filterDropdownIncludeKeys
|
||||
})
|
||||
);
|
||||
case 'number':
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: clsPrefix + ' filter-wrap' },
|
||||
_react2["default"].createElement(_beeInputNumber2["default"], _extends({}, filterInputNumberOptions, {
|
||||
className: className,
|
||||
value: _this.state.value,
|
||||
onChange: _this.changeNumber,
|
||||
iconStyle: 'one'
|
||||
})),
|
||||
_react2["default"].createElement(_FilterDropDown2["default"], {
|
||||
locale: locale,
|
||||
dataIndex: dataIndex,
|
||||
dataText: _this.state.value,
|
||||
onSelectDropdown: _this.onSelectDropdown,
|
||||
onClickClear: _this.clearFilter,
|
||||
isShowClear: _this.state.value != 0,
|
||||
isShowCondition: filterDropdown,
|
||||
filterDropdownType: filterDropdownType,
|
||||
filterDropdownIncludeKeys: filterDropdownIncludeKeys
|
||||
})
|
||||
);
|
||||
case 'dropdown':
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: clsPrefix + ' filter-wrap' },
|
||||
_react2["default"].createElement(_beeSelect2["default"], _extends({}, _this.props, {
|
||||
size: 'sm',
|
||||
value: _this.state.value,
|
||||
onChange: _this.changeSelect
|
||||
})),
|
||||
_react2["default"].createElement(_FilterDropDown2["default"], {
|
||||
locale: locale,
|
||||
dataIndex: dataIndex,
|
||||
dataText: _this.state.value,
|
||||
onSelectDropdown: _this.onSelectDropdown,
|
||||
onClickClear: _this.clearFilter,
|
||||
isShowCondition: filterDropdown,
|
||||
isShowClear: _this.state.value,
|
||||
filterDropdownType: filterDropdownType,
|
||||
filterDropdownIncludeKeys: filterDropdownIncludeKeys
|
||||
})
|
||||
);
|
||||
case 'date':
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: clsPrefix + ' filter-wrap' },
|
||||
_react2["default"].createElement(_beeDatepicker2["default"], _extends({}, _this.props, {
|
||||
value: _this.state.value,
|
||||
onChange: _this.changeDate,
|
||||
open: _this.state.open,
|
||||
format: format,
|
||||
locale: _zh_CN2["default"]
|
||||
})),
|
||||
_react2["default"].createElement(_FilterDropDown2["default"], {
|
||||
locale: locale,
|
||||
dataIndex: dataIndex,
|
||||
dataText: _this.state.value,
|
||||
onSelectDropdown: _this.onSelectDropdown,
|
||||
onClickClear: _this.clearFilter,
|
||||
isShowCondition: filterDropdown,
|
||||
isShowClear: _this.state.value,
|
||||
filterDropdownType: filterDropdownType,
|
||||
filterDropdownIncludeKeys: filterDropdownIncludeKeys
|
||||
})
|
||||
);
|
||||
case 'dateyear':
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: clsPrefix + ' filter-wrap' },
|
||||
_react2["default"].createElement(YearPicker, _extends({}, _this.props, {
|
||||
value: _this.state.value,
|
||||
onChange: _this.changeDate,
|
||||
open: _this.state.open,
|
||||
format: format,
|
||||
locale: _zh_CN2["default"]
|
||||
})),
|
||||
_react2["default"].createElement(_FilterDropDown2["default"], {
|
||||
locale: locale,
|
||||
dataIndex: dataIndex,
|
||||
dataText: _this.state.value,
|
||||
onSelectDropdown: _this.onSelectDropdown,
|
||||
onClickClear: _this.clearFilter,
|
||||
isShowCondition: filterDropdown,
|
||||
isShowClear: _this.state.value,
|
||||
filterDropdownType: filterDropdownType,
|
||||
filterDropdownIncludeKeys: filterDropdownIncludeKeys
|
||||
})
|
||||
);
|
||||
case 'datemonth':
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: clsPrefix + ' filter-wrap' },
|
||||
_react2["default"].createElement(MonthPicker, _extends({}, _this.props, {
|
||||
value: _this.state.value,
|
||||
onChange: _this.changeDate,
|
||||
open: _this.state.open,
|
||||
format: format,
|
||||
locale: _zh_CN2["default"]
|
||||
})),
|
||||
_react2["default"].createElement(_FilterDropDown2["default"], {
|
||||
locale: locale,
|
||||
dataIndex: dataIndex,
|
||||
dataText: _this.state.value,
|
||||
onSelectDropdown: _this.onSelectDropdown,
|
||||
onClickClear: _this.clearFilter,
|
||||
isShowCondition: filterDropdown,
|
||||
isShowClear: _this.state.value,
|
||||
filterDropdownType: filterDropdownType,
|
||||
filterDropdownIncludeKeys: filterDropdownIncludeKeys
|
||||
})
|
||||
);
|
||||
case 'dateweek':
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: clsPrefix + ' filter-wrap' },
|
||||
_react2["default"].createElement(WeekPicker, _extends({}, _this.props, {
|
||||
value: _this.state.value,
|
||||
onChange: _this.changeDate,
|
||||
open: _this.state.open,
|
||||
format: format,
|
||||
locale: _zh_CN2["default"]
|
||||
})),
|
||||
_react2["default"].createElement(_FilterDropDown2["default"], {
|
||||
locale: locale,
|
||||
dataIndex: dataIndex,
|
||||
dataText: _this.state.value,
|
||||
onSelectDropdown: _this.onSelectDropdown,
|
||||
onClickClear: _this.clearFilter,
|
||||
isShowCondition: filterDropdown,
|
||||
isShowClear: _this.state.value,
|
||||
filterDropdownType: filterDropdownType,
|
||||
filterDropdownIncludeKeys: filterDropdownIncludeKeys
|
||||
})
|
||||
);
|
||||
case 'daterange':
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: clsPrefix + ' filter-wrap' },
|
||||
_react2["default"].createElement(RangePicker, _extends({}, _this.props, {
|
||||
value: _this.state.value,
|
||||
onChange: _this.changeDate,
|
||||
open: _this.state.open,
|
||||
format: format,
|
||||
showTime: true,
|
||||
locale: _zh_CN2["default"],
|
||||
placeholder: '开始 ~ 结束',
|
||||
dateInputPlaceholder: ['开始', '结束'],
|
||||
showClear: true
|
||||
})),
|
||||
_react2["default"].createElement(_FilterDropDown2["default"], {
|
||||
locale: locale,
|
||||
dataIndex: dataIndex,
|
||||
dataText: _this.state.value,
|
||||
onSelectDropdown: _this.onSelectDropdown,
|
||||
onClickClear: _this.clearFilter,
|
||||
isShowCondition: filterDropdown,
|
||||
isShowClear: _this.state.value,
|
||||
filterDropdownIncludeKeys: filterDropdownIncludeKeys
|
||||
})
|
||||
);
|
||||
case 'bool':
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: clsPrefix + ' filter-wrap' },
|
||||
_react2["default"].createElement(Switch, {
|
||||
className: className,
|
||||
onChange: onChange
|
||||
}),
|
||||
_react2["default"].createElement(_FilterDropDown2["default"], { locale: locale,
|
||||
onSelectDropdown: onSelectDropdown,
|
||||
filterDropdownIncludeKeys: filterDropdownIncludeKeys
|
||||
})
|
||||
);
|
||||
default:
|
||||
return _react2["default"].createElement('div', null);
|
||||
}
|
||||
};
|
||||
|
||||
_this.state = {
|
||||
value: "",
|
||||
text: "",
|
||||
selectValue: "",
|
||||
dateValue: "",
|
||||
open: false,
|
||||
condition: props.filterDropdownType == 'string' ? 'LIKE' : 'EQ',
|
||||
number: 0
|
||||
};
|
||||
return _this;
|
||||
}
|
||||
|
||||
/**
|
||||
* 清除过滤条件
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 设置输入文本的值
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 输入框回车执行回调
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* 更改修改值
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* 下拉条件的回调
|
||||
*
|
||||
* @param {*} key 字段
|
||||
* @param {*} value 值1,2,3...6
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 修改数值型的值
|
||||
*
|
||||
*/
|
||||
|
||||
//清除数值
|
||||
|
||||
|
||||
//失去焦点后执行函数
|
||||
|
||||
//设置下拉值
|
||||
|
||||
//清除下拉值
|
||||
|
||||
//清除日期值
|
||||
|
||||
//设置日期值
|
||||
|
||||
//组件渲染
|
||||
/**
|
||||
* 根据不同的类型生成对应的组件类型包含一些参数的适应
|
||||
*
|
||||
* @param {*} rendertype 参数类型，包括['text','dropdown','date','dateyear','datemonth','dateweek',daterange','number']
|
||||
* @returns
|
||||
*/
|
||||
|
||||
|
||||
FilterType.prototype.render = function render() {
|
||||
var rendertype = this.props.rendertype;
|
||||
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
{ 'data-filter-type': 'filterContext' },
|
||||
this.renderControl(rendertype)
|
||||
);
|
||||
};
|
||||
|
||||
return FilterType;
|
||||
}(_react.Component);
|
||||
|
||||
FilterType.propTypes = propTypes;
|
||||
FilterType.defaultProps = {
|
||||
filterDropdown: 'show'
|
||||
};
|
||||
exports["default"] = FilterType;
|
||||
module.exports = exports['default'];
|
||||
587
build/Table.css
587
build/Table.css
|
|
@ -3,23 +3,23 @@
|
|||
/* Navlayout */
|
||||
/* FormGroup */
|
||||
/* Navlayout */
|
||||
/**
|
||||
* 加载背景
|
||||
/**
|
||||
* 加载背景
|
||||
*/
|
||||
/**
|
||||
* 文字
|
||||
/**
|
||||
* 文字
|
||||
*/
|
||||
.u-loading-desc {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-size: 14px;
|
||||
color: #212121;
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
text-align: center; }
|
||||
|
||||
/**
|
||||
* default样式 单个圆圈加载
|
||||
/**
|
||||
* default样式 单个圆圈加载
|
||||
*/
|
||||
.u-loading.u-loading-rotate > div {
|
||||
position: absolute;
|
||||
|
|
@ -27,6 +27,8 @@
|
|||
margin: 2px;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
border: 2px solid #0084ff;
|
||||
border-bottom-color: transparent;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
top: 50%;
|
||||
|
|
@ -35,47 +37,32 @@
|
|||
margin-top: -22px;
|
||||
background: transparent !important;
|
||||
display: inline-block;
|
||||
-webkit-animation: rotate 1s 0s linear infinite;
|
||||
animation: rotate 1s 0s linear infinite;
|
||||
text-align: center;
|
||||
line-height: 40px; }
|
||||
.u-loading.u-loading-rotate > div > img {
|
||||
width: 40px; }
|
||||
.u-loading.u-loading-rotate > div > .uf {
|
||||
color: #0084ff;
|
||||
font-size: 40px;
|
||||
padding: 0; }
|
||||
-webkit-animation: rotate 0.75s 0s linear infinite;
|
||||
animation: rotate 0.75s 0s linear infinite; }
|
||||
|
||||
.u-loading.u-loading-rotate.u-loading-rotate-lg > div {
|
||||
margin-left: -35px;
|
||||
margin-top: -35px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
line-height: 60px; }
|
||||
.u-loading.u-loading-rotate.u-loading-rotate-lg > div > img {
|
||||
width: 60px; }
|
||||
.u-loading.u-loading-rotate.u-loading-rotate-lg > div > .uf {
|
||||
font-size: 60px; }
|
||||
height: 60px; }
|
||||
|
||||
.u-loading.u-loading-rotate.u-loading-rotate-sm > div {
|
||||
margin-left: -15px;
|
||||
margin-top: -15px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
line-height: 25px; }
|
||||
.u-loading.u-loading-rotate.u-loading-rotate-sm > div > img {
|
||||
width: 25px; }
|
||||
.u-loading.u-loading-rotate.u-loading-rotate-sm > div > .uf {
|
||||
font-size: 25px; }
|
||||
height: 25px; }
|
||||
|
||||
.u-loading.u-loading-rotate.u-loading-rotate-primary > div > .uf {
|
||||
color: #3f51b5; }
|
||||
.u-loading.u-loading-rotate.u-loading-rotate-primary > div {
|
||||
border: 2px solid #3f51b5;
|
||||
border-bottom-color: transparent; }
|
||||
|
||||
.u-loading.u-loading-rotate.u-loading-rotate-success > div > .uf {
|
||||
color: #4caf50; }
|
||||
.u-loading.u-loading-rotate.u-loading-rotate-success > div {
|
||||
border: 2px solid #4caf50;
|
||||
border-bottom-color: transparent; }
|
||||
|
||||
.u-loading.u-loading-rotate.u-loading-rotate-warning > div > .uf {
|
||||
color: #ff9800; }
|
||||
.u-loading.u-loading-rotate.u-loading-rotate-warning > div {
|
||||
border: 2px solid #ff9800;
|
||||
border-bottom-color: transparent; }
|
||||
|
||||
.u-loading-backdrop {
|
||||
position: absolute;
|
||||
|
|
@ -83,8 +70,10 @@
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1900;
|
||||
background-color: rgba(255, 255, 255, 0.4); }
|
||||
z-index: 1600;
|
||||
opacity: .7;
|
||||
filter: blur(0.5px);
|
||||
background-color: #fff; }
|
||||
.u-loading-backdrop.full-screen {
|
||||
position: fixed; }
|
||||
|
||||
|
|
@ -93,8 +82,8 @@
|
|||
-webkit-transform: rotate(0deg) scale(1);
|
||||
transform: rotate(0deg) scale(1); }
|
||||
50% {
|
||||
-webkit-transform: rotate(180deg) scale(1);
|
||||
transform: rotate(180deg) scale(1); }
|
||||
-webkit-transform: rotate(180deg) scale(0.6);
|
||||
transform: rotate(180deg) scale(0.6); }
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg) scale(1);
|
||||
transform: rotate(360deg) scale(1); } }
|
||||
|
|
@ -153,13 +142,6 @@
|
|||
.u-loading.u-loading-line.u-loading-line-warning > div {
|
||||
background-color: #ff9800; }
|
||||
|
||||
.u-loading.u-loading-custom > div {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%); }
|
||||
|
||||
@keyframes line-scale {
|
||||
0% {
|
||||
-webkit-transform: scaley(1);
|
||||
|
|
@ -173,161 +155,64 @@
|
|||
|
||||
.u-table {
|
||||
font-size: 12px;
|
||||
color: #212121;
|
||||
color: #666;
|
||||
transition: opacity 0.3s ease;
|
||||
position: relative;
|
||||
line-height: 1.33;
|
||||
line-height: 1.5;
|
||||
overflow: hidden; }
|
||||
.u-table.copy .u-table-thead th {
|
||||
user-select: unset; }
|
||||
.u-table-body {
|
||||
position: relative; }
|
||||
.u-table-body .u-table-row-expand-columns-in-body .expand-icon-con {
|
||||
display: none;
|
||||
pointer-events: none; }
|
||||
.u-table-hiden-drag {
|
||||
position: relative; }
|
||||
.u-table-hiden-drag-li {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px; }
|
||||
left: 0px;
|
||||
height: 10px; }
|
||||
.u-table table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
text-align: left; }
|
||||
.u-table th {
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
line-height: 16px; }
|
||||
transition: background 0.3s ease; }
|
||||
.u-table th[colspan] {
|
||||
text-align: center; }
|
||||
.u-table th ::last-child {
|
||||
overflow: hidden; }
|
||||
.u-table td {
|
||||
border-bottom: 1px solid rgb(193, 199, 208);
|
||||
line-height: 1.33; }
|
||||
.u-table td a {
|
||||
color: #2196F3; }
|
||||
.u-table td a:hover {
|
||||
color: #1565c0; }
|
||||
.u-table td a:active {
|
||||
color: #1565c0; }
|
||||
.u-table td .u-switch-span {
|
||||
display: inline-block; }
|
||||
.u-table thead tr:last-child {
|
||||
border-bottom: 1px solid #C1C7D0; }
|
||||
.u-table tr:hover td .uf-eye {
|
||||
visibility: visible !important; }
|
||||
.u-table tr tr a {
|
||||
color: #2196F3; }
|
||||
.u-table tr tr a:hover {
|
||||
color: #1565c0; }
|
||||
.u-table tr tr a:active {
|
||||
color: #1565c0; }
|
||||
.u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) {
|
||||
display: flex;
|
||||
flex-direction: row-reverse; }
|
||||
.u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body):nth-last-child(1):last-child {
|
||||
border-right: none; }
|
||||
.u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .expand-icon-con {
|
||||
height: 14px; }
|
||||
.u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .expand-icon-con .uf {
|
||||
padding: 0; }
|
||||
.u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .expand-icon-con .u-table-row-expand-icon {
|
||||
width: 2px; }
|
||||
.u-table tr td.u-table-multiSelect-column.u-table-row-has-expandIcon:not(.u-table-row-fixed-columns-in-body) .u-checkbox {
|
||||
margin: 0; }
|
||||
.u-table tr td.u-table-inline-icon {
|
||||
position: relative;
|
||||
padding-right: 24px; }
|
||||
.u-table tr td.u-table-inline-icon span.u-table-inline-op-icon {
|
||||
position: absolute;
|
||||
right: 0; }
|
||||
.u-table tr td.u-table-inline-icon span.u-table-inline-op-icon .uf {
|
||||
display: block;
|
||||
vertical-align: top; }
|
||||
.u-table tr td.u-table-inline-icon span.u-table-inline-op-icon-hover {
|
||||
visibility: hidden; }
|
||||
.u-table tr.u-table-row-hover td.u-table-inline-icon span.u-table-inline-op-icon-hover {
|
||||
visibility: visible; }
|
||||
.u-table .u-table-inline-op-icon-hidden {
|
||||
visibility: hidden; }
|
||||
border-bottom: 1px solid #e9e9e9; }
|
||||
.u-table tr {
|
||||
transition: all 0.3s ease; }
|
||||
.u-table tr:hover {
|
||||
background: rgb(227,242,253); }
|
||||
.u-table tr.tr-row-hover {
|
||||
background: rgb(235, 236, 240); }
|
||||
background: rgb(227,242,253); }
|
||||
.u-table th,
|
||||
.u-table td {
|
||||
padding: 12px 8px;
|
||||
word-break: break-all; }
|
||||
.u-table th.drag-handle-column .uf,
|
||||
.u-table td.drag-handle-column .uf {
|
||||
font-size: 12px;
|
||||
line-height: 12px; }
|
||||
.u-table th.drag-handle-column.u-table-row-has-expandIcon .uf,
|
||||
.u-table td.drag-handle-column.u-table-row-has-expandIcon .uf {
|
||||
padding: 0; }
|
||||
.u-table th.text-center,
|
||||
.u-table td.text-center {
|
||||
text-align: center; }
|
||||
.u-table th.text-right,
|
||||
.u-table td.text-right {
|
||||
text-align: right; }
|
||||
.u-table th .expand-icon-con,
|
||||
.u-table td .expand-icon-con {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
line-height: 12px; }
|
||||
.u-table th .expand-icon-con .uf,
|
||||
.u-table td .expand-icon-con .uf {
|
||||
padding: 0;
|
||||
font-size: 12px; }
|
||||
.u-table-sm td {
|
||||
padding: 8px 8px; }
|
||||
.u-table-lg td {
|
||||
padding: 16px 8px; }
|
||||
.u-table tr.filterable th {
|
||||
padding-top: 5px !important;
|
||||
padding-bottom: 5px !important; }
|
||||
.u-table tr.filterable th .filterContext {
|
||||
height: 35px; }
|
||||
.u-table tr.filterable th .u-select-selection--single {
|
||||
height: 26px; }
|
||||
.u-table-row-hover {
|
||||
background: rgb(235, 236, 240); }
|
||||
background: #e3f2fd; }
|
||||
.u-table-scroll {
|
||||
overflow: auto; }
|
||||
.u-table-bordered table {
|
||||
border: 1px solid rgb(193, 199, 208);
|
||||
border: 1px solid #e9e9e9;
|
||||
box-sizing: border-box;
|
||||
table-layout: fixed; }
|
||||
.u-table-bordered .u-table-header > table {
|
||||
border-bottom: 0; }
|
||||
.u-table-bordered .u-table-header ~ .u-table-body table, .u-table-bordered .u-table-header ~ .u-table-body-outer table {
|
||||
border-top: 0px; }
|
||||
.u-table-bordered th {
|
||||
border-bottom: 1px solid rgb(193, 199, 208);
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
box-sizing: border-box; }
|
||||
.u-table-bordered th,
|
||||
.u-table-bordered td {
|
||||
border-right: 1px solid rgb(193, 199, 208);
|
||||
border-right: 1px solid #e9e9e9;
|
||||
box-sizing: border-box; }
|
||||
.u-table-drag-border tr th.th-can-not-drag {
|
||||
overflow: hidden; }
|
||||
.u-table-drag-border tr th.th-can-not-drag .u-table-thead-th-drag-gap {
|
||||
display: none; }
|
||||
.u-table-header {
|
||||
overflow: hidden;
|
||||
background: rgb(241, 242, 245);
|
||||
color: rgb(33, 33, 33); }
|
||||
.u-table.fixed-height td {
|
||||
padding: 0px 8px; }
|
||||
background: #f7f7f7; }
|
||||
.u-table-fixed-header .u-table-body {
|
||||
background: #fff;
|
||||
position: relative; }
|
||||
.u-table-fixed-left .u-table-body-inner {
|
||||
margin-right: -20px;
|
||||
padding-right: 20px; }
|
||||
.u-table-fixed-header:not(.u-table-hide-header) .u-table-fixed-left .u-table-body-inner {
|
||||
padding-right: 0px; }
|
||||
margin-right: -20px; }
|
||||
.u-table-fixed-header .u-table-body-inner {
|
||||
height: 100%;
|
||||
overflow: scroll; }
|
||||
|
|
@ -335,16 +220,16 @@
|
|||
overflow-x: scroll;
|
||||
padding-bottom: 20px;
|
||||
margin-bottom: -20px;
|
||||
overflow-y: scroll;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box; }
|
||||
.u-table-title {
|
||||
padding: 12px 8px;
|
||||
border-top: 1px solid rgb(193, 199, 208); }
|
||||
border-top: 1px solid #e9e9e9; }
|
||||
.u-table-content {
|
||||
position: relative; }
|
||||
.u-table-footer {
|
||||
padding: 12px 8px;
|
||||
border-bottom: 1px solid rgb(193, 199, 208); }
|
||||
border-bottom: 1px solid #e9e9e9; }
|
||||
.u-table-footer .u-table-scroll {
|
||||
overflow-x: hidden; }
|
||||
.u-table-footer .u-table {
|
||||
|
|
@ -352,52 +237,34 @@
|
|||
.u-table-placeholder {
|
||||
padding: 12px 8px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid rgb(193, 199, 208);
|
||||
border-bottom: 1px solid #e9e9e9;
|
||||
text-align: center;
|
||||
position: relative; }
|
||||
.u-table-placeholder .table-nodata {
|
||||
font-size: 40px;
|
||||
line-height: 44px; }
|
||||
.u-table-placeholder .table-nodata + span {
|
||||
font-size: 12px;
|
||||
line-height: 12px;
|
||||
display: block; }
|
||||
.u-table-expand-icon-col {
|
||||
width: 10px; }
|
||||
.u-table-row .u-table tr, .u-table-expanded-row .u-table tr {
|
||||
background: #fff; }
|
||||
.u-table-row .u-table tr.u-table-row-hover, .u-table-expanded-row .u-table tr.u-table-row-hover {
|
||||
background: rgb(235, 236, 240); }
|
||||
.u-table-row-expand-icon, .u-table-expanded-row-expand-icon {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 10px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
text-align: center;
|
||||
line-height: 14px;
|
||||
user-select: none; }
|
||||
.u-table-row-expand-icon.uf, .u-table-expanded-row-expand-icon.uf {
|
||||
font-size: 12px;
|
||||
padding: 0; }
|
||||
line-height: 16px;
|
||||
border: 1px solid #e9e9e9;
|
||||
user-select: none;
|
||||
background: #fff; }
|
||||
.u-table-row-spaced, .u-table-expanded-row-spaced {
|
||||
visibility: hidden; }
|
||||
.u-table-row-spaced:after, .u-table-expanded-row-spaced:after {
|
||||
content: "."; }
|
||||
.u-table-row-expanded:after, .u-table-expanded-row-expanded:after {
|
||||
content: "\e639";
|
||||
font-family: "uf"; }
|
||||
content: "-"; }
|
||||
.u-table-row-collapsed:after, .u-table-expanded-row-collapsed:after {
|
||||
content: "\e61c";
|
||||
font-family: "uf"; }
|
||||
.u-table-row.selected {
|
||||
background: #FFF7E7; }
|
||||
content: "+"; }
|
||||
.u-table tr.u-table-expanded-row {
|
||||
background: #DFE1E6; }
|
||||
background: #f7f7f7; }
|
||||
.u-table tr.u-table-expanded-row:hover {
|
||||
background: #DFE1E6; }
|
||||
.u-table tr.u-table-expanded-row .u-table {
|
||||
z-index: 1; }
|
||||
background: #f7f7f7; }
|
||||
.u-table-column-hidden {
|
||||
display: none; }
|
||||
.u-table-prev-columns-page, .u-table-next-columns-page {
|
||||
|
|
@ -445,76 +312,10 @@
|
|||
box-shadow: none; }
|
||||
.u-table-scroll-position-right .u-table-fixed-right {
|
||||
box-shadow: none; }
|
||||
.u-table-thead .filter-text, .u-table-thead .filter-dropdown, .u-table-thead .filter-date {
|
||||
font-weight: normal; }
|
||||
.u-table-thead .filter-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center; }
|
||||
.u-table-thead .filter-wrap .filter-btns {
|
||||
min-width: 58px; }
|
||||
.u-table-thead th {
|
||||
background: rgb(241, 242, 245);
|
||||
color: rgb(33, 33, 33);
|
||||
background-clip: padding-box;
|
||||
-moz-user-select: -moz-none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
/*
|
||||
Introduced in IE 10.
|
||||
*/
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
.u-table-thead th .required {
|
||||
color: #F22C1D; }
|
||||
.u-table-thead th .bee-table-column-sorter {
|
||||
position: relative;
|
||||
margin-left: 4px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
margin-top: -3px; }
|
||||
.u-table-thead th .bee-table-column-sorter i {
|
||||
padding: 0px;
|
||||
font-weight: 600;
|
||||
color: #505F79; }
|
||||
.u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-down,
|
||||
.u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-up, .u-table-thead th .bee-table-column-sorter > .bee-table-column-sorter-flat {
|
||||
line-height: 16px;
|
||||
display: block;
|
||||
width: 34px;
|
||||
cursor: pointer; }
|
||||
.u-table-thead th .bee-table-column-sorter-down.on .uf-triangle-down,
|
||||
.u-table-thead th .bee-table-column-sorter-down.on .uf-triangle-up,
|
||||
.u-table-thead th .bee-table-column-sorter-up.on .uf-triangle-down,
|
||||
.u-table-thead th .bee-table-column-sorter-up.on .uf-triangle-up {
|
||||
color: #108ee9; }
|
||||
.u-table-thead th .bee-table-column-sorter .uf-triangle-down,
|
||||
.u-table-thead th .bee-table-column-sorter .uf-triangle-up {
|
||||
-webkit-filter: none;
|
||||
filter: none;
|
||||
font-size: 12px; }
|
||||
.u-table-thead th .bee-table-column-sorter .uf-triangle-down,
|
||||
.u-table-thead th .bee-table-column-sorter .uf-triangle-up {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
font-size: 8px\9;
|
||||
-webkit-transform: scale(0.66667) rotate(0deg);
|
||||
-ms-transform: scale(0.66667) rotate(0deg);
|
||||
transform: scale(0.66667) rotate(0deg);
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
|
||||
zoom: 1;
|
||||
line-height: 4px;
|
||||
height: 4px;
|
||||
color: #999; }
|
||||
.u-table-thead th:hover .bee-table-column-sorter {
|
||||
display: inline-block; }
|
||||
background: #f7f7f7; }
|
||||
.u-table-thead .th-drag {
|
||||
cursor: move; }
|
||||
.u-table-thead .th-drag:hover {
|
||||
background: rgb(235, 236, 240); }
|
||||
.u-table-thead .th-drag-hover {
|
||||
background: #ccc; }
|
||||
.u-table-thead-th {
|
||||
|
|
@ -522,130 +323,52 @@
|
|||
.u-table-thead-th-drag-gap {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
right: 0px;
|
||||
top: 0;
|
||||
width: 20px;
|
||||
box-sizing: border-box;
|
||||
z-index: 1; }
|
||||
.u-table-thead-th-drag-gap .online {
|
||||
height: 100%;
|
||||
width: 4px;
|
||||
margin: 0 auto; }
|
||||
.u-table-thead-th-drag-gap .online:hover {
|
||||
background: #000000; }
|
||||
.u-table-thead-th-drag-gap .online-hover {
|
||||
background: #000000; }
|
||||
.u-table-thead-th-drag-gap:hover {
|
||||
cursor: col-resize; }
|
||||
.u-table-thead-th-drag-gap:hover .online {
|
||||
background: #000000; }
|
||||
background: transparent;
|
||||
width: 2px;
|
||||
cursor: col-resize;
|
||||
box-sizing: border-box; }
|
||||
.u-table-thead-th .th-drag-gap {
|
||||
background: transparent; }
|
||||
.u-table-thead-th .th-drag-gap-hover {
|
||||
background: #ccc; }
|
||||
.u-table-thead-th:last-child-drag-gap {
|
||||
border: none; }
|
||||
.u-table-filter-column-pop-cont {
|
||||
margin: 0px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
color: #212121; }
|
||||
margin: 10px;
|
||||
margin-top: 0px; }
|
||||
.u-table-filter-column-clear-setting {
|
||||
cursor: pointer;
|
||||
margin-bottom: 4px; }
|
||||
border-bottom: 1px solid #ccc;
|
||||
cursor: pointer; }
|
||||
.u-table-filter-column-cont {
|
||||
position: relative; }
|
||||
.u-table-filter-column-filter-icon {
|
||||
.u-table-filter-column-pop-column-filter {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 3px;
|
||||
width: 30px;
|
||||
height: 39px;
|
||||
line-height: 39px;
|
||||
right: 0px;
|
||||
top: 1px;
|
||||
z-index: 2;
|
||||
background: rgb(241, 242, 245);
|
||||
text-align: center;
|
||||
cursor: pointer; }
|
||||
.u-table-filter-column-filter-icon i.uf {
|
||||
padding: 0px;
|
||||
color: #505F79; }
|
||||
height: 30px; }
|
||||
.u-table-filter-column-pop-cont-item {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
line-height: 30px;
|
||||
cursor: pointer; }
|
||||
.u-table-filter-column-pop-cont-item .u-checkbox {
|
||||
margin: 0px; }
|
||||
.u-table-filter-column-pop-cont-item span.drop-menu-title {
|
||||
margin-left: -3px;
|
||||
max-width: 132px;
|
||||
width: auto !important;
|
||||
min-width: 56px;
|
||||
.u-table-filter-column-pop-cont-item > span {
|
||||
margin-left: 5px;
|
||||
width: 100px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
vertical-align: middle; }
|
||||
white-space: nowrap; }
|
||||
.u-table-filter-column-pop .u-modal-dialog {
|
||||
border: 1px solid #ccc;
|
||||
background: #fff; }
|
||||
.u-table-row-fixed-columns-in-body {
|
||||
display: none;
|
||||
pointer-events: none; }
|
||||
.u-table .u-checkbox {
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
margin: 0px;
|
||||
display: block;
|
||||
margin-left: 5px; }
|
||||
.u-table .u-checkbox .u-checkbox-label {
|
||||
line-height: 14px;
|
||||
padding-left: 16px; }
|
||||
.u-table .u-checkbox .u-checkbox-label:before, .u-table .u-checkbox .u-checkbox-label:after {
|
||||
width: 14px;
|
||||
height: 14px; }
|
||||
.u-table .u-table-scroll tr td:first-child, .u-table .u-table-scroll tr th:first-child, .u-table .u-table-fixed-left tr td:first-child, .u-table .u-table-fixed-left tr th:first-child {
|
||||
padding-left: 12px; }
|
||||
.u-table.has-fixed-left .u-table-scroll tr td:first-child, .u-table.has-fixed-left .u-table-scroll tr th:first-child {
|
||||
padding-left: 8px; }
|
||||
.u-table ::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px; }
|
||||
.u-table ::-webkit-scrollbar-button {
|
||||
display: none; }
|
||||
.u-table ::-webkit-scrollbar-thumb {
|
||||
background: #d5d5d5 !important;
|
||||
border-radius: 5px; }
|
||||
.u-table ::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
background-color: #d5d5d5;
|
||||
position: absolute; }
|
||||
.u-table ::-webkit-scrollbar-track {
|
||||
display: none; }
|
||||
.u-table ::-webkit-scrollbar-track-piece {
|
||||
display: none; }
|
||||
.u-table .drag-handle-column, .u-table .row-dragg-able {
|
||||
cursor: move; }
|
||||
.u-table .u-table-drag-hidden-cont {
|
||||
width: 100px;
|
||||
height: 40px; }
|
||||
.u-table .u-table-link {
|
||||
cursor: pointer;
|
||||
color: #0073E1; }
|
||||
.u-table .u-table-link-underline:hover {
|
||||
text-decoration: underline; }
|
||||
.u-table .u-table-currency {
|
||||
display: inline-block;
|
||||
text-align: right; }
|
||||
|
||||
.u-table:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0; }
|
||||
|
||||
.u-table-bordered .u-table-drag-gap {
|
||||
background: #e9e9e9; }
|
||||
|
||||
.u-table.bordered table {
|
||||
border-collapse: collapse; }
|
||||
|
||||
.u-table.bordered th,
|
||||
.u-table.bordered td {
|
||||
border: 1px solid rgb(193, 199, 208); }
|
||||
border: 1px solid #e9e9e9; }
|
||||
|
||||
.move-enter,
|
||||
.move-appear {
|
||||
|
|
@ -723,13 +446,6 @@
|
|||
.editable-cell-text-wrapper {
|
||||
padding-right: 24px; }
|
||||
|
||||
.editable-cell-input-wrapper .u-form-item.formItem-style .u-label {
|
||||
display: none; }
|
||||
|
||||
.editable-cell-input-wrapper .u-input-group .u-form-control {
|
||||
height: 26px;
|
||||
font-size: 12px; }
|
||||
|
||||
.editable-cell-text-wrapper {
|
||||
padding: 5px 24px 5px 5px;
|
||||
height: 30px; }
|
||||
|
|
@ -780,6 +496,50 @@
|
|||
right: 20px;
|
||||
position: absolute; }
|
||||
|
||||
.bee-table-column-sorter {
|
||||
position: relative;
|
||||
margin-left: 4px;
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
height: 1em;
|
||||
vertical-align: middle;
|
||||
text-align: center; }
|
||||
.bee-table-column-sorter > .bee-table-column-sorter-down,
|
||||
.bee-table-column-sorter > .bee-table-column-sorter-up {
|
||||
line-height: 6px;
|
||||
display: block;
|
||||
width: 14px;
|
||||
cursor: pointer; }
|
||||
|
||||
.bee-table-column-sorter-down.on .uf-triangle-down,
|
||||
.bee-table-column-sorter-down.on .uf-triangle-up,
|
||||
.bee-table-column-sorter-up.on .uf-triangle-down,
|
||||
.bee-table-column-sorter-up.on .uf-triangle-up {
|
||||
color: #108ee9; }
|
||||
|
||||
.bee-table-column-sorter .uf-triangle-down,
|
||||
.bee-table-column-sorter .uf-triangle-up {
|
||||
-webkit-filter: none;
|
||||
filter: none;
|
||||
font-size: 12px; }
|
||||
|
||||
.bee-table-column-sorter .uf-triangle-down,
|
||||
.bee-table-column-sorter .uf-triangle-up {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
font-size: 12px;
|
||||
font-size: 8px\9;
|
||||
-webkit-transform: scale(0.66667) rotate(0deg);
|
||||
-ms-transform: scale(0.66667) rotate(0deg);
|
||||
transform: scale(0.66667) rotate(0deg);
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=1, M12=0, M21=0, M22=1)";
|
||||
zoom: 1;
|
||||
line-height: 4px;
|
||||
height: 4px;
|
||||
color: #999;
|
||||
-webkit-transition: all 0.3s;
|
||||
transition: all 0.3s; }
|
||||
|
||||
.col-resize-container {
|
||||
height: 0px;
|
||||
position: relative; }
|
||||
|
|
@ -817,88 +577,3 @@
|
|||
height: 100%;
|
||||
top: 0px;
|
||||
left: 3px; }
|
||||
|
||||
.u-filter-dropdown-menu-wrap {
|
||||
z-index: 1800; }
|
||||
.u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
|
||||
line-height: 26px;
|
||||
height: 26px;
|
||||
padding: 0px 16px 0 16px;
|
||||
cursor: pointer; }
|
||||
|
||||
.filter-wrap .u-form-control {
|
||||
height: 26px; }
|
||||
|
||||
.filter-wrap .u-input-number.u-input-group.simple .u-input-group-btn .icon-group {
|
||||
height: 26px; }
|
||||
|
||||
.filter-wrap .calendar-picker .u-input-group-btn {
|
||||
line-height: 20px; }
|
||||
|
||||
.filter-wrap .u-input-number.u-input-group.simple .u-input-group-btn .icon-group .uf {
|
||||
line-height: 12px; }
|
||||
|
||||
.u-row-hover {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent; }
|
||||
|
||||
.u-row-hover2 {
|
||||
position: absolute;
|
||||
left: 100; }
|
||||
|
||||
.header-dispaly-in-row.u-table table {
|
||||
table-layout: fixed; }
|
||||
|
||||
.header-dispaly-in-row th {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
overflow: hidden; }
|
||||
|
||||
.body-dispaly-in-row.u-table table {
|
||||
table-layout: fixed; }
|
||||
|
||||
.body-dispaly-in-row td {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
overflow: hidden; }
|
||||
|
||||
.body-dispaly-in-row .u-table-fieldtype {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
vertical-align: middle;
|
||||
overflow: hidden; }
|
||||
|
||||
.u-table-drag-hidden-cont {
|
||||
position: absolute;
|
||||
top: -1000px; }
|
||||
|
||||
.u-editable-table .u-table .u-table-row-hover .editable-cell-text-wrapper {
|
||||
padding-left: 4px;
|
||||
border: 1px solid #c1c7d0; }
|
||||
|
||||
.u-editable-table .u-table .editable-cell-text-wrapper:hover {
|
||||
padding-left: 4px;
|
||||
border: 1px solid #a5adba; }
|
||||
|
||||
.u-editable-table .u-table .editable-cell-input-wrapper:focus {
|
||||
outline: none; }
|
||||
|
||||
.u-editable-table-tp .tooltip-arrow {
|
||||
top: 1px !important;
|
||||
border-bottom-color: #F44336 !important; }
|
||||
|
||||
.u-editable-table-tp .tooltip-inner {
|
||||
border-color: #F44336 !important; }
|
||||
|
||||
.u-dropdown ul.u-table-inline-op-dropdowm li.u-dropdown-menu-item {
|
||||
padding: 0 20px 0 10px;
|
||||
height: 30px;
|
||||
line-height: 30px; }
|
||||
.u-dropdown ul.u-table-inline-op-dropdowm li.u-dropdown-menu-item i.uf {
|
||||
font-size: 12px; }
|
||||
|
|
|
|||
1160
build/Table.js
1160
build/Table.js
File diff suppressed because it is too large
Load Diff
|
|
@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|||
value: true
|
||||
});
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
|
@ -18,36 +16,16 @@ var _objectPath = require('object-path');
|
|||
|
||||
var _objectPath2 = _interopRequireDefault(_objectPath);
|
||||
|
||||
var _i18n = require('./lib/i18n');
|
||||
|
||||
var _i18n2 = _interopRequireDefault(_i18n);
|
||||
|
||||
var _tool = require('bee-locale/build/tool');
|
||||
|
||||
var _utils = require('./lib/utils');
|
||||
|
||||
var _beeDropdown = require('bee-dropdown');
|
||||
|
||||
var _beeDropdown2 = _interopRequireDefault(_beeDropdown);
|
||||
|
||||
var _beeMenus = require('bee-menus');
|
||||
|
||||
var _beeMenus2 = _interopRequireDefault(_beeMenus);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
||||
|
||||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
||||
|
||||
var Item = _beeMenus2["default"].Item;
|
||||
|
||||
var propTypes = {
|
||||
record: _propTypes2["default"].object,
|
||||
clsPrefix: _propTypes2["default"].string,
|
||||
|
|
@ -55,8 +33,7 @@ var propTypes = {
|
|||
indent: _propTypes2["default"].number,
|
||||
indentSize: _propTypes2["default"].number,
|
||||
column: _propTypes2["default"].object,
|
||||
expandIcon: _propTypes2["default"].node,
|
||||
onPaste: _propTypes2["default"].func
|
||||
expandIcon: _propTypes2["default"].node
|
||||
};
|
||||
|
||||
var TableCell = function (_Component) {
|
||||
|
|
@ -67,221 +44,8 @@ var TableCell = function (_Component) {
|
|||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_this.renderLinkType = function (data, record, index) {
|
||||
var config = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
|
||||
var url = config.url,
|
||||
urlIndex = config.urlIndex,
|
||||
linkType = config.linkType,
|
||||
className = config.className,
|
||||
underline = config.underline,
|
||||
descIndex = config.descIndex,
|
||||
desc = config.desc,
|
||||
linkColor = config.linkColor;
|
||||
|
||||
var linkUrl = '';
|
||||
if (url) {
|
||||
linkUrl = url(data, record, index);
|
||||
} else if (urlIndex) {
|
||||
linkUrl = record[urlIndex];
|
||||
}
|
||||
if (linkUrl) {
|
||||
var link = function link() {
|
||||
window.open(linkUrl, linkType || '_blank');
|
||||
};
|
||||
var cls = 'u-table-link u-table-fieldtype ';
|
||||
if (className) {
|
||||
cls += className + ' ';
|
||||
}
|
||||
if (underline) {
|
||||
cls += 'u-table-link-underline ';
|
||||
}
|
||||
var title = '';
|
||||
|
||||
if (desc === true) {
|
||||
title = linkUrl;
|
||||
} else if (typeof desc === 'string') {
|
||||
title = desc;
|
||||
} else if (typeof desc === 'function') {
|
||||
title = desc(data, record, index);
|
||||
} else if (descIndex) {
|
||||
title = record[descIndex];
|
||||
}
|
||||
return _react2["default"].createElement(
|
||||
'span',
|
||||
{ onClick: link, className: cls, style: { color: linkColor || '' }, title: title },
|
||||
data
|
||||
);
|
||||
}
|
||||
return data;
|
||||
};
|
||||
|
||||
_this.renderBoolType = function (data) {
|
||||
var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
|
||||
var locale = (0, _tool.getComponentLocale)(_this.props, _this.context, 'Table', function () {
|
||||
return _i18n2["default"];
|
||||
});
|
||||
var boolConfig = _extends({ trueText: locale['bool_true'], falseText: locale['bool_false'] }, config);
|
||||
if (typeof data === 'string') {
|
||||
if (data === 'false' || data === '0') {
|
||||
return boolConfig.falseText;
|
||||
}
|
||||
} else if (!data) {
|
||||
return boolConfig.falseText;
|
||||
}
|
||||
return boolConfig.trueText;
|
||||
};
|
||||
|
||||
_this.renderNumber = function (data) {
|
||||
var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
var width = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 200;
|
||||
var precision = config.precision,
|
||||
thousand = config.thousand,
|
||||
makeUp = config.makeUp,
|
||||
preSymbol = config.preSymbol,
|
||||
nextSymbol = config.nextSymbol;
|
||||
|
||||
var number = (0, _utils.formatMoney)(data, precision, thousand);
|
||||
if (makeUp === false && number.indexOf('.') !== -1) {
|
||||
number = number.replace(/0*$/, '').replace(/\.$/, '');
|
||||
}
|
||||
var numberWidth = parseInt(width) - 16; // 减去默认的左右padding共计16px
|
||||
var res = _react2["default"].createElement(
|
||||
'span',
|
||||
{ className: 'u-table-currency-number' },
|
||||
number
|
||||
);
|
||||
var pre = preSymbol ? _react2["default"].createElement(
|
||||
'span',
|
||||
{ className: 'u-table-currency-pre' },
|
||||
preSymbol
|
||||
) : null;
|
||||
var next = nextSymbol ? _react2["default"].createElement(
|
||||
'span',
|
||||
{ className: 'u-table-currency-next' },
|
||||
nextSymbol
|
||||
) : null;
|
||||
var title = '';
|
||||
title += typeof preSymbol === 'string' ? preSymbol : '';
|
||||
title += number;
|
||||
title += typeof nextSymbol === 'string' ? nextSymbol : '';
|
||||
return _react2["default"].createElement(
|
||||
'span',
|
||||
{ className: 'u-table-currency u-table-fieldtype', style: { width: numberWidth }, title: title },
|
||||
pre,
|
||||
res,
|
||||
next
|
||||
);
|
||||
};
|
||||
|
||||
_this.renderDate = function (data) {
|
||||
var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
var moment = config.moment,
|
||||
format = config.format;
|
||||
|
||||
if (!moment) return data;
|
||||
return moment(data).format(format || 'YYYY-MM-DD');
|
||||
};
|
||||
|
||||
_this.renderSelect = function (data) {
|
||||
var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
|
||||
if (config.options) {
|
||||
data = config.options[data] || config.defaultShow;
|
||||
}
|
||||
return data;
|
||||
};
|
||||
|
||||
_this.renderColumnMenu = function (colMenu, text, record, index) {
|
||||
if (!colMenu) return null;
|
||||
var menu = colMenu.menu,
|
||||
_colMenu$trigger = colMenu.trigger,
|
||||
trigger = _colMenu$trigger === undefined ? 'hover' : _colMenu$trigger,
|
||||
_colMenu$className = colMenu.className,
|
||||
className = _colMenu$className === undefined ? '' : _colMenu$className,
|
||||
_colMenu$icon = colMenu.icon,
|
||||
icon = _colMenu$icon === undefined ? _react2["default"].createElement('i', { className: 'uf uf-3dot-h' }) : _colMenu$icon,
|
||||
_colMenu$iconSize = colMenu.iconSize,
|
||||
iconSize = _colMenu$iconSize === undefined ? 21 : _colMenu$iconSize;
|
||||
|
||||
var items = [];
|
||||
items = menu.map(function (item) {
|
||||
return _react2["default"].createElement(
|
||||
Item,
|
||||
{ key: item.key, onClick: function onClick() {
|
||||
_this.onClickColMenu(item.callback, text, record, index);
|
||||
} },
|
||||
item.icon,
|
||||
item.text
|
||||
);
|
||||
});
|
||||
if (items.length === 0) return null;
|
||||
className += ' u-table-inline-op-dropdowm';
|
||||
var menus = _react2["default"].createElement(
|
||||
_beeMenus2["default"],
|
||||
{ className: className },
|
||||
items
|
||||
);
|
||||
var top = 'calc(50% - ' + iconSize / 2 + 'px)';
|
||||
var visibility = _this.state.showDropdowm ? 'visible' : '';
|
||||
var iconClassName = 'u-table-inline-op-icon u-table-inline-op-icon-hover';
|
||||
return _react2["default"].createElement(
|
||||
_beeDropdown2["default"],
|
||||
{
|
||||
trigger: [trigger],
|
||||
overlay: menus,
|
||||
animation: 'slide-up',
|
||||
onVisibleChange: _this.changeShowDropdowm
|
||||
},
|
||||
_react2["default"].createElement(
|
||||
'span',
|
||||
{ className: iconClassName, style: { fontSize: iconSize, top: top, visibility: visibility } },
|
||||
icon
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
_this.changeShowDropdowm = function (val) {
|
||||
_this.setState({
|
||||
showDropdowm: val
|
||||
});
|
||||
};
|
||||
|
||||
_this.onClickColMenu = function (callback, text, record, index) {
|
||||
if (callback) {
|
||||
callback(text, record, index);
|
||||
}
|
||||
_this.setState({
|
||||
showDropdowm: false
|
||||
});
|
||||
};
|
||||
|
||||
_this.onPaste = function (e) {
|
||||
var _this$props = _this.props,
|
||||
row = _this$props.index,
|
||||
onPaste = _this$props.onPaste,
|
||||
fixed = _this$props.fixed,
|
||||
col = _this$props.col;
|
||||
|
||||
var position = {
|
||||
row: row,
|
||||
col: col,
|
||||
fixed: !!fixed
|
||||
};
|
||||
onPaste(e, position);
|
||||
};
|
||||
|
||||
_this.onCellMouseOver = function (e) {
|
||||
var column = _this.props.column;
|
||||
|
||||
_this.props.stopRowDrag(column.notRowDrag);
|
||||
};
|
||||
|
||||
_this.isInvalidRenderCellText = _this.isInvalidRenderCellText.bind(_this);
|
||||
_this.handleClick = _this.handleClick.bind(_this);
|
||||
_this.state = {
|
||||
showDropdowm: false
|
||||
};
|
||||
return _this;
|
||||
}
|
||||
|
||||
|
|
@ -299,30 +63,6 @@ var TableCell = function (_Component) {
|
|||
}
|
||||
};
|
||||
|
||||
// 渲染链接类型
|
||||
|
||||
|
||||
// 渲染布尔类型
|
||||
|
||||
|
||||
// 渲染整数/货币类型
|
||||
|
||||
|
||||
// 渲染时间类型-l
|
||||
|
||||
|
||||
// 渲染下拉类型，主要为编辑表格铺垫
|
||||
|
||||
|
||||
// 渲染行内菜单
|
||||
|
||||
|
||||
// 下拉按钮状态改变，点击后保持图标常驻
|
||||
|
||||
|
||||
// 菜单点击事件
|
||||
|
||||
|
||||
TableCell.prototype.render = function render() {
|
||||
var _props2 = this.props,
|
||||
record = _props2.record,
|
||||
|
|
@ -331,98 +71,28 @@ var TableCell = function (_Component) {
|
|||
indent = _props2.indent,
|
||||
index = _props2.index,
|
||||
expandIcon = _props2.expandIcon,
|
||||
column = _props2.column,
|
||||
fixed = _props2.fixed,
|
||||
showSum = _props2.showSum,
|
||||
bodyDisplayInRow = _props2.bodyDisplayInRow,
|
||||
lazyStartIndex = _props2.lazyStartIndex,
|
||||
lazyEndIndex = _props2.lazyEndIndex,
|
||||
getCellClassName = _props2.getCellClassName;
|
||||
|
||||
column = _props2.column;
|
||||
var dataIndex = column.dataIndex,
|
||||
render = column.render,
|
||||
fieldType = column.fieldType,
|
||||
linkConfig = column.linkConfig,
|
||||
fontColor = column.fontColor,
|
||||
bgColor = column.bgColor,
|
||||
other = _objectWithoutProperties(column, ['dataIndex', 'render', 'fieldType', 'linkConfig', 'fontColor', 'bgColor']);
|
||||
|
||||
var _column$className = column.className,
|
||||
_column$className = column.className,
|
||||
className = _column$className === undefined ? '' : _column$className;
|
||||
|
||||
|
||||
var text = _objectPath2["default"].get(record, dataIndex);
|
||||
var tdProps = void 0;
|
||||
var colSpan = void 0;
|
||||
var rowSpan = void 0,
|
||||
title = void 0;
|
||||
var rowSpan = void 0;
|
||||
|
||||
if (render && !showSum) {
|
||||
text = render(text, record, index, _extends({
|
||||
dataIndex: dataIndex, render: render, fieldType: fieldType, linkConfig: linkConfig, fontColor: fontColor, bgColor: bgColor }, other));
|
||||
if (render) {
|
||||
text = render(text, record, index);
|
||||
if (this.isInvalidRenderCellText(text)) {
|
||||
tdProps = text.props || {};
|
||||
rowSpan = tdProps.rowSpan > lazyEndIndex && lazyEndIndex > 5 ? lazyEndIndex - index : tdProps.rowSpan;
|
||||
rowSpan = tdProps.rowSpan;
|
||||
colSpan = tdProps.colSpan;
|
||||
text = text.children;
|
||||
}
|
||||
}
|
||||
|
||||
var colMenu = this.renderColumnMenu(column.cellMenu, text, record, index);
|
||||
// 根据 fieldType 来渲染数据
|
||||
if (!render) {
|
||||
switch (column.fieldType) {
|
||||
case 'link':
|
||||
{
|
||||
text = this.renderLinkType(text, record, index, column.linkConfig);
|
||||
break;
|
||||
}
|
||||
case 'bool':
|
||||
{
|
||||
text = this.renderBoolType(text, column.boolConfig);
|
||||
break;
|
||||
}
|
||||
case 'currency':
|
||||
{
|
||||
var config = {
|
||||
precision: 2, // 精度值,需要大于0
|
||||
thousand: true, // 是否显示千分符号
|
||||
makeUp: true, // 末位是否补零
|
||||
preSymbol: '', // 前置符号
|
||||
nextSymbol: '' // 后置符号
|
||||
};
|
||||
text = this.renderNumber(text, _extends({}, config, column.currencyConfig), column.width);
|
||||
break;
|
||||
}
|
||||
case 'number':
|
||||
{
|
||||
var _config = {
|
||||
precision: 0, // 精度值,需要大于0
|
||||
thousand: true, // 是否显示千分符号
|
||||
makeUp: false, // 末位是否补零
|
||||
preSymbol: '', // 前置符号
|
||||
nextSymbol: '' // 后置符号
|
||||
};
|
||||
text = this.renderNumber(text, _extends({}, _config, column.numberConfig), column.width);
|
||||
break;
|
||||
}
|
||||
case 'date':
|
||||
{
|
||||
text = this.renderDate(text, column.dateConfig);
|
||||
break;
|
||||
}
|
||||
case 'select':
|
||||
{
|
||||
text = this.renderSelect(text, column.selectConfig);
|
||||
break;
|
||||
}
|
||||
default:
|
||||
{
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.isInvalidRenderCellText(text)) {
|
||||
text = null;
|
||||
}
|
||||
|
|
@ -432,54 +102,20 @@ var TableCell = function (_Component) {
|
|||
className: clsPrefix + '-indent indent-level-' + indent
|
||||
}) : null;
|
||||
|
||||
if (lazyStartIndex !== index && (rowSpan === 0 || colSpan === 0)) {
|
||||
if (rowSpan === 0 || colSpan === 0) {
|
||||
return null;
|
||||
}
|
||||
if (tdProps && tdProps.mergeEndIndex && index < tdProps.mergeEndIndex && rowSpan === 0) {
|
||||
rowSpan = tdProps.mergeEndIndex - index;
|
||||
text = '';
|
||||
}
|
||||
//不是固定表格并且当前列是固定，则隐藏当前列
|
||||
if (column.fixed && !fixed) {
|
||||
className = className + (' ' + clsPrefix + '-fixed-columns-in-body');
|
||||
}
|
||||
if (column.contentAlign) {
|
||||
className = className + (' text-' + column.contentAlign);
|
||||
} else if (column.textAlign) {
|
||||
className = className + (' text-' + column.textAlign);
|
||||
}
|
||||
if ((typeof text == 'string' || typeof text === 'number') && bodyDisplayInRow) {
|
||||
title = text;
|
||||
}
|
||||
if (expandIcon && expandIcon.props.expandable) {
|
||||
className = className + (' ' + clsPrefix + '-has-expandIcon');
|
||||
}
|
||||
if (colMenu) {
|
||||
className += ' u-table-inline-icon';
|
||||
}
|
||||
|
||||
if (typeof getCellClassName == 'function') {
|
||||
var selfClassName = getCellClassName(record, index, column) || '';
|
||||
className += ' ' + selfClassName;
|
||||
}
|
||||
|
||||
if (colSpan == 0) return null;
|
||||
return _react2["default"].createElement(
|
||||
'td',
|
||||
{
|
||||
draggable: column.draggable,
|
||||
colSpan: colSpan,
|
||||
rowSpan: rowSpan,
|
||||
className: className,
|
||||
onClick: this.handleClick,
|
||||
title: title,
|
||||
onPaste: this.onPaste,
|
||||
onMouseOver: this.onCellMouseOver,
|
||||
style: _extends({ maxWidth: column.width, color: fontColor, backgroundColor: bgColor }, column.style) },
|
||||
onClick: this.handleClick
|
||||
},
|
||||
indentText,
|
||||
expandIcon,
|
||||
text,
|
||||
colMenu
|
||||
text
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
1162
build/TableHeader.js
1162
build/TableHeader.js
File diff suppressed because it is too large
Load Diff
|
|
@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|||
value: true
|
||||
});
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
|
@ -14,8 +12,6 @@ var _propTypes = require('prop-types');
|
|||
|
||||
var _propTypes2 = _interopRequireDefault(_propTypes);
|
||||
|
||||
var _utils = require('./lib/utils');
|
||||
|
||||
var _TableCell = require('./TableCell');
|
||||
|
||||
var _TableCell2 = _interopRequireDefault(_TableCell);
|
||||
|
|
@ -56,28 +52,17 @@ var propTypes = {
|
|||
indentSize: _propTypes2["default"].number,
|
||||
expandIconAsCell: _propTypes2["default"].bool,
|
||||
expandRowByClick: _propTypes2["default"].bool,
|
||||
store: _propTypes2["default"].object.isRequired,
|
||||
rowDraggAble: _propTypes2["default"].bool,
|
||||
onDragRow: _propTypes2["default"].func,
|
||||
onDragRowStart: _propTypes2["default"].func,
|
||||
syncRowHeight: _propTypes2["default"].bool
|
||||
store: _propTypes2["default"].object.isRequired
|
||||
};
|
||||
|
||||
var defaultProps = {
|
||||
onRowClick: function onRowClick() {},
|
||||
|
||||
// onRowDoubleClick() {},
|
||||
onRowDoubleClick: function onRowDoubleClick() {},
|
||||
onDestroy: function onDestroy() {},
|
||||
|
||||
expandIconColumnIndex: 0,
|
||||
expandRowByClick: false,
|
||||
onHover: function onHover() {},
|
||||
|
||||
className: '',
|
||||
setRowParentIndex: function setRowParentIndex() {},
|
||||
rowDraggAble: false,
|
||||
// onDragRow:()=>{}
|
||||
syncRowHeight: false
|
||||
onHover: function onHover() {}
|
||||
};
|
||||
|
||||
var TableRow = function (_Component) {
|
||||
|
|
@ -88,235 +73,6 @@ var TableRow = function (_Component) {
|
|||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_this.initEvent = function () {
|
||||
var events = [{ key: 'touchstart', fun: _this.onTouchStart }, //手指触摸到一个 DOM 元素时触发
|
||||
{ key: 'touchmove', fun: _this.onTouchMove }, //手指在一个 DOM 元素上滑动时触发
|
||||
{ key: 'touchend', fun: _this.onTouchEnd }, //手指从一个 DOM 元素上移开时触发
|
||||
|
||||
{ key: 'dragstart', fun: _this.onDragStart }, //用户开始拖动元素时触发
|
||||
{ key: 'dragover', fun: _this.onDragOver }, //当某被拖动的对象在另一对象容器范围内拖动时触发此事件
|
||||
{ key: 'drop', fun: _this.onDrop }, //在一个拖动过程中，释放鼠标键时触发此事件
|
||||
{ key: 'dragenter', fun: _this.onDragEnter }, { key: 'dragleave', fun: _this.onDragLeave }];
|
||||
_this.eventListen(events, '', _this.element);
|
||||
};
|
||||
|
||||
_this.removeDragAbleEvent = function () {
|
||||
var events = [{ key: 'touchstart', fun: _this.onTouchStart }, //手指触摸到一个 DOM 元素时触发
|
||||
{ key: 'touchmove', fun: _this.onTouchMove }, //手指在一个 DOM 元素上滑动时触发
|
||||
{ key: 'touchend', fun: _this.onTouchEnd }, //手指从一个 DOM 元素上移开时触发
|
||||
|
||||
{ key: 'dragstart', fun: _this.onDragStart }, //用户开始拖动元素时触发
|
||||
{ key: 'dragover', fun: _this.onDragOver }, //当某被拖动的对象在另一对象容器范围内拖动时触发此事件
|
||||
{ key: 'drop', fun: _this.onDrop }, //在一个拖动过程中，释放鼠标键时触发此事件
|
||||
{ key: 'dragenter', fun: _this.onDragEnter }, { key: 'dragleave', fun: _this.onDragLeave }];
|
||||
_this.eventListen(events, 'remove', _this.element);
|
||||
};
|
||||
|
||||
_this.onDragStart = function (e) {
|
||||
var onDragRowStart = _this.props.onDragRowStart;
|
||||
|
||||
if (!_this.props.rowDraggAble || _this.notRowDrag) return;
|
||||
var event = _utils.Event.getEvent(e),
|
||||
target = _utils.Event.getTarget(event);
|
||||
if (target.tagName === 'TD') {
|
||||
target = target.parentNode;
|
||||
}
|
||||
_this.currentIndex = target.getAttribute("data-row-key");
|
||||
_this._dragCurrent = target;
|
||||
event.dataTransfer.effectAllowed = "move";
|
||||
event.dataTransfer.setData("Text", _this.currentIndex);
|
||||
onDragRowStart && onDragRowStart(_this.currentIndex);
|
||||
};
|
||||
|
||||
_this.onDragOver = function (e) {
|
||||
var event = _utils.Event.getEvent(e);
|
||||
event.preventDefault();
|
||||
};
|
||||
|
||||
_this.onDrop = function (e) {
|
||||
var onDragRow = _this.props.onDragRow;
|
||||
|
||||
var event = _utils.Event.getEvent(e),
|
||||
_target = _utils.Event.getTarget(event),
|
||||
target = _target.parentNode;
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
var currentKey = event.dataTransfer.getData("text");
|
||||
var targetKey = target.getAttribute("data-row-key");
|
||||
|
||||
if (!targetKey || targetKey === currentKey) return;
|
||||
if (target.nodeName.toUpperCase() === "TR") {
|
||||
_this.synchronizeTableTr(currentKey, null);
|
||||
_this.synchronizeTableTr(targetKey, null);
|
||||
}
|
||||
onDragRow && onDragRow(currentKey, targetKey);
|
||||
};
|
||||
|
||||
_this.getTouchDom = function (event) {
|
||||
var currentLocation = event.changedTouches[0];
|
||||
var realTarget = document.elementFromPoint(currentLocation.clientX, currentLocation.clientY);
|
||||
return realTarget;
|
||||
};
|
||||
|
||||
_this.onTouchStart = function (e) {
|
||||
e.stopPropagation();
|
||||
var onDragRowStart = _this.props.onDragRowStart;
|
||||
|
||||
var event = _utils.Event.getEvent(e),
|
||||
_target = _utils.Event.getTarget(event),
|
||||
target = _target.parentNode;
|
||||
|
||||
if (target.tagName === 'TR') {
|
||||
|
||||
_this.currentIndex = target.getAttribute("data-row-key");
|
||||
|
||||
onDragRowStart && onDragRowStart(_this.currentIndex);
|
||||
} else {
|
||||
|
||||
_this.canBeTouch = false;
|
||||
}
|
||||
};
|
||||
|
||||
_this.onTouchMove = function (e) {
|
||||
|
||||
if (!_this.canBeTouch) return;
|
||||
e.stopPropagation();
|
||||
var event = _utils.Event.getEvent(e);
|
||||
event.preventDefault();
|
||||
var touchTarget = _this.getTouchDom(event),
|
||||
target = touchTarget.parentNode,
|
||||
targetKey = target.getAttribute("data-row-key");
|
||||
if (!targetKey || targetKey === _this.currentIndex) return;
|
||||
if (target.nodeName.toUpperCase() === "TR") {
|
||||
if (_this.cacheCurrentIndex !== targetKey) {
|
||||
//模拟 touchenter toucheleave 事件
|
||||
_this.cacheCurrentIndex && _this.synchronizeTableTr(_this.cacheCurrentIndex, null); //去掉虚线
|
||||
_this.synchronizeTableTr(targetKey, true); //添加虚线
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
_this.onTouchEnd = function (e) {
|
||||
|
||||
if (!_this.canBeTouch) {
|
||||
_this.canBeTouch = true;
|
||||
return;
|
||||
}
|
||||
|
||||
e.stopPropagation();
|
||||
var onDragRow = _this.props.onDragRow;
|
||||
|
||||
var event = _utils.Event.getEvent(e),
|
||||
currentKey = _this.currentIndex,
|
||||
//拖拽行的key
|
||||
touchTarget = _this.getTouchDom(event),
|
||||
//当前触摸的DOM节点
|
||||
target = touchTarget.parentNode,
|
||||
//目标位置的行
|
||||
targetKey = target.getAttribute("data-row-key"); //目标位置的行key
|
||||
if (!targetKey || targetKey === currentKey) return;
|
||||
if (target.nodeName.toUpperCase() === "TR") {
|
||||
_this.synchronizeTableTr(currentKey, null);
|
||||
_this.synchronizeTableTr(targetKey, null);
|
||||
}
|
||||
|
||||
onDragRow && onDragRow(currentKey, targetKey);
|
||||
};
|
||||
|
||||
_this.synchronizeTableTrShadow = function () {
|
||||
var _this$props = _this.props,
|
||||
contentTable = _this$props.contentTable,
|
||||
index = _this$props.index;
|
||||
|
||||
|
||||
var cont = contentTable.querySelector('.u-table-scroll table tbody').getElementsByTagName("tr")[index],
|
||||
trs = cont.getBoundingClientRect(),
|
||||
fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody'),
|
||||
fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody');
|
||||
fixed_left_trs = fixed_left_trs && fixed_left_trs.getElementsByTagName("tr")[index].getBoundingClientRect();
|
||||
fixed_right_trs = fixed_right_trs && fixed_right_trs.getElementsByTagName("tr")[index].getBoundingClientRect();
|
||||
|
||||
var div = document.createElement("div");
|
||||
var style = "wdith:" + (trs.width + (fixed_left_trs ? fixed_left_trs.width : 0) + (fixed_right_trs ? fixed_right_trs.width : 0)) + "px";
|
||||
style += ";height:" + trs.height + "px";
|
||||
style += ";classname:" + cont.className;
|
||||
div.setAttribute("style", style);
|
||||
return div;
|
||||
};
|
||||
|
||||
_this.synchronizeTableTr = function (currentIndex, type) {
|
||||
if (type) {
|
||||
//同步 this.cacheCurrentIndex
|
||||
_this.cacheCurrentIndex = currentIndex;
|
||||
}
|
||||
var contentTable = _this.props.contentTable;
|
||||
|
||||
var _table_trs = contentTable.querySelector('.u-table-scroll table tbody'),
|
||||
_table_fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody'),
|
||||
_table_fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody');
|
||||
|
||||
_table_trs = _table_trs ? _table_trs : contentTable.querySelector('.u-table table tbody');
|
||||
|
||||
_this.synchronizeTrStyle(_table_trs, currentIndex, type);
|
||||
if (_table_fixed_left_trs) {
|
||||
_this.synchronizeTrStyle(_table_fixed_left_trs, currentIndex, type);
|
||||
}
|
||||
if (_table_fixed_right_trs) {
|
||||
_this.synchronizeTrStyle(_table_fixed_right_trs, currentIndex, type);
|
||||
}
|
||||
};
|
||||
|
||||
_this.synchronizeTrStyle = function (_elementBody, id, type) {
|
||||
var contentTable = _this.props.contentTable,
|
||||
trs = _elementBody.getElementsByTagName("tr"),
|
||||
currentObj = void 0;
|
||||
|
||||
for (var index = 0; index < trs.length; index++) {
|
||||
var element = trs[index];
|
||||
if (element.getAttribute("data-row-key") == id) {
|
||||
currentObj = element;
|
||||
}
|
||||
}
|
||||
if (type) {
|
||||
currentObj && currentObj.setAttribute("style", "border-bottom:2px solid #02B1FD");
|
||||
} else {
|
||||
currentObj && currentObj.setAttribute("style", "");
|
||||
}
|
||||
};
|
||||
|
||||
_this.onDragEnter = function (e) {
|
||||
var event = _utils.Event.getEvent(e),
|
||||
_target = _utils.Event.getTarget(event),
|
||||
target = _target.parentNode;
|
||||
var currentIndex = target.getAttribute("data-row-key");
|
||||
if (!currentIndex || currentIndex === _this.currentIndex) return;
|
||||
if (target.nodeName.toUpperCase() === "TR") {
|
||||
_this.synchronizeTableTr(currentIndex, true);
|
||||
}
|
||||
};
|
||||
|
||||
_this.onDragLeave = function (e) {
|
||||
var event = _utils.Event.getEvent(e),
|
||||
_target = _utils.Event.getTarget(event),
|
||||
target = _target.parentNode;
|
||||
var currentIndex = target.getAttribute("data-row-key");
|
||||
if (!currentIndex || currentIndex === _this.currentIndex) return;
|
||||
if (target.nodeName.toUpperCase() === "TR") {
|
||||
_this.synchronizeTableTr(currentIndex, null);
|
||||
}
|
||||
};
|
||||
|
||||
_this.stopRowDrag = function (isStop) {
|
||||
var rowDraggAble = _this.props.rowDraggAble;
|
||||
var notRowDrag = _this.state.notRowDrag;
|
||||
|
||||
if (rowDraggAble && isStop !== notRowDrag) {
|
||||
_this.setState({
|
||||
notRowDrag: isStop
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
_this.set = function (fn) {
|
||||
_this.clear();
|
||||
_this._timeout = window.setTimeout(fn, 300);
|
||||
|
|
@ -328,10 +84,6 @@ var TableRow = function (_Component) {
|
|||
}
|
||||
};
|
||||
|
||||
_this.bindElement = function (el) {
|
||||
_this.element = el;
|
||||
};
|
||||
|
||||
_this._timeout = null;
|
||||
_this.state = {
|
||||
hovered: false
|
||||
|
|
@ -340,10 +92,7 @@ var TableRow = function (_Component) {
|
|||
_this.onRowDoubleClick = _this.onRowDoubleClick.bind(_this);
|
||||
_this.onMouseEnter = _this.onMouseEnter.bind(_this);
|
||||
_this.onMouseLeave = _this.onMouseLeave.bind(_this);
|
||||
_this.expandHeight = 0;
|
||||
_this.event = false;
|
||||
_this.cacheCurrentIndex = null;
|
||||
_this.canBeTouch = true; //受否允许拖动该行
|
||||
|
||||
return _this;
|
||||
}
|
||||
|
||||
|
|
@ -352,9 +101,7 @@ var TableRow = function (_Component) {
|
|||
|
||||
var _props = this.props,
|
||||
store = _props.store,
|
||||
hoverKey = _props.hoverKey,
|
||||
treeType = _props.treeType,
|
||||
rowDraggAble = _props.rowDraggAble;
|
||||
hoverKey = _props.hoverKey;
|
||||
|
||||
this.unsubscribe = store.subscribe(function () {
|
||||
if (store.getState().currentHoverKey === hoverKey) {
|
||||
|
|
@ -363,245 +110,89 @@ var TableRow = function (_Component) {
|
|||
_this2.setState({ hovered: false });
|
||||
}
|
||||
});
|
||||
|
||||
this.setRowHeight();
|
||||
if (treeType) {
|
||||
this.setRowParentIndex();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 事件初始化
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 事件移除，提供性能以及内存泄漏等问题。
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 事件绑定和移除函数
|
||||
*/
|
||||
TableRow.prototype.eventListen = function eventListen(events, type, eventSource) {
|
||||
for (var i = 0; i < events.length; i++) {
|
||||
var _event = events[i];
|
||||
if (type === "remove") {
|
||||
_utils.EventUtil.removeHandler(eventSource, _event.key, _event.fun);
|
||||
} else {
|
||||
_utils.EventUtil.addHandler(eventSource, _event.key, _event.fun);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 开始调整交换列的事件
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 获取当前触摸的Dom节点
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 开始调整交换行的事件
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 手指移开时触发
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
*同步当前拖拽到阴影
|
||||
* @memberof TableRow
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 同步自己,也需要同步当前行的行显示
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 设置同步的style
|
||||
*/
|
||||
|
||||
|
||||
TableRow.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
|
||||
var _props2 = this.props,
|
||||
rowDraggAble = _props2.rowDraggAble,
|
||||
syncRowHeight = _props2.syncRowHeight;
|
||||
|
||||
if (!this.event) {
|
||||
this.event = true;
|
||||
if (rowDraggAble) {
|
||||
this.initEvent();
|
||||
}
|
||||
}
|
||||
if (this.props.treeType) {
|
||||
this.setRowParentIndex();
|
||||
}
|
||||
// if(syncRowHeight){
|
||||
// this.setRowHeight()
|
||||
// }
|
||||
this.setRowHeight();
|
||||
};
|
||||
|
||||
TableRow.prototype.componentWillUnmount = function componentWillUnmount() {
|
||||
var _props3 = this.props,
|
||||
record = _props3.record,
|
||||
onDestroy = _props3.onDestroy,
|
||||
index = _props3.index,
|
||||
rowDraggAble = _props3.rowDraggAble;
|
||||
var _props2 = this.props,
|
||||
record = _props2.record,
|
||||
onDestroy = _props2.onDestroy,
|
||||
index = _props2.index;
|
||||
|
||||
onDestroy(record, index);
|
||||
if (this.unsubscribe) {
|
||||
this.unsubscribe();
|
||||
}
|
||||
if (rowDraggAble) {
|
||||
this.removeDragAbleEvent();
|
||||
}
|
||||
};
|
||||
|
||||
TableRow.prototype.setRowHeight = function setRowHeight() {
|
||||
var _props4 = this.props,
|
||||
setRowHeight = _props4.setRowHeight,
|
||||
_props4$expandedConte = _props4.expandedContentHeight,
|
||||
expandedContentHeight = _props4$expandedConte === undefined ? 0 : _props4$expandedConte,
|
||||
fixed = _props4.fixed,
|
||||
fixedIndex = _props4.fixedIndex;
|
||||
|
||||
if (!setRowHeight || !this.element || fixed) return;
|
||||
setRowHeight(this.element.clientHeight + expandedContentHeight, fixedIndex);
|
||||
};
|
||||
|
||||
TableRow.prototype.setRowParentIndex = function setRowParentIndex() {
|
||||
var _props5 = this.props,
|
||||
index = _props5.index,
|
||||
setRowParentIndex = _props5.setRowParentIndex,
|
||||
fixedIndex = _props5.fixedIndex,
|
||||
rootIndex = _props5.rootIndex;
|
||||
|
||||
setRowParentIndex(rootIndex < 0 ? index : rootIndex, fixedIndex);
|
||||
};
|
||||
|
||||
TableRow.prototype.onRowClick = function onRowClick(event) {
|
||||
// fix: 解决 onRowClick 回调函数中，事件对象属性均为 null 的问题
|
||||
// 异步访问事件属性
|
||||
// 调用 event.persist() 会从事件池中移除该合成函数并允许对该合成事件的引用被保留下来。
|
||||
event.persist();
|
||||
var _props6 = this.props,
|
||||
record = _props6.record,
|
||||
index = _props6.index,
|
||||
onRowClick = _props6.onRowClick,
|
||||
expandable = _props6.expandable,
|
||||
expandRowByClick = _props6.expandRowByClick,
|
||||
expanded = _props6.expanded,
|
||||
onExpand = _props6.onExpand,
|
||||
fixedIndex = _props6.fixedIndex,
|
||||
onRowDoubleClick = _props6.onRowDoubleClick;
|
||||
var _props3 = this.props,
|
||||
record = _props3.record,
|
||||
index = _props3.index,
|
||||
onRowClick = _props3.onRowClick,
|
||||
expandable = _props3.expandable,
|
||||
expandRowByClick = _props3.expandRowByClick,
|
||||
expanded = _props3.expanded,
|
||||
onExpand = _props3.onExpand;
|
||||
|
||||
if (expandable && expandRowByClick) {
|
||||
onExpand(!expanded, record, fixedIndex, event);
|
||||
}
|
||||
if (!onRowDoubleClick) {
|
||||
onRowClick(record, fixedIndex, event);
|
||||
return;
|
||||
onExpand(!expanded, record, index, event);
|
||||
}
|
||||
this.set(function (e) {
|
||||
onRowClick(record, fixedIndex, event);
|
||||
onRowClick(record, index, event);
|
||||
});
|
||||
};
|
||||
|
||||
TableRow.prototype.onRowDoubleClick = function onRowDoubleClick(event) {
|
||||
var _props7 = this.props,
|
||||
record = _props7.record,
|
||||
index = _props7.index,
|
||||
onRowDoubleClick = _props7.onRowDoubleClick,
|
||||
fixedIndex = _props7.fixedIndex;
|
||||
var _props4 = this.props,
|
||||
record = _props4.record,
|
||||
index = _props4.index,
|
||||
onRowDoubleClick = _props4.onRowDoubleClick;
|
||||
|
||||
this.clear();
|
||||
onRowDoubleClick && onRowDoubleClick(record, fixedIndex, event);
|
||||
onRowDoubleClick(record, index, event);
|
||||
};
|
||||
|
||||
TableRow.prototype.onMouseEnter = function onMouseEnter(e) {
|
||||
var _props8 = this.props,
|
||||
onHover = _props8.onHover,
|
||||
hoverKey = _props8.hoverKey,
|
||||
fixedIndex = _props8.fixedIndex,
|
||||
syncHover = _props8.syncHover,
|
||||
record = _props8.record;
|
||||
TableRow.prototype.onMouseEnter = function onMouseEnter() {
|
||||
var _props5 = this.props,
|
||||
onHover = _props5.onHover,
|
||||
hoverKey = _props5.hoverKey;
|
||||
|
||||
if (syncHover) {
|
||||
this.setState({ hovered: true });
|
||||
}
|
||||
onHover(true, hoverKey, e, fixedIndex, record);
|
||||
onHover(true, hoverKey);
|
||||
};
|
||||
|
||||
TableRow.prototype.onMouseLeave = function onMouseLeave(e) {
|
||||
var _props9 = this.props,
|
||||
onHover = _props9.onHover,
|
||||
hoverKey = _props9.hoverKey,
|
||||
fixedIndex = _props9.fixedIndex,
|
||||
syncHover = _props9.syncHover,
|
||||
record = _props9.record;
|
||||
TableRow.prototype.onMouseLeave = function onMouseLeave() {
|
||||
var _props6 = this.props,
|
||||
onHover = _props6.onHover,
|
||||
hoverKey = _props6.hoverKey;
|
||||
|
||||
if (syncHover) {
|
||||
this.setState({ hovered: false });
|
||||
}
|
||||
onHover(false, hoverKey, e, fixedIndex, record);
|
||||
onHover(false, hoverKey);
|
||||
};
|
||||
|
||||
TableRow.prototype.render = function render() {
|
||||
var _props10 = this.props,
|
||||
clsPrefix = _props10.clsPrefix,
|
||||
columns = _props10.columns,
|
||||
record = _props10.record,
|
||||
height = _props10.height,
|
||||
visible = _props10.visible,
|
||||
index = _props10.index,
|
||||
onPaste = _props10.onPaste,
|
||||
expandIconColumnIndex = _props10.expandIconColumnIndex,
|
||||
expandIconAsCell = _props10.expandIconAsCell,
|
||||
expanded = _props10.expanded,
|
||||
useDragHandle = _props10.useDragHandle,
|
||||
rowDraggAble = _props10.rowDraggAble,
|
||||
expandable = _props10.expandable,
|
||||
onExpand = _props10.onExpand,
|
||||
needIndentSpaced = _props10.needIndentSpaced,
|
||||
indent = _props10.indent,
|
||||
indentSize = _props10.indentSize,
|
||||
isHiddenExpandIcon = _props10.isHiddenExpandIcon,
|
||||
fixed = _props10.fixed,
|
||||
bodyDisplayInRow = _props10.bodyDisplayInRow,
|
||||
expandedIcon = _props10.expandedIcon,
|
||||
collapsedIcon = _props10.collapsedIcon,
|
||||
hoverKey = _props10.hoverKey,
|
||||
lazyStartIndex = _props10.lazyStartIndex,
|
||||
lazyEndIndex = _props10.lazyEndIndex,
|
||||
expandIconCellWidth = _props10.expandIconCellWidth,
|
||||
getCellClassName = _props10.getCellClassName;
|
||||
var notRowDrag = this.state.notRowDrag;
|
||||
|
||||
var showSum = false;
|
||||
var _props7 = this.props,
|
||||
clsPrefix = _props7.clsPrefix,
|
||||
columns = _props7.columns,
|
||||
record = _props7.record,
|
||||
height = _props7.height,
|
||||
visible = _props7.visible,
|
||||
index = _props7.index,
|
||||
expandIconColumnIndex = _props7.expandIconColumnIndex,
|
||||
expandIconAsCell = _props7.expandIconAsCell,
|
||||
expanded = _props7.expanded,
|
||||
expandRowByClick = _props7.expandRowByClick,
|
||||
expandable = _props7.expandable,
|
||||
onExpand = _props7.onExpand,
|
||||
needIndentSpaced = _props7.needIndentSpaced,
|
||||
indent = _props7.indent,
|
||||
indentSize = _props7.indentSize,
|
||||
isHiddenExpandIcon = _props7.isHiddenExpandIcon;
|
||||
var className = this.props.className;
|
||||
|
||||
|
||||
if (this.state.hovered) {
|
||||
className += ' ' + clsPrefix + '-hover';
|
||||
}
|
||||
//判断是否为合计行
|
||||
if (className.indexOf('sumrow') > -1) {
|
||||
showSum = true;
|
||||
}
|
||||
|
||||
var cells = [];
|
||||
|
||||
var expandIcon = _react2["default"].createElement(_ExpandIcon2["default"], {
|
||||
|
|
@ -611,31 +202,21 @@ var TableRow = function (_Component) {
|
|||
needIndentSpaced: needIndentSpaced,
|
||||
expanded: expanded,
|
||||
record: record,
|
||||
expandedIcon: expandedIcon,
|
||||
collapsedIcon: collapsedIcon,
|
||||
isHiddenExpandIcon: isHiddenExpandIcon
|
||||
});
|
||||
var isExpandIconAsCell = expandIconAsCell ? clsPrefix + '-expand-columns-in-body' : '';
|
||||
var expandIndexInThisTable;
|
||||
if (this.props.fixed === 'right') {
|
||||
expandIndexInThisTable = expandIconColumnIndex - this.props.leftColumnsLength - this.props.centerColumnsLength;
|
||||
} else {
|
||||
expandIndexInThisTable = expandIconColumnIndex;
|
||||
}
|
||||
|
||||
for (var i = 0; i < columns.length; i++) {
|
||||
if (expandIconAsCell && i === 0) {
|
||||
showSum ? cells.push(_react2["default"].createElement('td', { width: expandIconCellWidth })) : cells.push(_react2["default"].createElement(
|
||||
cells.push(_react2["default"].createElement(
|
||||
'td',
|
||||
{
|
||||
className: clsPrefix + '-expand-icon-cell ' + isExpandIconAsCell,
|
||||
key: 'rc-table-expand-icon-cell-' + i,
|
||||
width: expandIconCellWidth
|
||||
className: clsPrefix + '-expand-icon-cell',
|
||||
key: 'rc-table-expand-icon-cell'
|
||||
},
|
||||
expandIcon
|
||||
));
|
||||
}
|
||||
// bugfix 设置expandRowByClick，无法显示箭头，去掉 expandRowByClick 判断
|
||||
var isColumnHaveExpandIcon = expandIconAsCell || showSum ? false : i === expandIndexInThisTable;
|
||||
var isColumnHaveExpandIcon = expandIconAsCell || expandRowByClick ? false : i === expandIconColumnIndex;
|
||||
cells.push(_react2["default"].createElement(_TableCell2["default"], {
|
||||
clsPrefix: clsPrefix,
|
||||
record: record,
|
||||
|
|
@ -643,46 +224,26 @@ var TableRow = function (_Component) {
|
|||
indent: indent,
|
||||
index: index,
|
||||
column: columns[i],
|
||||
key: index + "_" + (columns[i].key || columns[i].dataIndex || i),
|
||||
fixed: fixed,
|
||||
showSum: showSum,
|
||||
expandIcon: isColumnHaveExpandIcon ? expandIcon : null,
|
||||
bodyDisplayInRow: bodyDisplayInRow,
|
||||
lazyStartIndex: lazyStartIndex,
|
||||
lazyEndIndex: lazyEndIndex,
|
||||
onPaste: onPaste,
|
||||
stopRowDrag: this.stopRowDrag,
|
||||
col: i,
|
||||
getCellClassName: getCellClassName
|
||||
key: columns[i].key,
|
||||
expandIcon: isColumnHaveExpandIcon ? expandIcon : null
|
||||
}));
|
||||
}
|
||||
var style = _extends({ height: height }, record ? record.style : undefined);
|
||||
var style = { height: height };
|
||||
if (!visible) {
|
||||
style.display = 'none';
|
||||
}
|
||||
if (record && record._checked) {
|
||||
className += ' selected';
|
||||
}
|
||||
|
||||
if (rowDraggAble && !useDragHandle && !notRowDrag) {
|
||||
className += ' row-dragg-able';
|
||||
}
|
||||
|
||||
return _react2["default"].createElement(
|
||||
'tr',
|
||||
{
|
||||
draggable: rowDraggAble && !useDragHandle && !notRowDrag,
|
||||
onClick: this.onRowClick,
|
||||
onDoubleClick: this.onRowDoubleClick,
|
||||
onMouseEnter: this.onMouseEnter,
|
||||
onMouseLeave: this.onMouseLeave,
|
||||
className: clsPrefix + ' ' + className + ' ' + clsPrefix + '-level-' + indent,
|
||||
style: style,
|
||||
'data-row-key': record && record.key ? record.key : hoverKey
|
||||
// key={hoverKey}
|
||||
, ref: this.bindElement
|
||||
style: style
|
||||
},
|
||||
cells.length > 0 ? cells : _react2["default"].createElement('td', { style: { width: 0, padding: 0 } })
|
||||
cells
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,666 +0,0 @@
|
|||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
exports["default"] = bigData;
|
||||
|
||||
var _react = require("react");
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _propTypes = require("prop-types");
|
||||
|
||||
var _propTypes2 = _interopRequireDefault(_propTypes);
|
||||
|
||||
var _utils = require("./utils");
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
||||
|
||||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
||||
|
||||
var defaultHeight = 30;
|
||||
var rowDiff = 2; //行差值
|
||||
var treeTypeIndex = 0;
|
||||
function bigData(Table) {
|
||||
var _class, _temp, _initialiseProps;
|
||||
|
||||
return _temp = _class = function (_Component) {
|
||||
_inherits(BigData, _Component);
|
||||
|
||||
function BigData(props) {
|
||||
_classCallCheck(this, BigData);
|
||||
|
||||
var _this2 = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_initialiseProps.call(_this2);
|
||||
|
||||
_this2.state = {
|
||||
scrollLeft: 0,
|
||||
scrollTop: 0
|
||||
};
|
||||
var rowHeight = _this2.props.height ? _this2.props.height : defaultHeight;
|
||||
//默认显示25条，rowsInView根据定高算的。在非固定高下，这个只是一个大概的值。
|
||||
var scrollY = _this2.props.scroll.y ? parseInt(_this2.props.scroll.y) : 0;
|
||||
_this2.rowsInView = scrollY ? Math.floor(scrollY / rowHeight) : 20;
|
||||
_this2.currentIndex = 0;
|
||||
_this2.loadCount = props.loadBuffer ? _this2.rowsInView + props.loadBuffer * 2 : 26; //一次加载多少数据
|
||||
_this2.cachedRowHeight = []; //缓存每行的高度
|
||||
_this2.cachedRowParentIndex = [];
|
||||
_this2.expandChildRowKeys = [];
|
||||
_this2.firstLevelKey = [];
|
||||
_this2.keys = [];
|
||||
_this2.lastScrollTop = 0;
|
||||
_this2.currentScrollTop = 0;
|
||||
_this2.startIndex = _this2.currentIndex; //数据开始位置
|
||||
_this2.endIndex = _this2.currentIndex + _this2.loadCount; //数据结束位置
|
||||
_this2.setRowHeight = _this2.setRowHeight.bind(_this2);
|
||||
_this2.setRowParentIndex = _this2.setRowParentIndex.bind(_this2);
|
||||
_this2.expandedRowKeys = props.expandedRowKeys || [];
|
||||
_this2.flatTreeKeysMap = {}; //树表，扁平结构数据的 Map 映射，方便获取各节点信息
|
||||
_this2.flatTreeData = []; //深度遍历处理后的data数组
|
||||
_this2.treeData = []; //树表的data数据
|
||||
return _this2;
|
||||
}
|
||||
|
||||
BigData.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
var props = this.props;
|
||||
var currentIndex = nextProps.currentIndex,
|
||||
newData = nextProps.data,
|
||||
newExpandedKeys = nextProps.expandedRowKeys;
|
||||
|
||||
var _this = this,
|
||||
dataLen = newData.length;
|
||||
if (nextProps.scroll.y !== props.scroll.y) {
|
||||
var rowHeight = nextProps.height ? nextProps.height : defaultHeight;
|
||||
var scrollY = nextProps.scroll.y ? parseInt(nextProps.scroll.y) : 0;
|
||||
_this.rowsInView = scrollY ? Math.floor(scrollY / rowHeight) : 20;
|
||||
_this.loadCount = props.loadBuffer ? _this.rowsInView + props.loadBuffer * 2 : 26; //一次加载多少数据
|
||||
_this.currentIndex = 0;
|
||||
_this.startIndex = _this.currentIndex; //数据开始位置
|
||||
_this.endIndex = _this.currentIndex + _this.loadCount; //数据结束位置
|
||||
}
|
||||
if ('data' in nextProps) {
|
||||
var isTreeType = nextProps.isTree ? true : _this.checkIsTreeType(newData);
|
||||
_this.treeType = isTreeType;
|
||||
//fix: 滚动加载场景中,数据动态改变下占位计算错误的问题(26 Jun)
|
||||
if (newData.toString() !== props.data.toString()) {
|
||||
_this.cachedRowHeight = []; //缓存每行的高度
|
||||
_this.cachedRowParentIndex = [];
|
||||
_this.computeCachedRowParentIndex(newData);
|
||||
// fix：切换数据源，startIndex、endIndex错误
|
||||
if (_this.scrollTop <= 0) {
|
||||
// 增加scrollTop 判断，ncc场景下滚动条不在最上层， 会出现空白，因为重置了currentIndex没有重置滚动条
|
||||
_this.currentIndex = 0;
|
||||
_this.startIndex = _this.currentIndex; //数据开始位置
|
||||
_this.endIndex = _this.currentIndex + _this.loadCount;
|
||||
}
|
||||
}
|
||||
_this.treeData = [];
|
||||
_this.flatTreeData = [];
|
||||
if (newData.length > 0) {
|
||||
_this.endIndex = _this.currentIndex - nextProps.loadBuffer + _this.loadCount; //数据结束位置
|
||||
}
|
||||
if (isTreeType) {
|
||||
_this.getTreeData(newExpandedKeys, newData);
|
||||
}
|
||||
}
|
||||
//如果传currentIndex，会判断该条数据是否在可视区域，如果没有的话，则重新计算startIndex和endIndex
|
||||
if (currentIndex != -1 && currentIndex !== this.currentIndex) {
|
||||
_this.setStartAndEndIndex(currentIndex, dataLen);
|
||||
}
|
||||
};
|
||||
|
||||
BigData.prototype.componentWillMount = function componentWillMount() {
|
||||
var _props = this.props,
|
||||
data = _props.data,
|
||||
isTree = _props.isTree;
|
||||
|
||||
var isTreeType = isTree ? true : this.checkIsTreeType();
|
||||
//设置data中每个元素的parentIndex
|
||||
this.computeCachedRowParentIndex(data);
|
||||
//如果是树表，递归data
|
||||
if (isTreeType) {
|
||||
this.treeType = isTreeType;
|
||||
this.getTreeData();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 如果是树形表，需要对传入的 data 进行处理
|
||||
* @param expandedKeys: nextProps 中传入的新 expandedRowKeys 属性值
|
||||
* @param newData: nextProps 中传入的新 data 属性值
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 深度遍历树形 data，把数据拍平，变为一维数组
|
||||
* @param {*} data
|
||||
* @param {*} parentKey 标识父节点
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 将截取后的 List 数组转换为 Tree 结构，并更新 state
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
*设置data中每个元素的parentIndex
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
BigData.prototype.setStartAndEndIndex = function setStartAndEndIndex(currentIndex, dataLen) {
|
||||
var _this = this;
|
||||
if (currentIndex > _this.currentIndex + _this.rowsInView) {
|
||||
_this.currentIndex = currentIndex;
|
||||
_this.endIndex = _this.currentIndex; //数据开始位置
|
||||
_this.startIndex = _this.currentIndex - _this.loadCount; //数据结束位置
|
||||
if (_this.endIndex > dataLen) {
|
||||
_this.endIndex = dataLen;
|
||||
}
|
||||
if (_this.startIndex < 0) {
|
||||
_this.startIndex = 0;
|
||||
}
|
||||
//重新设定scrollTop值
|
||||
_this.scrollTop = _this.getSumHeight(0, _this.endIndex - _this.rowsInView + 2);
|
||||
} else if (currentIndex < _this.currentIndex) {
|
||||
_this.currentIndex = currentIndex;
|
||||
_this.startIndex = currentIndex;
|
||||
_this.endIndex = currentIndex + _this.loadCount;
|
||||
if (_this.endIndex > dataLen) {
|
||||
_this.endIndex = dataLen;
|
||||
}
|
||||
if (_this.startIndex < 0) {
|
||||
_this.startIndex = 0;
|
||||
}
|
||||
//重新设定scrollTop值
|
||||
_this.scrollTop = _this.getSumHeight(0, _this.startIndex);
|
||||
}
|
||||
};
|
||||
|
||||
BigData.prototype.getRowKey = function getRowKey(record, index) {
|
||||
var rowKey = this.props.rowKey;
|
||||
var key = typeof rowKey === "function" ? rowKey(record, index) : record[rowKey];
|
||||
|
||||
return key;
|
||||
};
|
||||
/**
|
||||
*判断是否是树形结构
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
BigData.prototype.checkIsTreeType = function checkIsTreeType(newData) {
|
||||
var data = newData ? newData : this.props.data;
|
||||
var rs = false;
|
||||
var len = data.length > 30 ? 30 : data.length;
|
||||
//取前三十个看看是否有children属性，有则为树形结构
|
||||
for (var i = 0; i < len; i++) {
|
||||
if (data[i].children) {
|
||||
rs = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return rs;
|
||||
};
|
||||
|
||||
BigData.prototype.getData = function getData(data, parentIndex) {
|
||||
var _this3 = this;
|
||||
|
||||
data.forEach(function (subItem, subIndex) {
|
||||
_this3.cachedRowParentIndex[treeTypeIndex] = parentIndex;
|
||||
_this3.keys[treeTypeIndex] = _this3.getRowKey(subItem, subIndex);
|
||||
treeTypeIndex++;
|
||||
if (subItem.children) {
|
||||
_this3.getData(subItem.children, parentIndex);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
BigData.prototype.componentWillUnmount = function componentWillUnmount() {
|
||||
this.cachedRowHeight = [];
|
||||
this.cachedRowParentIndex = [];
|
||||
};
|
||||
/**
|
||||
*获取数据区高度
|
||||
*
|
||||
*
|
||||
**/
|
||||
|
||||
|
||||
BigData.prototype.getContentHeight = function getContentHeight() {
|
||||
if (!this.props.data) return 0;
|
||||
return this.getSumHeight(0, this.props.data.length);
|
||||
};
|
||||
|
||||
BigData.prototype.getSumHeight = function getSumHeight(start, end) {
|
||||
var height = this.props.height;
|
||||
|
||||
var rowHeight = height ? height : defaultHeight;
|
||||
var sumHeight = 0,
|
||||
currentKey = void 0,
|
||||
currentRowHeight = rowHeight;
|
||||
|
||||
for (var i = start; i < end; i++) {
|
||||
if (this.cachedRowHeight[i] == undefined) {
|
||||
if (this.treeType) {
|
||||
// currentKey = this.keys[i];
|
||||
currentKey = this.flatTreeData[i] && this.flatTreeData[i].key;
|
||||
currentRowHeight = 0;
|
||||
if (this.flatTreeKeysMap.hasOwnProperty(currentKey)) {
|
||||
currentRowHeight = rowHeight;
|
||||
}
|
||||
}
|
||||
sumHeight += currentRowHeight;
|
||||
} else {
|
||||
sumHeight += this.cachedRowHeight[i];
|
||||
}
|
||||
}
|
||||
return sumHeight;
|
||||
};
|
||||
|
||||
/**
|
||||
*@description 根据返回的scrollTop计算当前的索引。此处做了两次缓存一个是根据上一次的currentIndex计算当前currentIndex。另一个是根据当前内容区的数据是否在缓存中如果在则不重新render页面
|
||||
*@param 最新一次滚动的scrollTop
|
||||
*@param treeType是否是树状表
|
||||
*@param callback表体滚动过程中触发的回调
|
||||
*/
|
||||
|
||||
|
||||
BigData.prototype.setRowHeight = function setRowHeight(height, index) {
|
||||
this.cachedRowHeight[index] = height;
|
||||
};
|
||||
|
||||
BigData.prototype.setRowParentIndex = function setRowParentIndex(parentIndex, index) {}
|
||||
// this.cachedRowParentIndex[index] = parentIndex;
|
||||
|
||||
/**
|
||||
*
|
||||
*根据当前行号获取该行的父节点行号
|
||||
* @param {*} currentIndex 当前行号
|
||||
*/
|
||||
;
|
||||
|
||||
BigData.prototype.getParentIndex = function getParentIndex(targetIndex) {
|
||||
var data = this.props.data;
|
||||
|
||||
var parentIndex = -1;
|
||||
parentIndex = this.getIndex(data, -1, targetIndex);
|
||||
if (parentIndex < 0) {
|
||||
//小于0说明没有展开的子节点
|
||||
parentIndex = targetIndex;
|
||||
}
|
||||
return parentIndex;
|
||||
};
|
||||
|
||||
BigData.prototype.getIndex = function getIndex(data, index, targetIndex) {
|
||||
var parentIndex = index;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
index++;
|
||||
if (targetIndex <= index) {
|
||||
break;
|
||||
}
|
||||
if (data[i].children) {
|
||||
this.getIndex(data[i].children, index, targetIndex);
|
||||
}
|
||||
}
|
||||
return parentIndex;
|
||||
};
|
||||
|
||||
BigData.prototype.render = function render() {
|
||||
var data = this.props.data;
|
||||
var scrollTop = this.scrollTop;
|
||||
var endIndex = this.endIndex,
|
||||
startIndex = this.startIndex,
|
||||
treeData = this.treeData,
|
||||
treeType = this.treeType,
|
||||
flatTreeData = this.flatTreeData;
|
||||
|
||||
var expandedRowKeys = this.props.expandedRowKeys ? this.props.expandedRowKeys : this.expandedRowKeys;
|
||||
if (startIndex < 0) {
|
||||
startIndex = 0;
|
||||
}
|
||||
if (endIndex < 0) {
|
||||
endIndex = 0;
|
||||
}
|
||||
if (treeType && endIndex > flatTreeData.length || !treeType && endIndex > data.length) {
|
||||
endIndex = treeType ? flatTreeData.length : data.length;
|
||||
}
|
||||
var lazyLoad = {
|
||||
startIndex: startIndex,
|
||||
endIndex: endIndex,
|
||||
startParentIndex: startIndex //为树状节点做准备
|
||||
};
|
||||
if (treeType) {
|
||||
lazyLoad.preHeight = this.getSumHeight(0, startIndex);
|
||||
lazyLoad.sufHeight = this.getSumHeight(endIndex, flatTreeData.length);
|
||||
} else {
|
||||
lazyLoad.preHeight = this.getSumHeight(0, startIndex);
|
||||
lazyLoad.sufHeight = this.getSumHeight(endIndex, data.length);
|
||||
}
|
||||
// console.log('*******expandedRowKeys*****'+expandedRowKeys);
|
||||
var dataSource = treeType && Array.isArray(treeData) && treeData.length > 0 ? treeData : data.slice(startIndex, endIndex);
|
||||
return _react2["default"].createElement(Table, _extends({}, this.props, {
|
||||
data: dataSource,
|
||||
lazyLoad: lazyLoad,
|
||||
handleScrollY: this.handleScrollY,
|
||||
scrollTop: scrollTop,
|
||||
setRowHeight: this.setRowHeight,
|
||||
setRowParentIndex: this.setRowParentIndex,
|
||||
onExpand: this.onExpand,
|
||||
onExpandedRowsChange: this.props.onExpandedRowsChange,
|
||||
expandedRowKeys: expandedRowKeys
|
||||
// className={'lazy-table'}
|
||||
}));
|
||||
};
|
||||
|
||||
return BigData;
|
||||
}(_react.Component), _class.defaultProps = {
|
||||
data: [],
|
||||
loadBuffer: 5,
|
||||
rowKey: "key",
|
||||
onExpand: function onExpand() {},
|
||||
|
||||
scroll: {},
|
||||
currentIndex: -1,
|
||||
isTree: false
|
||||
}, _class.propTypes = {
|
||||
loadBuffer: _propTypes2["default"].number
|
||||
}, _initialiseProps = function _initialiseProps() {
|
||||
var _this4 = this;
|
||||
|
||||
this.getTreeData = function (expandedKeys, newData) {
|
||||
var startIndex = _this4.startIndex,
|
||||
endIndex = _this4.endIndex;
|
||||
|
||||
var data = newData ? newData : _this4.props.data;
|
||||
_this4.cacheExpandedKeys = expandedKeys && new Set(expandedKeys);
|
||||
// 深递归 data，截取可视区 data 数组，再将扁平结构转换成嵌套结构
|
||||
var sliceTreeList = [];
|
||||
var flatTreeData = _this4.deepTraversal(data);
|
||||
_this4.flatTreeData = flatTreeData;
|
||||
sliceTreeList = flatTreeData.slice(startIndex, endIndex);
|
||||
_this4.handleTreeListChange(sliceTreeList);
|
||||
|
||||
_this4.cacheExpandedKeys = expandedKeys && null;
|
||||
};
|
||||
|
||||
this.deepTraversal = function (treeData) {
|
||||
var parentKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
||||
|
||||
var _this = _this4;
|
||||
var cacheExpandedKeys = _this.cacheExpandedKeys,
|
||||
_this$expandedRowKeys = _this.expandedRowKeys,
|
||||
expandedRowKeys = _this$expandedRowKeys === undefined ? [] : _this$expandedRowKeys,
|
||||
flatTreeKeysMap = _this.flatTreeKeysMap,
|
||||
expandedKeysSet = cacheExpandedKeys ? cacheExpandedKeys : new Set(expandedRowKeys),
|
||||
flatTreeData = [],
|
||||
dataCopy = treeData;
|
||||
|
||||
if (Array.isArray(dataCopy)) {
|
||||
for (var i = 0, l = dataCopy.length; i < l; i++) {
|
||||
var _dataCopy$i = dataCopy[i],
|
||||
children = _dataCopy$i.children,
|
||||
props = _objectWithoutProperties(_dataCopy$i, ["children"]),
|
||||
key = _this4.getRowKey(dataCopy[i], i),
|
||||
dataCopyI = new Object(),
|
||||
_isLeaf = children && children.length > 0 ? false : true,
|
||||
isExpanded = parentKey === null || expandedKeysSet.has(parentKey) ? expandedKeysSet.has(key) : false;
|
||||
|
||||
dataCopyI = _extends(dataCopyI, {
|
||||
key: key,
|
||||
isExpanded: isExpanded,
|
||||
parentKey: parentKey,
|
||||
_isLeaf: _isLeaf,
|
||||
index: flatTreeData.length
|
||||
}, _extends({}, props));
|
||||
|
||||
flatTreeData.push(dataCopyI); // 取每项数据放入一个新数组
|
||||
flatTreeKeysMap[key] = dataCopyI;
|
||||
|
||||
// 优化递归逻辑，如果当前节点是收起状态，则不遍历其子节点
|
||||
if (Array.isArray(children) && children.length > 0 && isExpanded) {
|
||||
flatTreeData = flatTreeData.concat(_this4.deepTraversal(children, key));
|
||||
}
|
||||
}
|
||||
}
|
||||
return flatTreeData;
|
||||
};
|
||||
|
||||
this.handleTreeListChange = function (treeList, startIndex, endIndex) {
|
||||
// 属性配置设置
|
||||
var attr = {
|
||||
id: 'key',
|
||||
parendId: 'parentKey',
|
||||
rootId: null,
|
||||
_isLeaf: '_isLeaf'
|
||||
};
|
||||
var treeData = (0, _utils.convertListToTree)(treeList, attr, _this4.flatTreeKeysMap);
|
||||
|
||||
_this4.startIndex = typeof startIndex !== "undefined" ? startIndex : _this4.startIndex;
|
||||
_this4.endIndex = typeof endIndex !== "undefined" ? endIndex : _this4.endIndex;
|
||||
|
||||
_this4.treeData = treeData;
|
||||
};
|
||||
|
||||
this.computeCachedRowParentIndex = function (data) {
|
||||
var isTree = _this4.props.isTree;
|
||||
|
||||
var isTreeType = isTree ? true : _this4.checkIsTreeType();
|
||||
treeTypeIndex = 0;
|
||||
if (isTreeType) {
|
||||
data.forEach(function (item, index) {
|
||||
_this4.firstLevelKey[index] = _this4.getRowKey(item, index);
|
||||
_this4.cachedRowParentIndex[treeTypeIndex] = index;
|
||||
//保存所有的keys跟小标对应起来
|
||||
_this4.keys[treeTypeIndex] = _this4.getRowKey(item, index);
|
||||
treeTypeIndex++;
|
||||
if (item.children) {
|
||||
_this4.getData(item.children, index);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
this.handleScrollY = function (nextScrollTop, treeType, callback) {
|
||||
//树表逻辑
|
||||
// 关键点是动态的获取startIndex和endIndex
|
||||
// 法子一：子节点也看成普通tr，最开始需要设置一共有多少行，哪行显示哪行不显示如何确定
|
||||
// 动态取start = current+buffer对应的父节点、end = start+loadCount+row的height为0的行数 展开节点的下一个节点作为end值，
|
||||
var _this = _this4;
|
||||
var _this$props = _this.props,
|
||||
data = _this$props.data,
|
||||
height = _this$props.height,
|
||||
_this$props$scroll = _this$props.scroll,
|
||||
scroll = _this$props$scroll === undefined ? {} : _this$props$scroll,
|
||||
loadBuffer = _this$props.loadBuffer;
|
||||
|
||||
var rowHeight = height ? height : defaultHeight;
|
||||
var _this$currentIndex = _this.currentIndex,
|
||||
currentIndex = _this$currentIndex === undefined ? 0 : _this$currentIndex,
|
||||
loadCount = _this.loadCount,
|
||||
scrollTop = _this.scrollTop,
|
||||
currentScrollTop = _this.currentScrollTop,
|
||||
flatTreeData = _this.flatTreeData;
|
||||
var endIndex = _this.endIndex,
|
||||
startIndex = _this.startIndex;
|
||||
var needRender = _this.state.needRender;
|
||||
|
||||
_this.scrollTop = nextScrollTop;
|
||||
var viewHeight = parseInt(scroll.y);
|
||||
_this.treeType = treeType;
|
||||
var index = 0;
|
||||
var temp = nextScrollTop;
|
||||
var currentKey = void 0;
|
||||
while (temp > 0) {
|
||||
var currentRowHeight = _this4.cachedRowHeight[index];
|
||||
if (currentRowHeight === undefined) {
|
||||
if (_this4.treeType) {
|
||||
// currentKey = this.keys[index];
|
||||
currentKey = _this4.flatTreeData[index].key;
|
||||
currentRowHeight = 0;
|
||||
if (_this4.flatTreeKeysMap.hasOwnProperty(currentKey)) {
|
||||
currentRowHeight = rowHeight;
|
||||
}
|
||||
} else {
|
||||
currentRowHeight = rowHeight;
|
||||
}
|
||||
}
|
||||
temp -= currentRowHeight;
|
||||
if (temp > 0) {
|
||||
index += 1;
|
||||
}
|
||||
}
|
||||
// console.log('currentIndex****',index);
|
||||
var isOrder = index - currentIndex > 0 ? true : false;
|
||||
if (index < 0) index = 0;
|
||||
//如果之前的索引和下一次的不一样则重置索引和滚动的位置
|
||||
if (currentIndex !== index) {
|
||||
_this.currentIndex = index;
|
||||
var rowsInView = 0; //可视区域显示多少行
|
||||
var rowsHeight = 0; //可视区域内容高度
|
||||
var tempIndex = index;
|
||||
//如果可视区域中需要展示的数据已经在缓存中则不重现render。
|
||||
if (viewHeight) {
|
||||
//有时滚动过快时this.cachedRowHeight[rowsInView + index]为undifined
|
||||
|
||||
while (rowsHeight < viewHeight && tempIndex < _this4.cachedRowHeight.length) {
|
||||
if (_this4.cachedRowHeight[tempIndex]) {
|
||||
rowsHeight += _this4.cachedRowHeight[tempIndex];
|
||||
// if (
|
||||
// (treeType &&
|
||||
// _this.cachedRowParentIndex[tempIndex] !== tempIndex) ||
|
||||
// !treeType
|
||||
// ) {
|
||||
rowsInView++;
|
||||
// }
|
||||
}
|
||||
tempIndex++;
|
||||
}
|
||||
// if (treeType) {
|
||||
// const treeIndex = index;
|
||||
// index = _this.cachedRowParentIndex[treeIndex];
|
||||
// if (index === undefined) {
|
||||
// // console.log('index is undefined********'+treeIndex);
|
||||
// index = this.getParentIndex(treeIndex);
|
||||
// // console.log("getParentIndex****"+index);
|
||||
// }
|
||||
// }
|
||||
// console.log('parentIndex*********',index);
|
||||
// 如果rowsInView 小于 缓存的数据则重新render
|
||||
// 向下滚动 下临界值超出缓存的endIndex则重新渲染
|
||||
if (rowsInView + index > endIndex - rowDiff && isOrder) {
|
||||
startIndex = index - loadBuffer > 0 ? index - loadBuffer : 0;
|
||||
// endIndex = startIndex + rowsInView + loadBuffer*2;
|
||||
endIndex = startIndex + loadCount;
|
||||
if (treeType && endIndex > flatTreeData.length || !treeType && endIndex > data.length) {
|
||||
endIndex = treeType ? flatTreeData.length : data.length;
|
||||
}
|
||||
if (endIndex > _this4.endIndex) {
|
||||
_this4.startIndex = startIndex;
|
||||
_this4.endIndex = endIndex;
|
||||
if (treeType) {
|
||||
_this4.handleTreeListChange(flatTreeData.slice(startIndex, endIndex), startIndex, endIndex);
|
||||
}
|
||||
_this4.setState({ needRender: !needRender });
|
||||
callback(parseInt(currentIndex + rowsInView));
|
||||
}
|
||||
}
|
||||
// 向上滚动，当前的index是否已经加载（currentIndex），若干上临界值小于startIndex则重新渲染
|
||||
if (!isOrder && index < startIndex + rowDiff) {
|
||||
startIndex = index - loadBuffer;
|
||||
if (startIndex < 0) {
|
||||
startIndex = 0;
|
||||
}
|
||||
if (startIndex < _this4.startIndex) {
|
||||
_this4.startIndex = startIndex;
|
||||
_this4.endIndex = _this4.startIndex + loadCount;
|
||||
if (treeType) {
|
||||
_this4.handleTreeListChange(flatTreeData.slice(startIndex, _this4.endIndex), startIndex, _this4.endIndex);
|
||||
}
|
||||
_this4.setState({ needRender: !needRender });
|
||||
callback(parseInt(currentIndex + rowsInView));
|
||||
}
|
||||
// console.log(
|
||||
// "**index**" + index,
|
||||
// "**startIndex**" + this.startIndex,
|
||||
// "**endIndex**" + this.endIndex
|
||||
// );
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
this.onExpand = function (expandState, record, index) {
|
||||
var _this = _this4;
|
||||
var _this$expandedRowKeys2 = _this.expandedRowKeys,
|
||||
expandedRowKeys = _this$expandedRowKeys2 === undefined ? [] : _this$expandedRowKeys2;
|
||||
var needRender = _this.state.needRender;
|
||||
var data = _this.props.data;
|
||||
|
||||
var rowKey = _this.getRowKey(record, index);
|
||||
// 记录展开子表行的key
|
||||
// 展开
|
||||
if (record.children) {
|
||||
if (expandState) {
|
||||
record.children.forEach(function (item, index) {
|
||||
_this.expandChildRowKeys.push(rowKey);
|
||||
});
|
||||
} else {
|
||||
// 收起
|
||||
record.children.forEach(function (item, index) {
|
||||
_this.expandChildRowKeys.splice(_this.expandChildRowKeys.findIndex(function (fitem) {
|
||||
return fitem.key === item.key;
|
||||
}), 1);
|
||||
});
|
||||
}
|
||||
}
|
||||
//滚动加载expandedRowKeys自己维护，否则有展开不全的问题
|
||||
if (!_this.props.expandedRowKeys) {
|
||||
if (expandState) {
|
||||
expandedRowKeys.push(rowKey);
|
||||
_this4.setState({ needRender: !needRender });
|
||||
} else {
|
||||
var _index = -1;
|
||||
expandedRowKeys.forEach(function (r, i) {
|
||||
if (r === rowKey) {
|
||||
_index = i;
|
||||
}
|
||||
});
|
||||
if (_index !== -1) {
|
||||
expandedRowKeys.splice(_index, 1);
|
||||
_this4.setState({ needRender: !needRender });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// expandState为true时，记录下
|
||||
_this.props.onExpand(expandState, record);
|
||||
|
||||
if (_this4.treeType) {
|
||||
//收起和展开时，缓存 expandedKeys
|
||||
_this.cacheExpandedKeys = new Set(expandedRowKeys);
|
||||
//重新递归数据
|
||||
var flatTreeData = _this.deepTraversal(data);
|
||||
var sliceTreeList = flatTreeData.slice(_this.startIndex, _this.endIndex);
|
||||
_this.flatTreeData = flatTreeData;
|
||||
_this.handleTreeListChange(sliceTreeList);
|
||||
_this.cacheExpandedKeys = null;
|
||||
}
|
||||
};
|
||||
}, _temp;
|
||||
}
|
||||
module.exports = exports["default"];
|
||||
|
|
@ -1,27 +1,23 @@
|
|||
'use strict';
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
exports["default"] = dragColumn;
|
||||
|
||||
var _react = require('react');
|
||||
var _react = require("react");
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _util = require('./util');
|
||||
var _util = require("./util");
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
||||
|
||||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
|
@ -34,8 +30,9 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|||
*/
|
||||
|
||||
function dragColumn(Table) {
|
||||
var _class, _temp, _initialiseProps;
|
||||
|
||||
return function (_Component) {
|
||||
return _temp = _class = function (_Component) {
|
||||
_inherits(DragColumn, _Component);
|
||||
|
||||
function DragColumn(props) {
|
||||
|
|
@ -43,107 +40,110 @@ function dragColumn(Table) {
|
|||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_this.setColumOrderByIndex = function (_column) {
|
||||
_column.forEach(function (da, i) {
|
||||
da.dragIndex = i;
|
||||
da.drgHover = false;
|
||||
});
|
||||
return _column;
|
||||
};
|
||||
_initialiseProps.call(_this);
|
||||
|
||||
_this.onDragEnd = function (event, data) {
|
||||
var dragSource = data.dragSource,
|
||||
dragTarg = data.dragTarg;
|
||||
var columns = _this.state.columns;
|
||||
var columns = props.columns;
|
||||
|
||||
var sourceIndex = -1,
|
||||
targetIndex = -1;
|
||||
|
||||
sourceIndex = columns.findIndex(function (da, i) {
|
||||
return da.key == dragSource.key;
|
||||
});
|
||||
targetIndex = columns.findIndex(function (da, i) {
|
||||
return da.key == dragTarg.key;
|
||||
});
|
||||
// 向前移动
|
||||
if (targetIndex < sourceIndex) {
|
||||
targetIndex = targetIndex + 1;
|
||||
}
|
||||
columns.splice(targetIndex, 0, columns.splice(sourceIndex, 1)[0]);
|
||||
var _newColumns = [];
|
||||
columns.forEach(function (da, i) {
|
||||
var newDate = _extends(da, {});
|
||||
newDate.title = da.title;
|
||||
_newColumns.push(newDate);
|
||||
});
|
||||
_this.setState({
|
||||
columns: _newColumns //cloneDeep(columns)
|
||||
});
|
||||
if (_this.props.onDragEnd) {
|
||||
_this.props.onDragEnd(event, data, columns);
|
||||
}
|
||||
};
|
||||
|
||||
_this.getTarget = function (evt) {
|
||||
return evt.target || evt.srcElement;
|
||||
};
|
||||
|
||||
_this.state = {
|
||||
columns: _this.setColumOrderByIndex(props.columns)
|
||||
};
|
||||
_this.setColumOrderByIndex(columns);
|
||||
return _this;
|
||||
}
|
||||
|
||||
DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.columns != this.props.columns) {
|
||||
this.setState({
|
||||
columns: this.setColumOrderByIndex(nextProps.columns)
|
||||
});
|
||||
this.setColumOrderByIndex();
|
||||
}
|
||||
};
|
||||
|
||||
DragColumn.prototype.recursion = function (_recursion) {
|
||||
function recursion(_x) {
|
||||
return _recursion.apply(this, arguments);
|
||||
}
|
||||
|
||||
recursion.toString = function () {
|
||||
return _recursion.toString();
|
||||
};
|
||||
|
||||
return recursion;
|
||||
}(function (obj) {
|
||||
var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
|
||||
|
||||
for (key in obj) {
|
||||
if (_typeof(obj[key]) == 'object' && Object.keys(obj[key].length > 0)) {
|
||||
data[key] = recursion(obj[key]);
|
||||
} else {
|
||||
data[key] = obj[key];
|
||||
}
|
||||
}
|
||||
return data;
|
||||
});
|
||||
|
||||
DragColumn.prototype.render = function render() {
|
||||
var _props = this.props,
|
||||
data = _props.data,
|
||||
dragborder = _props.dragborder,
|
||||
draggable = _props.draggable,
|
||||
className = _props.className,
|
||||
others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className']);
|
||||
className = _props.className;
|
||||
|
||||
return _react2["default"].createElement(Table, _extends({}, others, {
|
||||
columns: this.state.columns,
|
||||
data: data,
|
||||
className: className + ' u-table-drag-border',
|
||||
onDragEnd: this.onDragEnd,
|
||||
var key = new Date().getTime();
|
||||
var columns = this.state.columns;
|
||||
|
||||
return _react2["default"].createElement(Table, _extends({}, this.props, { columns: columns, data: data, className: className + " u-table-drag-border",
|
||||
onDragStart: this.onDragStart, onDragOver: this.onDragOver, onDrop: this.onDrop,
|
||||
onDragEnter: this.onDragEnter,
|
||||
draggable: draggable,
|
||||
dragborder: dragborder
|
||||
|
||||
dragborder: dragborder,
|
||||
dragborderKey: key
|
||||
}));
|
||||
};
|
||||
|
||||
return DragColumn;
|
||||
}(_react.Component);
|
||||
}(_react.Component), _initialiseProps = function _initialiseProps() {
|
||||
var _this2 = this;
|
||||
|
||||
this.setColumOrderByIndex = function (columns) {
|
||||
var _column = [];
|
||||
_extends(_column, columns);
|
||||
_column.forEach(function (da, i) {
|
||||
da.dragIndex = i;
|
||||
da.drgHover = false;
|
||||
});
|
||||
_this2.state = {
|
||||
columns: _column
|
||||
};
|
||||
};
|
||||
|
||||
this.onDragStart = function (event, data) {};
|
||||
|
||||
this.onDragOver = function (event, data) {};
|
||||
|
||||
this.onDragEnter = function (event, data) {
|
||||
var _columns = _this2.state.columns;
|
||||
|
||||
var columns = [];
|
||||
_extends(columns, _columns);
|
||||
columns.forEach(function (da) {
|
||||
return da.drgHover = false;
|
||||
});
|
||||
var current = columns.find(function (da) {
|
||||
return da.key == data.key;
|
||||
});
|
||||
current.drgHover = true;
|
||||
_this2.setState({
|
||||
columns: columns
|
||||
});
|
||||
};
|
||||
|
||||
this.onDrop = function (event, data) {
|
||||
var columns = _this2.state.columns;
|
||||
|
||||
var id = event.dataTransfer.getData("Text");
|
||||
var objIndex = columns.findIndex(function (_da, i) {
|
||||
return _da.key == id;
|
||||
});
|
||||
var targetIndex = columns.findIndex(function (_da, i) {
|
||||
return _da.key == data.key;
|
||||
});
|
||||
|
||||
columns.forEach(function (da, i) {
|
||||
da.drgHover = false;
|
||||
if (da.key == id) {
|
||||
//obj
|
||||
da.dragIndex = targetIndex;
|
||||
}
|
||||
if (da.key == data.key) {
|
||||
//targetObj
|
||||
da.dragIndex = objIndex;
|
||||
}
|
||||
});
|
||||
var _columns = (0, _util.sortBy)(columns, function (da) {
|
||||
return da.dragIndex;
|
||||
});
|
||||
_this2.setState({
|
||||
columns: _columns
|
||||
});
|
||||
};
|
||||
|
||||
this.getTarget = function (evt) {
|
||||
return evt.target || evt.srcElement;
|
||||
};
|
||||
}, _temp;
|
||||
}
|
||||
module.exports = exports['default'];
|
||||
module.exports = exports["default"];
|
||||
|
|
@ -12,26 +12,6 @@ var _react = require("react");
|
|||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _beeCheckbox = require("bee-checkbox");
|
||||
|
||||
var _beeCheckbox2 = _interopRequireDefault(_beeCheckbox);
|
||||
|
||||
var _beeIcon = require("bee-icon");
|
||||
|
||||
var _beeIcon2 = _interopRequireDefault(_beeIcon);
|
||||
|
||||
var _util = require("./util");
|
||||
|
||||
var _i18n = require("./i18n");
|
||||
|
||||
var _i18n2 = _interopRequireDefault(_i18n);
|
||||
|
||||
var _tool = require("bee-locale/build/tool");
|
||||
|
||||
var _propTypes = require("prop-types");
|
||||
|
||||
var _propTypes2 = _interopRequireDefault(_propTypes);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
||||
|
|
@ -42,15 +22,15 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
|
|||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
||||
|
||||
function noop() {}
|
||||
/**
|
||||
* 参数: 过滤表头
|
||||
* @param {*} Table
|
||||
* @param {*} Checkbox
|
||||
* @param {*} Popover
|
||||
* @param {*} Icon
|
||||
*/
|
||||
|
||||
function filterColumn(Table, Popover) {
|
||||
function filterColumn(Table, Checkbox, Popover, Icon) {
|
||||
var _class, _temp, _initialiseProps;
|
||||
|
||||
return _temp = _class = function (_Component) {
|
||||
|
|
@ -65,53 +45,39 @@ function filterColumn(Table, Popover) {
|
|||
|
||||
var columns = props.columns;
|
||||
|
||||
var _column = [];
|
||||
_extends(_column, columns);
|
||||
_column.forEach(function (da) {
|
||||
da.checked = true;
|
||||
da.disable = true;
|
||||
});
|
||||
_this.state = {
|
||||
columns: _this.setColumOrderByIndex((0, _util.ObjectAssign)(columns)),
|
||||
columns: _column,
|
||||
showModal: false,
|
||||
width: props.width ? props.width : 150,
|
||||
screenX: 0,
|
||||
screenY: 0
|
||||
};
|
||||
return _this;
|
||||
}
|
||||
|
||||
FilterColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.columns != this.props.columns) {
|
||||
this.setState({
|
||||
columns: this.setColumOrderByIndex((0, _util.ObjectAssign)(nextProps.columns))
|
||||
});
|
||||
}
|
||||
this.setState({
|
||||
showModal: nextProps.showFilterPopover ? true : false
|
||||
});
|
||||
};
|
||||
|
||||
FilterColumn.prototype.render = function render() {
|
||||
var _props = this.props,
|
||||
data = _props.data,
|
||||
prefixCls = _props.prefixCls,
|
||||
scrollPro = _props.scroll;
|
||||
prefixCls = _props.prefixCls;
|
||||
var _state = this.state,
|
||||
columns = _state.columns,
|
||||
showModal = _state.showModal;
|
||||
showModal = _state.showModal,
|
||||
width = _state.width,
|
||||
screenX = _state.screenX,
|
||||
screenY = _state.screenY;
|
||||
|
||||
|
||||
var locale = (0, _tool.getComponentLocale)(this.props, this.context, 'Table', function () {
|
||||
return _i18n2["default"];
|
||||
});
|
||||
|
||||
var _columns = [],
|
||||
widthState = 0,
|
||||
scroll = scrollPro;
|
||||
var _columns = [];
|
||||
columns.forEach(function (da) {
|
||||
if (da.ifshow) {
|
||||
if (da.disable) {
|
||||
_columns.push(da);
|
||||
if (da.width) {
|
||||
widthState++;
|
||||
}
|
||||
}
|
||||
});
|
||||
// if(_columns.length == widthState){
|
||||
// scroll.x = this.getCloumnsScroll(columns);
|
||||
// }
|
||||
|
||||
var content = _react2["default"].createElement(
|
||||
"div",
|
||||
|
|
@ -119,7 +85,7 @@ function filterColumn(Table, Popover) {
|
|||
_react2["default"].createElement(
|
||||
"span",
|
||||
{ className: prefixCls + "-clear-setting", onClick: this.clear },
|
||||
locale["resetSettings"]
|
||||
"\u6E05\u9664\u8BBE\u7F6E"
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
"div",
|
||||
|
|
@ -131,29 +97,17 @@ function filterColumn(Table, Popover) {
|
|||
return _react2["default"].createElement(
|
||||
"div",
|
||||
{ className: prefixCls + "-cont" },
|
||||
_react2["default"].createElement(Table, _extends({}, this.props, {
|
||||
columns: _columns,
|
||||
data: data
|
||||
// scroll={scroll}
|
||||
// scroll={{x:this.getCloumnsScroll(columns)}}
|
||||
})),
|
||||
this.props.columnFilterAble == false ? "" : _react2["default"].createElement(
|
||||
"div",
|
||||
{ className: prefixCls + "-filter-icon" },
|
||||
_react2["default"].createElement(Table, _extends({}, this.props, { columns: _columns, data: data })),
|
||||
_react2["default"].createElement(
|
||||
Popover,
|
||||
{
|
||||
placement: "leftTop",
|
||||
content: content, id: "aa",
|
||||
show: showModal },
|
||||
_react2["default"].createElement(
|
||||
Popover,
|
||||
{
|
||||
id: "filter_column_popover",
|
||||
placement: "left",
|
||||
content: content,
|
||||
show: showModal,
|
||||
onHide: this.onHide
|
||||
},
|
||||
_react2["default"].createElement(
|
||||
"div",
|
||||
{ className: prefixCls + "-pop-column-filter-cont" },
|
||||
_react2["default"].createElement(_beeIcon2["default"], { type: "uf-grid", onClick: this.openCloumList })
|
||||
)
|
||||
"div",
|
||||
{ className: prefixCls + "-pop-column-filter" },
|
||||
_react2["default"].createElement(Icon, { type: "uf-navmenu", onClick: this.openCloumList })
|
||||
)
|
||||
)
|
||||
);
|
||||
|
|
@ -161,91 +115,51 @@ function filterColumn(Table, Popover) {
|
|||
|
||||
return FilterColumn;
|
||||
}(_react.Component), _class.defaultProps = {
|
||||
prefixCls: "u-table-filter-column",
|
||||
afterFilter: noop,
|
||||
columnFilterAble: true,
|
||||
scroll: {}
|
||||
}, _class.contextTypes = {
|
||||
beeLocale: _propTypes2["default"].object
|
||||
prefixCls: "u-table-filter-column"
|
||||
}, _initialiseProps = function _initialiseProps() {
|
||||
var _this2 = this;
|
||||
|
||||
this.setColumOrderByIndex = function (_column) {
|
||||
_column.forEach(function (da) {
|
||||
//默认所有的列都显示，如果传递ifshow属性，根据ifshow属性值来判断是否显示某列
|
||||
if (da.hasOwnProperty("ifshow")) {
|
||||
da.checked = da.ifshow ? true : false;
|
||||
da.ifshow = da.checked;
|
||||
} else {
|
||||
da.checked = true;
|
||||
da.ifshow = true;
|
||||
}
|
||||
});
|
||||
return _column;
|
||||
this.getShowModal = function (event) {
|
||||
var showModal = _this2.state.showModal;
|
||||
|
||||
if (showModal) {
|
||||
_this2.setState({
|
||||
showModal: false
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
this.checkedColumItemClick = function (da) {
|
||||
var _props2 = _this2.props,
|
||||
checkMinSize = _props2.checkMinSize,
|
||||
afterFilter = _props2.afterFilter;
|
||||
// if(checkMinSize)
|
||||
var columns = _this2.state.columns;
|
||||
|
||||
var sum = 0,
|
||||
leng = 0;
|
||||
_this2.state.columns.forEach(function (da) {
|
||||
da.fixed ? "" : leng++;
|
||||
!da.fixed && da.checked ? sum++ : "";
|
||||
});
|
||||
if (sum < checkMinSize && da.checked) {
|
||||
return;
|
||||
} else {
|
||||
if (sum <= 1 && da.checked) return;
|
||||
}
|
||||
da.checked = da.checked ? false : true;
|
||||
da.ifshow = da.checked ? true : false;
|
||||
|
||||
da.disable = da.checked ? true : false;
|
||||
_this2.setState(_extends({}, _this2.state));
|
||||
afterFilter(da, _this2.state.columns);
|
||||
};
|
||||
|
||||
this.openCloumList = function () {
|
||||
this.openCloumList = function (ev) {
|
||||
var oEvent = ev || event;
|
||||
_this2.setState({
|
||||
screenX: oEvent.clientX,
|
||||
screenY: oEvent.clientY,
|
||||
showModal: true
|
||||
});
|
||||
};
|
||||
|
||||
this.onHide = function () {
|
||||
_this2.setState({
|
||||
showModal: false
|
||||
});
|
||||
};
|
||||
|
||||
this.getCloumItem = function () {
|
||||
var prefixCls = _this2.props.prefixCls;
|
||||
var columns = _this2.state.columns;
|
||||
|
||||
return columns.map(function (da, i) {
|
||||
var paramObj = {
|
||||
id: da.key,
|
||||
checked: da.checked
|
||||
};
|
||||
if (da.fixed || da.required) {
|
||||
paramObj.disabled = true;
|
||||
} else {
|
||||
paramObj.onClick = function () {
|
||||
_this2.checkedColumItemClick(da);
|
||||
};
|
||||
}
|
||||
return _react2["default"].createElement(
|
||||
"div",
|
||||
{
|
||||
key: da.key + "_" + i,
|
||||
className: prefixCls + "-pop-cont-item",
|
||||
onClick: paramObj.onClick ? paramObj.onClick : null
|
||||
},
|
||||
{ key: da.key + "_" + i, className: prefixCls + "-pop-cont-item", onClick: function onClick() {
|
||||
_this2.checkedColumItemClick(da);
|
||||
} },
|
||||
_react2["default"].createElement(Checkbox, { id: da.key, checked: da.checked }),
|
||||
_react2["default"].createElement(
|
||||
_beeCheckbox2["default"],
|
||||
paramObj,
|
||||
"span",
|
||||
null,
|
||||
da.title
|
||||
)
|
||||
);
|
||||
|
|
@ -254,26 +168,13 @@ function filterColumn(Table, Popover) {
|
|||
|
||||
this.clear = function () {
|
||||
var columns = _this2.state.columns;
|
||||
// let _chek = columns[0].checked?false:true;
|
||||
|
||||
columns.forEach(function (da) {
|
||||
da.checked = true;
|
||||
da.ifshow = true;
|
||||
da.disable = true;
|
||||
});
|
||||
_this2.setState({
|
||||
columns: columns
|
||||
});
|
||||
_this2.props.afterFilter(_this2.state.columns, _this2.state.columns);
|
||||
};
|
||||
|
||||
this.getCloumnsScroll = function (columns) {
|
||||
var sum = 0;
|
||||
columns.forEach(function (da) {
|
||||
if (da.checked) {
|
||||
sum += da.width;
|
||||
}
|
||||
});
|
||||
// console.log("sum",sum);
|
||||
return sum;
|
||||
_this2.setState(_extends({}, _this2.state));
|
||||
};
|
||||
}, _temp;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,57 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
module.exports = {
|
||||
'lang': 'zh-cn',
|
||||
'resetSettings': '还原设置',
|
||||
'include': '包含',
|
||||
'exclusive': '不包含',
|
||||
'equal': '等于',
|
||||
'unequal': '不等于',
|
||||
'begin': '以开始',
|
||||
'end': '以结尾',
|
||||
'greater_than': '大于',
|
||||
'great_than_equal_to': '大于等于',
|
||||
'less_than': '小于',
|
||||
'less_than_equal_to': '小于等于',
|
||||
'be_equal_to': '等于',
|
||||
'not_equal_to': '不等于',
|
||||
"no_data": '暂无数据',
|
||||
"bool_true": "是",
|
||||
"bool_false": "否",
|
||||
'en-us': {
|
||||
'resetSettings': 'Reset',
|
||||
'include': 'Include',
|
||||
'exclusive': 'Not include',
|
||||
'equal': 'Equal to',
|
||||
'unequal': 'Not equal to',
|
||||
'begin': 'Begin with',
|
||||
'end': 'End with',
|
||||
'greater_than': 'Greater than',
|
||||
'great_than_equal_to': 'Greater than or equal to',
|
||||
'less_than': 'Less than',
|
||||
'less_than_equal_to': 'Less than or equal to',
|
||||
'be_equal_to': 'Equal to',
|
||||
'not_equal_to': 'Not equal to',
|
||||
"no_data": 'No data',
|
||||
"bool_true": "true",
|
||||
"bool_false": "false"
|
||||
},
|
||||
'zh-tw': {
|
||||
'resetSettings': '還原設置',
|
||||
'include': '包含',
|
||||
'exclusive': '不包含',
|
||||
'equal': '等於',
|
||||
'unequal': '不等於',
|
||||
'begin': '以開始',
|
||||
'end': '以結尾',
|
||||
'greater_than': '大於',
|
||||
'great_than_equal_to': '大於等於',
|
||||
'less_than': '小於',
|
||||
'less_than_equal to': '小於等於',
|
||||
'be_equal_to': '等於',
|
||||
'not_equal_to': '不等於',
|
||||
"no_data": '暫無數據',
|
||||
"bool_true": "是",
|
||||
"bool_false": "否"
|
||||
}
|
||||
};
|
||||
|
|
@ -12,30 +12,40 @@ var _react = require('react');
|
|||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _propTypes = require('prop-types');
|
||||
|
||||
var _propTypes2 = _interopRequireDefault(_propTypes);
|
||||
|
||||
var _util = require('./util');
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
||||
|
||||
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
||||
|
||||
/**
|
||||
* 参数: 过滤表头
|
||||
* @param {*} Table
|
||||
* @param {*} Checkbox
|
||||
* @param {*} Popover
|
||||
* @param {*} Icon
|
||||
*/
|
||||
function indexOf(array, val) {
|
||||
for (var i = 0; i < array.length; i++) {
|
||||
if (array[i] === val) return i;
|
||||
}
|
||||
return -1;
|
||||
};
|
||||
|
||||
function remove(array, val) {
|
||||
var index = indexOf(array, val);
|
||||
if (index > -1) {
|
||||
array.splice(index, 1);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* multiSelect={
|
||||
* type--默认值为checkbox
|
||||
* param--可以设置返回的选中的数据属性；默认值：null；
|
||||
* }
|
||||
* getSelectedDataFunc--function，能获取到选中的数据
|
||||
* 使用全选时得注意，data中的key值一定要是唯一值
|
||||
*/
|
||||
function multiSelect(Table, Checkbox) {
|
||||
var _class, _temp, _initialiseProps;
|
||||
|
||||
|
|
@ -49,307 +59,216 @@ function multiSelect(Table, Checkbox) {
|
|||
|
||||
_initialiseProps.call(_this);
|
||||
|
||||
var obj = _this.getCheckedOrIndeter(props.data);
|
||||
_this.state = _extends({}, obj, {
|
||||
data: (0, _util.ObjectAssign)(props.data)
|
||||
});
|
||||
_this.state = {
|
||||
checkedAll: false,
|
||||
checkedObj: {},
|
||||
selIds: [],
|
||||
data: props.data
|
||||
};
|
||||
return _this;
|
||||
}
|
||||
|
||||
MultiSelect.prototype.componentDidMount = function componentDidMount() {
|
||||
this.setState(this.initCheckedObj(this.props));
|
||||
};
|
||||
|
||||
MultiSelect.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
if ('data' in nextProps) {
|
||||
var obj = this.getCheckedOrIndeter(nextProps.data);
|
||||
this.setState(_extends({}, obj, {
|
||||
data: (0, _util.ObjectAssign)(nextProps.data)
|
||||
}));
|
||||
var props = this.props,
|
||||
selectDisabled = props.selectDisabled,
|
||||
selectedRow = props.selectedRow,
|
||||
data = props.data,
|
||||
selIds = void 0,
|
||||
obj = void 0,
|
||||
checkedObj = {};
|
||||
|
||||
if (nextProps.data !== data || nextProps.selectDisabled !== selectDisabled || nextProps.selectedRow !== selectedRow) {
|
||||
obj = this.initCheckedObj(nextProps);
|
||||
checkedObj = obj.checkedObj;
|
||||
selIds = obj.selIds;
|
||||
this.setState({
|
||||
checkedAll: false,
|
||||
checkedObj: checkedObj,
|
||||
selIds: selIds,
|
||||
data: nextProps.data
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @param {*} data
|
||||
*/
|
||||
MultiSelect.prototype.renderColumnsMultiSelect = function renderColumnsMultiSelect(columns) {
|
||||
var _this2 = this;
|
||||
|
||||
|
||||
MultiSelect.prototype.getCheckedOrIndeter = function getCheckedOrIndeter(data) {
|
||||
var obj = {};
|
||||
var checkStatus = this.checkAllSelected(data);
|
||||
if (!checkStatus) {
|
||||
obj.checkedAll = false;
|
||||
obj.indeterminate = false;
|
||||
return obj;
|
||||
}
|
||||
if (checkStatus == 'indeter') {
|
||||
obj.indeterminate = true;
|
||||
obj.checkedAll = false;
|
||||
} else if (checkStatus == 'all') {
|
||||
obj.checkedAll = true;
|
||||
obj.indeterminate = false;
|
||||
}
|
||||
return obj;
|
||||
};
|
||||
|
||||
/**
|
||||
* 判断数据是否全部选中
|
||||
* @param {*} data
|
||||
* return string all(全选)、indeter(半选)
|
||||
*/
|
||||
|
||||
|
||||
MultiSelect.prototype.setChecked = function setChecked(data) {
|
||||
if (!this.isArray(data)) return false;
|
||||
if (data.length == 0) return false;
|
||||
var count = 0;
|
||||
var disabledCount = 0;
|
||||
data.forEach(function (da) {
|
||||
if (da._checked && !da._disabled) {
|
||||
count++;
|
||||
}
|
||||
if (da._disabled) {
|
||||
disabledCount++;
|
||||
}
|
||||
});
|
||||
|
||||
if (data.length == count + disabledCount && count > 0) {
|
||||
return "all";
|
||||
}
|
||||
return count == 0 ? false : "indeter";
|
||||
};
|
||||
|
||||
/**
|
||||
* 重写：判断数据是否全部选中
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 判断是否是数组
|
||||
* @param {*} o
|
||||
*/
|
||||
MultiSelect.prototype.isArray = function isArray(o) {
|
||||
return Object.prototype.toString.call(o) == '[object Array]';
|
||||
};
|
||||
|
||||
/**
|
||||
* 遍历树节点和它的子孙节点，设置_checked
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 遍历树节点和它的子孙节点，获取对应状态的节点数组
|
||||
*/
|
||||
|
||||
|
||||
// 实现行点击时触发多选框勾选的需求
|
||||
|
||||
|
||||
MultiSelect.prototype.render = function render() {
|
||||
var _props = this.props,
|
||||
columns = _props.columns,
|
||||
expandIconColumnIndex = _props.expandIconColumnIndex;
|
||||
var data = this.state.data;
|
||||
|
||||
return _react2["default"].createElement(Table, _extends({}, this.props, {
|
||||
columns: this.getDefaultColumns(columns),
|
||||
data: data,
|
||||
onRowClick: this.onRowClick,
|
||||
expandIconColumnIndex: expandIconColumnIndex ? expandIconColumnIndex + 1 : 1
|
||||
}));
|
||||
var checkedObj = _extends({}, this.state.checkedObj);
|
||||
var checkedArray = Object.keys(checkedObj);
|
||||
var multiSelect = this.props.multiSelect;
|
||||
|
||||
var select_column = {};
|
||||
var indeterminate_bool = false;
|
||||
if (!multiSelect || !multiSelect.type) {
|
||||
multiSelect = _extends({}, multiSelect, { type: "checkbox" });
|
||||
}
|
||||
if (multiSelect && multiSelect.type === "checkbox") {
|
||||
var i = checkedArray.length;
|
||||
while (i--) {
|
||||
if (checkedObj[checkedArray[i]]) {
|
||||
indeterminate_bool = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
var defaultColumns = [{
|
||||
title: _react2["default"].createElement(Checkbox, {
|
||||
className: 'table-checkbox',
|
||||
checked: this.state.checkedAll,
|
||||
indeterminate: indeterminate_bool && !this.state.checkedAll,
|
||||
onChange: this.onAllCheckChange
|
||||
}),
|
||||
key: "checkbox",
|
||||
dataIndex: "checkbox",
|
||||
width: "100px",
|
||||
render: function render(text, record, index) {
|
||||
var rowKey = record["key"] ? record["key"] : _this2.getRowKey(record, i);
|
||||
var bool = checkedObj.hasOwnProperty(rowKey);
|
||||
return _react2["default"].createElement(Checkbox, {
|
||||
className: 'table-checkbox',
|
||||
checked: checkedObj[rowKey],
|
||||
disabled: !bool,
|
||||
onClick: _this2.handleClick,
|
||||
onChange: _this2.onCheckboxChange.bind(_this2, text, record, index)
|
||||
});
|
||||
}
|
||||
}];
|
||||
columns = defaultColumns.concat(columns);
|
||||
}
|
||||
return columns;
|
||||
};
|
||||
|
||||
MultiSelect.prototype.render = function render() {
|
||||
var _this3 = this;
|
||||
|
||||
var columns = this.renderColumnsMultiSelect(this.props.columns).concat();
|
||||
return _react2["default"].createElement(Table, _extends({ ref: function ref(table_ref) {
|
||||
_this3.table_ref = table_ref;
|
||||
} }, this.props, { columns: columns }));
|
||||
};
|
||||
|
||||
return MultiSelect;
|
||||
}(_react.Component), _class.propTypes = {
|
||||
autoCheckedByClickRows: _propTypes2["default"].bool //行点击时，是否自动勾选复选框
|
||||
}, _class.defaultProps = {
|
||||
prefixCls: "u-table-mult-select",
|
||||
getSelectedDataFunc: function getSelectedDataFunc() {},
|
||||
autoSelect: false,
|
||||
autoCheckedByClickRows: true,
|
||||
multiSelectConfig: {}
|
||||
}, _initialiseProps = function _initialiseProps() {
|
||||
var _this2 = this;
|
||||
}(_react.Component), _initialiseProps = function _initialiseProps() {
|
||||
var _this4 = this;
|
||||
|
||||
this.checkAllSelected = function (data) {
|
||||
if (!_this2.isArray(data)) return false;
|
||||
if (data.length == 0) return false;
|
||||
var count = 0;
|
||||
var disabledCount = 0;
|
||||
var length = 0;
|
||||
var getTree = function getTree(arr) {
|
||||
arr.forEach(function (item) {
|
||||
length++;
|
||||
if (item._checked && !item._disabled) {
|
||||
count++;
|
||||
} else if (item._disabled) {
|
||||
disabledCount++;
|
||||
this.getRowKey = function (record, index) {
|
||||
var rowKey = _this4.props.rowKey || 'key';
|
||||
var key = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey];
|
||||
return key;
|
||||
};
|
||||
|
||||
this.initCheckedObj = function (props) {
|
||||
var checkedObj = {},
|
||||
selectDisabled = props.selectDisabled,
|
||||
selectedRow = props.selectedRow,
|
||||
data = props.data,
|
||||
selIds_ = [].concat(_toConsumableArray(_this4.state.selIds)),
|
||||
selIds_length = selIds_.length;
|
||||
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var bool = selectDisabled && selectDisabled(data[i], i) || false;
|
||||
var rowKey = data[i]["key"] ? data[i]["key"] : _this4.getRowKey(data[i], i);
|
||||
if (!bool) {
|
||||
if (selectedRow && selectedRow(data[i], i)) {
|
||||
if (selIds_length > 0) {
|
||||
for (var index = 0; index < selIds_length; index++) {
|
||||
var selid = selIds_[index];
|
||||
if (selid[rowKey] !== data[i][rowKey]) {
|
||||
selIds_.push(data[i]);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
selIds_.push(data[i]);
|
||||
}
|
||||
checkedObj[rowKey] = true;
|
||||
} else {
|
||||
checkedObj[rowKey] = false;
|
||||
}
|
||||
if (item.children) {
|
||||
getTree(item.children);
|
||||
}
|
||||
});
|
||||
};
|
||||
getTree(data);
|
||||
if (length == count + disabledCount && count > 0) {
|
||||
return "all";
|
||||
}
|
||||
}
|
||||
return count == 0 ? false : "indeter";
|
||||
return {
|
||||
checkedObj: checkedObj,
|
||||
selIds: selIds_
|
||||
};
|
||||
};
|
||||
|
||||
this.onAllCheckChange = function () {
|
||||
var _state = _this2.state,
|
||||
data = _state.data,
|
||||
checkedAll = _state.checkedAll,
|
||||
indeterminate = _state.indeterminate;
|
||||
var self = _this4;
|
||||
var listData = self.state.data.concat();
|
||||
var checkedObj = _extends({}, self.state.checkedObj);
|
||||
var data = self.props.data;
|
||||
|
||||
var check = false;
|
||||
if (checkedAll) {
|
||||
check = false;
|
||||
var selIds = [];
|
||||
var id = self.props.multiSelect.param;
|
||||
if (self.state.checkedAll) {
|
||||
selIds = [];
|
||||
} else {
|
||||
check = true;
|
||||
for (var i = 0; i < listData.length; i++) {
|
||||
if (id) {
|
||||
selIds[i] = listData[i][id];
|
||||
} else {
|
||||
selIds[i] = listData[i];
|
||||
}
|
||||
}
|
||||
}
|
||||
var selectList = [];
|
||||
|
||||
data.forEach(function (item) {
|
||||
if (item.children) {
|
||||
var res = _this2.setTree(item, check, true);
|
||||
selectList = selectList.concat(res);
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var rowKey = data[i]["key"] ? data[i]["key"] : _this4.getRowKey(data[i], i);
|
||||
var bool = checkedObj.hasOwnProperty(rowKey);
|
||||
if (!bool) {
|
||||
selIds.splice(i, 1);
|
||||
} else {
|
||||
if (!item._disabled) {
|
||||
item._checked = check;
|
||||
}
|
||||
|
||||
if (item._checked) {
|
||||
selectList.push(item);
|
||||
}
|
||||
checkedObj[rowKey] = !self.state.checkedAll;
|
||||
}
|
||||
});
|
||||
if (selectList.length > 0) {
|
||||
indeterminate = true;
|
||||
} else {
|
||||
indeterminate = false;
|
||||
}
|
||||
_this2.setState({
|
||||
indeterminate: indeterminate,
|
||||
checkedAll: check
|
||||
self.setState({
|
||||
checkedAll: !self.state.checkedAll,
|
||||
checkedObj: checkedObj,
|
||||
selIds: selIds
|
||||
});
|
||||
_this2.props.getSelectedDataFunc(selectList, undefined, undefined, data);
|
||||
};
|
||||
|
||||
this.setTree = function (node, flag, autoSelect) {
|
||||
var res = [];
|
||||
var setTreeNodeFlag = function setTreeNodeFlag(node, flag) {
|
||||
if (!node._disabled) {
|
||||
node._checked = flag;
|
||||
}
|
||||
if (flag) {
|
||||
res.push(node);
|
||||
}
|
||||
if (node.children && autoSelect) {
|
||||
node.children.forEach(function (item) {
|
||||
setTreeNodeFlag(item, flag);
|
||||
});
|
||||
}
|
||||
};
|
||||
setTreeNodeFlag(node, flag);
|
||||
return res;
|
||||
};
|
||||
|
||||
this.getTree = function (node, key, value) {
|
||||
var res = [];
|
||||
var getTreeNodeByFlag = function getTreeNodeByFlag(node) {
|
||||
if (node[key] === value) {
|
||||
res.push(node);
|
||||
}
|
||||
if (node.children) {
|
||||
node.children.forEach(function (item) {
|
||||
getTreeNodeByFlag(item);
|
||||
});
|
||||
}
|
||||
};
|
||||
getTreeNodeByFlag(node);
|
||||
return res;
|
||||
self.props.getSelectedDataFunc(selIds);
|
||||
};
|
||||
|
||||
this.onCheckboxChange = function (text, record, index) {
|
||||
return function () {
|
||||
var data = _this2.state.data;
|
||||
var self = _this4;
|
||||
var allFlag = false;
|
||||
var selIds = self.state.selIds;
|
||||
var id = self.props.multiSelect ? self.props.multiSelect.param ? record[self.props.multiSelect.param] : record : record;
|
||||
var checkedObj = _extends({}, self.state.checkedObj);
|
||||
var checkedArray = Object.keys(checkedObj);
|
||||
var getSelectedDataFunc = self.props.getSelectedDataFunc;
|
||||
|
||||
var selectList = [];
|
||||
// record._checked = record._checked?false:true;
|
||||
var flag = record._checked ? false : true;
|
||||
if (record.children) {
|
||||
_this2.setTree(record, flag, _this2.props.autoSelect);
|
||||
} else {
|
||||
record._checked = flag;
|
||||
}
|
||||
var obj = _this2.getCheckedOrIndeter(data);
|
||||
_this2.setState(_extends({
|
||||
data: data
|
||||
}, obj));
|
||||
data.forEach(function (da) {
|
||||
if (da.children) {
|
||||
selectList = selectList.concat(_this2.getTree(da, '_checked', true));
|
||||
} else if (da._checked) {
|
||||
selectList.push(da);
|
||||
}
|
||||
});
|
||||
_this2.props.getSelectedDataFunc(selectList, record, index, data);
|
||||
};
|
||||
};
|
||||
|
||||
this.getDefaultColumns = function (columns) {
|
||||
var multiSelectConfig = _this2.props.multiSelectConfig;
|
||||
var _state2 = _this2.state,
|
||||
checkedAll = _state2.checkedAll,
|
||||
indeterminate = _state2.indeterminate;
|
||||
|
||||
var checkAttr = { checked: checkedAll ? true : false };
|
||||
var data = _this2.props.data;
|
||||
var dataLength = data.length;
|
||||
var disabledCount = 0;
|
||||
indeterminate ? checkAttr.indeterminate = true : "";
|
||||
//设置表头Checkbox是否可以点击
|
||||
data.forEach(function (item, index, arr) {
|
||||
if (item._disabled) {
|
||||
disabledCount++;
|
||||
}
|
||||
});
|
||||
|
||||
var _defaultColumns = [{
|
||||
className: 'u-table-multiSelect-column',
|
||||
title: _react2["default"].createElement(Checkbox, _extends({
|
||||
className: 'table-checkbox'
|
||||
}, checkAttr, multiSelectConfig, {
|
||||
disabled: disabledCount == dataLength ? true : false,
|
||||
onChange: _this2.onAllCheckChange
|
||||
})),
|
||||
key: "checkbox",
|
||||
dataIndex: "checkbox",
|
||||
fixed: "left",
|
||||
width: 49,
|
||||
render: function render(text, record, index) {
|
||||
var attr = {};
|
||||
record._disabled ? attr.disabled = record._disabled : "";
|
||||
return _react2["default"].createElement(Checkbox, _extends({
|
||||
key: index,
|
||||
className: 'table-checkbox'
|
||||
}, attr, multiSelectConfig, {
|
||||
checked: record._checked,
|
||||
onChange: _this2.onCheckboxChange(text, record, index)
|
||||
}));
|
||||
}
|
||||
}];
|
||||
return _defaultColumns.concat(columns);
|
||||
};
|
||||
|
||||
this.onRowClick = function (record, index, event) {
|
||||
if (record._disabled) return;
|
||||
var _props2 = _this2.props,
|
||||
autoCheckedByClickRows = _props2.autoCheckedByClickRows,
|
||||
onRowClick = _props2.onRowClick;
|
||||
|
||||
if (autoCheckedByClickRows) {
|
||||
_this2.onCheckboxChange('', record, index)();
|
||||
var rowKey = record["key"] ? record["key"] : _this4.getRowKey(record, i);
|
||||
if (checkedObj[rowKey]) {
|
||||
remove(selIds, id);
|
||||
} else {
|
||||
selIds.push(id);
|
||||
}
|
||||
onRowClick && onRowClick(record, index, event);
|
||||
checkedObj[rowKey] = !checkedObj[rowKey];
|
||||
for (var i = 0; i < checkedArray.length; i++) {
|
||||
if (!checkedObj[checkedArray[i]]) {
|
||||
allFlag = false;
|
||||
break;
|
||||
} else {
|
||||
allFlag = true;
|
||||
}
|
||||
}
|
||||
self.setState({
|
||||
checkedAll: allFlag,
|
||||
checkedObj: checkedObj,
|
||||
selIds: selIds
|
||||
});
|
||||
if (typeof getSelectedDataFunc === "function") {
|
||||
getSelectedDataFunc(selIds);
|
||||
}
|
||||
};
|
||||
|
||||
this.handleClick = function (e) {
|
||||
e.stopPropagation();
|
||||
};
|
||||
}, _temp;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports["default"] = newMultiSelect;
|
||||
|
||||
var _multiSelect = require('./multiSelect');
|
||||
|
||||
var _multiSelect2 = _interopRequireDefault(_multiSelect);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
function newMultiSelect(Table, Checkbox) {
|
||||
return (0, _multiSelect2["default"])(Table, Checkbox);
|
||||
}
|
||||
module.exports = exports['default'];
|
||||
|
|
@ -1,168 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
exports["default"] = singleSelect;
|
||||
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _propTypes = require('prop-types');
|
||||
|
||||
var _propTypes2 = _interopRequireDefault(_propTypes);
|
||||
|
||||
var _util = require('./util');
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||
|
||||
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
|
||||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
||||
|
||||
/**
|
||||
* 参数: 单选表头
|
||||
* @param {*} Table
|
||||
* @param {*} Radio
|
||||
*/
|
||||
|
||||
function singleSelect(Table, Radio) {
|
||||
var _class, _temp;
|
||||
|
||||
return _temp = _class = function (_Component) {
|
||||
_inherits(SingleSelect, _Component);
|
||||
|
||||
function SingleSelect(props) {
|
||||
_classCallCheck(this, SingleSelect);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_this.handleRadioClick = function (e) {
|
||||
e.stopPropagation();
|
||||
};
|
||||
|
||||
_this.onRadioChange = function (value, record, index) {
|
||||
var selectedRowIndex = _this.state.selectedRowIndex;
|
||||
|
||||
if (selectedRowIndex === index) {
|
||||
_this.setState({ selectedRowIndex: '' });
|
||||
_this.props.getSelectedDataFunc();
|
||||
} else {
|
||||
_this.setState({ selectedRowIndex: index });
|
||||
_this.props.getSelectedDataFunc(record, index);
|
||||
}
|
||||
};
|
||||
|
||||
_this.getDefaultColumns = function (columns) {
|
||||
var selectedRowIndex = _this.state.selectedRowIndex;
|
||||
|
||||
|
||||
var _defaultColumns = [{
|
||||
title: '',
|
||||
key: "radio",
|
||||
dataIndex: "radio",
|
||||
fixed: "left",
|
||||
width: 49,
|
||||
render: function render(text, record, index) {
|
||||
return _react2["default"].createElement(
|
||||
Radio.RadioGroup,
|
||||
{
|
||||
className: 'table-radio',
|
||||
name: 'table-radio',
|
||||
selectedValue: selectedRowIndex,
|
||||
onClick: _this.handleRadioClick,
|
||||
onChange: function onChange(value) {
|
||||
return _this.onRadioChange(value, record, index);
|
||||
},
|
||||
style: { width: '14px', height: '14px', display: 'block', marginLeft: '4px' } },
|
||||
_react2["default"].createElement(Radio, { value: index })
|
||||
);
|
||||
}
|
||||
}];
|
||||
return _defaultColumns.concat(columns);
|
||||
};
|
||||
|
||||
_this.onRowClick = function (record, index, event) {
|
||||
var _this$props = _this.props,
|
||||
autoCheckedByClickRows = _this$props.autoCheckedByClickRows,
|
||||
onRowClick = _this$props.onRowClick;
|
||||
|
||||
if (autoCheckedByClickRows) {
|
||||
_this.onRadioChange('', record, index);
|
||||
}
|
||||
onRowClick && onRowClick(record, index, event);
|
||||
};
|
||||
|
||||
_this.getRowClassName = function (record, index, event) {
|
||||
var selectedRowIndex = _this.state.selectedRowIndex;
|
||||
|
||||
if (index === selectedRowIndex) {
|
||||
return 'selected';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
_this.state = {
|
||||
data: (0, _util.ObjectAssign)(props.data),
|
||||
selectedRowIndex: props.selectedRowIndex
|
||||
};
|
||||
return _this;
|
||||
}
|
||||
|
||||
SingleSelect.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
if ('data' in nextProps) {
|
||||
this.setState({
|
||||
data: (0, _util.ObjectAssign)(nextProps.data)
|
||||
});
|
||||
}
|
||||
if ('selectedRowIndex' in nextProps) {
|
||||
this.setState({
|
||||
selectedRowIndex: nextProps.selectedRowIndex
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 判断是否是数组
|
||||
* @param {*} o
|
||||
*/
|
||||
|
||||
|
||||
SingleSelect.prototype.isArray = function isArray(o) {
|
||||
return Object.prototype.toString.call(o) == '[object Array]';
|
||||
};
|
||||
// 实现行点击时触发单选框勾选的需求
|
||||
|
||||
|
||||
SingleSelect.prototype.render = function render() {
|
||||
var columns = this.props.columns;
|
||||
var data = this.state.data;
|
||||
|
||||
return _react2["default"].createElement(Table, _extends({}, this.props, {
|
||||
columns: this.getDefaultColumns(columns),
|
||||
data: data,
|
||||
onRowClick: this.onRowClick,
|
||||
rowClassName: this.getRowClassName
|
||||
}));
|
||||
};
|
||||
|
||||
return SingleSelect;
|
||||
}(_react.Component), _class.propTypes = {
|
||||
autoCheckedByClickRows: _propTypes2["default"].bool //行点击时，是否自动勾选单选框
|
||||
}, _class.defaultProps = {
|
||||
prefixCls: "u-table-single-select",
|
||||
getSelectedDataFunc: function getSelectedDataFunc() {},
|
||||
selectedRowIndex: '',
|
||||
autoCheckedByClickRows: true
|
||||
}, _temp;
|
||||
}
|
||||
module.exports = exports['default'];
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
'use strict';
|
||||
"use strict";
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
|
|
@ -8,7 +8,7 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
|
|||
|
||||
exports["default"] = sort;
|
||||
|
||||
var _react = require('react');
|
||||
var _react = require("react");
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
|
|
@ -28,419 +28,127 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
|||
* @param {*} Icon
|
||||
*/
|
||||
function sort(Table, Icon) {
|
||||
var _class, _temp, _initialiseProps;
|
||||
|
||||
var IconType = [{
|
||||
'type': 'flat',
|
||||
'icon': 'uf-symlist',
|
||||
'order': 'flatscend'
|
||||
}, {
|
||||
'type': 'up',
|
||||
'icon': 'uf-sortup',
|
||||
'order': 'ascend'
|
||||
}, {
|
||||
'type': 'down',
|
||||
'icon': 'uf-sortdown',
|
||||
'order': 'descend'
|
||||
}];
|
||||
|
||||
return _temp = _class = function (_Component) {
|
||||
return function (_Component) {
|
||||
_inherits(SortTable, _Component);
|
||||
|
||||
function SortTable(props) {
|
||||
_classCallCheck(this, SortTable);
|
||||
|
||||
var _this2 = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_initialiseProps.call(_this2);
|
||||
_this.toggleSortOrder = function (order, column) {
|
||||
var _this$state = _this.state,
|
||||
sortOrder = _this$state.sortOrder,
|
||||
data = _this$state.data,
|
||||
oldData = _this$state.oldData;
|
||||
|
||||
var flatColumns = [];
|
||||
_this2._toFlatColumn(props.columns, -1, flatColumns);
|
||||
_this2.state = { data: _this2.props.data, columns: props.columns, flatColumns: flatColumns };
|
||||
_this2._initSort();
|
||||
return _this2;
|
||||
var ascend_sort = function ascend_sort(key) {
|
||||
return function (a, b) {
|
||||
return a.key - b.key;
|
||||
};
|
||||
};
|
||||
var descend_sort = function descend_sort(key) {
|
||||
return function (a, b) {
|
||||
return b.key - a.key;
|
||||
};
|
||||
};
|
||||
if (sortOrder === order) {
|
||||
// 切换为未排序状态
|
||||
order = "";
|
||||
}
|
||||
if (!oldData) {
|
||||
oldData = data.concat();
|
||||
}
|
||||
if (order === "ascend") {
|
||||
data = data.sort(function (a, b) {
|
||||
return column.sorter(a, b);
|
||||
});
|
||||
} else if (order === "descend") {
|
||||
data = data.sort(function (a, b) {
|
||||
return column.sorter(b, a);
|
||||
});
|
||||
} else {
|
||||
data = oldData.concat();
|
||||
}
|
||||
_this.setState({
|
||||
sortOrder: order,
|
||||
data: data,
|
||||
oldData: oldData
|
||||
});
|
||||
};
|
||||
|
||||
_this.state = {
|
||||
sortOrder: "",
|
||||
data: _this.props.data
|
||||
};
|
||||
return _this;
|
||||
}
|
||||
|
||||
//默认是前端排序，值为true为后端排序
|
||||
|
||||
SortTable.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
|
||||
if (nextProps.columns !== this.props.columns) {
|
||||
var flatColumns = [];
|
||||
this._toFlatColumn(nextProps.columns, -1, flatColumns);
|
||||
this.setState({ columns: nextProps.columns, flatColumns: flatColumns });
|
||||
}
|
||||
|
||||
if (nextProps.data !== this.props.data) {
|
||||
this.setState({
|
||||
sortOrder: "",
|
||||
data: nextProps.data,
|
||||
oldData: nextProps.data.concat()
|
||||
}, function () {
|
||||
this._initSort(); // 数据更新后需要重新排序
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
*column扁平化处理，适应多表头避免递归操作
|
||||
*
|
||||
*/
|
||||
SortTable.prototype._toFlatColumn = function _toFlatColumn(columns) {
|
||||
var parentIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
|
||||
var flatColumns = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
|
||||
SortTable.prototype.renderColumnsDropdown = function renderColumnsDropdown(columns) {
|
||||
var _this2 = this;
|
||||
|
||||
var _this = this;
|
||||
var children = [];
|
||||
// const flatColumns = _this.state;
|
||||
columns.forEach(function (item, index) {
|
||||
item.parentIndex = parentIndex;
|
||||
children = item.children;
|
||||
flatColumns.push(item);
|
||||
if (children) {
|
||||
// item.children = [];
|
||||
_this._toFlatColumn(children, flatColumns.length - 1, flatColumns);
|
||||
var sortOrder = this.state.sortOrder;
|
||||
|
||||
var prefixCls = this.props.prefixCls || "bee-table";
|
||||
return columns.map(function (originColumn) {
|
||||
var column = _extends({}, originColumn);
|
||||
var sortButton = void 0;
|
||||
if (column.sorter) {
|
||||
var isAscend = sortOrder === "ascend";
|
||||
var isDescend = sortOrder === "descend";
|
||||
sortButton = _react2["default"].createElement(
|
||||
"div",
|
||||
{ className: prefixCls + "-column-sorter" },
|
||||
_react2["default"].createElement(
|
||||
"span",
|
||||
{
|
||||
className: prefixCls + "-column-sorter-up " + (isAscend ? "on" : "off"),
|
||||
title: "\u2191",
|
||||
onClick: function onClick() {
|
||||
return _this2.toggleSortOrder("ascend", column);
|
||||
}
|
||||
},
|
||||
_react2["default"].createElement(Icon, { type: "uf-triangle-up" })
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
"span",
|
||||
{
|
||||
className: prefixCls + "-column-sorter-down " + (isDescend ? "on" : "off"),
|
||||
title: "\u2193",
|
||||
onClick: function onClick() {
|
||||
return _this2.toggleSortOrder("descend", column);
|
||||
}
|
||||
},
|
||||
_react2["default"].createElement(Icon, { type: "uf-triangle-down" })
|
||||
)
|
||||
);
|
||||
}
|
||||
column.title = _react2["default"].createElement(
|
||||
"span",
|
||||
null,
|
||||
column.title,
|
||||
sortButton
|
||||
);
|
||||
return column;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* column 当前的排序的列
|
||||
* 当有的列不排序时，将该列的orderNum置为‘’，并动态的修改其他列的orderNum。
|
||||
*/
|
||||
|
||||
/**
|
||||
* 获取排序字段
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* pre：前一条数据
|
||||
* after:后一条数据
|
||||
* orderType:升序、降序
|
||||
*/
|
||||
|
||||
/**
|
||||
* 多列排序 先排order为1的，其他的基于已排序的数据排
|
||||
*/
|
||||
|
||||
//每个column上添加orderNum属性，不排序时为“”。
|
||||
//点击时orderNum有值则不重新赋值，如果没有值，则取当前column下的有oderNum的length值。并排序
|
||||
//点击置为“”时，动态的设置相关column的orderNum值。并排序
|
||||
|
||||
|
||||
// 默认的比较函数,即字符串比较函数
|
||||
|
||||
// 数值比较函数
|
||||
|
||||
|
||||
// 中文比较函数，按拼音排序
|
||||
|
||||
|
||||
SortTable.prototype._flatToColumn = function _flatToColumn(flatColumns) {
|
||||
var colLen = flatColumns.length;
|
||||
var parentIndex = void 0,
|
||||
rsColumns = [];
|
||||
//每次渲染需要将父类的children置空，避免重复
|
||||
flatColumns.forEach(function (item) {
|
||||
if (item.children) {
|
||||
item.children = [];
|
||||
}
|
||||
});
|
||||
for (var i = colLen - 1; i >= 0; i--) {
|
||||
parentIndex = flatColumns[i].parentIndex;
|
||||
if (parentIndex >= 0) {
|
||||
flatColumns[parentIndex].children.unshift(flatColumns[i]);
|
||||
}
|
||||
}
|
||||
rsColumns = flatColumns.filter(function (item) {
|
||||
return item.parentIndex == -1;
|
||||
});
|
||||
return rsColumns;
|
||||
};
|
||||
|
||||
SortTable.prototype.render = function render() {
|
||||
var columns = this.renderColumnsDropdown(this.state.flatColumns.concat());
|
||||
var columns = this.renderColumnsDropdown(this.props.columns.concat());
|
||||
return _react2["default"].createElement(Table, _extends({}, this.props, { columns: columns, data: this.state.data }));
|
||||
};
|
||||
|
||||
return SortTable;
|
||||
}(_react.Component), _class.defaultProps = { sort: { mode: "single", backSource: false } }, _initialiseProps = function _initialiseProps() {
|
||||
var _this3 = this;
|
||||
|
||||
this._initSort = function () {
|
||||
var flatColumns = _this3.state.flatColumns;
|
||||
|
||||
var needSort = false;
|
||||
flatColumns.forEach(function (item) {
|
||||
if (item.order == 'descend' || item.order == 'ascend') {
|
||||
needSort = true;
|
||||
return;
|
||||
}
|
||||
});
|
||||
if (needSort) {
|
||||
var data = _this3.multiSort(flatColumns);
|
||||
_this3.setState({
|
||||
data: data
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
this.getOrderNum = function () {
|
||||
var orderNum = 0;
|
||||
//todo 1
|
||||
_this3.state.flatColumns.forEach(function (item, index) {
|
||||
if (item.order == "ascend" || item.order == "descend") {
|
||||
orderNum++;
|
||||
}
|
||||
});
|
||||
return orderNum ? orderNum : 1;
|
||||
};
|
||||
|
||||
this.changeOrderNum = function (column) {
|
||||
var flatColumns = _this3.state.flatColumns;
|
||||
//todo 2
|
||||
|
||||
flatColumns.forEach(function (col) {
|
||||
if (col.orderNum > column.orderNum) {
|
||||
col.orderNum--;
|
||||
}
|
||||
if (column.key == col.key) {
|
||||
col.orderNum = "";
|
||||
}
|
||||
});
|
||||
_this3.setState({ flatColumns: flatColumns });
|
||||
};
|
||||
|
||||
this.getOrderCols = function (columns) {
|
||||
var orderCols = [];
|
||||
//todo 3
|
||||
columns.forEach(function (item) {
|
||||
if (item.order == "ascend" || item.order == "descend") {
|
||||
orderCols.push({
|
||||
order: item.order,
|
||||
field: item.dataIndex,
|
||||
orderNum: item.orderNum
|
||||
});
|
||||
}
|
||||
});
|
||||
return orderCols;
|
||||
};
|
||||
|
||||
this._sortBy = function (pre, after, orderCols, orderColslen, currentIndex) {
|
||||
var currentCol = orderCols[currentIndex];
|
||||
var preKey = pre[currentCol.key];
|
||||
var afterKey = after[currentCol.key];
|
||||
var colSortFun = currentCol.sorter;
|
||||
if (typeof colSortFun !== 'function') {
|
||||
colSortFun = function colSortFun() {
|
||||
return preKey - afterKey;
|
||||
};
|
||||
}
|
||||
if (preKey == afterKey && currentIndex + 1 <= orderColslen) {
|
||||
return _this3._sortBy(pre, after, orderCols, orderColslen, currentIndex + 1);
|
||||
}
|
||||
if (currentCol.order == "ascend") {
|
||||
return colSortFun(pre, after);
|
||||
} else {
|
||||
return -colSortFun(pre, after);
|
||||
}
|
||||
};
|
||||
|
||||
this.multiSort = function (columns) {
|
||||
var _state = _this3.state,
|
||||
data = _state.data,
|
||||
_state$oldData = _state.oldData,
|
||||
oldData = _state$oldData === undefined ? [] : _state$oldData;
|
||||
|
||||
var self = _this3;
|
||||
var orderCols = {},
|
||||
orderColslen = 0;
|
||||
//todo 4
|
||||
columns.forEach(function (item) {
|
||||
if (item.orderNum) {
|
||||
orderColslen++;
|
||||
orderCols[item.orderNum] = item;
|
||||
}
|
||||
});
|
||||
if (orderColslen > 0) {
|
||||
data = data.sort(function (a, b) {
|
||||
return self._sortBy(a, b, orderCols, orderColslen, 1);
|
||||
});
|
||||
} else {
|
||||
data = oldData.concat();
|
||||
}
|
||||
return data;
|
||||
};
|
||||
|
||||
this.toggleSortOrder = function (order, column) {
|
||||
var _state2 = _this3.state,
|
||||
data = _state2.data,
|
||||
_state2$oldData = _state2.oldData,
|
||||
oldData = _state2$oldData === undefined ? [] : _state2$oldData,
|
||||
flatColumns = _state2.flatColumns;
|
||||
var sort = _this3.props.sort;
|
||||
|
||||
var seleObj = void 0;
|
||||
if (!oldData) {
|
||||
oldData = data.concat();
|
||||
}
|
||||
var sortCol = void 0;
|
||||
//单列排序，清空其他列的排序
|
||||
if (sort.mode == "single") {
|
||||
//todo 5
|
||||
flatColumns.forEach(function (da) {
|
||||
if (da.key == column.key) {
|
||||
seleObj = da;
|
||||
} else {
|
||||
if (da.order) {
|
||||
da.order = "flatscend";
|
||||
}
|
||||
}
|
||||
});
|
||||
seleObj.order = order;
|
||||
sortCol = [{ order: order, field: seleObj.dataIndex }];
|
||||
//通过后端请求
|
||||
if (sort.backSource && typeof sort.sortFun === "function") {
|
||||
//获取排序的字段和方式
|
||||
sort.sortFun(sortCol);
|
||||
} else {
|
||||
if (order === "ascend") {
|
||||
data = data.sort(function (a, b) {
|
||||
return column.sorter(a, b);
|
||||
});
|
||||
} else if (order === "descend") {
|
||||
data = data.sort(function (a, b) {
|
||||
return column.sorter(b, a);
|
||||
});
|
||||
} else {
|
||||
data = oldData.concat();
|
||||
}
|
||||
typeof sort.sortFun === "function" && sort.sortFun(sortCol, data, oldData);
|
||||
}
|
||||
} else {
|
||||
seleObj = flatColumns.find(function (da) {
|
||||
return da.key == column.key;
|
||||
});
|
||||
seleObj.order = order;
|
||||
if (order === "flatscend") {
|
||||
_this3.changeOrderNum(column);
|
||||
}
|
||||
if (!seleObj.orderNum && (order == "ascend" || order == "descend")) {
|
||||
seleObj.orderNum = _this3.getOrderNum();
|
||||
}
|
||||
sortCol = _this3.getOrderCols(flatColumns);
|
||||
if (sort.backSource && typeof sort.sortFun === "function") {
|
||||
sort.sortFun(sortCol);
|
||||
} else {
|
||||
data = _this3.multiSort(flatColumns);
|
||||
typeof sort.sortFun === "function" && sort.sortFun(sortCol, data, oldData);
|
||||
}
|
||||
}
|
||||
_this3.setState({ data: data, oldData: oldData, flatColumns: flatColumns });
|
||||
};
|
||||
|
||||
this.renderColumnsDropdown = function (columns) {
|
||||
var tempColumns = [],
|
||||
rsColumns = [];
|
||||
tempColumns = columns.map(function (originColumn) {
|
||||
var column = _extends({}, originColumn);
|
||||
return _this3.sortColumn(column);
|
||||
});
|
||||
rsColumns = _this3._flatToColumn(tempColumns);
|
||||
return rsColumns;
|
||||
};
|
||||
|
||||
this.sortColumn = function (column) {
|
||||
var mode = _this3.props.sort.mode;
|
||||
|
||||
var prefixCls = "bee-table";
|
||||
var iconTypeIndex = 0;
|
||||
var sorterClass = "flat";
|
||||
|
||||
if (column.order === "ascend") {
|
||||
iconTypeIndex = 1;
|
||||
sorterClass = "up";
|
||||
} else if (column.order === "descend") {
|
||||
iconTypeIndex = 2;
|
||||
sorterClass = "down";
|
||||
}
|
||||
|
||||
var sortButton = void 0;
|
||||
|
||||
// sorter和sortEnable均可触发排序,且sorter优先级更高
|
||||
if (column.sorter || column.sortEnable) {
|
||||
//大于0说明不是升序就是降序，判断orderNum有没有值，没有值赋值
|
||||
if (column.sortEnable && !column.sorter) {
|
||||
switch (column.fieldType) {
|
||||
case 'number':
|
||||
{
|
||||
column.sorter = _this3.numberSortFn(column.dataIndex);
|
||||
break;
|
||||
}
|
||||
case 'stringChinese':
|
||||
{
|
||||
column.sorter = _this3.chineseSortFn(column.dataIndex);
|
||||
break;
|
||||
}
|
||||
default:
|
||||
{
|
||||
column.sorter = _this3.defaultSortFn(column.dataIndex);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (iconTypeIndex > 0 && !column.orderNum && mode == "multiple") {
|
||||
column.orderNum = _this3.getOrderNum();
|
||||
}
|
||||
sortButton = _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: prefixCls + '-column-sorter' },
|
||||
_react2["default"].createElement(
|
||||
'span',
|
||||
{ className: prefixCls + '-column-sorter-' + sorterClass, onClick: function onClick() {
|
||||
_this3.toggleSortOrder(IconType[iconTypeIndex == 2 ? 0 : iconTypeIndex + 1].order, column);
|
||||
|
||||
if (column.sorterClick) {
|
||||
column.sorterClick(column, IconType[iconTypeIndex].type);
|
||||
}
|
||||
} },
|
||||
_react2["default"].createElement('i', { className: 'uf ' + IconType[iconTypeIndex].icon }),
|
||||
_react2["default"].createElement(
|
||||
'span',
|
||||
null,
|
||||
column.orderNum
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
column.title = _react2["default"].createElement(
|
||||
'span',
|
||||
null,
|
||||
column.title,
|
||||
sortButton
|
||||
);
|
||||
return column;
|
||||
};
|
||||
|
||||
this.defaultSortFn = function (key) {
|
||||
return function (a, b) {
|
||||
return a[key] >= b[key] ? 1 : -1;
|
||||
};
|
||||
};
|
||||
|
||||
this.numberSortFn = function (key) {
|
||||
return function (a, b) {
|
||||
var numberA = parseFloat(a[key]);
|
||||
var numberB = parseFloat(b[key]);
|
||||
return numberA >= numberB ? 1 : -1;
|
||||
};
|
||||
};
|
||||
|
||||
this.chineseSortFn = function (key) {
|
||||
return function (a, b) {
|
||||
return a[key].localeCompare(b[key], 'zh-Hans-CN', { sensitivity: 'accent' });
|
||||
};
|
||||
};
|
||||
}, _temp;
|
||||
}(_react.Component);
|
||||
}
|
||||
module.exports = exports['default'];
|
||||
module.exports = exports["default"];
|
||||
183
build/lib/sum.js
183
build/lib/sum.js
|
|
@ -12,8 +12,6 @@ var _react = require("react");
|
|||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _utils = require("./utils");
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
||||
|
|
@ -24,9 +22,14 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
|
|||
|
||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
|
||||
|
||||
function sum(Table) {
|
||||
var precision = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 2;
|
||||
//创建新列存放 “合计” 字段
|
||||
var columns2 = {
|
||||
title: "合计",
|
||||
key: "showSum",
|
||||
dataIndex: "showSum"
|
||||
};
|
||||
|
||||
function sum(Table) {
|
||||
return function (_React$Component) {
|
||||
_inherits(SumTable, _React$Component);
|
||||
|
||||
|
|
@ -37,6 +40,95 @@ function sum(Table) {
|
|||
//array , tree
|
||||
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
|
||||
|
||||
_this.currentFooter = function () {
|
||||
var data_2 = _this.props.data;
|
||||
var columns_sum = _this.props.columns.concat();
|
||||
var sumCol_index = void 0;
|
||||
//用一个对象存储合计数据，这里合计对象的属性对应每列字段
|
||||
for (var i = 0; i < columns_sum.length; i++) {
|
||||
if (columns_sum[i].sumCol) {
|
||||
sumCol_index = columns_sum[i].dataIndex;
|
||||
break;
|
||||
}
|
||||
}
|
||||
var obj = {};
|
||||
obj[sumCol_index] = 0;
|
||||
if (Array.isArray(data_2)) {
|
||||
for (var _i = 0; _i < data_2.length; _i++) {
|
||||
if (typeof data_2[_i][sumCol_index] == "number" || !isNaN(data_2[_i][sumCol_index])) {
|
||||
obj[sumCol_index] -= -data_2[_i][sumCol_index];
|
||||
} else {
|
||||
obj[sumCol_index] = "";
|
||||
}
|
||||
}
|
||||
}
|
||||
obj.key = "sumData";
|
||||
obj.showSum = "合计";
|
||||
obj = [obj];
|
||||
//将设置的和用户传入的合并属性
|
||||
columns_sum[0] = _extends({}, columns_sum[0], columns2);
|
||||
//除去列为特殊渲染的，避免像a标签这种html代码写入到合计中
|
||||
columns_sum.map(function (item, index) {
|
||||
if (typeof item.render == "function" && !item.sumCol) {
|
||||
item.render = "";
|
||||
}
|
||||
return item;
|
||||
});
|
||||
return _react2["default"].createElement(Table, _extends({}, _this.props, { loading: false, footerScroll: true, showHeader: false, columns: columns_sum, data: obj }));
|
||||
};
|
||||
|
||||
_this.currentTreeFooter = function () {
|
||||
var _this$props = _this.props,
|
||||
columns = _this$props.columns,
|
||||
data = _this$props.data;
|
||||
|
||||
var _columns = [];
|
||||
_this.getNodeItem(columns, _columns);
|
||||
var _countObj = {};
|
||||
var _iteratorNormalCompletion = true;
|
||||
var _didIteratorError = false;
|
||||
var _iteratorError = undefined;
|
||||
|
||||
try {
|
||||
var _loop = function _loop() {
|
||||
var column = _step.value;
|
||||
|
||||
if (typeof column.render == "function" && !column.sumCol) {
|
||||
column.render = "";
|
||||
}
|
||||
if (column.sumCol) {
|
||||
var count = 0;
|
||||
data.forEach(function (da, i) {
|
||||
var _num = da[column.key];
|
||||
count += _num;
|
||||
});
|
||||
_countObj[column.key] = count;
|
||||
}
|
||||
};
|
||||
|
||||
for (var _iterator = _columns[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
|
||||
_loop();
|
||||
}
|
||||
} catch (err) {
|
||||
_didIteratorError = true;
|
||||
_iteratorError = err;
|
||||
} finally {
|
||||
try {
|
||||
if (!_iteratorNormalCompletion && _iterator["return"]) {
|
||||
_iterator["return"]();
|
||||
}
|
||||
} finally {
|
||||
if (_didIteratorError) {
|
||||
throw _iteratorError;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var _sumArray = [_extends({ key: "sumData", showSum: "合计" }, _countObj)];
|
||||
columns[0] = _extends({}, columns[0], columns2);
|
||||
return _react2["default"].createElement(Table, _extends({}, _this.props, { bordered: false, loading: false, footerScroll: true, showHeader: false, columns: columns, data: _sumArray }));
|
||||
};
|
||||
|
||||
_this.getNodeItem = function (array, newArray) {
|
||||
array.forEach(function (da, i) {
|
||||
if (da.children) {
|
||||
|
|
@ -60,88 +152,47 @@ function sum(Table) {
|
|||
return type;
|
||||
};
|
||||
|
||||
_this.addSumData = function () {
|
||||
var _this$props = _this.props,
|
||||
_this$props$data = _this$props.data,
|
||||
data = _this$props$data === undefined ? [] : _this$props$data,
|
||||
_this$props$columns = _this$props.columns,
|
||||
columns = _this$props$columns === undefined ? [] : _this$props$columns;
|
||||
_this.setFooterRender = function () {
|
||||
var columns = _this.props.columns;
|
||||
|
||||
var sumdata = {},
|
||||
newColumns = [],
|
||||
newData = [];
|
||||
if (!Array.isArray(columns)) {
|
||||
console.log("columns type is error !");return;
|
||||
console.log("data type is error !");return;
|
||||
}
|
||||
var type = _this.getTableType();
|
||||
if (type == 'tree') {
|
||||
_this.getNodeItem(columns, newColumns);
|
||||
if (type == "tree") {
|
||||
return _this.currentTreeFooter();
|
||||
} else {
|
||||
newColumns = columns;
|
||||
return _this.currentFooter();
|
||||
}
|
||||
//返回一个新的数据
|
||||
newData = data.slice();
|
||||
newColumns.forEach(function (column, index) {
|
||||
sumdata[column.dataIndex] = "";
|
||||
if (column.sumCol) {
|
||||
var count = 0;
|
||||
data.forEach(function (da, i) {
|
||||
|
||||
var _num = parseFloat(da[column.key]);
|
||||
//排查字段值为NAN情况
|
||||
if (_num == _num) {
|
||||
count += _num;
|
||||
}
|
||||
});
|
||||
var _sum = (0, _utils.DicimalFormater)(count, precision);
|
||||
if (column.sumThousandth) {
|
||||
_sum = _this.toThousands(_sum);
|
||||
}
|
||||
sumdata[column.dataIndex] = _sum;
|
||||
if (column.sumRender && typeof column.sumRender == 'function') {
|
||||
sumdata[column.dataIndex] = column.sumRender(_sum);
|
||||
}
|
||||
}
|
||||
if (index == 0) {
|
||||
sumdata[column.dataIndex] = "合计 " + sumdata[column.dataIndex];
|
||||
}
|
||||
});
|
||||
|
||||
newData.push(sumdata);
|
||||
return newData;
|
||||
};
|
||||
|
||||
_this.tableType = "array";
|
||||
return _this;
|
||||
}
|
||||
|
||||
SumTable.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
var columns = this.props.columns;
|
||||
|
||||
if (columns != nextProps.columns) {
|
||||
this.setFooterRender();
|
||||
}
|
||||
};
|
||||
|
||||
//合计数字列,并将计算所得数据存储到一个obj对象中
|
||||
|
||||
|
||||
/**
|
||||
* 获取当前的表格类型。
|
||||
*
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
SumTable.prototype.toThousands = function toThousands(num) {
|
||||
var result = '',
|
||||
counter = 0;
|
||||
num = (num || 0).toString();
|
||||
var numArr = num.split('.');
|
||||
num = numArr[0];
|
||||
for (var i = num.length - 1; i >= 0; i--) {
|
||||
counter++;
|
||||
result = num.charAt(i) + result;
|
||||
if (!(counter % 3) && i != 0) {
|
||||
result = ',' + result;
|
||||
}
|
||||
}
|
||||
return numArr.length === 1 ? result : result + '.' + numArr[1];
|
||||
};
|
||||
|
||||
SumTable.prototype.render = function render() {
|
||||
return _react2["default"].createElement(Table, _extends({}, this.props, {
|
||||
footerScroll: true,
|
||||
columns: this.props.columns,
|
||||
showSum: true,
|
||||
data: this.addSumData()
|
||||
data: this.props.data,
|
||||
footer: this.setFooterRender
|
||||
}));
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -3,12 +3,7 @@
|
|||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
exports.sortBy = sortBy;
|
||||
exports.compare = compare;
|
||||
exports.ObjectAssign = ObjectAssign;
|
||||
/*
|
||||
* 快速排序，按某个属性，或按“获取排序依据的函数”，来排序.
|
||||
* @method soryBy
|
||||
|
|
@ -43,37 +38,4 @@ function sortBy(arr, prop, desc) {
|
|||
}
|
||||
if (desc) ret.reverse();
|
||||
return ret;
|
||||
};
|
||||
|
||||
/**
|
||||
* 数组对象排序
|
||||
* console.log(arr.sort(compare('age')))
|
||||
* @param {} property
|
||||
*/
|
||||
function compare(property) {
|
||||
return function (a, b) {
|
||||
var value1 = a[property];
|
||||
var value2 = b[property];
|
||||
return value1 - value2;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 简单数组数据对象拷贝
|
||||
* @param {*} obj 要拷贝的对象
|
||||
*/
|
||||
function ObjectAssign(obj) {
|
||||
var b = obj instanceof Array;
|
||||
var tagObj = b ? [] : {};
|
||||
if (b) {
|
||||
//数组
|
||||
obj.forEach(function (da) {
|
||||
var _da = {};
|
||||
_extends(_da, da);
|
||||
tagObj.push(_da);
|
||||
});
|
||||
} else {
|
||||
_extends(tagObj, obj);
|
||||
}
|
||||
return tagObj;
|
||||
}
|
||||
};
|
||||
|
|
@ -1,440 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.Event = exports.EventUtil = exports.tryParseInt = undefined;
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
exports.measureScrollbar = measureScrollbar;
|
||||
exports.debounce = debounce;
|
||||
exports.warningOnce = warningOnce;
|
||||
exports.getOffset = getOffset;
|
||||
exports.addClass = addClass;
|
||||
exports.removeClass = removeClass;
|
||||
exports.ObjectAssign = ObjectAssign;
|
||||
exports.closest = closest;
|
||||
exports.getMaxColChildrenLength = getMaxColChildrenLength;
|
||||
exports.getColChildrenLength = getColChildrenLength;
|
||||
exports.DicimalFormater = DicimalFormater;
|
||||
exports.checkDicimalInvalid = checkDicimalInvalid;
|
||||
exports.formatMoney = formatMoney;
|
||||
exports.convertListToTree = convertListToTree;
|
||||
|
||||
var _warning = require('warning');
|
||||
|
||||
var _warning2 = _interopRequireDefault(_warning);
|
||||
|
||||
var _parseInt = require('lodash/parseInt');
|
||||
|
||||
var _parseInt2 = _interopRequireDefault(_parseInt);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
|
||||
|
||||
var scrollbarSize = void 0;
|
||||
|
||||
// Measure scrollbar width for padding body during modal show/hide
|
||||
var scrollbarMeasure = {
|
||||
position: 'absolute',
|
||||
top: '-9999px',
|
||||
width: '50px',
|
||||
height: '50px',
|
||||
overflow: 'scroll'
|
||||
};
|
||||
|
||||
function measureScrollbar() {
|
||||
var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'vertical';
|
||||
|
||||
|
||||
if (typeof document === 'undefined' || typeof window === 'undefined') {
|
||||
return 0;
|
||||
}
|
||||
var tableDom = document.querySelector('.u-table');
|
||||
var currentDom = tableDom ? tableDom : document.body;
|
||||
|
||||
if (scrollbarSize) {
|
||||
return scrollbarSize;
|
||||
}
|
||||
var scrollDiv = document.createElement('div');
|
||||
Object.keys(scrollbarMeasure).forEach(function (scrollProp) {
|
||||
scrollDiv.style[scrollProp] = scrollbarMeasure[scrollProp];
|
||||
});
|
||||
currentDom.appendChild(scrollDiv);
|
||||
var size = 0;
|
||||
if (direction === 'vertical') {
|
||||
size = scrollDiv.offsetWidth - scrollDiv.clientWidth;
|
||||
} else if (direction === 'horizontal') {
|
||||
size = scrollDiv.offsetHeight - scrollDiv.clientHeight;
|
||||
}
|
||||
|
||||
currentDom.removeChild(scrollDiv);
|
||||
scrollbarSize = size;
|
||||
return scrollbarSize;
|
||||
}
|
||||
|
||||
function debounce(func, wait, immediate) {
|
||||
var timeout = void 0;
|
||||
return function debounceFunc() {
|
||||
var context = this;
|
||||
var args = arguments;
|
||||
// https://fb.me/react-event-pooling
|
||||
if (args[0] && args[0].persist) {
|
||||
args[0].persist();
|
||||
}
|
||||
var later = function later() {
|
||||
timeout = null;
|
||||
if (!immediate) {
|
||||
func.apply(context, args);
|
||||
}
|
||||
};
|
||||
var callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) {
|
||||
func.apply(context, args);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
var warned = {};
|
||||
function warningOnce(condition, format, args) {
|
||||
if (!warned[format]) {
|
||||
(0, _warning2["default"])(condition, format, args);
|
||||
warned[format] = true;
|
||||
}
|
||||
}
|
||||
function getOffset(Node, offset) {
|
||||
if (!offset) {
|
||||
offset = {};
|
||||
offset.top = 0;
|
||||
offset.left = 0;
|
||||
}
|
||||
if (Node == document.body) {
|
||||
return offset;
|
||||
}
|
||||
offset.top += Node.offsetTop;
|
||||
offset.left += Node.offsetLeft;
|
||||
if (Node.offsetParent) return getOffset(Node.offsetParent, offset);else return offset;
|
||||
};
|
||||
|
||||
var tryParseInt = exports.tryParseInt = function tryParseInt(value) {
|
||||
var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
||||
|
||||
var resultValue = (0, _parseInt2["default"])(value);
|
||||
|
||||
if (isNaN(resultValue)) {
|
||||
return defaultValue;
|
||||
}
|
||||
return resultValue;
|
||||
};
|
||||
|
||||
function addClass(elm, className) {
|
||||
if (!className) return;
|
||||
|
||||
var els = Array.isArray(elm) ? elm : [elm];
|
||||
|
||||
els.forEach(function (el) {
|
||||
if (el.classList) {
|
||||
el.classList.add(className.split(' '));
|
||||
} else {
|
||||
el.className += ' ' + className;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function removeClass(elm, className) {
|
||||
if (!className) return;
|
||||
|
||||
var els = Array.isArray(elm) ? elm : [elm];
|
||||
|
||||
els.forEach(function (el) {
|
||||
if (el.classList) {
|
||||
el.classList.remove(className.split(' '));
|
||||
} else {
|
||||
el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 简单数组数据对象拷贝
|
||||
* @param {*} obj 要拷贝的对象
|
||||
*/
|
||||
function ObjectAssign(obj) {
|
||||
var b = obj instanceof Array;
|
||||
var tagObj = b ? [] : {};
|
||||
if (b) {
|
||||
//数组
|
||||
obj.forEach(function (da) {
|
||||
var _da = {};
|
||||
_extends(_da, da);
|
||||
tagObj.push(_da);
|
||||
});
|
||||
} else {
|
||||
_extends(tagObj, obj);
|
||||
}
|
||||
return tagObj;
|
||||
}
|
||||
/**
|
||||
* 获取某个父元素
|
||||
* */
|
||||
|
||||
function closest(ele, selector) {
|
||||
var matches = ele.matches || ele.webkitMatchesSelector || ele.mozMatchesSelector || ele.msMatchesSelector;
|
||||
if (matches) {
|
||||
while (ele) {
|
||||
if (matches.call(ele, selector)) {
|
||||
return ele;
|
||||
} else {
|
||||
ele = ele.parentElement;
|
||||
}
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function getMaxColChildrenLength(columns) {
|
||||
var arr = [];
|
||||
arr = columns.map(function (item, index) {
|
||||
var chilrenLen = 0;
|
||||
if (item.children) {
|
||||
chilrenLen = getColChildrenLength(item.children, chilrenLen + 1);
|
||||
}
|
||||
return chilrenLen;
|
||||
});
|
||||
var max = Math.max.apply(null, arr);
|
||||
return max;
|
||||
}
|
||||
|
||||
function getColChildrenLength(columns, chilrenLen) {
|
||||
columns.forEach(function (item, index) {
|
||||
if (item.children) {
|
||||
chilrenLen = getColChildrenLength(item.children, chilrenLen + 1);
|
||||
}
|
||||
});
|
||||
return chilrenLen;
|
||||
}
|
||||
|
||||
function addHandler(element, type, handler) {
|
||||
var event = null;
|
||||
if (element.addEventListener) {
|
||||
//检测是否为DOM2级方法
|
||||
event = element.addEventListener(type, handler, false);
|
||||
} else if (element.attachEvent) {
|
||||
//检测是否为IE级方法
|
||||
event = element.attachEvent("on" + type, handler);
|
||||
} else {
|
||||
//检测是否为DOM0级方法
|
||||
event = element["on" + type] = handler;
|
||||
}
|
||||
return event;
|
||||
}
|
||||
|
||||
function removeHandler(element, type, handler) {
|
||||
if (element && element.removeEventListener) {
|
||||
//element&& ie11报错兼容
|
||||
element.removeEventListener(type, handler, false);
|
||||
} else if (element && element.detachEvent) {
|
||||
element.detachEvent("on" + type, handler);
|
||||
} else if (element) {
|
||||
element["on" + type] = null;
|
||||
}
|
||||
}
|
||||
|
||||
//获取事件对象的兼容性写法
|
||||
function getEvent(event) {
|
||||
return event ? event : window.event;
|
||||
}
|
||||
|
||||
//获取事件对象目标的兼容性写法
|
||||
function getTarget(event) {
|
||||
return event.target || event.srcElement;
|
||||
}
|
||||
|
||||
function preventDefault(event) {
|
||||
if (event.preventDefault) {
|
||||
event.preventDefault();
|
||||
} else {
|
||||
event.returnValue = false;
|
||||
}
|
||||
}
|
||||
|
||||
function stopPropagation(event) {
|
||||
if (event.stopPropagation) {
|
||||
event.stopPropagation();
|
||||
} else {
|
||||
event.cancelBubble = true;
|
||||
}
|
||||
}
|
||||
|
||||
//用事件冒泡方式，如果想兼容事件捕获只需要添加个bool参数
|
||||
var EventUtil = exports.EventUtil = {
|
||||
addHandler: function addHandler(element, type, handler) {
|
||||
if (element.addEventListener) {
|
||||
element.addEventListener(type, handler, false);
|
||||
} else if (element.attachEvent) {
|
||||
element.attachEvent('on' + type, handler);
|
||||
} else {
|
||||
element['on' + type] = handler;
|
||||
}
|
||||
},
|
||||
|
||||
removeHandler: function removeHandler(element, type, handler) {
|
||||
//element&& ie11报错兼容
|
||||
if (element && element.removeEventListener) {
|
||||
element.removeEventListener(type, handler, false);
|
||||
} else if (element && element.detachEvent) {
|
||||
element.detachEvent('on' + type, handler);
|
||||
} else if (element) {
|
||||
element['on' + type] = null;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 处理精度
|
||||
*/
|
||||
};function DicimalFormater(value, precision) {
|
||||
var value = value + '',
|
||||
precision = precision ? precision : 0;
|
||||
for (var i = 0; i < value.length; i++) {
|
||||
if ("-0123456789.".indexOf(value.charAt(i)) == -1) return "";
|
||||
}
|
||||
return checkDicimalInvalid(value, precision);
|
||||
};
|
||||
function checkDicimalInvalid(value, precision) {
|
||||
if (value == null || isNaN(value)) return "";
|
||||
// 浮点数总位数不能超过10位
|
||||
var digit = parseFloat(value);
|
||||
var result = (digit * Math.pow(10, precision) / Math.pow(10, precision)).toFixed(precision);
|
||||
if (result == "NaN") return "";
|
||||
return result;
|
||||
};
|
||||
|
||||
/**
|
||||
* 将数值转化为货币类型
|
||||
* @param {*} number 数值
|
||||
* @param {*} places 精度
|
||||
* @param {*} thousand 是否展示千分位
|
||||
*/
|
||||
function formatMoney(number, places, thousand) {
|
||||
number = number || 0;
|
||||
places = !isNaN(places = Math.abs(places)) ? places : 2;
|
||||
var thousandSymbol = thousand ? "," : '';
|
||||
var negative = number < 0 ? "-" : "";
|
||||
var i = (0, _parseInt2["default"])(number = Math.abs(+number || 0).toFixed(places), 10) + "";
|
||||
var j = (j = i.length) > 3 ? j % 3 : 0;
|
||||
return negative + (j ? i.substr(0, j) + thousandSymbol : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + thousandSymbol) + (places ? '.' + Math.abs(number - i).toFixed(places).slice(2) : "");
|
||||
}
|
||||
|
||||
var Event = exports.Event = {
|
||||
addHandler: addHandler,
|
||||
removeHandler: removeHandler,
|
||||
getEvent: getEvent,
|
||||
getTarget: getTarget,
|
||||
preventDefault: preventDefault,
|
||||
stopPropagation: stopPropagation
|
||||
|
||||
/**
|
||||
* 将一维数组转换为树结构
|
||||
* @param {*} treeData 扁平结构的 List 数组
|
||||
* @param {*} attr 属性配置设置
|
||||
* @param {*} flatTreeKeysMap 存储所有 key-value 的映射，方便获取各节点信息
|
||||
*/
|
||||
};function convertListToTree(treeData, attr, flatTreeKeysMap) {
|
||||
var tree = []; //存储所有一级节点
|
||||
var resData = treeData,
|
||||
//resData 存储截取的节点 + 父节点（除一级节点外）
|
||||
resKeysMap = {},
|
||||
//resData 的Map映射
|
||||
treeKeysMap = {}; //tree 的Map映射
|
||||
resData.map(function (element) {
|
||||
var key = attr.id;
|
||||
resKeysMap[element[key]] = element;
|
||||
});
|
||||
// 查找父节点，为了补充不完整的数据结构
|
||||
var findParentNode = function findParentNode(node) {
|
||||
var parentKey = node[attr.parendId];
|
||||
if (parentKey !== attr.rootId) {
|
||||
//如果不是根节点，则继续递归
|
||||
var item = flatTreeKeysMap[parentKey];
|
||||
// 用 resKeysMap 判断，避免重复计算某节点的父节点
|
||||
if (resKeysMap.hasOwnProperty(item[attr.id])) return;
|
||||
resData.unshift(item);
|
||||
resKeysMap[item[attr.id]] = item;
|
||||
findParentNode(item);
|
||||
} else {
|
||||
// 用 treeKeysMap 判断，避免重复累加
|
||||
if (!treeKeysMap.hasOwnProperty(node[attr.id])) {
|
||||
var key = node.key,
|
||||
title = node.title,
|
||||
children = node.children,
|
||||
_isLeaf = node._isLeaf,
|
||||
otherProps = _objectWithoutProperties(node, ['key', 'title', 'children', '_isLeaf']);
|
||||
|
||||
var obj = {
|
||||
key: key,
|
||||
title: title,
|
||||
_isLeaf: _isLeaf,
|
||||
children: []
|
||||
};
|
||||
tree.push(_extends(obj, _extends({}, otherProps)));
|
||||
treeKeysMap[key] = node;
|
||||
}
|
||||
}
|
||||
};
|
||||
// 遍历 resData ，找到所有的一级节点
|
||||
for (var i = 0; i < resData.length; i++) {
|
||||
var item = resData[i];
|
||||
if (item[attr.parendId] === attr.rootId && !treeKeysMap.hasOwnProperty(item[attr.id])) {
|
||||
//如果是根节点，就存放进 tree 对象中
|
||||
var key = item.key,
|
||||
title = item.title,
|
||||
children = item.children,
|
||||
otherProps = _objectWithoutProperties(item, ['key', 'title', 'children']);
|
||||
|
||||
var obj = {
|
||||
key: item[attr.id],
|
||||
_isLeaf: item[attr._isLeaf],
|
||||
children: []
|
||||
};
|
||||
tree.push(_extends(obj, _extends({}, otherProps)));
|
||||
treeKeysMap[key] = item;
|
||||
resData.splice(i, 1);
|
||||
i--;
|
||||
} else {
|
||||
//递归查找根节点信息
|
||||
findParentNode(item);
|
||||
}
|
||||
}
|
||||
// console.log('resData',resKeysMap);
|
||||
var run = function run(treeArrs) {
|
||||
if (resData.length > 0) {
|
||||
for (var _i = 0; _i < treeArrs.length; _i++) {
|
||||
for (var j = 0; j < resData.length; j++) {
|
||||
var _item = resData[j];
|
||||
if (treeArrs[_i].key === _item[attr.parendId]) {
|
||||
var _key = _item.key,
|
||||
_title = _item.title,
|
||||
_children = _item.children,
|
||||
_otherProps = _objectWithoutProperties(_item, ['key', 'title', 'children']);
|
||||
|
||||
var _obj = {
|
||||
key: _item[attr.id],
|
||||
_isLeaf: _item[attr._isLeaf],
|
||||
children: []
|
||||
};
|
||||
treeArrs[_i].children.push(_extends(_obj, _extends({}, _otherProps)));
|
||||
resData.splice(j, 1);
|
||||
j--;
|
||||
}
|
||||
}
|
||||
run(treeArrs[_i].children);
|
||||
}
|
||||
}
|
||||
};
|
||||
run(tree);
|
||||
return tree;
|
||||
}
|
||||
|
|
@ -62,6 +62,7 @@ function renderCheckbox(Checkbox, Icon) {
|
|||
var _state = this.state,
|
||||
value = _state.value,
|
||||
editable = _state.editable;
|
||||
var isclickTrigger = this.props.isclickTrigger;
|
||||
|
||||
var cellContent = "";
|
||||
if (editable) {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,123 @@
|
|||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
});
|
||||
exports.tryParseInt = undefined;
|
||||
exports.measureScrollbar = measureScrollbar;
|
||||
exports.debounce = debounce;
|
||||
exports.warningOnce = warningOnce;
|
||||
exports.addClass = addClass;
|
||||
exports.removeClass = removeClass;
|
||||
|
||||
var _warning = require('warning');
|
||||
|
||||
var _warning2 = _interopRequireDefault(_warning);
|
||||
|
||||
var _parseInt = require('lodash/parseInt');
|
||||
|
||||
var _parseInt2 = _interopRequireDefault(_parseInt);
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
var scrollbarWidth = void 0;
|
||||
|
||||
// Measure scrollbar width for padding body during modal show/hide
|
||||
var scrollbarMeasure = {
|
||||
position: 'absolute',
|
||||
top: '-9999px',
|
||||
width: '50px',
|
||||
height: '50px',
|
||||
overflow: 'scroll'
|
||||
};
|
||||
|
||||
function measureScrollbar() {
|
||||
if (typeof document === 'undefined' || typeof window === 'undefined') {
|
||||
return 0;
|
||||
}
|
||||
if (scrollbarWidth) {
|
||||
return scrollbarWidth;
|
||||
}
|
||||
var scrollDiv = document.createElement('div');
|
||||
for (var scrollProp in scrollbarMeasure) {
|
||||
if (scrollbarMeasure.hasOwnProperty(scrollProp)) {
|
||||
scrollDiv.style[scrollProp] = scrollbarMeasure[scrollProp];
|
||||
}
|
||||
}
|
||||
document.body.appendChild(scrollDiv);
|
||||
var width = scrollDiv.offsetWidth - scrollDiv.clientWidth;
|
||||
document.body.removeChild(scrollDiv);
|
||||
scrollbarWidth = width;
|
||||
return scrollbarWidth;
|
||||
}
|
||||
|
||||
function debounce(func, wait, immediate) {
|
||||
var timeout = void 0;
|
||||
return function debounceFunc() {
|
||||
var context = this;
|
||||
var args = arguments;
|
||||
// https://fb.me/react-event-pooling
|
||||
if (args[0] && args[0].persist) {
|
||||
args[0].persist();
|
||||
}
|
||||
var later = function later() {
|
||||
timeout = null;
|
||||
if (!immediate) {
|
||||
func.apply(context, args);
|
||||
}
|
||||
};
|
||||
var callNow = immediate && !timeout;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
if (callNow) {
|
||||
func.apply(context, args);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
var warned = {};
|
||||
function warningOnce(condition, format, args) {
|
||||
if (!warned[format]) {
|
||||
(0, _warning2["default"])(condition, format, args);
|
||||
warned[format] = true;
|
||||
}
|
||||
}
|
||||
|
||||
var tryParseInt = exports.tryParseInt = function tryParseInt(value) {
|
||||
var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
||||
|
||||
var resultValue = (0, _parseInt2["default"])(value);
|
||||
|
||||
if (isNaN(resultValue)) {
|
||||
return defaultValue;
|
||||
}
|
||||
return resultValue;
|
||||
};
|
||||
|
||||
function addClass(elm, className) {
|
||||
if (!className) return;
|
||||
|
||||
var els = Array.isArray(elm) ? elm : [elm];
|
||||
|
||||
els.forEach(function (el) {
|
||||
if (el.classList) {
|
||||
el.classList.add(className.split(' '));
|
||||
} else {
|
||||
el.className += ' ' + className;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function removeClass(elm, className) {
|
||||
if (!className) return;
|
||||
|
||||
var els = Array.isArray(elm) ? elm : [elm];
|
||||
|
||||
els.forEach(function (el) {
|
||||
if (el.classList) {
|
||||
el.classList.remove(className.split(' '));
|
||||
} else {
|
||||
el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
module.exports = {
|
||||
extends: ['@commitlint/config-conventional']
|
||||
}
|
||||
Binary file not shown.
|
|
@ -1,44 +1,22 @@
|
|||
// @import "../node_modules/tinper-bee-core/scss/index.scss";
|
||||
// @import "../node_modules/bee-panel/src/Panel.scss";
|
||||
// @import "../node_modules/bee-layout/src/Layout.scss";
|
||||
// @import "../node_modules/bee-button/src/Button.scss";
|
||||
// @import "../node_modules/bee-transition/src/Transition.scss";
|
||||
@import "../node_modules/tinper-bee-core/scss/index.scss";
|
||||
@import "../node_modules/bee-panel/src/Panel.scss";
|
||||
@import "../node_modules/bee-layout/src/Layout.scss";
|
||||
@import "../node_modules/bee-button/src/Button.scss";
|
||||
@import "../node_modules/bee-transition/src/Transition.scss";
|
||||
// @import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
|
||||
// @import "../node_modules/bee-form-control/src/FormControl.scss";
|
||||
// @import "../node_modules/bee-pagination/src/Pagination.scss";
|
||||
// @import "../node_modules/bee-checkbox/src/Checkbox.scss";
|
||||
// @import "../node_modules/bee-select/src/Select.scss";
|
||||
// @import "../node_modules/bee-popover/src/Popover.scss";
|
||||
// @import "../node_modules/bee-tooltip/src/Tooltip.scss";
|
||||
// @import "../node_modules/bee-message/build/Message.css";
|
||||
// @import "../node_modules/bee-dropdown/build/Dropdown.css";
|
||||
// @import "../node_modules/bee-input-number/build/InputNumber.css";
|
||||
// @import "../node_modules/bee-modal/build/Modal.css";
|
||||
@import "../node_modules/bee-form-control/src/FormControl.scss";
|
||||
@import "../node_modules/bee-pagination/src/Pagination.scss";
|
||||
@import "../node_modules/bee-checkbox/src/Checkbox.scss";
|
||||
@import "../node_modules/bee-select/src/Select.scss";
|
||||
@import "../node_modules/bee-form/src/Form.scss";
|
||||
@import "../node_modules/bee-popover/src/Popover.scss";
|
||||
@import "../node_modules/bee-tooltip/src/Tooltip.scss";
|
||||
@import "../src/Table.scss";
|
||||
|
||||
|
||||
//引入日期控件样式文件
|
||||
// @import "../node_modules/bee-datepicker/src/datepicker.scss";
|
||||
@import "../node_modules/bee-datepicker/src/datepicker.scss";
|
||||
|
||||
.selected{
|
||||
background: #FFF7E7;
|
||||
}
|
||||
|
||||
.demo25{
|
||||
height: 100%;
|
||||
|
||||
.u-table-filter-column-filter-icon{
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
.opt-btns .u-button{
|
||||
margin: 0 4px;
|
||||
color: #fff;
|
||||
background: #505F79;
|
||||
border-color: #505F79;
|
||||
&:hover, &:active{
|
||||
background: #344563;
|
||||
border-color: #505F79;
|
||||
}
|
||||
background: rgb(227,242,253);
|
||||
}
|
||||
|
|
@ -22,13 +22,13 @@ hue-6-2: #e6c07b
|
|||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
color: #424242;
|
||||
background: #FAFAFA;
|
||||
color: #abb2bf;
|
||||
background: #282c34;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #424242;
|
||||
color: #5c6370;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
|
@ -94,131 +94,3 @@ hue-6-2: #e6c07b
|
|||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.component-demo .u-panel {
|
||||
padding: 18px 20px;
|
||||
border: 1px solid #F0F0F0;
|
||||
}
|
||||
.component-demo .u-panel-default .u-panel-heading{
|
||||
background-color: #fff;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.component-demo p{
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.component-demo .component-title{
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.component-demo .component-code{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
color: #E14C46;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.component-demo .u-panel .u-panel-body{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.component-drawerc .pre-js,.component-drawerc .pre-css{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.component-drawerc .drawer-body {
|
||||
padding: 20px 20px;
|
||||
}
|
||||
.component-drawerc .component-code-copy {
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
color: #424242;
|
||||
padding: 10px 0;
|
||||
position: relative;
|
||||
}
|
||||
.component-drawerc .component-code-copy .uf-copy::before{
|
||||
content: "\e6fc";
|
||||
}
|
||||
.component-drawerc .component-code-copy .uf{
|
||||
font-weight: 100;
|
||||
}
|
||||
.component-drawerc .component-code-copy.copy-css{
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.component-drawerc .component-code-copy .u-clipboard{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
/* 抽屉组件样式覆盖 */
|
||||
.component-drawerc{
|
||||
/* position: fixed; */
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1!important;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.component-drawerc .drawer-mask{
|
||||
background-color: rgba(0,0,0,.3);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
|
||||
z-index: 2;
|
||||
}
|
||||
.component-drawerc .drawer-close{
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.component-drawerc .drawer{
|
||||
position: fixed;
|
||||
background-color: #fff;
|
||||
transition: transform 300ms ease-in-out;
|
||||
overflow: auto;
|
||||
}
|
||||
.component-drawerc .drawer-left{
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.component-drawerc .drawer-right{
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
z-index: 3;
|
||||
}
|
||||
.component-drawerc .drawer-top{
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.component-drawerc .drawer-bottom{
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.component-drawerc .drawer-header{
|
||||
padding: 0 20px;
|
||||
border-radius: 0;
|
||||
background: #E14C46;
|
||||
color: #fff;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
.component-drawerc .drawer-header-title{
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
Binary file not shown.
|
|
@ -1,38 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 基本表格
|
||||
* @parent 基础 Basic
|
||||
* @description 当单元格内容过多时，会自动显示省略号，鼠标hover有提示。showRowNum 设置是否显示序号列。
|
||||
* demo0101
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 150 },
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width:100},
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 100},
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100 },
|
||||
{ title: "职级", dataIndex: "e", key: "e", width: 100 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_20190328", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
|
||||
{ a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
|
||||
{ a: "ASVAL_20190312", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
|
||||
];
|
||||
|
||||
class Demo0101 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
showRowNum={true}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo0101;
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 默认无数据展示
|
||||
* @parent 基础 Basic
|
||||
* @description 无数据时默认展示图标，可在`emptyText`方法中自定义展示内容。
|
||||
* demo0102
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "员工编号",
|
||||
dataIndex: "num",
|
||||
key: "num",
|
||||
width: "40%"
|
||||
},
|
||||
{
|
||||
title: "员工姓名",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: "30%"
|
||||
},
|
||||
{
|
||||
title: "部门",
|
||||
dataIndex: "department",
|
||||
key: "department"
|
||||
}
|
||||
];
|
||||
|
||||
const data = [];
|
||||
|
||||
// 在此自定义无数据时的展示内容
|
||||
const emptyFunc = () => 'No Data';
|
||||
|
||||
class Demo02 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
// emptyText={emptyFunc}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo02;
|
||||
|
|
@ -1,141 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 固定表头
|
||||
* @parent 基础 Basic
|
||||
* @description 设置`scroll.y`指定滚动区域的高度，达到固定表头效果。
|
||||
* demo0103
|
||||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
|
||||
const columns03 = [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "index",
|
||||
key: "index",
|
||||
width: 80,
|
||||
render(text, record, index) {
|
||||
return index + 1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "订单编号",
|
||||
dataIndex: "orderCode",
|
||||
key: "orderCode",
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: "供应商名称",
|
||||
dataIndex: "supplierName",
|
||||
key: "supplierName",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
dataIndex: "type_name",
|
||||
key: "type_name",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "采购组织",
|
||||
dataIndex: "purchasing",
|
||||
key: "purchasing",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "采购组",
|
||||
dataIndex: "purchasingGroup",
|
||||
key: "purchasingGroup",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "凭证日期",
|
||||
dataIndex: "voucherDate",
|
||||
key: "voucherDate",
|
||||
width: 200,
|
||||
}
|
||||
];
|
||||
|
||||
const data03 = [
|
||||
{
|
||||
orderCode:"NU0391025",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年03月18日",
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391026",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织a',
|
||||
purchasingGroup:"bb",
|
||||
voucherDate:"2018年02月05日",
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391027",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织b',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年07月01日",
|
||||
key: "3"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391028",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "4",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"cc",
|
||||
voucherDate:"2019年03月01日",
|
||||
key: "4"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391029",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "5",
|
||||
purchasing:'组织d',
|
||||
purchasingGroup:"ss",
|
||||
voucherDate:"2019年02月14日",
|
||||
key: "5"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391030",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织e',
|
||||
purchasingGroup:"zz",
|
||||
voucherDate:"2019年02月18日",
|
||||
key: "6"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391031",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织f',
|
||||
purchasingGroup:"qq",
|
||||
voucherDate:"2019年01月01日",
|
||||
key: "7"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391032",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织g',
|
||||
purchasingGroup:"pp",
|
||||
voucherDate:"2019年01月31日",
|
||||
key: "8"
|
||||
},
|
||||
];
|
||||
|
||||
class Demo03 extends Component {
|
||||
render() {
|
||||
return <Table columns={columns03} data={data03} scroll={{y: 150 }} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo03;
|
||||
|
|
@ -1,111 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 隔行换色
|
||||
* @parent 基础 Basic
|
||||
* @description 可自定义斑马线颜色
|
||||
* demo0104
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
|
||||
const columns04 = [
|
||||
{title: "序号",dataIndex: "index",key: "index",width: 80,
|
||||
render(text, record, index) {
|
||||
return index + 1;
|
||||
}
|
||||
},
|
||||
{title: "订单编号",dataIndex: "orderCode",key: "orderCode",width: 200},
|
||||
{title: "供应商名称",dataIndex: "supplierName",key: "supplierName",width: 200},
|
||||
{title: "类型",dataIndex: "type_name",key: "type_name",width: 200},
|
||||
{title: "采购组织",dataIndex: "purchasing",key: "purchasing",width: 200},
|
||||
{title: "采购组",dataIndex: "purchasingGroup",key: "purchasingGroup",width: 200},
|
||||
{title: "凭证日期",dataIndex: "voucherDate",key: "voucherDate",width: 200}
|
||||
];
|
||||
|
||||
const data04 = [
|
||||
{
|
||||
orderCode:"NU0391025",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年03月18日",
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391026",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织a',
|
||||
purchasingGroup:"bb",
|
||||
voucherDate:"2018年02月05日",
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391027",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织b',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年07月01日",
|
||||
key: "3"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391028",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "4",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"cc",
|
||||
voucherDate:"2019年03月01日",
|
||||
key: "4"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391029",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "5",
|
||||
purchasing:'组织d',
|
||||
purchasingGroup:"ss",
|
||||
voucherDate:"2019年02月14日",
|
||||
key: "5"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391030",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织e',
|
||||
purchasingGroup:"zz",
|
||||
voucherDate:"2019年02月18日",
|
||||
key: "6"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391031",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织f',
|
||||
purchasingGroup:"qq",
|
||||
voucherDate:"2019年01月01日",
|
||||
key: "7"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391032",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织g',
|
||||
purchasingGroup:"pp",
|
||||
voucherDate:"2019年01月31日",
|
||||
key: "8"
|
||||
},
|
||||
];
|
||||
|
||||
class Demo04 extends Component {
|
||||
render() {
|
||||
return <Table
|
||||
className="demo04"
|
||||
columns={columns04}
|
||||
data={data04} />
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo04;
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
.demo04 {
|
||||
&.u-table tr:nth-child(2n){
|
||||
background: #f7f9fb;
|
||||
}
|
||||
&.u-table tr.u-table-row-hover, .u-table tr:hover{
|
||||
background: #ebecf0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 表格 Loading 加载
|
||||
* @parent 基础 Basic
|
||||
* @description loading可以传boolean或者object对象，object为bee-loading组件的参数类型
|
||||
* demo0105
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import {Button,Tooltip} from "tinper-bee";
|
||||
|
||||
const columns05 = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName",fixed:'left'},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 200 }
|
||||
];
|
||||
|
||||
const data05 = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||
];
|
||||
|
||||
class Demo05 extends Component {
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
loading : true
|
||||
}
|
||||
}
|
||||
changeLoading = () => {
|
||||
this.setState({
|
||||
loading : !this.state.loading
|
||||
})
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
className="editable-add-btn"
|
||||
onClick={this.changeLoading}
|
||||
>
|
||||
切换loading
|
||||
</Button>
|
||||
<Table
|
||||
columns={columns05}
|
||||
data={data05}
|
||||
// loading={this.state.loading}或者是boolean
|
||||
loading={{show:this.state.loading}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo05;
|
||||
|
|
@ -1,69 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 单元格内容居中
|
||||
* @parent 基础 Basic
|
||||
* @description 在columns数据中设置`textAlign:'center'`，可实现单元格内容居中展示的效果。默认是居左显示。
|
||||
* demo0106
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "员工编号", dataIndex: "a", key: "a", width: 120, className: "rowClassName",
|
||||
fixed:'left',
|
||||
textAlign:'center',
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "block",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "bottom",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width:100,textAlign:'center'},
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 100,textAlign:'center'},
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100,textAlign:'center' },
|
||||
{ title: "职级", dataIndex: "e", key: "e", width: 100,textAlign:'center' }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
|
||||
];
|
||||
|
||||
class Demo06 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data
|
||||
}
|
||||
}
|
||||
handleClick = () => {
|
||||
console.log('这是第' , this.currentIndex , '行');
|
||||
console.log('内容：' , this.currentRecord);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
bordered
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo06;
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 带边框
|
||||
* @parent 基础 Basic
|
||||
* @description 设置 `bordered` 属性可添加表格边框线。
|
||||
* demo0107
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 150 },
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width:100},
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 100},
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100 },
|
||||
{ title: "职级", dataIndex: "e", key: "e", width: 100 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_20190328", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
|
||||
{ a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
|
||||
{ a: "ASVAL_20190312", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
|
||||
];
|
||||
|
||||
class Demo06 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
bordered
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo06;
|
||||
|
|
@ -1,149 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 横向滚动条
|
||||
* @parent 滚动 Scroll View
|
||||
* @description `scroll.x`的值代表表体内容的实际宽度，默认情况下是根据各列宽度合计出来的。其值超过父元素的宽度时会自动出现滚动条。如设置 `scroll={{ x:1000 }}`，可以手动添加横向滚动条，也可以设置`scroll={{ x:"110%" }}`。
|
||||
* demo0201
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "index",
|
||||
key: "index",
|
||||
width: 100,
|
||||
render(text, record, index) {
|
||||
return index + 1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "订单编号",
|
||||
dataIndex: "orderCode",
|
||||
key: "orderCode",
|
||||
width: 300,
|
||||
},
|
||||
{
|
||||
title: "供应商名称",
|
||||
dataIndex: "supplierName",
|
||||
key: "supplierName",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
dataIndex: "type_name",
|
||||
key: "type_name",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "采购组织",
|
||||
dataIndex: "purchasing",
|
||||
key: "purchasing",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "采购组",
|
||||
dataIndex: "purchasingGroup",
|
||||
key: "purchasingGroup",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "凭证日期",
|
||||
dataIndex: "voucherDate",
|
||||
key: "voucherDate",
|
||||
width: 300,
|
||||
},
|
||||
{
|
||||
title: "审批状态",
|
||||
dataIndex: "approvalState_name",
|
||||
key: "approvalState_name",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "确认状态",
|
||||
dataIndex: "confirmState_name",
|
||||
key: "confirmState_name",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "关闭状态",
|
||||
dataIndex: "closeState_name",
|
||||
key: "closeState_name",
|
||||
width: 100
|
||||
}
|
||||
];
|
||||
|
||||
const data = [
|
||||
{
|
||||
orderCode:"NU0391025",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年03月18日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"执行中",
|
||||
closeState_name:"未关闭",
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391026",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织a',
|
||||
purchasingGroup:"bb",
|
||||
voucherDate:"2018年02月05日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"待确认",
|
||||
closeState_name:"未关闭",
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391027",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织b',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年07月01日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"终止",
|
||||
closeState_name:"已关闭",
|
||||
key: "3"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391028",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "4",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"cc",
|
||||
voucherDate:"2019年03月01日",
|
||||
approvalState_name:"未审批",
|
||||
confirmState_name:"待确认",
|
||||
closeState_name:"未关闭",
|
||||
key: "4"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391029",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "5",
|
||||
purchasing:'组织d',
|
||||
purchasingGroup:"ss",
|
||||
voucherDate:"2019年02月14日",
|
||||
approvalState_name:"未审批",
|
||||
confirmState_name:"待确认",
|
||||
closeState_name:"未关闭",
|
||||
key: "5"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo11 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table columns={columns} data={data} scroll={{ x: "110%" }} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo11;
|
||||
|
|
@ -1,108 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 纵向滚动条
|
||||
* @parent 滚动 Scroll View
|
||||
* @description 通过设置 `scroll.y` 可达到固定表头的效果。如设置 `scroll={{ y:200 }}` 表示表体高度超出 200px 后会显示滚动条。
|
||||
* demo0202
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{title: "序号",dataIndex: "index",key: "index",width: 80,
|
||||
render(text, record, index) {
|
||||
return index + 1;
|
||||
}
|
||||
},
|
||||
{title: "订单编号",dataIndex: "orderCode",key: "orderCode",width: 200},
|
||||
{title: "供应商名称",dataIndex: "supplierName",key: "supplierName",width: 200},
|
||||
{title: "类型",dataIndex: "type_name",key: "type_name",width: 200},
|
||||
{title: "采购组织",dataIndex: "purchasing",key: "purchasing",width: 200},
|
||||
{title: "采购组",dataIndex: "purchasingGroup",key: "purchasingGroup",width: 200},
|
||||
{title: "凭证日期",dataIndex: "voucherDate",key: "voucherDate",width: 200}
|
||||
];
|
||||
|
||||
const data = [
|
||||
{
|
||||
orderCode:"NU0391025",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年03月18日",
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391026",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织a',
|
||||
purchasingGroup:"bb",
|
||||
voucherDate:"2018年02月05日",
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391027",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织b',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年07月01日",
|
||||
key: "3"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391028",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "4",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"cc",
|
||||
voucherDate:"2019年03月01日",
|
||||
key: "4"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391029",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "5",
|
||||
purchasing:'组织d',
|
||||
purchasingGroup:"ss",
|
||||
voucherDate:"2019年02月14日",
|
||||
key: "5"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391030",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织e',
|
||||
purchasingGroup:"zz",
|
||||
voucherDate:"2019年02月18日",
|
||||
key: "6"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391031",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织f',
|
||||
purchasingGroup:"qq",
|
||||
voucherDate:"2019年01月01日",
|
||||
key: "7"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391032",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织g',
|
||||
purchasingGroup:"pp",
|
||||
voucherDate:"2019年01月31日",
|
||||
key: "8"
|
||||
},
|
||||
];
|
||||
class Demo12 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table columns={columns} data={data} scroll={{ y:150 }} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo12;
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 渲染本地数据
|
||||
* @parent 数据操作 Data Opetation
|
||||
* @description 可自定义页头和页脚。
|
||||
* demo0301
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
|
||||
fixed:'left',
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "block",
|
||||
width: "80px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "bottom",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 200 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||
];
|
||||
class Demo21 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
title={currentData => <div>员工信息统计表</div>}
|
||||
footer={currentData => <div>合计: 共{data.length}条数据</div>}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo21;
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 渲染远程数据
|
||||
* @parent 数据操作 Data Opetation
|
||||
* @description 可通过 ajax 请求方式，从服务端读取并展现数据。也可自行接入其他数据处理方式。
|
||||
* demo0302
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button} from "tinper-bee";
|
||||
import reqwest from 'reqwest';
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [{
|
||||
title: 'Name',
|
||||
dataIndex: 'name',
|
||||
sorter: true,
|
||||
render: name => `${name.first} ${name.last}`,
|
||||
width: '20%',
|
||||
}, {
|
||||
title: 'Gender',
|
||||
dataIndex: 'gender',
|
||||
filters: [
|
||||
{ text: 'Male', value: 'male' },
|
||||
{ text: 'Female', value: 'female' },
|
||||
],
|
||||
width: '20%',
|
||||
}, {
|
||||
title: 'Email',
|
||||
dataIndex: 'email',
|
||||
}];
|
||||
|
||||
class Demo22 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: [],
|
||||
loading: false,
|
||||
}
|
||||
}
|
||||
|
||||
fetch = (params = {}) => {
|
||||
console.log('params:', params);
|
||||
this.setState({ loading: true });
|
||||
reqwest({
|
||||
url: 'https://randomuser.me/api',
|
||||
method: 'get',
|
||||
data: {
|
||||
results: 10,
|
||||
...params,
|
||||
},
|
||||
type: 'json',
|
||||
}).then((data) => {
|
||||
this.setState({
|
||||
loading: false,
|
||||
data: data.results,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="demo22">
|
||||
<Button className="opt-btns" colors="secondary" onClick={() => this.fetch()}>点击加载远程数据</Button>
|
||||
<Table
|
||||
columns={columns}
|
||||
data={this.state.data}
|
||||
loading={this.state.loading}
|
||||
scroll={{y:200}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo22;
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
.demo22{
|
||||
.opt-btns{
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 悬浮列
|
||||
* @parent 列渲染 Custom Render
|
||||
* @description 鼠标hover行时呼出操作按钮。
|
||||
* demo0401
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Popconfirm} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 150 },
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 100 },
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||
];
|
||||
|
||||
class Demo11 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
deleteRow=()=>{
|
||||
console.log('删除第' , this.currentIndex , '行');
|
||||
}
|
||||
|
||||
onRowHover=(index,record)=>{
|
||||
this.currentIndex = index;
|
||||
this.currentRecord = record;
|
||||
}
|
||||
|
||||
getHoverContent=(record, index)=>{
|
||||
return (
|
||||
<div className="opt-btns">
|
||||
<Popconfirm key={index} trigger="click" placement="left" content="是否删除当前行？" onClose={this.deleteRow}>
|
||||
<Button size="sm">删除</Button>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
onRowHover={this.onRowHover}
|
||||
hoverContent={this.getHoverContent}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo11;
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
.demo32{
|
||||
.u-table-thead th {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 数据关联
|
||||
* @parent 列渲染 Custom Render
|
||||
* @description 数据行关联自定义菜单显示
|
||||
* demo0404
|
||||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Icon,Checkbox,Dropdown,Menu} from 'tinper-bee';
|
||||
import Table from '../../src';
|
||||
import multiSelect from "../../src/lib/newMultiSelect";
|
||||
import sort from "../../src/lib/sort";
|
||||
|
||||
const { Item } = Menu;
|
||||
|
||||
const data = [
|
||||
{
|
||||
num:"NU0391025",
|
||||
name: "aa",
|
||||
sex: "男",
|
||||
dept:'财务二科',
|
||||
rank:"T1",
|
||||
year:"1",
|
||||
seniority:"1",
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
num:"NU0391026",
|
||||
name: "bb",
|
||||
sex: "女",
|
||||
dept:'财务一科',
|
||||
rank:"M1",
|
||||
year:"1",
|
||||
seniority:"1",
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
num:"NU0391027",
|
||||
name: "dd",
|
||||
sex: "女",
|
||||
dept:'财务一科',
|
||||
rank:"T2",
|
||||
year:"2",
|
||||
seniority:"2",
|
||||
key: "3"
|
||||
}
|
||||
];
|
||||
|
||||
const MultiSelectTable = multiSelect(Table, Checkbox);
|
||||
const ComplexTable = sort(MultiSelectTable, Icon);
|
||||
|
||||
class Demo13 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
getSelectedDataFunc = data => {
|
||||
console.log(data);
|
||||
}
|
||||
onSelect = (item) => {
|
||||
console.log(item);
|
||||
}
|
||||
render() {
|
||||
const menu1 = (
|
||||
<Menu
|
||||
onSelect={this.onSelect}>
|
||||
<Item key="1">模态弹出</Item>
|
||||
<Item key="2">链接跳转</Item>
|
||||
<Item key="3">打开新页</Item>
|
||||
</Menu>);
|
||||
let columns = [
|
||||
{ title: "关联",dataIndex: "link",key: "link",width: 80,
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Dropdown
|
||||
trigger={['click']}
|
||||
overlay={menu1}
|
||||
animation="slide-up"
|
||||
>
|
||||
<Icon type="uf-link" style={{color:'rgb(0, 72, 152)',fontSize:'12px'}}></Icon>
|
||||
</Dropdown>
|
||||
)
|
||||
}
|
||||
},
|
||||
{ title: "员工编号",dataIndex: "num",key: "num",width: 200 },
|
||||
{ title: "员工姓名",dataIndex: "name",key: "name", width: 200},
|
||||
{ title: "员工性别",dataIndex: "sex",key: "sex",width: 200 },
|
||||
{ title: "部门",dataIndex: "dept",key: "dept",width: 200},
|
||||
{ title: "职级",dataIndex: "rank",key: "rank",width: 200},
|
||||
{ title: "工龄",dataIndex: "year",key: "year",width: 200},
|
||||
{ title: "司龄",dataIndex: "seniority",key: "seniority",width: 200}
|
||||
];
|
||||
return <ComplexTable
|
||||
bordered
|
||||
columns={columns}
|
||||
data={data}
|
||||
multiSelect={{type: "checkbox"}}
|
||||
getSelectedDataFunc={this.getSelectedDataFunc}
|
||||
autoCheckedByClickRows={false} //行点击是否触发勾选动作
|
||||
/>
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo13;
|
||||
|
|
@ -1,117 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 列合计（总计）
|
||||
* @parent 列渲染 Custom Render
|
||||
* @description 给需要计算合计的列（columns），设置sumCol值为true即可，支持动态设置数据源。
|
||||
* demo0405
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Checkbox} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
import sum from "../../src/lib/sum.js";
|
||||
import multiSelect from "../../src/lib/multiSelect.js";
|
||||
|
||||
let ComplexTable = multiSelect(sum(Table), Checkbox);
|
||||
//sum第二个参数可以设置精度，例如 sum(Table,4); 设计精度为4
|
||||
let _sum = 0;
|
||||
const columns = [
|
||||
{
|
||||
title: "单据编号",
|
||||
dataIndex: "num",
|
||||
key: "num",
|
||||
width: 120,
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
title: "单据日期",
|
||||
dataIndex: "date",
|
||||
key: "date",
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: "业务类型",
|
||||
dataIndex: "type",
|
||||
key: "type",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "供应商",
|
||||
dataIndex: "supplier",
|
||||
key: "supplier",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "联系人",
|
||||
dataIndex: "contact",
|
||||
key: "contact",
|
||||
},
|
||||
{
|
||||
title: "仓库",
|
||||
dataIndex: "warehouse",
|
||||
key: "warehouse",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: "整单数量",
|
||||
dataIndex: "total",
|
||||
key: "total",
|
||||
width: 100,
|
||||
sumCol: true,
|
||||
sumThousandth: true
|
||||
},
|
||||
{
|
||||
title: "金额",
|
||||
dataIndex: "money",
|
||||
key: "money",
|
||||
width: 100,
|
||||
sumCol: true,
|
||||
sumThousandth: true
|
||||
}
|
||||
];
|
||||
|
||||
function getData(){
|
||||
const data = [];
|
||||
for (let i = 0; i < 5; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
num: "NU039100"+i,
|
||||
date: "2019-03-01",
|
||||
type: "普通采购",
|
||||
supplier: "gys"+i,
|
||||
contact: "Tom",
|
||||
warehouse: "普通仓",
|
||||
total: i + Math.floor(Math.random()*10),
|
||||
money: 2000 * Math.floor(Math.random()*10)
|
||||
});
|
||||
_sum += data[i].total;
|
||||
_sum += data[i].money;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
class Demo35 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: getData(),
|
||||
sum:_sum
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
const {data} = this.state;
|
||||
return (
|
||||
<div>
|
||||
<ComplexTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
bordered
|
||||
footer={currentData => <div>总计: {_sum}</div>}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default Demo35;
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 自定义整行和整列样式表格
|
||||
* @parent 列渲染 Custom Render
|
||||
* @description 某行或某列的样式，严格按照react的样式书写规则，即对象内每一个属性的键为小写驼峰式，值为字符串。此demo展示自定义整行或整列的背景色和字体内容颜色。
|
||||
* demo0406
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 150 },
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width:100},
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 100,style: {backgroundColor:'#e3f2fd',color:'#505F79'}},
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100 },
|
||||
{ title: "职级", dataIndex: "e", key: "e", width: 100 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_20190328", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" ,style:{backgroundColor:'#ffebee',color:'#000'}},
|
||||
{ a: "ASVAL_20190320", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
|
||||
{ a: "ASVAL_20190312", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
|
||||
];
|
||||
|
||||
class Demo0406 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
showRowNum={true}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default Demo0406
|
||||
|
|
@ -1,558 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 行内编辑
|
||||
* @parent 编辑 Editor
|
||||
* @description 可以对行进行编辑的表格
|
||||
* demo0501
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import { Select, Form, FormControl, Button, Icon, Tooltip } from "tinper-bee";
|
||||
const Option = Select.Option;
|
||||
import { RefTreeWithInput } from "ref-tree";
|
||||
|
||||
class StringEditCell extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: props.value
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (!nextProps.editable) {
|
||||
this.setState({ value: nextProps.value });
|
||||
}
|
||||
}
|
||||
|
||||
handleChange = value => {
|
||||
const { onChange, throwError } = this.props;
|
||||
if (value === "") {
|
||||
throwError && throwError(true);
|
||||
} else {
|
||||
throwError && throwError(false);
|
||||
}
|
||||
this.setState({ value });
|
||||
onChange && onChange(value);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { editable, required, colName } = this.props;
|
||||
const { value } = this.state;
|
||||
let cls = "editable-cell-input-wrapper";
|
||||
if (required) cls += " required";
|
||||
if (value === "") cls += " verify-cell";
|
||||
return editable ? (
|
||||
<div className="editable-cell">
|
||||
<div className={cls}>
|
||||
<FormControl value={value} onChange={this.handleChange} />
|
||||
<span className="error">
|
||||
{value === "" ? (
|
||||
<Tooltip
|
||||
inverse
|
||||
className="u-editable-table-tp"
|
||||
placement="bottom"
|
||||
overlay={<div className="tp-content">{"请输入" + colName}</div>}
|
||||
>
|
||||
<Icon className="uf-exc-t required-icon" />
|
||||
</Tooltip>
|
||||
) : null}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
value || " "
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const SELECT_SOURCE = ["男", "女"];
|
||||
|
||||
class SelectEditCell extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: props.value
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (!nextProps.editable) {
|
||||
this.setState({ value: nextProps.value });
|
||||
}
|
||||
}
|
||||
|
||||
handleSelect = value => {
|
||||
this.setState({ value });
|
||||
this.props.onChange && this.props.onChange(value);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { editable } = this.props;
|
||||
const { value } = this.state;
|
||||
let cls = "editable-cell-input-wrapper";
|
||||
return editable ? (
|
||||
<div className="editable-cell">
|
||||
<div className={cls}>
|
||||
<Select value={value} onSelect={this.handleSelect}>
|
||||
{SELECT_SOURCE.map((item, index) => (
|
||||
<Option key={index} value={item}>
|
||||
{item}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
value || " "
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const option = {
|
||||
title: "树",
|
||||
searchable: true,
|
||||
multiple: false,
|
||||
param: {
|
||||
refCode: "neworganizition_tree"
|
||||
},
|
||||
checkStrictly: true,
|
||||
disabled: false,
|
||||
nodeDisplay: record => {
|
||||
return record.refname;
|
||||
},
|
||||
displayField: record => {
|
||||
return record.refname;
|
||||
}, //显示内容的键
|
||||
valueField: "refpk", //真实 value 的键
|
||||
refModelUrl: {
|
||||
treeUrl: "https://mock.yonyoucloud.com/mock/358/blobRefTree",
|
||||
treeUrl: "/pap_basedoc/common-ref/blobRefTree"
|
||||
},
|
||||
matchUrl: "/pap_basedoc/common-ref/matchPKRefJSON",
|
||||
filterUrl: "/pap_basedoc/common-ref/filterRefJSON",
|
||||
lazyModal: false,
|
||||
strictMode: true,
|
||||
lang: "zh_CN",
|
||||
treeData: [
|
||||
{
|
||||
code: "org1",
|
||||
children: [
|
||||
{
|
||||
code: "bj",
|
||||
entityType: "mainEntity",
|
||||
name: "北京总部-简",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "bj",
|
||||
refpk: "5305416e-e7b4-4051-90bd-12d12942295b",
|
||||
id: "5305416e-e7b4-4051-90bd-12d12942295b",
|
||||
isLeaf: "true",
|
||||
refname: "北京总部-简"
|
||||
},
|
||||
{
|
||||
code: "xd",
|
||||
entityType: "mainEntity",
|
||||
name: "新道-简",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "xd",
|
||||
refpk: "b691afff-ea83-4a3f-affa-beb2be9cba52",
|
||||
id: "b691afff-ea83-4a3f-affa-beb2be9cba52",
|
||||
isLeaf: "true",
|
||||
refname: "新道-简"
|
||||
},
|
||||
{
|
||||
code: "yy3",
|
||||
entityType: "mainEntity",
|
||||
name: "test3",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "yy3",
|
||||
refpk: "e75694d9-7c00-4e9e-9573-d29465ae79a9",
|
||||
id: "e75694d9-7c00-4e9e-9573-d29465ae79a9",
|
||||
isLeaf: "true",
|
||||
refname: "test3"
|
||||
},
|
||||
{
|
||||
code: "yy1",
|
||||
entityType: "mainEntity",
|
||||
name: "test1",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "yy1",
|
||||
refpk: "fd32ceeb-57a8-4f44-816e-fa660f5715ab",
|
||||
id: "fd32ceeb-57a8-4f44-816e-fa660f5715ab",
|
||||
isLeaf: "true",
|
||||
refname: "test1"
|
||||
},
|
||||
{
|
||||
code: "dept2",
|
||||
children: [
|
||||
{
|
||||
code: "cs",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "测试部-简",
|
||||
pid: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refcode: "cs",
|
||||
refpk: "cc43a66a-438d-4106-937f-bec44406f771",
|
||||
id: "cc43a66a-438d-4106-937f-bec44406f771",
|
||||
isLeaf: "true",
|
||||
refname: "测试部-简"
|
||||
},
|
||||
{
|
||||
code: "qd",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "前端部-简",
|
||||
pid: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refcode: "qd",
|
||||
refpk: "73a10edd-aae8-4f31-af25-1f48f0a3b344",
|
||||
id: "73a10edd-aae8-4f31-af25-1f48f0a3b344",
|
||||
isLeaf: "true",
|
||||
refname: "前端部-简"
|
||||
}
|
||||
],
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "生产处",
|
||||
refcode: "dept2",
|
||||
refpk: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
id: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refname: "生产处"
|
||||
},
|
||||
{
|
||||
code: "dept1",
|
||||
children: [
|
||||
{
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
{
|
||||
code: "dept1_1",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务一科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_1",
|
||||
refpk: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
id: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
isLeaf: "true",
|
||||
refname: "财务一科"
|
||||
}
|
||||
],
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务处",
|
||||
refcode: "dept1",
|
||||
refpk: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
id: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refname: "财务处"
|
||||
}
|
||||
],
|
||||
entityType: "mainEntity",
|
||||
name: "用友集团",
|
||||
refcode: "org1",
|
||||
refpk: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refname: "用友集团"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const RefEditCell = Form.createForm()(
|
||||
class RefComponentWarpper extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: props.value
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (!nextProps.editable) {
|
||||
this.setState({ value: nextProps.value });
|
||||
}
|
||||
}
|
||||
|
||||
handleSelect = values => {
|
||||
this.setState({ value: values[0] });
|
||||
this.props.onChange && this.props.onChange(values[0]);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { getFieldProps, getFieldError } = this.props.form;
|
||||
const { editable, required } = this.props;
|
||||
const { value } = this.state;
|
||||
let cls = "editable-cell-input-wrapper";
|
||||
if (required) cls += " required";
|
||||
if (getFieldError("refValue")) cls += " verify-cell";
|
||||
return editable ? (
|
||||
<div className={cls}>
|
||||
<RefTreeWithInput
|
||||
{...option}
|
||||
onSave={this.handleSelect}
|
||||
getRefTreeData={this.getRefTreeData}
|
||||
{...getFieldProps("refValue", {
|
||||
initialValue: JSON.stringify(value),
|
||||
rules: [
|
||||
{
|
||||
message: (
|
||||
<Tooltip
|
||||
inverse
|
||||
className="u-editable-table-tp"
|
||||
placement="bottom"
|
||||
overlay={
|
||||
<div className="tp-content">
|
||||
{"请输入" + this.props.colName}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Icon className="uf-exc-t required-icon" />
|
||||
</Tooltip>
|
||||
),
|
||||
pattern: /[^{"refname":"","refpk":""}|{"refpk":"","refname":""}]/
|
||||
}
|
||||
]
|
||||
})}
|
||||
/>
|
||||
<span className="error">{getFieldError("refValue")}</span>
|
||||
</div>
|
||||
) : (
|
||||
value.name || " "
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
let dataSource = [
|
||||
{
|
||||
a: "ASVAL_201903280005",
|
||||
b: "小张",
|
||||
c: "男",
|
||||
d: {
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
a: "ASVAL_201903200004",
|
||||
b: "小明",
|
||||
c: "男",
|
||||
d: {
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
a: "ASVAL_201903120002",
|
||||
b: "小红",
|
||||
c: "女",
|
||||
d: {
|
||||
code: "dept1_1",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务一科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_1",
|
||||
refpk: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
id: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
isLeaf: "true",
|
||||
refname: "财务一科"
|
||||
},
|
||||
key: "3"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo0501 extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.state = {
|
||||
dataSource: dataSource,
|
||||
editingRowsMap: {},
|
||||
currentIndex: null,
|
||||
errorEditFlag: false
|
||||
};
|
||||
|
||||
this.columns = [
|
||||
{
|
||||
title: "员工编号",
|
||||
dataIndex: "a",
|
||||
key: "a"
|
||||
},
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
render: (text, record, index) => (
|
||||
<StringEditCell
|
||||
colName={"名字"}
|
||||
editable={this.state.editingRowsMap[index] || false}
|
||||
required
|
||||
value={text}
|
||||
onChange={this.onCellChange(index, "b")}
|
||||
throwError={this.throwError}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 100,
|
||||
render: (text, record, index) => (
|
||||
<SelectEditCell
|
||||
editable={this.state.editingRowsMap[index] || false}
|
||||
value={text}
|
||||
onChange={this.onCellChange(index, "c")}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "部门",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 215,
|
||||
render: (text, record, index) => (
|
||||
<RefEditCell
|
||||
colName={"部门"}
|
||||
editable={this.state.editingRowsMap[index] || false}
|
||||
required
|
||||
value={record.d}
|
||||
onChange={this.onCellChange(index, "d")}
|
||||
throwError={this.throwError}
|
||||
/>
|
||||
)
|
||||
},
|
||||
// 只是用来占位占宽度的
|
||||
{
|
||||
key: "placeholder"
|
||||
}
|
||||
];
|
||||
|
||||
this.state = {
|
||||
dataSource: dataSource,
|
||||
editingRowsMap: {},
|
||||
currentIndex: null,
|
||||
errorEditFlag: false
|
||||
};
|
||||
|
||||
this.dataBuffer = {};
|
||||
}
|
||||
|
||||
edit = index => () => {
|
||||
if (index === null) return;
|
||||
let editingRowsMap = { ...this.state.editingRowsMap };
|
||||
editingRowsMap[index] = index.toString();
|
||||
// 最好使用深复制
|
||||
this.dataBuffer[index] = { ...this.state.dataSource[index] };
|
||||
this.setState({ editingRowsMap });
|
||||
};
|
||||
|
||||
abortEdit = index => () => {
|
||||
let editingRowsMap = { ...this.state.editingRowsMap };
|
||||
delete editingRowsMap[index];
|
||||
delete this.dataBuffer[index];
|
||||
this.setState({ editingRowsMap });
|
||||
};
|
||||
|
||||
delete = index => () => {
|
||||
if (index === null) return;
|
||||
let { dataSource } = this.state;
|
||||
dataSource.splice(index,1);
|
||||
this.setState({
|
||||
dataSource:dataSource
|
||||
});
|
||||
}
|
||||
|
||||
commitChange = index => () => {
|
||||
if (this.state.errorEditFlag) return;
|
||||
let editingRowsMap = { ...this.state.editingRowsMap };
|
||||
delete editingRowsMap[index];
|
||||
let dataSource = [...this.state.dataSource];
|
||||
dataSource[index] = { ...this.dataBuffer[index] };
|
||||
this.setState({ editingRowsMap, dataSource });
|
||||
};
|
||||
|
||||
onCellChange = (index, key) => value => {
|
||||
this.dataBuffer[index][key] = value;
|
||||
};
|
||||
|
||||
throwError = isError => {
|
||||
if (isError !== this.state.errorEditFlag)
|
||||
this.setState({ errorEditFlag: isError });
|
||||
};
|
||||
|
||||
handleRowHover = (index, record) => {
|
||||
this.currentRecord = record;
|
||||
this.setState({ currentIndex: index });
|
||||
};
|
||||
|
||||
renderRowHover = () => {
|
||||
const { currentIndex } = this.state;
|
||||
return this.state.editingRowsMap[currentIndex] ? (
|
||||
<div className="cancel-btns">
|
||||
<Button
|
||||
size="sm"
|
||||
bordered
|
||||
onClick={this.abortEdit(currentIndex)}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button size="sm" colors="primary" onClick={this.commitChange(currentIndex)}>
|
||||
确认
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="opt-btns">
|
||||
<Button size="sm" onClick={this.edit(currentIndex)}>
|
||||
编辑
|
||||
</Button>
|
||||
<Button size="sm" onClick={this.delete(currentIndex)}>
|
||||
删除
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { dataSource } = this.state;
|
||||
const columns = this.columns;
|
||||
return (
|
||||
<div className="demo0501 u-editable-table">
|
||||
<Table
|
||||
data={dataSource}
|
||||
columns={columns}
|
||||
height={40}
|
||||
onRowHover={this.handleRowHover}
|
||||
hoverContent={this.renderRowHover}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo0501;
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
.demo0501 .u-table {
|
||||
.u-row-hover {
|
||||
.opt-btns,.cancel-btns {
|
||||
button {
|
||||
margin: 0;
|
||||
&:first-child {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-table-row {
|
||||
td {
|
||||
padding: 5px 8px;
|
||||
|
||||
input {
|
||||
font-size: 12px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.u-form-control,
|
||||
.u-select-selection {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.editable-cell-text-wrapper {
|
||||
box-sizing: border-box;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.required {
|
||||
margin-left: 10px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: " ";
|
||||
border: 1px solid #F44336;
|
||||
width: 0;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: -8px;
|
||||
}
|
||||
|
||||
span.u-input-group {
|
||||
display: block
|
||||
}
|
||||
}
|
||||
.verify-cell {
|
||||
padding-right: 25px !important;
|
||||
}
|
||||
|
||||
.required-icon {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
color: #F44336;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.ref-input-wrap {
|
||||
width: 160px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.u-editable-table-tp {
|
||||
.tp-content {
|
||||
color: #F44336;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,502 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 单元格编辑
|
||||
* @parent 编辑 Editor
|
||||
* @description 可以对单元格进行编辑的表格，示例中给出输入框、下拉框、参照的编辑模式，以及两类校验。（通过对 coloums 配置 render 属性实现渲染不同格式的编辑态单元格）
|
||||
* demo0502
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import { Icon, Select, Tooltip, Form } from "tinper-bee";
|
||||
const Option = Select.Option;
|
||||
import { RefTreeWithInput } from "ref-tree";
|
||||
|
||||
class StringEditCell extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: this.props.value,
|
||||
editable: false
|
||||
};
|
||||
this.editWarp = React.createRef();
|
||||
}
|
||||
|
||||
commitChange = () => {
|
||||
if (this.state.value === "") return;
|
||||
this.setState({ editable: false });
|
||||
if (this.props.onChange) {
|
||||
this.props.onChange(this.state.value);
|
||||
}
|
||||
};
|
||||
|
||||
edit = () => {
|
||||
this.setState({ editable: true });
|
||||
};
|
||||
|
||||
handleKeydown = event => {
|
||||
if (event.keyCode == 13) {
|
||||
this.commitChange();
|
||||
}
|
||||
};
|
||||
|
||||
handleChange = e => {
|
||||
if (e.target.value === "") this.editWarp.className += " verify-cell";
|
||||
this.setState({ value: e.target.value });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { value, editable } = this.state;
|
||||
return (
|
||||
<div className="editable-cell">
|
||||
{editable ? (
|
||||
<div ref={el => this.editWarp = el} className="editable-cell-input-wrapper">
|
||||
<input
|
||||
className={value ? "u-form-control" : "u-form-control error"}
|
||||
autoFocus
|
||||
defaultValue={this.props.value}
|
||||
value={value}
|
||||
onKeyDown={this.handleKeydown}
|
||||
onChange={this.handleChange}
|
||||
onBlur={this.commitChange}
|
||||
/>
|
||||
{value === "" ? (
|
||||
<Tooltip
|
||||
inverse
|
||||
className="u-editable-table-tp"
|
||||
placement="bottom"
|
||||
overlay={
|
||||
<div className="tp-content">
|
||||
{"请输入" + this.props.colName}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Icon className="uf-exc-t require" />
|
||||
</Tooltip>
|
||||
) : null}
|
||||
</div>
|
||||
) : (
|
||||
<div className="editable-cell-text-wrapper" onClick={this.edit}>
|
||||
{value || " "}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const SELECT_SOURCE = ["男", "女"];
|
||||
|
||||
class SelectEditCell extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: this.props.value,
|
||||
editable: false
|
||||
};
|
||||
}
|
||||
|
||||
handleSelect = value => {
|
||||
this.setState({ value });
|
||||
};
|
||||
|
||||
commitChange = () => {
|
||||
this.setState({ editable: false });
|
||||
if (this.props.onChange) {
|
||||
this.props.onChange(this.state.value);
|
||||
}
|
||||
};
|
||||
|
||||
edit = () => {
|
||||
this.setState({ editable: true });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { value, editable } = this.state;
|
||||
return (
|
||||
<div className="editable-cell">
|
||||
{editable ? (
|
||||
<div className="editable-cell-input-wrapper">
|
||||
<Select
|
||||
defaultValue={this.props.value}
|
||||
value={value}
|
||||
onSelect={this.handleSelect}
|
||||
onBlur={this.commitChange}
|
||||
autoFocus
|
||||
>
|
||||
{SELECT_SOURCE.map((item, index) => (
|
||||
<Option key={index} value={item}>
|
||||
{item}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
) : (
|
||||
<div className="editable-cell-text-wrapper" onClick={this.edit}>
|
||||
{value || " "}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const option = {
|
||||
title: "树",
|
||||
searchable: true,
|
||||
multiple: false,
|
||||
param: {
|
||||
refCode: "neworganizition_tree"
|
||||
},
|
||||
checkStrictly: true,
|
||||
disabled: false,
|
||||
nodeDisplay: record => {
|
||||
return record.refname;
|
||||
},
|
||||
displayField: record => {
|
||||
return record.refname;
|
||||
}, //显示内容的键
|
||||
valueField: "refpk", //真实 value 的键
|
||||
refModelUrl: {
|
||||
treeUrl: "https://mock.yonyoucloud.com/mock/358/blobRefTree",
|
||||
treeUrl: "/pap_basedoc/common-ref/blobRefTree"
|
||||
},
|
||||
matchUrl: "/pap_basedoc/common-ref/matchPKRefJSON",
|
||||
filterUrl: "/pap_basedoc/common-ref/filterRefJSON",
|
||||
lazyModal: false,
|
||||
strictMode: true,
|
||||
lang: "zh_CN",
|
||||
treeData: [
|
||||
{
|
||||
code: "org1",
|
||||
children: [
|
||||
{
|
||||
code: "bj",
|
||||
entityType: "mainEntity",
|
||||
name: "北京总部-简",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "bj",
|
||||
refpk: "5305416e-e7b4-4051-90bd-12d12942295b",
|
||||
id: "5305416e-e7b4-4051-90bd-12d12942295b",
|
||||
isLeaf: "true",
|
||||
refname: "北京总部-简"
|
||||
},
|
||||
{
|
||||
code: "xd",
|
||||
entityType: "mainEntity",
|
||||
name: "新道-简",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "xd",
|
||||
refpk: "b691afff-ea83-4a3f-affa-beb2be9cba52",
|
||||
id: "b691afff-ea83-4a3f-affa-beb2be9cba52",
|
||||
isLeaf: "true",
|
||||
refname: "新道-简"
|
||||
},
|
||||
{
|
||||
code: "yy3",
|
||||
entityType: "mainEntity",
|
||||
name: "test3",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "yy3",
|
||||
refpk: "e75694d9-7c00-4e9e-9573-d29465ae79a9",
|
||||
id: "e75694d9-7c00-4e9e-9573-d29465ae79a9",
|
||||
isLeaf: "true",
|
||||
refname: "test3"
|
||||
},
|
||||
{
|
||||
code: "yy1",
|
||||
entityType: "mainEntity",
|
||||
name: "test1",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "yy1",
|
||||
refpk: "fd32ceeb-57a8-4f44-816e-fa660f5715ab",
|
||||
id: "fd32ceeb-57a8-4f44-816e-fa660f5715ab",
|
||||
isLeaf: "true",
|
||||
refname: "test1"
|
||||
},
|
||||
{
|
||||
code: "dept2",
|
||||
children: [
|
||||
{
|
||||
code: "cs",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "测试部-简",
|
||||
pid: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refcode: "cs",
|
||||
refpk: "cc43a66a-438d-4106-937f-bec44406f771",
|
||||
id: "cc43a66a-438d-4106-937f-bec44406f771",
|
||||
isLeaf: "true",
|
||||
refname: "测试部-简"
|
||||
},
|
||||
{
|
||||
code: "qd",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "前端部-简",
|
||||
pid: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refcode: "qd",
|
||||
refpk: "73a10edd-aae8-4f31-af25-1f48f0a3b344",
|
||||
id: "73a10edd-aae8-4f31-af25-1f48f0a3b344",
|
||||
isLeaf: "true",
|
||||
refname: "前端部-简"
|
||||
}
|
||||
],
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "生产处",
|
||||
refcode: "dept2",
|
||||
refpk: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
id: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refname: "生产处"
|
||||
},
|
||||
{
|
||||
code: "dept1",
|
||||
children: [
|
||||
{
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
{
|
||||
code: "dept1_1",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务一科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_1",
|
||||
refpk: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
id: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
isLeaf: "true",
|
||||
refname: "财务一科"
|
||||
}
|
||||
],
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务处",
|
||||
refcode: "dept1",
|
||||
refpk: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
id: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refname: "财务处"
|
||||
}
|
||||
],
|
||||
entityType: "mainEntity",
|
||||
name: "用友集团",
|
||||
refcode: "org1",
|
||||
refpk: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refname: "用友集团"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const RefEditCell = Form.createForm()(
|
||||
class RefComponentWarpper extends Component {
|
||||
constructor(props, context) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
value: this.props.value.d,
|
||||
editable: false
|
||||
};
|
||||
this.refWarp = React.createRef();
|
||||
}
|
||||
|
||||
edit = () => {
|
||||
this.setState({ editable: true }, () => this.refWarp.focus());
|
||||
};
|
||||
|
||||
handleSelect = values => {
|
||||
this.setState({ value: values[0] });
|
||||
};
|
||||
|
||||
commitChange = () => {
|
||||
this.setState({ editable: false });
|
||||
if (this.props.onChange) {
|
||||
this.props.onChange(this.state.value);
|
||||
}
|
||||
};
|
||||
|
||||
onRefBlur = e => {
|
||||
// 消除点击子组件，父组件先失焦再聚焦的事件触发过程带来的副作用
|
||||
const __REF_CONTENT__ = document.querySelector("div.ref-core-modal");
|
||||
if (!__REF_CONTENT__ && e.target === this.refWarp) {
|
||||
this.commitChange();
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { getFieldProps, getFieldError } = this.props.form;
|
||||
const { value, editable } = this.state;
|
||||
return editable ? (
|
||||
<div
|
||||
ref={el => (this.refWarp = el)}
|
||||
className="editable-cell-input-wrapper"
|
||||
tabIndex={-1}
|
||||
onBlur={this.onRefBlur}
|
||||
>
|
||||
<RefTreeWithInput
|
||||
{...option}
|
||||
onSave={this.handleSelect}
|
||||
getRefTreeData={this.getRefTreeData}
|
||||
{...getFieldProps("code1", {
|
||||
initialValue: JSON.stringify(value),
|
||||
rules: [
|
||||
{
|
||||
message: "请输入请选择",
|
||||
pattern: /[^{"refname":"","refpk":""}|{"refpk":"","refname":""}]/
|
||||
}
|
||||
]
|
||||
})}
|
||||
/>
|
||||
<span
|
||||
className="error"
|
||||
style={{ display: "block", color: "#f53c32" }}
|
||||
>
|
||||
{getFieldError("code1")}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="editable-cell-text-wrapper" onClick={this.edit}>
|
||||
{value.name || " "}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const dataSource = [
|
||||
{
|
||||
a: "ASVAL_201903280005",
|
||||
b: "小张",
|
||||
c: "男",
|
||||
d: {
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
a: "ASVAL_201903200004",
|
||||
b: "小明",
|
||||
c: "男",
|
||||
d: {
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
a: "ASVAL_201903120002",
|
||||
b: "小红",
|
||||
c: "女",
|
||||
d: {
|
||||
code: "dept1_1",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务一科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_1",
|
||||
refpk: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
id: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
isLeaf: "true",
|
||||
refname: "财务一科"
|
||||
},
|
||||
key: "3"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo0502 extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.columns = [
|
||||
{
|
||||
title: "员工编号",
|
||||
dataIndex: "a",
|
||||
key: "a"
|
||||
},
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
render: (text, record, index) => (
|
||||
<StringEditCell
|
||||
colName="名字"
|
||||
value={text}
|
||||
onChange={this.onCellChange(index, "b")}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 100,
|
||||
render: (text, record, index) => (
|
||||
<SelectEditCell
|
||||
value={text}
|
||||
onChange={this.onCellChange(index, "c")}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "部门",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 215,
|
||||
render: (text, record, index) => (
|
||||
<RefEditCell
|
||||
value={record}
|
||||
onChange={this.onCellChange(index, "d")}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: "placeholder"
|
||||
}
|
||||
];
|
||||
|
||||
this.state = {
|
||||
dataSource: dataSource
|
||||
};
|
||||
}
|
||||
|
||||
onCellChange = (index, key) => {
|
||||
return value => {
|
||||
const { dataSource } = this.state;
|
||||
dataSource[index][key] = value;
|
||||
this.setState({ dataSource }, () => console.dir(this.state.dataSource));
|
||||
};
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="demo0502 u-editable-table">
|
||||
<Table data={this.state.dataSource} columns={this.columns} height={40}/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo0502;
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
.u-editable-table .u-table {
|
||||
.u-table-row {
|
||||
td {
|
||||
padding: 5px 8px;
|
||||
|
||||
input {
|
||||
padding-left: 5px;
|
||||
font-size: 12px;
|
||||
|
||||
&.error {
|
||||
border-color: #F44336;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.editable-cell {
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
&-hover {
|
||||
.editable-cell-text-wrapper {
|
||||
line-height: 19px;
|
||||
}
|
||||
}
|
||||
|
||||
.u-form-control,
|
||||
.u-select-selection {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.editable-cell-text-wrapper {
|
||||
box-sizing: border-box;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.editable-cell-input-wrapper {
|
||||
padding-right: 0;
|
||||
.ref-input-wrap {
|
||||
width: auto !important;
|
||||
height: 30px;
|
||||
.u-input-group{
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.verify-cell {
|
||||
padding-right: 25px !important;
|
||||
}
|
||||
|
||||
.require {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
color: #F44336;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.u-editable-table-tp {
|
||||
.tp-content {
|
||||
color: #F44336;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,577 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 弹框（表单）编辑
|
||||
* @parent 编辑 Editor
|
||||
* @description 以弹框形式以对行进行编辑的表格
|
||||
* demo0503
|
||||
*/
|
||||
|
||||
import React, { Component, PureComponent } from "react";
|
||||
import Table from "../../src";
|
||||
import {
|
||||
Select, Form, FormControl, Button, Icon,
|
||||
Tooltip, Modal, FormGroup, Label, Row, Col
|
||||
} from "tinper-bee";
|
||||
const Option = Select.Option;
|
||||
import { RefTreeWithInput } from "ref-tree";
|
||||
|
||||
function handleFormValueChange(WarpCompProps, field, allFields) {
|
||||
const { onChange, throwError } = WarpCompProps;
|
||||
if (field.value === "") return throwError && throwError(true);
|
||||
throwError && throwError(false);
|
||||
onChange && onChange(field.value);
|
||||
}
|
||||
|
||||
const StringEditCell = Form.createForm({
|
||||
onValuesChange: handleFormValueChange
|
||||
})(PureStringEditCell);
|
||||
|
||||
function PureStringEditCell(props) {
|
||||
const { getFieldProps, getFieldError } = props.form;
|
||||
const { value, required } = props;
|
||||
let cls = "editable-cell";
|
||||
if (required) cls += " required";
|
||||
return (
|
||||
<div className={cls}>
|
||||
<FormControl
|
||||
{...getFieldProps("value", {
|
||||
initialValue: value,
|
||||
validateTrigger: "onBlur",
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: (
|
||||
<Tooltip
|
||||
inverse
|
||||
className="u-editable-table-tp"
|
||||
placement="bottom"
|
||||
overlay={
|
||||
<div className="tp-content">
|
||||
{"请输入" + props.colName}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Icon className="uf-exc-t required-icon" />
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
]
|
||||
})}
|
||||
/>
|
||||
<span className="error">{getFieldError("value")}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const SELECT_SOURCE = ["男", "女"];
|
||||
|
||||
class SelectEditCell extends PureComponent {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
handleSelect = value => {
|
||||
this.props.onChange && this.props.onChange(value);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="editable-cell">
|
||||
<Select value={this.props.value} onSelect={this.handleSelect}>
|
||||
{SELECT_SOURCE.map((item, index) => (
|
||||
<Option key={index} value={item}>
|
||||
{item}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const option = {
|
||||
title: "树",
|
||||
searchable: true,
|
||||
multiple: false,
|
||||
param: {
|
||||
refCode: "neworganizition_tree"
|
||||
},
|
||||
checkStrictly: true,
|
||||
disabled: false,
|
||||
nodeDisplay: record => {
|
||||
return record.refname;
|
||||
},
|
||||
displayField: record => {
|
||||
return record.refname;
|
||||
}, //显示内容的键
|
||||
valueField: "refpk", //真实 value 的键
|
||||
refModelUrl: {
|
||||
treeUrl: "https://mock.yonyoucloud.com/mock/358/blobRefTree",
|
||||
treeUrl: "/pap_basedoc/common-ref/blobRefTree"
|
||||
},
|
||||
matchUrl: "/pap_basedoc/common-ref/matchPKRefJSON",
|
||||
filterUrl: "/pap_basedoc/common-ref/filterRefJSON",
|
||||
lazyModal: false,
|
||||
strictMode: true,
|
||||
lang: "zh_CN",
|
||||
treeData: [
|
||||
{
|
||||
code: "org1",
|
||||
children: [
|
||||
{
|
||||
code: "bj",
|
||||
entityType: "mainEntity",
|
||||
name: "北京总部-简",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "bj",
|
||||
refpk: "5305416e-e7b4-4051-90bd-12d12942295b",
|
||||
id: "5305416e-e7b4-4051-90bd-12d12942295b",
|
||||
isLeaf: "true",
|
||||
refname: "北京总部-简"
|
||||
},
|
||||
{
|
||||
code: "xd",
|
||||
entityType: "mainEntity",
|
||||
name: "新道-简",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "xd",
|
||||
refpk: "b691afff-ea83-4a3f-affa-beb2be9cba52",
|
||||
id: "b691afff-ea83-4a3f-affa-beb2be9cba52",
|
||||
isLeaf: "true",
|
||||
refname: "新道-简"
|
||||
},
|
||||
{
|
||||
code: "yy3",
|
||||
entityType: "mainEntity",
|
||||
name: "test3",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "yy3",
|
||||
refpk: "e75694d9-7c00-4e9e-9573-d29465ae79a9",
|
||||
id: "e75694d9-7c00-4e9e-9573-d29465ae79a9",
|
||||
isLeaf: "true",
|
||||
refname: "test3"
|
||||
},
|
||||
{
|
||||
code: "yy1",
|
||||
entityType: "mainEntity",
|
||||
name: "test1",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "yy1",
|
||||
refpk: "fd32ceeb-57a8-4f44-816e-fa660f5715ab",
|
||||
id: "fd32ceeb-57a8-4f44-816e-fa660f5715ab",
|
||||
isLeaf: "true",
|
||||
refname: "test1"
|
||||
},
|
||||
{
|
||||
code: "dept2",
|
||||
children: [
|
||||
{
|
||||
code: "cs",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "测试部-简",
|
||||
pid: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refcode: "cs",
|
||||
refpk: "cc43a66a-438d-4106-937f-bec44406f771",
|
||||
id: "cc43a66a-438d-4106-937f-bec44406f771",
|
||||
isLeaf: "true",
|
||||
refname: "测试部-简"
|
||||
},
|
||||
{
|
||||
code: "qd",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "前端部-简",
|
||||
pid: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refcode: "qd",
|
||||
refpk: "73a10edd-aae8-4f31-af25-1f48f0a3b344",
|
||||
id: "73a10edd-aae8-4f31-af25-1f48f0a3b344",
|
||||
isLeaf: "true",
|
||||
refname: "前端部-简"
|
||||
}
|
||||
],
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "生产处",
|
||||
refcode: "dept2",
|
||||
refpk: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
id: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refname: "生产处"
|
||||
},
|
||||
{
|
||||
code: "dept1",
|
||||
children: [
|
||||
{
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
{
|
||||
code: "dept1_1",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务一科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_1",
|
||||
refpk: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
id: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
isLeaf: "true",
|
||||
refname: "财务一科"
|
||||
}
|
||||
],
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务处",
|
||||
refcode: "dept1",
|
||||
refpk: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
id: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refname: "财务处"
|
||||
}
|
||||
],
|
||||
entityType: "mainEntity",
|
||||
name: "用友集团",
|
||||
refcode: "org1",
|
||||
refpk: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refname: "用友集团"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const RefEditCell = Form.createForm()(
|
||||
class RefComponentWarpper extends PureComponent {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
handleSelect = values => {
|
||||
const { form, throwError, onChange } = this.props
|
||||
if (form.getFieldError("refValue")) return throwError && throwError(true);
|
||||
throwError && throwError(false);
|
||||
onChange && onChange(values[0]);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { getFieldProps, getFieldError } = this.props.form;
|
||||
const { value, required } = this.props;
|
||||
let cls = "editable-cell";
|
||||
if (required) cls += " required";
|
||||
return (
|
||||
<div className={cls}>
|
||||
<RefTreeWithInput
|
||||
{...option}
|
||||
onSave={this.handleSelect}
|
||||
getRefTreeData={this.getRefTreeData}
|
||||
{...getFieldProps("refValue", {
|
||||
initialValue: JSON.stringify(value),
|
||||
rules: [
|
||||
{
|
||||
message: (
|
||||
<Tooltip
|
||||
inverse
|
||||
className="u-editable-table-tp"
|
||||
placement="bottom"
|
||||
overlay={
|
||||
<div className="tp-content">
|
||||
{"请输入" + this.props.colName}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Icon className="uf-exc-t required-icon" />
|
||||
</Tooltip>
|
||||
),
|
||||
pattern: /[^{"refname":"","refpk":""}|{"refpk":"","refname":""}]/
|
||||
}
|
||||
]
|
||||
})}
|
||||
/>
|
||||
<span className="error">{getFieldError("refValue")}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
class EditModal extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: this.props.data,
|
||||
errorEditFlag: false
|
||||
};
|
||||
|
||||
// 属性名对应 columns 属性中的 key 值
|
||||
this.renderElm = {
|
||||
b: (record, index) => (
|
||||
<StringEditCell
|
||||
colName={"名字"}
|
||||
required={true}
|
||||
value={record.b}
|
||||
onChange={this.onFieldChange("b")}
|
||||
throwError={this.throwError}
|
||||
/>
|
||||
),
|
||||
|
||||
c: (record, index) => (
|
||||
<SelectEditCell
|
||||
value={record.c}
|
||||
onChange={this.onFieldChange("c")}
|
||||
/>
|
||||
),
|
||||
d: (record, index) => (
|
||||
<RefEditCell
|
||||
colName={"部门"}
|
||||
required={true}
|
||||
value={record.d}
|
||||
onChange={this.onFieldChange("d")}
|
||||
throwError={this.throwError}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
onFieldChange = field => value => {
|
||||
let data = { ...this.state.data };
|
||||
data[field] = value;
|
||||
this.setState({ data });
|
||||
}
|
||||
|
||||
submitChange = () => {
|
||||
if (this.state.errorEditFlag) return;
|
||||
const { onSubmit, onHide, currentIndex } = this.props;
|
||||
onSubmit && onSubmit(this.state.data, currentIndex);
|
||||
onHide && onHide();
|
||||
}
|
||||
|
||||
throwError = isError => {
|
||||
if (isError !== this.state.errorEditFlag)
|
||||
this.setState({ errorEditFlag: isError });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { show, onHide, columns, currentIndex } = this.props;
|
||||
const { data } = this.state;
|
||||
return (
|
||||
<Modal
|
||||
show={show}
|
||||
onHide={onHide}
|
||||
style={{ width: 800 }}
|
||||
className="demo0503-m-b"
|
||||
>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>编辑行</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<Form>
|
||||
<Row style={{ width: 770, margin: "0 auto" }}>
|
||||
{
|
||||
columns.map((item, index) => {
|
||||
return (
|
||||
<Col sm={6} md={6} lg={6} style={{ padding: "0 0 0 10px" }} key={index}>
|
||||
<FormGroup>
|
||||
<Label><Icon type="uf-mi" className='mast'></Icon>{item.title}</Label>
|
||||
{this.renderElm[item.key] &&
|
||||
this.renderElm[item.key](
|
||||
data,
|
||||
currentIndex
|
||||
)}
|
||||
{!this.renderElm[item.key] && (
|
||||
<div className="editable-cell">
|
||||
<FormControl
|
||||
defaultValue={data[item.dataIndex]}
|
||||
disabled={true}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</FormGroup>
|
||||
</Col>
|
||||
);
|
||||
})
|
||||
}
|
||||
</Row>
|
||||
</Form>
|
||||
</Modal.Body>
|
||||
<Modal.Footer style={{textAlign: "right"}}>
|
||||
<Button
|
||||
style={{ marginRight: 8 }}
|
||||
bordered
|
||||
onClick={onHide}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button colors="primary" onClick={this.submitChange}>
|
||||
确认
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
let dataSource = [
|
||||
{
|
||||
a: "ASVAL_201903280005",
|
||||
b: "小张",
|
||||
c: "男",
|
||||
d: {
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
a: "ASVAL_201903200004",
|
||||
b: "小明",
|
||||
c: "男",
|
||||
d: {
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
a: "ASVAL_201903120002",
|
||||
b: "小红",
|
||||
c: "女",
|
||||
d: {
|
||||
code: "dept1_1",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务一科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_1",
|
||||
refpk: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
id: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
isLeaf: "true",
|
||||
refname: "财务一科"
|
||||
},
|
||||
key: "3"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo0503 extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
// 编辑态下每个单元格对应的编辑模式组件写在 EditModal 组件中，以 key 值对应
|
||||
this.columns = [
|
||||
{
|
||||
title: "员工编号",
|
||||
dataIndex: "a",
|
||||
key: "a"
|
||||
},
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "b",
|
||||
key: "b"
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "部门",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 215,
|
||||
render: (text, record, index) => record.d.name
|
||||
}
|
||||
];
|
||||
|
||||
this.state = {
|
||||
dataSource: dataSource,
|
||||
isEditing: false,
|
||||
currentIndex: null
|
||||
};
|
||||
}
|
||||
|
||||
edit = () => {
|
||||
if (this.state.currentIndex === null) return;
|
||||
this.setState({ isEditing: true });
|
||||
};
|
||||
|
||||
abortEdit = () => {
|
||||
this.setState({ isEditing: false });
|
||||
};
|
||||
|
||||
commitChange = (editedRowData, rowIndex) => {
|
||||
console.log(editedRowData)
|
||||
console.log(rowIndex)
|
||||
let dataSource = [...this.state.dataSource];
|
||||
dataSource[rowIndex] = editedRowData;
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
|
||||
handleRowHover = (index, record) => {
|
||||
this.setState({ currentIndex: index });
|
||||
};
|
||||
|
||||
hideEditModal = () => {
|
||||
this.setState({ isEditing: false });
|
||||
}
|
||||
|
||||
renderRowHover = () => {
|
||||
return (
|
||||
<div className="opt-btns">
|
||||
<Button size="sm" onClick={this.edit}>
|
||||
编辑
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
render() {
|
||||
const { dataSource, isEditing, currentIndex } = this.state;
|
||||
const columns = this.columns;
|
||||
return (
|
||||
<div className="demo0503 u-editable-table">
|
||||
<Table
|
||||
data={dataSource}
|
||||
columns={columns}
|
||||
height={40}
|
||||
onRowHover={this.handleRowHover}
|
||||
hoverContent={this.renderRowHover}
|
||||
/>
|
||||
{
|
||||
isEditing ? (
|
||||
<EditModal
|
||||
show={isEditing}
|
||||
onHide={this.hideEditModal}
|
||||
columns={columns}
|
||||
data={dataSource[currentIndex]}
|
||||
onSubmit={this.commitChange}
|
||||
currentIndex={currentIndex}
|
||||
/>
|
||||
) : null
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo0503;
|
||||
|
|
@ -1,60 +0,0 @@
|
|||
.demo0503-m-b {
|
||||
|
||||
&.u-modal .u-modal-body {
|
||||
padding: 16px 0;
|
||||
background: #f7f9fb;
|
||||
}
|
||||
|
||||
.u-form-group {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.u-form-control {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.editable-cell {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 265px;
|
||||
padding-right: 25px;
|
||||
}
|
||||
|
||||
.ref-input-wrap {
|
||||
width: 240px !important;
|
||||
}
|
||||
|
||||
.u-label {
|
||||
display: block;
|
||||
float: left;
|
||||
text-align: right;
|
||||
width: 110px;
|
||||
box-sizing: border-box;
|
||||
padding-right: 10px;
|
||||
font-size: 12px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
.mast {
|
||||
padding: 0;
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
.required-icon {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
color: #F44336;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.u-editable-table-tp {
|
||||
z-index: 9999 !important;
|
||||
|
||||
.tp-content {
|
||||
color: #F44336;
|
||||
}
|
||||
}
|
||||
.ref-core-button .u-button:first-child{
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
|
@ -1,534 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 全表格编辑
|
||||
* @parent 编辑 Editor
|
||||
* @description 以行内编辑形式对全表数据进行编辑
|
||||
* demo0505
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import { Select, Form, FormControl, Button, Icon, Tooltip } from "tinper-bee";
|
||||
const Option = Select.Option;
|
||||
import { RefTreeWithInput } from "ref-tree";
|
||||
|
||||
class StringEditCell extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: props.value
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (!nextProps.editable) {
|
||||
this.setState({ value: nextProps.value });
|
||||
}
|
||||
}
|
||||
|
||||
handleChange = value => {
|
||||
const { onChange, throwError } = this.props;
|
||||
if (value === "") {
|
||||
throwError && throwError(true);
|
||||
} else {
|
||||
throwError && throwError(false);
|
||||
}
|
||||
this.setState({ value });
|
||||
onChange && onChange(value);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { editable, required, colName, isEdited } = this.props;
|
||||
const { value } = this.state;
|
||||
let cls = "editable-cell-input-wrapper";
|
||||
if (required) cls += " required";
|
||||
if (value === "") cls += " verify-cell";
|
||||
if (isEdited) cls += " edited";
|
||||
return editable ? (
|
||||
<div className="editable-cell">
|
||||
<div className={cls}>
|
||||
<FormControl className={!value && "error"} value={value} onChange={this.handleChange} />
|
||||
<span className="error">
|
||||
{value === "" ? (
|
||||
<Tooltip
|
||||
inverse
|
||||
className="u-editable-table-tp"
|
||||
placement="bottom"
|
||||
overlay={<div className="tp-content">{"请输入" + colName}</div>}
|
||||
>
|
||||
<Icon className="uf-exc-t required-icon" />
|
||||
</Tooltip>
|
||||
) : null}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
value || " "
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const SELECT_SOURCE = ["男", "女"];
|
||||
|
||||
class SelectEditCell extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: props.value
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (!nextProps.editable) {
|
||||
this.setState({ value: nextProps.value });
|
||||
}
|
||||
}
|
||||
|
||||
handleSelect = value => {
|
||||
this.setState({ value });
|
||||
this.props.onChange && this.props.onChange(value);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { editable, isEdited } = this.props;
|
||||
const { value } = this.state;
|
||||
let cls = "editable-cell-input-wrapper";
|
||||
if (isEdited) cls += " edited";
|
||||
return editable ? (
|
||||
<div className="editable-cell">
|
||||
<div className={cls}>
|
||||
<Select value={value} onSelect={this.handleSelect}>
|
||||
{SELECT_SOURCE.map((item, index) => (
|
||||
<Option key={index} value={item}>
|
||||
{item}
|
||||
</Option>
|
||||
))}
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
value || " "
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const option = {
|
||||
title: "树",
|
||||
searchable: true,
|
||||
multiple: false,
|
||||
param: {
|
||||
refCode: "neworganizition_tree"
|
||||
},
|
||||
checkStrictly: true,
|
||||
disabled: false,
|
||||
nodeDisplay: record => {
|
||||
return record.refname;
|
||||
},
|
||||
displayField: record => {
|
||||
return record.refname;
|
||||
}, //显示内容的键
|
||||
valueField: "refpk", //真实 value 的键
|
||||
refModelUrl: {
|
||||
treeUrl: "https://mock.yonyoucloud.com/mock/358/blobRefTree",
|
||||
treeUrl: "/pap_basedoc/common-ref/blobRefTree"
|
||||
},
|
||||
matchUrl: "/pap_basedoc/common-ref/matchPKRefJSON",
|
||||
filterUrl: "/pap_basedoc/common-ref/filterRefJSON",
|
||||
lazyModal: false,
|
||||
strictMode: true,
|
||||
lang: "zh_CN",
|
||||
treeData: [
|
||||
{
|
||||
code: "org1",
|
||||
children: [
|
||||
{
|
||||
code: "bj",
|
||||
entityType: "mainEntity",
|
||||
name: "北京总部-简",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "bj",
|
||||
refpk: "5305416e-e7b4-4051-90bd-12d12942295b",
|
||||
id: "5305416e-e7b4-4051-90bd-12d12942295b",
|
||||
isLeaf: "true",
|
||||
refname: "北京总部-简"
|
||||
},
|
||||
{
|
||||
code: "xd",
|
||||
entityType: "mainEntity",
|
||||
name: "新道-简",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "xd",
|
||||
refpk: "b691afff-ea83-4a3f-affa-beb2be9cba52",
|
||||
id: "b691afff-ea83-4a3f-affa-beb2be9cba52",
|
||||
isLeaf: "true",
|
||||
refname: "新道-简"
|
||||
},
|
||||
{
|
||||
code: "yy3",
|
||||
entityType: "mainEntity",
|
||||
name: "test3",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "yy3",
|
||||
refpk: "e75694d9-7c00-4e9e-9573-d29465ae79a9",
|
||||
id: "e75694d9-7c00-4e9e-9573-d29465ae79a9",
|
||||
isLeaf: "true",
|
||||
refname: "test3"
|
||||
},
|
||||
{
|
||||
code: "yy1",
|
||||
entityType: "mainEntity",
|
||||
name: "test1",
|
||||
pid: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refcode: "yy1",
|
||||
refpk: "fd32ceeb-57a8-4f44-816e-fa660f5715ab",
|
||||
id: "fd32ceeb-57a8-4f44-816e-fa660f5715ab",
|
||||
isLeaf: "true",
|
||||
refname: "test1"
|
||||
},
|
||||
{
|
||||
code: "dept2",
|
||||
children: [
|
||||
{
|
||||
code: "cs",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "测试部-简",
|
||||
pid: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refcode: "cs",
|
||||
refpk: "cc43a66a-438d-4106-937f-bec44406f771",
|
||||
id: "cc43a66a-438d-4106-937f-bec44406f771",
|
||||
isLeaf: "true",
|
||||
refname: "测试部-简"
|
||||
},
|
||||
{
|
||||
code: "qd",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "前端部-简",
|
||||
pid: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refcode: "qd",
|
||||
refpk: "73a10edd-aae8-4f31-af25-1f48f0a3b344",
|
||||
id: "73a10edd-aae8-4f31-af25-1f48f0a3b344",
|
||||
isLeaf: "true",
|
||||
refname: "前端部-简"
|
||||
}
|
||||
],
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "生产处",
|
||||
refcode: "dept2",
|
||||
refpk: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
id: "0ebbb6d8-250a-4d1d-a019-7ae951629a2c",
|
||||
refname: "生产处"
|
||||
},
|
||||
{
|
||||
code: "dept1",
|
||||
children: [
|
||||
{
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
{
|
||||
code: "dept1_1",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务一科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_1",
|
||||
refpk: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
id: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
isLeaf: "true",
|
||||
refname: "财务一科"
|
||||
}
|
||||
],
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务处",
|
||||
refcode: "dept1",
|
||||
refpk: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
id: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refname: "财务处"
|
||||
}
|
||||
],
|
||||
entityType: "mainEntity",
|
||||
name: "用友集团",
|
||||
refcode: "org1",
|
||||
refpk: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
refname: "用友集团"
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
const RefEditCell = Form.createForm()(
|
||||
class RefComponentWarpper extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: props.value
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (!nextProps.editable) {
|
||||
this.setState({ value: nextProps.value });
|
||||
}
|
||||
}
|
||||
|
||||
handleSelect = values => {
|
||||
this.setState({ value: values[0] });
|
||||
this.props.onChange && this.props.onChange(values[0]);
|
||||
};
|
||||
|
||||
render() {
|
||||
const { getFieldProps, getFieldError } = this.props.form;
|
||||
const { editable, required, isEdited } = this.props;
|
||||
const { value } = this.state;
|
||||
let cls = "editable-cell-input-wrapper";
|
||||
if (required) cls += " required";
|
||||
if (getFieldError("refValue")) cls += " verify-cell";
|
||||
if (isEdited) cls += " edited";
|
||||
return editable ? (
|
||||
<div className={cls}>
|
||||
<RefTreeWithInput
|
||||
{...option}
|
||||
onSave={this.handleSelect}
|
||||
getRefTreeData={this.getRefTreeData}
|
||||
{...getFieldProps("refValue", {
|
||||
initialValue: JSON.stringify(value),
|
||||
rules: [
|
||||
{
|
||||
message: (
|
||||
<Tooltip
|
||||
inverse
|
||||
className="u-editable-table-tp"
|
||||
placement="bottom"
|
||||
overlay={
|
||||
<div className="tp-content">
|
||||
{"请输入" + this.props.colName}
|
||||
</div>
|
||||
}
|
||||
>
|
||||
<Icon className="uf-exc-t required-icon" />
|
||||
</Tooltip>
|
||||
),
|
||||
pattern: /[^{"refname":"","refpk":""}|{"refpk":"","refname":""}]/
|
||||
}
|
||||
]
|
||||
})}
|
||||
/>
|
||||
<span className="error">{getFieldError("refValue")}</span>
|
||||
</div>
|
||||
) : (
|
||||
value.name || " "
|
||||
);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
let dataSource = [
|
||||
{
|
||||
a: "ASVAL_201903280005",
|
||||
b: "小张",
|
||||
c: "男",
|
||||
d: {
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
a: "ASVAL_201903200004",
|
||||
b: "小明",
|
||||
c: "男",
|
||||
d: {
|
||||
code: "dept1_2",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务二科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_2",
|
||||
refpk: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
id: "55b7fff1-6579-4ca9-92b7-3271d288b9f3",
|
||||
isLeaf: "true",
|
||||
refname: "财务二科"
|
||||
},
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
a: "ASVAL_201903120002",
|
||||
b: "小红",
|
||||
c: "女",
|
||||
d: {
|
||||
code: "dept1_1",
|
||||
entityType: "subEntity",
|
||||
organization_id: "a4cf0601-51e6-4012-9967-b7a64a4b2d47",
|
||||
name: "财务一科",
|
||||
pid: "95b60f35-ed0b-454e-b948-fb45ae30b911",
|
||||
refcode: "dept1_1",
|
||||
refpk: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
id: "9711d912-3184-4063-90c5-1facc727813c",
|
||||
isLeaf: "true",
|
||||
refname: "财务一科"
|
||||
},
|
||||
key: "3"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo0505 extends Component {
|
||||
constructor(props, context) {
|
||||
super(props);
|
||||
this.columns = [
|
||||
{
|
||||
title: "员工编号",
|
||||
dataIndex: "a",
|
||||
key: "a"
|
||||
},
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
render: (text, record, index) => (
|
||||
<StringEditCell
|
||||
colName={"名字"}
|
||||
editable={this.state.isEditingAll}
|
||||
isEdited={record.isEdited.b || false}
|
||||
required
|
||||
value={text}
|
||||
onChange={this.onCellChange(index, "b")}
|
||||
throwError={this.throwError}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 100,
|
||||
render: (text, record, index) => (
|
||||
<SelectEditCell
|
||||
editable={this.state.isEditingAll}
|
||||
isEdited={record.isEdited.c || false}
|
||||
value={text}
|
||||
onChange={this.onCellChange(index, "c")}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "部门",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 215,
|
||||
render: (text, record, index) => (
|
||||
<RefEditCell
|
||||
colName={"部门"}
|
||||
editable={this.state.isEditingAll}
|
||||
isEdited={record.isEdited.d || false}
|
||||
required
|
||||
value={record.d}
|
||||
onChange={this.onCellChange(index, "d")}
|
||||
throwError={this.throwError}
|
||||
/>
|
||||
)
|
||||
},
|
||||
// 只是用来占位占宽度的
|
||||
{
|
||||
key: "placeholder"
|
||||
}
|
||||
];
|
||||
|
||||
// 用于记录数据是否被修改
|
||||
dataSource.forEach(item => (item.isEdited = {}));
|
||||
this.state = {
|
||||
dataSource: dataSource,
|
||||
isEditingAll: false,
|
||||
currentIndex: null,
|
||||
errorEditFlag: false
|
||||
};
|
||||
|
||||
// 用于记录编辑前数据
|
||||
this.dataBuffer = [];
|
||||
}
|
||||
|
||||
edit = () => {
|
||||
this.dataBuffer = [];
|
||||
// 最好使用深复制
|
||||
this.state.dataSource.forEach((item, index) => {
|
||||
this.dataBuffer.push({ ...item });
|
||||
});
|
||||
this.setState({ isEditingAll: true });
|
||||
};
|
||||
|
||||
abortEdit = () => {
|
||||
let originData = [...this.state.dataSource];
|
||||
originData.forEach(item => (item.isEdited = {}));
|
||||
this.setState({
|
||||
isEditingAll: false,
|
||||
dataSource: originData
|
||||
});
|
||||
};
|
||||
|
||||
commitChange = () => {
|
||||
if (this.state.errorEditFlag) return;
|
||||
const newData = this.dataBuffer.map(item => {
|
||||
return Object.assign({}, item, { isEdited: {} });
|
||||
});
|
||||
this.setState({ isEditingAll: false, dataSource: newData });
|
||||
};
|
||||
|
||||
onCellChange = (index, key) => value => {
|
||||
this.dataBuffer[index][key] = value;
|
||||
this.dataBuffer[index].isEdited[key] = true;
|
||||
};
|
||||
|
||||
throwError = isError => {
|
||||
if (isError !== this.state.errorEditFlag)
|
||||
this.setState({ errorEditFlag: isError });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { dataSource, isEditingAll } = this.state;
|
||||
const columns = this.columns;
|
||||
return (
|
||||
<div className="demo0505 u-editable-table">
|
||||
<div className="toolbar-btns">
|
||||
{isEditingAll ? (
|
||||
<React.Fragment>
|
||||
<Button colors="primary" onClick={this.commitChange}>
|
||||
确认
|
||||
</Button>
|
||||
<Button
|
||||
bordered
|
||||
onClick={this.abortEdit}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
</React.Fragment>
|
||||
) : (
|
||||
<Button colors="secondary" onClick={this.edit}>
|
||||
编辑全表
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<Table data={dataSource} columns={columns} height={40} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo0505;
|
||||
|
|
@ -1,90 +0,0 @@
|
|||
.demo0505 {
|
||||
|
||||
.toolbar-btns {
|
||||
margin-bottom: 8px;
|
||||
|
||||
.u-button {
|
||||
&:first-child {
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-table {
|
||||
.u-row-select {
|
||||
background-color: #FFF7E7;
|
||||
}
|
||||
.u-table-row {
|
||||
td {
|
||||
padding: 5px 8px;
|
||||
|
||||
input {
|
||||
font-size: 12px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.u-form-control,
|
||||
.u-select-selection {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.editable-cell-text-wrapper {
|
||||
box-sizing: border-box;
|
||||
line-height: 20px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.required {
|
||||
margin-left: 10px;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: " ";
|
||||
border: 1px solid #F44336;
|
||||
width: 0;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
left: -8px;
|
||||
}
|
||||
|
||||
span.u-input-group {
|
||||
display: block
|
||||
}
|
||||
}
|
||||
|
||||
.verify-cell {
|
||||
padding-right: 25px !important;
|
||||
}
|
||||
|
||||
.edited::after {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: #f44336 transparent transparent #f44336;
|
||||
}
|
||||
|
||||
.required-icon {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
color: #F44336;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.ref-input-wrap {
|
||||
width: 160px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.u-editable-table-tp {
|
||||
.tp-content {
|
||||
color: #F44336;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,126 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 左侧固定列
|
||||
* @parent 列操作-锁定 Fixed
|
||||
* @description 固定列到表格的左侧
|
||||
* demo0601
|
||||
*/
|
||||
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "index",
|
||||
key: "index",
|
||||
width: 80,
|
||||
fixed: 'left',
|
||||
render(text, record, index){return index + 1}
|
||||
},
|
||||
{
|
||||
title: "订单编号",
|
||||
dataIndex: "orderCode",
|
||||
key: "orderCode",
|
||||
width: 100,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: "供应商名称",
|
||||
dataIndex: "supplierName",
|
||||
key: "supplierName",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
dataIndex: "type_name",
|
||||
key: "type_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "采购组织",
|
||||
dataIndex: "purchasing",
|
||||
key: "purchasing",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "采购组",
|
||||
dataIndex: "purchasingGroup",
|
||||
key: "purchasingGroup",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "凭证日期",
|
||||
dataIndex: "voucherDate",
|
||||
key: "voucherDate",
|
||||
width: 200,
|
||||
|
||||
},
|
||||
{
|
||||
title: "审批状态",
|
||||
dataIndex: "approvalState_name",
|
||||
key: "approvalState_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "确认状态",
|
||||
dataIndex: "confirmState_name",
|
||||
key: "confirmState_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "关闭状态",
|
||||
dataIndex: "closeState_name",
|
||||
key: "closeState_name",
|
||||
width: 100
|
||||
}
|
||||
];
|
||||
|
||||
const data = [
|
||||
{
|
||||
orderCode:"NU0391025",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年03月18日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"执行中",
|
||||
closeState_name:"未关闭",
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391026",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织a',
|
||||
purchasingGroup:"bb",
|
||||
voucherDate:"2018年02月05日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"待确认",
|
||||
closeState_name:"未关闭",
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391027",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织b',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年07月01日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"终止",
|
||||
closeState_name:"已关闭",
|
||||
key: "3"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo51 extends Component {
|
||||
render() {
|
||||
return <Table columns={columns} data={data} scroll={{ x: "110%", y: 240 }} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo51;
|
||||
|
|
@ -1,180 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 右侧固定列
|
||||
* @parent 列操作-锁定 Fixed
|
||||
* @description 固定列到表格的右侧
|
||||
* demo0602
|
||||
*/
|
||||
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Popconfirm} from 'tinper-bee';
|
||||
import Table from '../../src';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "index",
|
||||
key: "index",
|
||||
width: 80,
|
||||
fixed: 'left',
|
||||
render(text, record, index){return index + 1}
|
||||
},
|
||||
{
|
||||
title: "订单编号",
|
||||
dataIndex: "orderCode",
|
||||
key: "orderCode",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: "供应商名称",
|
||||
dataIndex: "supplierName",
|
||||
key: "supplierName",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
dataIndex: "type_name",
|
||||
key: "type_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "采购组织",
|
||||
dataIndex: "purchasing",
|
||||
key: "purchasing",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "采购组",
|
||||
dataIndex: "purchasingGroup",
|
||||
key: "purchasingGroup",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "凭证日期",
|
||||
dataIndex: "voucherDate",
|
||||
key: "voucherDate",
|
||||
width: 200,
|
||||
|
||||
},
|
||||
{
|
||||
title: "审批状态",
|
||||
dataIndex: "approvalState_name",
|
||||
key: "approvalState_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "确认状态",
|
||||
dataIndex: "confirmState_name",
|
||||
key: "confirmState_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "关闭状态",
|
||||
dataIndex: "closeState_name",
|
||||
key: "closeState_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width:100,
|
||||
fixed: "right",
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<div className='operation-btn'>
|
||||
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，订单编号为:' + record.orderCode}>
|
||||
<a href="javascript:;" >
|
||||
一些操作
|
||||
</a>
|
||||
</Popconfirm>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const data = [
|
||||
{
|
||||
orderCode:"NU0391025",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年03月18日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"执行中",
|
||||
closeState_name:"未关闭",
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391026",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织a',
|
||||
purchasingGroup:"bb",
|
||||
voucherDate:"2018年02月05日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"待确认",
|
||||
closeState_name:"未关闭",
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391027",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织b',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年07月01日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"终止",
|
||||
closeState_name:"已关闭",
|
||||
key: "3"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391025",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年03月18日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"执行中",
|
||||
closeState_name:"未关闭",
|
||||
key: "4"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391026",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织a',
|
||||
purchasingGroup:"bb",
|
||||
voucherDate:"2018年02月05日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"待确认",
|
||||
closeState_name:"未关闭",
|
||||
key: "5"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391027",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织b',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年07月01日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"终止",
|
||||
closeState_name:"已关闭",
|
||||
key: "6"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo52 extends Component {
|
||||
render() {
|
||||
return <Table columns={columns} data={data} dragborder={true} scroll={{ y: 200 }} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo52;
|
||||
|
|
@ -1,198 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 动态设置列锁定、解除锁定
|
||||
* @parent 列操作-锁定 Fixed
|
||||
* @description 动态设置columns中数据的fixed属性值【fixed: "left"，fixed: "right"】。
|
||||
* demo0603
|
||||
*/
|
||||
import React, { Component } from 'react';
|
||||
import {Icon,Menu,Dropdown} from "tinper-bee";
|
||||
|
||||
import Table from '../../src';
|
||||
|
||||
const { Item } = Menu;
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "index",
|
||||
key: "index",
|
||||
width: 85,
|
||||
fixed: 'left',
|
||||
render(text, record, index){return index + 1}
|
||||
},
|
||||
{
|
||||
title: "订单编号",
|
||||
dataIndex: "orderCode",
|
||||
key: "orderCode",
|
||||
width: 120,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: "供应商名称",
|
||||
dataIndex: "supplierName",
|
||||
key: "supplierName",
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
dataIndex: "type_name",
|
||||
key: "type_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "采购组织",
|
||||
dataIndex: "purchasing",
|
||||
key: "purchasing",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "采购组",
|
||||
dataIndex: "purchasingGroup",
|
||||
key: "purchasingGroup",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "凭证日期",
|
||||
dataIndex: "voucherDate",
|
||||
key: "voucherDate",
|
||||
width: 200,
|
||||
|
||||
},
|
||||
{
|
||||
title: "审批状态",
|
||||
dataIndex: "approvalState_name",
|
||||
key: "approvalState_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "确认状态",
|
||||
dataIndex: "confirmState_name",
|
||||
key: "confirmState_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "关闭状态",
|
||||
dataIndex: "closeState_name",
|
||||
key: "closeState_name",
|
||||
width: 100
|
||||
}
|
||||
];
|
||||
|
||||
const data = [
|
||||
{
|
||||
orderCode:"NU0391025",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年03月18日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"执行中",
|
||||
closeState_name:"未关闭",
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391026",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织a',
|
||||
purchasingGroup:"bb",
|
||||
voucherDate:"2018年02月05日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"待确认",
|
||||
closeState_name:"未关闭",
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391027",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织b',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年07月01日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"终止",
|
||||
closeState_name:"已关闭",
|
||||
key: "3"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo24 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
columns:columns
|
||||
}
|
||||
}
|
||||
|
||||
onSelect = ({key,item})=>{
|
||||
console.log(`${key} selected`); //获取key
|
||||
let currentObject = item.props.data; //获取选中对象的数据
|
||||
let {columns} = this.state;
|
||||
let fixedCols = [];
|
||||
let nonColums = [];
|
||||
columns.find(da=>{
|
||||
if(da.key == key){
|
||||
da.fixed?delete da.fixed:da.fixed = 'left';
|
||||
}
|
||||
da.fixed?fixedCols.push(da):nonColums.push(da);
|
||||
});
|
||||
|
||||
columns = [...fixedCols,...nonColums]
|
||||
|
||||
this.setState({
|
||||
columns
|
||||
});
|
||||
}
|
||||
//表头增加下拉菜单
|
||||
renderColumnsDropdown(columns) {
|
||||
const icon ='uf-arrow-down';
|
||||
|
||||
return columns.map((originColumn,index) => {
|
||||
let column = Object.assign({}, originColumn);
|
||||
let menuInfo = [], title='锁定';
|
||||
if(originColumn.fixed){
|
||||
title = '解锁'
|
||||
}
|
||||
menuInfo.push({
|
||||
info:title,
|
||||
key:originColumn.key,
|
||||
index:index
|
||||
});
|
||||
const menu = (
|
||||
<Menu onSelect={this.onSelect} >{
|
||||
menuInfo.map(da=>{ return <Item key={da.key} data={da} >{da.info}</Item> })
|
||||
}
|
||||
</Menu>)
|
||||
column.title = (
|
||||
<span className='title-con drop-menu'>
|
||||
{column.title}
|
||||
<Dropdown
|
||||
trigger={['click']}
|
||||
overlay={menu}
|
||||
animation="slide-up"
|
||||
>
|
||||
<Icon type={icon}/>
|
||||
</Dropdown>
|
||||
|
||||
</span>
|
||||
);
|
||||
return column;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
let {columns} = this.state;
|
||||
columns = this.renderColumnsDropdown(columns);
|
||||
return(
|
||||
<div className="demo24">
|
||||
<Table columns={columns} data={data} scroll={{ x: "110%", y: 240 }}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo24;
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
th{
|
||||
.drop-menu{
|
||||
.uf{
|
||||
font-size: 12px;
|
||||
visibility: hidden;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
&:hover{
|
||||
.uf{
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 按条件、值过滤
|
||||
* @parent 列操作-过滤 Filter
|
||||
* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤。可在控制台查看序列化后的参数字符串。
|
||||
* demo0701
|
||||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
|
||||
const columns = [
|
||||
{ title: "姓名", width: 180, dataIndex: "name", key: "name", filterType: "text", filterDropdown: "show" },
|
||||
{ title: "年龄", width: 150, dataIndex: "age", key: "age", filterType: "dropdown", filterDropdown: "show" },
|
||||
{ title: "日期", width: 200, dataIndex: "date", key: "date", filterType: "date", filterDropdown: "show", format: "YYYY-MM-DD" },
|
||||
{ title: "居住地址", width: 150, dataIndex: "address", key: "address", filterType: "dropdown", filterDropdown: "show" },
|
||||
{ title: "备注", dataIndex: "mark", key: "mark" }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{
|
||||
key: "1",
|
||||
name: "John Brown",
|
||||
age: 32,
|
||||
date: "2018-09-19",
|
||||
address: "朝阳区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "朝阳区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "东城区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "4",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "东城区",
|
||||
mark: "无"
|
||||
}, {
|
||||
key: "5",
|
||||
name: "John Brown",
|
||||
age: 32,
|
||||
date: "2018-09-18",
|
||||
address: "海淀区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "6",
|
||||
name: "Jim Green",
|
||||
age: 48,
|
||||
date: "2018-09-18",
|
||||
address: "海淀区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "7",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "海淀区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "8",
|
||||
name: "Jim Green",
|
||||
age: 38,
|
||||
date: "2018-09-18",
|
||||
address: "海淀区",
|
||||
mark: "无"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo23 extends Component {
|
||||
handlerFilterChange = (key, val, condition) => {
|
||||
console.log('参数：key=', key, ' value=', val, 'condition=', condition);
|
||||
}
|
||||
|
||||
handlerFilterClear = (key) => {
|
||||
console.log('清除条件', key);
|
||||
}
|
||||
render() {
|
||||
return <Table
|
||||
onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()
|
||||
onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()
|
||||
filterDelay={500}//输入文本多少ms触发回调函数，默认300ms
|
||||
filterable={true}//是否开启过滤数据功能
|
||||
bordered
|
||||
columns={columns}
|
||||
data={data} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo23;
|
||||
|
|
@ -1,170 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 复杂表格中行过滤
|
||||
* @parent 列操作-过滤 Filter
|
||||
* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等
|
||||
* demo0702
|
||||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Icon,Checkbox} from "tinper-bee";
|
||||
|
||||
import Table from '../../src';
|
||||
import multiSelect from '../../src/lib/multiSelect';
|
||||
import sort from '../../src/lib/sort';
|
||||
|
||||
const data = [
|
||||
{
|
||||
key: "1",
|
||||
name: "John Brown",
|
||||
age: 32,
|
||||
date: "2018-09-19",
|
||||
address: "朝阳区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "朝阳区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "东城区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "4",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "东城区",
|
||||
mark: "无"
|
||||
}, {
|
||||
key: "5",
|
||||
name: "John Brown",
|
||||
age: 32,
|
||||
date: "2018-09-18",
|
||||
address: "海淀区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "6",
|
||||
name: "Jim Green",
|
||||
age: 48,
|
||||
date: "2018-09-18",
|
||||
address: "海淀区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "7",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "海淀区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "8",
|
||||
name: "Jim Green",
|
||||
age: 38,
|
||||
date: "2018-09-18",
|
||||
address: "海淀区",
|
||||
mark: "无"
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
const MultiSelectTable = multiSelect(Table, Checkbox);
|
||||
const ComplexTable = sort(MultiSelectTable, Icon);
|
||||
class Demo24 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
dropdownvalue: []
|
||||
}
|
||||
}
|
||||
handlerFilterChange = (key, val, condition) => {
|
||||
console.log('参数：key=', key, ' value=', val, 'condition=', condition);
|
||||
}
|
||||
|
||||
handlerFilterClear = (key) => {
|
||||
console.log('清除条件', key);
|
||||
}
|
||||
getSelectedDataFunc = data => {
|
||||
console.log(data);
|
||||
}
|
||||
onSelect = (item) => {
|
||||
console.log(item);
|
||||
}
|
||||
|
||||
render() {
|
||||
let multiObj = {
|
||||
type: "checkbox"
|
||||
};
|
||||
let columns = [
|
||||
{
|
||||
title: "姓名",
|
||||
width: 180,
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
filterType: "text",//输入框类型
|
||||
filterDropdown: "show",//显示条件
|
||||
filterDropdownType: "string"//字符条件
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
width: 180,
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
filterType: "number",//输入框类型
|
||||
filterDropdown: "show",//显示条件
|
||||
filterDropdownType: "number"//字符条件
|
||||
},
|
||||
{
|
||||
title: "日期",
|
||||
width: 190,
|
||||
dataIndex: "date",
|
||||
key: "date",
|
||||
filterType: "date",//输入框类型
|
||||
filterDropdown: "show",//显示条件
|
||||
filterDropdownType: "string"//字符条件
|
||||
},
|
||||
{
|
||||
title: "时间范围",
|
||||
width: 290,
|
||||
dataIndex: "mark",
|
||||
key: "mark",
|
||||
filterType: "daterange",//输入框类型
|
||||
filterDropdown: "show",//显示条件
|
||||
filterDropdownType: "number"//字符条件
|
||||
},
|
||||
{
|
||||
title: "地址",
|
||||
width: 100,
|
||||
dataIndex: "address",
|
||||
key: "address",
|
||||
filterType: "dropdown",//输入框类型
|
||||
filterDropdown: "show",//显示条件
|
||||
filterDropdownType: "number"//字符条件
|
||||
}
|
||||
];
|
||||
return <ComplexTable
|
||||
onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()
|
||||
onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()
|
||||
filterDelay={500}//输入文本多少ms触发回调函数，默认500ms
|
||||
filterable={true}//是否开启过滤数据功能
|
||||
getSelectedDataFunc={this.getSelectedDataFunc}
|
||||
bordered
|
||||
multiSelect={multiObj}
|
||||
columns={columns}
|
||||
data={data} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo24;
|
||||
|
|
@ -1,141 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 列过滤面板
|
||||
* @parent 列操作-隐藏 Hide
|
||||
* @description 点击表头右侧按钮，设置显示或隐藏表格列。可以自定义设置显示某列，通过ifshow属性控制，默认值为true（显示表格所有列）。afterFilter方法为列过滤后触发的回调函数。
|
||||
* demo0802
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Icon,Popover} from "tinper-bee";
|
||||
import Table from '../../src';
|
||||
import filterColumn from '../../src/lib/filterColumn';
|
||||
import sum from '../../src/lib/sum';
|
||||
|
||||
const data = [
|
||||
{
|
||||
orderCode:"NU0391025",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年03月18日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"执行中",
|
||||
closeState_name:"未关闭",
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391026",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织a',
|
||||
purchasingGroup:"bb",
|
||||
voucherDate:"2018年02月05日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"待确认",
|
||||
closeState_name:"未关闭",
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391027",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织b',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年07月01日",
|
||||
approvalState_name:"已审批",
|
||||
confirmState_name:"终止",
|
||||
closeState_name:"已关闭",
|
||||
key: "3"
|
||||
}
|
||||
];
|
||||
|
||||
const FilterColumnTable = filterColumn(Table, Popover, Icon);
|
||||
|
||||
const defaultProps21 = {
|
||||
prefixCls: "bee-table"
|
||||
};
|
||||
|
||||
class Demo21 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state ={
|
||||
columns: [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "index",
|
||||
key: "index",
|
||||
width: 80,
|
||||
fixed: 'left',
|
||||
render(text, record, index){return index + 1}
|
||||
},
|
||||
{
|
||||
title: "订单编号",
|
||||
dataIndex: "orderCode",
|
||||
key: "orderCode",
|
||||
width: 100,
|
||||
fixed: 'left',
|
||||
required: true
|
||||
},
|
||||
{
|
||||
title: "供应商名称",
|
||||
dataIndex: "supplierName",
|
||||
key: "supplierName",
|
||||
width: 150,
|
||||
required: true
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
dataIndex: "type_name",
|
||||
key: "type_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "采购组织",
|
||||
dataIndex: "purchasing",
|
||||
key: "purchasing",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "单据日期",
|
||||
dataIndex: "voucherDate",
|
||||
key: "voucherDate",
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: "审批状态",
|
||||
dataIndex: "approvalState_name",
|
||||
key: "approvalState_name",
|
||||
width: 150
|
||||
}
|
||||
]};
|
||||
}
|
||||
afterFilter = (optData,columns)=>{
|
||||
if(optData.key == 'b'){
|
||||
if(optData.ifshow){
|
||||
columns[2].ifshow = false;
|
||||
}else{
|
||||
columns[2].ifshow = true;
|
||||
}
|
||||
this.setState({
|
||||
columns21 :columns,
|
||||
showFilterPopover:true
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
return <FilterColumnTable
|
||||
columns={this.state.columns}
|
||||
data={data}
|
||||
afterFilter={this.afterFilter}
|
||||
showFilterPopover={this.state.showFilterPopover}
|
||||
/>;
|
||||
}
|
||||
}
|
||||
|
||||
Demo21.defaultProps = defaultProps21;
|
||||
export default Demo21;
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
/**
|
||||
* @title 列排序
|
||||
* @parent 列操作-排序 Sort
|
||||
* @description column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据，c代表比较当前对象的字段名称
|
||||
* demo0901
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Icon} from "tinper-bee";
|
||||
import Table from '../../src';
|
||||
import sort from "../../src/lib/sort.js";
|
||||
|
||||
let ComplexTable = sort(Table, Icon);
|
||||
const columns11 = [
|
||||
{
|
||||
title: "单据编号",
|
||||
dataIndex: "num",
|
||||
key: "num",
|
||||
width: 120,
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
title: "单据日期",
|
||||
dataIndex: "date",
|
||||
key: "date",
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: "供应商",
|
||||
dataIndex: "supplier",
|
||||
key: "supplier",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "联系人",
|
||||
dataIndex: "contact",
|
||||
key: "contact",
|
||||
},
|
||||
{
|
||||
title: "整单数量",
|
||||
dataIndex: "total",
|
||||
key: "total",
|
||||
width: 150,
|
||||
sorter: (a, b) => a.total - b.total
|
||||
}
|
||||
];
|
||||
|
||||
const data11 = [
|
||||
{ num: "NU0391001", date: "2019-03-01", supplier: 'xx供应商',contact:'Tom', total:30 ,key: "1" },
|
||||
{ num: "NU0391002", date: "2018-11-02", supplier: 'yy供应商',contact:'Jack', total:41 ,key: "2" },
|
||||
{ num: "NU0391003", date: "2019-05-03", supplier: 'zz供应商',contact:'Jane', total:25 ,key: "3" }
|
||||
];
|
||||
|
||||
const defaultProps11 = {
|
||||
prefixCls: "bee-table"
|
||||
};
|
||||
class Demo11 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
sortOrder: "",
|
||||
data: data11
|
||||
};
|
||||
}
|
||||
render() {
|
||||
|
||||
return <ComplexTable columns={columns11} data={this.state.data} />;
|
||||
}
|
||||
}
|
||||
Demo11.defaultProps = defaultProps11;
|
||||
|
||||
|
||||
export default Demo11;
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
/**
|
||||
* @title 后端列排序
|
||||
* @parent 列操作-排序 Sort
|
||||
* @description 可在控制台中查看序列化后的参数字符串，将参数传递给后端即可进行列排序
|
||||
* demo0902
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Icon} from "tinper-bee";
|
||||
import Table from '../../src';
|
||||
import sort from "../../src/lib/sort.js";
|
||||
let ComplexTable = sort(Table, Icon);
|
||||
|
||||
// const columns11 = [
|
||||
// {
|
||||
// title: "名字",
|
||||
// dataIndex: "a",
|
||||
// key: "a",
|
||||
// width: 100
|
||||
// },
|
||||
// {
|
||||
// title: "性别",
|
||||
// dataIndex: "b",
|
||||
// key: "b",
|
||||
// width: 100
|
||||
// },
|
||||
// {
|
||||
// title: "年龄",
|
||||
// dataIndex: "c",
|
||||
// key: "c",
|
||||
// width: 200,
|
||||
// sorter: (a, b) => a.c - b.c
|
||||
// },
|
||||
// {
|
||||
// title: "武功级别",
|
||||
// dataIndex: "d",
|
||||
// key: "d"
|
||||
// },
|
||||
// {
|
||||
// title: "分数",
|
||||
// dataIndex: "e",
|
||||
// key: "e",
|
||||
// sorter: (a, b) => a.c - b.c
|
||||
// },
|
||||
// ];
|
||||
|
||||
// const data11 = [
|
||||
// { a: "杨过", b: "男", c: 30,d:'内行', e:139,key: "2" },
|
||||
// { a: "令狐冲", b: "男", c: 41,d:'大侠', e:109, key: "1" },
|
||||
// { a: "郭靖", b: "男", c: 25,d:'大侠', e:159, key: "3" }
|
||||
// ];
|
||||
const columns11 = [
|
||||
{
|
||||
title: "单据编号",
|
||||
dataIndex: "num",
|
||||
key: "num",
|
||||
width: 120,
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
title: "单据日期",
|
||||
dataIndex: "date",
|
||||
key: "date",
|
||||
width: 200,
|
||||
},
|
||||
{
|
||||
title: "供应商",
|
||||
dataIndex: "supplier",
|
||||
key: "supplier",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "联系人",
|
||||
dataIndex: "contact",
|
||||
key: "contact",
|
||||
},
|
||||
{
|
||||
title: "整单数量",
|
||||
dataIndex: "total",
|
||||
key: "total",
|
||||
width: 150,
|
||||
sorter: (a, b) => a.total - b.total
|
||||
},
|
||||
{
|
||||
title: "金额",
|
||||
dataIndex: "money",
|
||||
key: "money",
|
||||
width: 100,
|
||||
sorter: (a, b) => a.money - b.money
|
||||
}
|
||||
];
|
||||
|
||||
const data11 = [
|
||||
{ num: "NU0391001", date: "2019-03-01", supplier: 'xx供应商',contact:'Tom', total:30 ,money: 100,key: "1" },
|
||||
{ num: "NU0391002", date: "2018-11-02", supplier: 'yy供应商',contact:'Jack', total:41 ,money: 50,key: "2" },
|
||||
{ num: "NU0391003", date: "2019-05-03", supplier: 'zz供应商',contact:'Jane', total:25 ,money: 200,key: "3" }
|
||||
];
|
||||
|
||||
const defaultProps = {
|
||||
prefixCls: "bee-table"
|
||||
};
|
||||
class Demo28 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
sortOrder: "",
|
||||
data: data11
|
||||
};
|
||||
}
|
||||
/**
|
||||
* 后端获取数据
|
||||
*/
|
||||
sortFun = (sortParam)=>{
|
||||
console.info(sortParam);
|
||||
//将参数传递给后端排序
|
||||
}
|
||||
render() {
|
||||
let sortObj = {
|
||||
mode:'multiple',
|
||||
backSource:true,
|
||||
sortFun:this.sortFun
|
||||
}
|
||||
return <ComplexTable columns={columns11} data={this.state.data} sort={sortObj}/>;
|
||||
}
|
||||
}
|
||||
Demo28.defaultProps = defaultProps;
|
||||
|
||||
|
||||
export default Demo28;
|
||||
|
|
@ -1,143 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 多列排序
|
||||
* @parent 列操作-排序 Sort
|
||||
* @description 结合多列排序、全选功能、合计功能的表格示例。新增排序后触发的回调函数sorterClick。
|
||||
* demo0903
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Checkbox,Button,Icon} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
import multiSelect from "../../src/lib/multiSelect.js";
|
||||
import sort from "../../src/lib/sort.js";
|
||||
import sum from "../../src/lib/sum.js";
|
||||
|
||||
const columns13 = [
|
||||
{
|
||||
title: "订单编号",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
className:'dfasd',
|
||||
width: 200,
|
||||
sorter: (pre, after) => {return pre.a.localeCompare(after.a)},
|
||||
sorterClick:(data,type)=>{//排序的回调函数
|
||||
//type value is up or down
|
||||
console.log("data",data);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "金额",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 200,
|
||||
sumCol: true,
|
||||
sorter: (pre, after) => pre.b - after.b,
|
||||
sorterClick:(data,type)=>{//排序的回调函数
|
||||
//type value is up or down
|
||||
console.log("data",data);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "整单数量",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200,
|
||||
sumCol: true,
|
||||
sorter: (pre, after) => pre.c - after.c,
|
||||
sorterClick:(data,type)=>{//排序的回调函数
|
||||
//type value is up or down
|
||||
console.log("data",data);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "日销售量",
|
||||
dataIndex: "e",
|
||||
key: "e",
|
||||
width: 200,
|
||||
sumCol: true,
|
||||
sorter: (pre, after) => pre.e.value - after.e.value,
|
||||
// getMultiSorterValue: (data, col) => {},
|
||||
render: (text, data) => {
|
||||
return text.value
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "供应商",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 200
|
||||
}
|
||||
];
|
||||
|
||||
const data13 = [
|
||||
{ a: "NU0391001", b: 675, c: 30, d: "xx供应商",e:{value: 120}, key: "2" },
|
||||
{ a: "NU0391002", b: 43, c: 41, d: "yy供应商",e:{value: 90}, key: "1" },
|
||||
{ a: "NU0391003", b: 43, c: 81, d: "zz供应商", e:{value: 120},key: "4" },
|
||||
{ a: "NU0391004", b: 43, c: 81, d: "aa供应商", e:{value: 110},key: "5" },
|
||||
{ a: "NU0391005", b: 153, c: 25, d: "bb供应商",e:{value: 90}, key: "3" }
|
||||
];
|
||||
|
||||
//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
|
||||
let ComplexTable = multiSelect(sort(sum(Table, Icon)), Checkbox);
|
||||
|
||||
class Demo13 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data13: data13,
|
||||
selectedRow: this.selectedRow,
|
||||
selectDisabled: this.selectDisabled
|
||||
};
|
||||
}
|
||||
getSelectedDataFunc = data => {
|
||||
console.log(data);
|
||||
};
|
||||
selectDisabled = (record, index) => {
|
||||
// console.log(record);
|
||||
if (index === 1) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
selectedRow = (record, index) => {
|
||||
// console.log(record);
|
||||
if (index === 0) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
onClick = () => {
|
||||
this.setState({
|
||||
selectedRow: function() {}
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
let multiObj = {
|
||||
type: "checkbox"
|
||||
};
|
||||
let sortObj = {
|
||||
mode:'multiple'
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button className="editable-add-btn" onClick={this.onClick}>
|
||||
清空已选
|
||||
</Button>
|
||||
<ComplexTable
|
||||
bordered
|
||||
selectDisabled={this.state.selectDisabled}
|
||||
selectedRow={this.state.selectedRow}
|
||||
columns={columns13}
|
||||
data={this.state.data13}
|
||||
multiSelect={multiObj}
|
||||
sort={sortObj}
|
||||
getSelectedDataFunc={this.getSelectedDataFunc}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default Demo13;
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
/**
|
||||
*
|
||||
* @title 简单表格、两种tip、选中行背景色、文字过长
|
||||
* 【一种是bee-popover实现、一种是标签本身的tooltip】
|
||||
* @description
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Popover from 'bee-popover';
|
||||
import Button from "bee-button";
|
||||
import Table from "../../src";
|
||||
|
||||
function getTitleTip(text){
|
||||
return(<div>
|
||||
<h3>{text}</h3>
|
||||
</div>)
|
||||
}
|
||||
|
||||
|
||||
const columns = [
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
{ title: "用户名", dataIndex: "a", key: "a", width:80 , className:"rowClassName",
|
||||
render(text, record, index) {
|
||||
return(<div style={{position: 'relative'}}>
|
||||
<Popover
|
||||
placement="leftTop"
|
||||
content={getTitleTip(text)}
|
||||
trigger="hover"
|
||||
id="leftTop"
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 5,
|
||||
left: 0,
|
||||
width: "80px",
|
||||
textOverflow:"ellipsis",
|
||||
overflow:"hidden",
|
||||
whiteSpace:"nowrap"
|
||||
}}>{text}</span>
|
||||
</Popover>
|
||||
</div>);
|
||||
}},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<div style={{position: 'relative'}} title={text} >
|
||||
<a
|
||||
href="#"
|
||||
tooltip={text}
|
||||
onClick={() => {
|
||||
alert('这是第'+index+'列，内容为:'+text);
|
||||
}}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 5,
|
||||
left: 0
|
||||
}}
|
||||
>
|
||||
一些操作
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, d: "操作", key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
|
||||
];
|
||||
|
||||
class Demo1 extends Component {
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data,
|
||||
factoryValue: 0,
|
||||
selectedRow: new Array(data.length)//状态同步
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
rowClassName={(record,index,indent)=>{
|
||||
if (this.state.selectedRow[index]) {
|
||||
return 'selected';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}}
|
||||
onRowClick={(record,index,indent)=>{
|
||||
let selectedRow = new Array(this.state.data.length);
|
||||
selectedRow[index] = true;
|
||||
this.setState({
|
||||
factoryValue: record,
|
||||
selectedRow: selectedRow
|
||||
});
|
||||
}}
|
||||
title={currentData => <div>标题: 这是一个标题</div>}
|
||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo1;
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
/**
|
||||
*
|
||||
* @title 无数据时显示
|
||||
* @description 无数据时显示效果展示（可自定义）
|
||||
*
|
||||
* import {Table} from 'tinper-bee';
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
|
||||
|
||||
const columns10 = [
|
||||
{
|
||||
title: "Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: "40%"
|
||||
},
|
||||
{
|
||||
title: "Age",
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
width: "30%"
|
||||
},
|
||||
{
|
||||
title: "Address",
|
||||
dataIndex: "address",
|
||||
key: "address"
|
||||
}
|
||||
];
|
||||
|
||||
const data10 = [
|
||||
|
||||
];
|
||||
|
||||
const emptyFunc = () => <span>这里没有数据！</span>
|
||||
|
||||
class Demo10 extends Component {
|
||||
render() {
|
||||
return <Table columns={columns10} data={data10} emptyText={emptyFunc} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo10;
|
||||
|
|
@ -1,90 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 拖拽改变列顺序
|
||||
* @parent 列操作-拖拽 Drag
|
||||
* @description 点击选择表头并左右拖拽，可以改变表格列顺序。 onDragEnd 方法是拖拽交换列后触发的回调函数。注意：固定列不可以交换。
|
||||
* demo1001
|
||||
*/
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
import dragColumn from '../../src/lib/dragColumn';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "订单编号",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "单据日期",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "供应商",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200,
|
||||
sumCol: true,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "联系人",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 500,
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "e",
|
||||
key: "e",
|
||||
width: 200,
|
||||
fixed: 'right',
|
||||
}
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "NU0391001", b: "2019-03-01", c: 'xx供应商',d:'Tom',e:'...', key: "2" },
|
||||
{ a: "NU0391002", b: "2018-11-02", c: 'yy供应商',d:'Jack',e:'...', key: "1" },
|
||||
{ a: "NU0391003", b: "2019-05-03", c: 'zz供应商',d:'Jane',e:'...', key: "3" }
|
||||
];
|
||||
|
||||
const DragColumnTable = dragColumn(Table);
|
||||
|
||||
const defaultProps29 = {
|
||||
prefixCls: "bee-table"
|
||||
};
|
||||
|
||||
class Demo29 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return <DragColumnTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
bordered
|
||||
draggable={true}
|
||||
|
||||
onDrop ={(event,data,columns)=>{
|
||||
console.log("--拖拽交换列onDrop触发事件");
|
||||
console.log("event.target:",event.target);
|
||||
console.log("data:",data);
|
||||
console.log("拖拽完成后的columns:",columns);
|
||||
}}
|
||||
|
||||
onDragEnd ={(event,data,columns)=>{
|
||||
console.log("--拖拽交换列后触发事件");
|
||||
console.log("event.target:",event.target);
|
||||
console.log("data:",data);
|
||||
console.log("拖拽完成后的columns:",columns);
|
||||
}}
|
||||
/>;
|
||||
}
|
||||
}
|
||||
|
||||
Demo29.defaultProps = defaultProps29;
|
||||
export default Demo29;
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 拖拽改变列宽度
|
||||
* @parent 列操作-拖拽 Drag
|
||||
* @description onDropBorder方法为调整列宽后触发的回调函数。注：不支持tree结构的表头。
|
||||
* demo1002
|
||||
*/
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import Table from '../../src';
|
||||
import dragColumn from '../../src/lib/dragColumn';
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "订单编号",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: '200',
|
||||
fixed:'left'
|
||||
},
|
||||
{
|
||||
title: "单据日期",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: '600'
|
||||
},
|
||||
{
|
||||
title: "供应商",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: '200',
|
||||
},
|
||||
{
|
||||
title: "联系人",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 500,
|
||||
}
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "NU0391001", b: "2019-03-01", c: "xx供应商",d:'Tom', key: "2" },
|
||||
{ a: "NU0391002", b: "2018-11-02", c: "yy供应商",d:'Jack', key: "1" },
|
||||
{ a: "NU0391003", b: "2019-05-03", c: "zz供应商",d:'Jane', key: "3" }
|
||||
];
|
||||
|
||||
const DragColumnTable = dragColumn(Table);
|
||||
|
||||
class Demo30 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return <DragColumnTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
bordered
|
||||
scroll={{y:200}}
|
||||
dragborder={true}
|
||||
onDropBorder ={(e,width)=>{
|
||||
console.log(width+"--调整列宽后触发事件",e.target);
|
||||
}}
|
||||
/>;
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo30;
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
/**
|
||||
*
|
||||
* @title 列排序
|
||||
* @description 点击列的上下按钮即可排序
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
import Icon from "bee-icon";
|
||||
|
||||
const columns11 = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d"
|
||||
}
|
||||
];
|
||||
|
||||
const data11 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
|
||||
];
|
||||
|
||||
const defaultProps11 = {
|
||||
prefixCls: "bee-table"
|
||||
};
|
||||
class Demo11 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
sortOrder: "",
|
||||
data: data11
|
||||
};
|
||||
}
|
||||
toggleSortOrder=(order, column)=> {
|
||||
let { sortOrder, data, oldData } = this.state;
|
||||
let ascend_sort = function(key) {
|
||||
return function(a, b) {
|
||||
return a.key - b.key;
|
||||
};
|
||||
};
|
||||
let descend_sort = function(key) {
|
||||
return function(a, b) {
|
||||
return b.key - a.key;
|
||||
};
|
||||
};
|
||||
if (sortOrder === order) {
|
||||
// 切换为未排序状态
|
||||
order = "";
|
||||
}
|
||||
if (!oldData) {
|
||||
oldData = data.concat();
|
||||
}
|
||||
if (order === "ascend") {
|
||||
data = data.sort(function(a, b) {
|
||||
return column.sorter(a, b);
|
||||
});
|
||||
} else if (order === "descend") {
|
||||
data = data.sort(function(a, b) {
|
||||
return column.sorter(b, a);
|
||||
});
|
||||
} else {
|
||||
data = oldData.concat();
|
||||
}
|
||||
this.setState({
|
||||
sortOrder: order,
|
||||
data: data,
|
||||
oldData: oldData
|
||||
});
|
||||
}
|
||||
renderColumnsDropdown(columns) {
|
||||
const { sortOrder } = this.state;
|
||||
const { prefixCls } = this.props;
|
||||
|
||||
return columns.map(originColumn => {
|
||||
let column = Object.assign({}, originColumn);
|
||||
let sortButton;
|
||||
if (column.sorter) {
|
||||
const isAscend = sortOrder === "ascend";
|
||||
const isDescend = sortOrder === "descend";
|
||||
sortButton = (
|
||||
<div className={`${prefixCls}-column-sorter`}>
|
||||
<span
|
||||
className={`${prefixCls}-column-sorter-up ${isAscend
|
||||
? "on"
|
||||
: "off"}`}
|
||||
title="↑"
|
||||
onClick={() => this.toggleSortOrder("ascend", column)}
|
||||
>
|
||||
<Icon type="uf-triangle-up" />
|
||||
</span>
|
||||
<span
|
||||
className={`${prefixCls}-column-sorter-down ${isDescend
|
||||
? "on"
|
||||
: "off"}`}
|
||||
title="↓"
|
||||
onClick={() => this.toggleSortOrder("descend", column)}
|
||||
>
|
||||
<Icon type="uf-triangle-down" />
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
column.title = (
|
||||
<span>
|
||||
{column.title}
|
||||
{sortButton}
|
||||
</span>
|
||||
);
|
||||
return column;
|
||||
});
|
||||
}
|
||||
render() {
|
||||
let columns = this.renderColumnsDropdown(columns11);
|
||||
return <Table columns={columns} data={this.state.data} />;
|
||||
}
|
||||
}
|
||||
Demo11.defaultProps = defaultProps11;
|
||||
|
||||
|
||||
export default Demo11;
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 嵌套子表格
|
||||
* @parent 扩展行 Expanded Row
|
||||
* @description 通过expandedRowRender参数来实现子表格。收起和展开的图标可自定义传入。注意：多选功能和嵌套表格一起使用时，需要设置 expandIconAsCell={true}，把展开按钮放在单元格中展示。
|
||||
* demo1101
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import { Popconfirm,Icon,Checkbox } from 'tinper-bee';
|
||||
import Table from "../../src";
|
||||
import multiSelect from "../../src/lib/multiSelect";
|
||||
|
||||
const columns16 = [
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width:100,
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
|
||||
<a href="javascript:;" tooltip={text} >
|
||||
一些操作
|
||||
</a>
|
||||
</Popconfirm>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ title: "订单编号", dataIndex: "a", key: "a", width: 250 },
|
||||
{ id: "123", title: "单据日期", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "供应商", dataIndex: "c", key: "c", width: 200, fixed:'right' },
|
||||
|
||||
];
|
||||
const columns17 = [
|
||||
{ title: "订单编号", dataIndex: "a", key: "a", width: 100 },
|
||||
{ id: "123", title: "单据日期", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "供应商", dataIndex: "c", key: "c", width: 200 }
|
||||
];
|
||||
|
||||
const data16 = [
|
||||
{ a: "NU0391001", b: "2019-03-01", c: "xx供应商", d: "操作", key: "1" },
|
||||
{ a: "NU0391002", b: "2018-11-02", c: "yy供应商", d: "操作", key: "2" },
|
||||
{ a: "NU0391003", b: "2019-05-03", c: "zz供应商", d: "操作", key: "3" }
|
||||
];
|
||||
const MultiSelectTable = multiSelect(Table,Checkbox);
|
||||
class Demo16 extends Component {
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state={
|
||||
data_obj:{}
|
||||
}
|
||||
}
|
||||
expandedRowRender = (record, index, indent) => {
|
||||
return (
|
||||
<Table
|
||||
columns={columns17}
|
||||
data={this.state.data_obj[record.key]}
|
||||
/>
|
||||
);
|
||||
};
|
||||
getData=(expanded, record)=>{
|
||||
//当点击展开的时候才去请求数据
|
||||
let new_obj = Object.assign({},this.state.data_obj);
|
||||
if(expanded){
|
||||
if(record.key==='1'){
|
||||
new_obj[record.key] = [
|
||||
{ a: "NU0391056", b: "2019-03-01", c: "gys1", d: "操作", key: "1" },
|
||||
{ a: "NU0391057", b: "2018-11-02", c: "gys2", d: "操作", key: "2" },
|
||||
]
|
||||
this.setState({
|
||||
data_obj:new_obj
|
||||
})
|
||||
}else{
|
||||
new_obj[record.key] = [
|
||||
{ a: "NU0391079", b: "2019-04-17", c: "gys5", d: "操作", key: "3" },
|
||||
]
|
||||
this.setState({
|
||||
data_obj:new_obj
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
haveExpandIcon=(record, index)=>{
|
||||
//控制是否显示行展开icon，该参数只有在和expandedRowRender同时使用才生效
|
||||
if(index == 0){
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<MultiSelectTable
|
||||
className="expanded-table"
|
||||
columns={columns16}
|
||||
data={data16}
|
||||
onExpand={this.getData}
|
||||
expandedRowRender={this.expandedRowRender}
|
||||
expandIconAsCell={true}
|
||||
collapsedIcon={<Icon type='uf-anglearrowpointingtoright'/>}
|
||||
expandedIcon={<Icon type='uf-treearrow-down'/>}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo16;
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
.expanded-table{
|
||||
.expand-icon-con .uf{
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 自定义表格标题、表尾、选中行颜色
|
||||
* @parent 扩展行 Expanded Row
|
||||
* @description 可根据业务场景设置不同的`title`和`footer`。选中行颜色可用rowClassName作为选择器自定义css样式。
|
||||
* demo1103
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip,} from "tinper-bee";
|
||||
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 150, className: "rowClassName"},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 100 },
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||
];
|
||||
|
||||
class Demo26 extends Component {
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data,
|
||||
selectedRowIndex: 0
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
rowClassName={(record,index,indent)=>{
|
||||
if (this.state.selectedRowIndex == index) {
|
||||
return 'selected';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}}
|
||||
onRowClick={(record,index,indent)=>{
|
||||
this.setState({
|
||||
selectedRowIndex: index
|
||||
});
|
||||
}}
|
||||
title={currentData => <div>员工信息统计表</div>}
|
||||
footer={currentData => <div>合计: 共{data.length}条数据</div>}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo26;
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 紧凑型、宽松型
|
||||
* @parent 扩展行 Expanded Row
|
||||
* @description 设置`size`属性使用紧凑型表格(`sm`)或宽松型表格(`lg`)。
|
||||
* demo1105
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip,Tag} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{ title: "订单编号", dataIndex: "orderNum", key: "orderNum", width: 100 },
|
||||
{ title: "采购组织", dataIndex: "org", key: "org", width: 200 },
|
||||
{ title: "供应商", dataIndex: "supplier", key: "supplier", width: 100 },
|
||||
{ title: "订单日期", dataIndex: "orderDate", key: "orderDate", width: 150 },
|
||||
{ title: "总数量", dataIndex: "quantity", key: "quantity", width: 100 },
|
||||
{ title: "单据状态", dataIndex: "status", key: "status", width: 100,
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Tag colors={text.type}>{text.desc}</Tag>
|
||||
);
|
||||
}},
|
||||
{ title: "提交人", dataIndex: "submitter", key: "submitter", width: 100 },
|
||||
{ title: "单位", dataIndex: "unit", key: "unit", width: 100 },
|
||||
{ title: "总税价合计", dataIndex: "sum", key: "sum", width: 100 },
|
||||
];
|
||||
|
||||
const data = [
|
||||
{
|
||||
orderNum: "NU0391025",
|
||||
org: "用友网络科技股份有限公司",
|
||||
supplier: "xx供应商",
|
||||
orderDate: '2018年03月18日',
|
||||
quantity: '100.00',
|
||||
status: {type:'success' ,desc:'正常'},
|
||||
submitter: '小张',
|
||||
unit: 'pc',
|
||||
sum:'8,487.00',
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
orderNum: "NU0391026",
|
||||
org: "用友网络科技股份有限公司",
|
||||
supplier: "xx供应商",
|
||||
orderDate: '2018年02月05日',
|
||||
quantity: '91.00',
|
||||
status: {type:'danger' ,desc:'异常'},
|
||||
submitter: '小红',
|
||||
unit: 'pc',
|
||||
sum:'675.00',
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
orderNum: "NU0391027",
|
||||
org: "用友网络科技股份有限公司",
|
||||
supplier: "xx供应商",
|
||||
orderDate: '2018年07月01日',
|
||||
quantity: '98.00',
|
||||
status: {type:'success' ,desc:'正常'},
|
||||
submitter: '小李',
|
||||
unit: 'pc',
|
||||
sum:'1,531.00',
|
||||
key: "3"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo1 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h5>紧凑型表格</h5>
|
||||
<Table columns={columns} data={data} size="sm" />
|
||||
<h5>宽松型表格</h5>
|
||||
<Table columns={columns} data={data} size="lg" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo1;
|
||||
|
|
@ -1,71 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 自定义行高
|
||||
* @parent 扩展行 Expanded Row
|
||||
* @description 设置`height`属性自定义表体行高，设置`headerHeight`属性自定义表头高度。鼠标hover行时呼出操作按钮。
|
||||
* demo1106
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 150, className: "rowClassName"},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 100 },
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||
];
|
||||
|
||||
class Demo1 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data,
|
||||
selectedRowIndex: 0
|
||||
}
|
||||
}
|
||||
handleClick = () => {
|
||||
console.log('这是第' , this.currentIndex , '行');
|
||||
console.log('内容：' , this.currentRecord);
|
||||
}
|
||||
|
||||
onRowHover=(index,record)=>{
|
||||
this.currentIndex = index;
|
||||
this.currentRecord = record;
|
||||
}
|
||||
|
||||
getHoverContent=()=>{
|
||||
return <div className="opt-btns"><Button size="sm" onClick={this.handleClick}>一些操作</Button> </div>
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
parentNodeId='parent'
|
||||
height={40}
|
||||
headerHeight={40}
|
||||
hoverContent={this.getHoverContent}
|
||||
onRowHover={this.onRowHover}
|
||||
onRowClick={(record, index, indent) => {
|
||||
this.setState({
|
||||
selectedRowIndex: index
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo1;
|
||||
|
|
@ -1,86 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 图片在表格中的展示
|
||||
* @parent 扩展行 Expanded Row
|
||||
* @description 根据图片高度自动撑开行高，可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer, 注：如果图片在固定列中，可以使用heightConsistent属性，当此属性为true，就不会出现错行问题
|
||||
* demo1107
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Button,Tooltip} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "index",
|
||||
key: "index",
|
||||
width: 80,
|
||||
render(text, record, index) {
|
||||
return index + 1;
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "图样",
|
||||
dataIndex: "picture",
|
||||
key: "picture",
|
||||
render(text, record, index) {
|
||||
return <img style={{height:'50px'}} src={text} alt="Picture"/>
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "组织部门",
|
||||
dataIndex: "orgDept",
|
||||
key: "orgDept",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: "设施管理部门",
|
||||
dataIndex: "facilityManageUnit",
|
||||
key: "facilityManageUnit",
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: "案卷编号",
|
||||
dataIndex: "docketnum",
|
||||
key: "docketnum",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: "数量",
|
||||
dataIndex: "num",
|
||||
key: "num",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: "首次发现时间",
|
||||
dataIndex: "discoveryTime",
|
||||
key: "discoveryTime",
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: "实际修复时间",
|
||||
dataIndex: "repairTime",
|
||||
key: "repairTime",
|
||||
width: 150,
|
||||
}
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ key: "1", orgDept: "组织1", facilityManageUnit: "部门1", docketnum: 41, num: "1", discoveryTime: "2018-10-17", repairTime: "2018-10-30", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-1-min.jpg"},
|
||||
{ key: "2", orgDept: "组织2", facilityManageUnit: "部门2", docketnum: 30, num: "2", discoveryTime: "2019-01-15", repairTime: "2019-01-20", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-2-min.jpg"},
|
||||
{ key: "3", orgDept: "组织3", facilityManageUnit: "部门3", docketnum: 35, num: "3", discoveryTime: "2019-04-10", repairTime: "2019-04-17", picture: "http://design.yonyoucloud.com/static/bee.tinper.org-demo/swiper-demo-3-min.jpg"}
|
||||
];
|
||||
|
||||
class Demo1107 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo1107;
|
||||
|
|
@ -0,0 +1,165 @@
|
|||
/**
|
||||
*
|
||||
* @title 全选功能
|
||||
* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据（未使用封装好的全选功能）
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
import Checkbox from "bee-checkbox";
|
||||
|
||||
const columns12 = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d"
|
||||
}
|
||||
];
|
||||
|
||||
const data12 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
|
||||
];
|
||||
|
||||
const defaultProps12 = {
|
||||
prefixCls: "bee-table",
|
||||
multiSelect: {
|
||||
type: "checkbox",
|
||||
param: "key"
|
||||
}
|
||||
};
|
||||
class Demo12 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
checkedAll:false,
|
||||
checkedArray: [
|
||||
false,
|
||||
false,
|
||||
false,
|
||||
],
|
||||
data: data12
|
||||
};
|
||||
}
|
||||
onAllCheckChange = () => {
|
||||
let self = this;
|
||||
let checkedArray = [];
|
||||
let listData = self.state.data.concat();
|
||||
let selIds = [];
|
||||
// let id = self.props.multiSelect.param;
|
||||
for (var i = 0; i < self.state.checkedArray.length; i++) {
|
||||
checkedArray[i] = !self.state.checkedAll;
|
||||
}
|
||||
// if (self.state.checkedAll) {
|
||||
// selIds = [];
|
||||
// } else {
|
||||
// for (var i = 0; i < listData.length; i++) {
|
||||
// selIds[i] = listData[i][id];
|
||||
// }
|
||||
// }
|
||||
self.setState({
|
||||
checkedAll: !self.state.checkedAll,
|
||||
checkedArray: checkedArray,
|
||||
// selIds: selIds
|
||||
});
|
||||
// self.props.onSelIds(selIds);
|
||||
};
|
||||
onCheckboxChange = (text, record, index) => {
|
||||
let self = this;
|
||||
let allFlag = false;
|
||||
// let selIds = self.state.selIds;
|
||||
// let id = self.props.postId;
|
||||
let checkedArray = self.state.checkedArray.concat();
|
||||
// if (self.state.checkedArray[index]) {
|
||||
// selIds.remove(record[id]);
|
||||
// } else {
|
||||
// selIds.push(record[id]);
|
||||
// }
|
||||
checkedArray[index] = !self.state.checkedArray[index];
|
||||
for (var i = 0; i < self.state.checkedArray.length; i++) {
|
||||
if (!checkedArray[i]) {
|
||||
allFlag = false;
|
||||
break;
|
||||
} else {
|
||||
allFlag = true;
|
||||
}
|
||||
}
|
||||
self.setState({
|
||||
checkedAll: allFlag,
|
||||
checkedArray: checkedArray,
|
||||
// selIds: selIds
|
||||
});
|
||||
// self.props.onSelIds(selIds);
|
||||
};
|
||||
renderColumnsMultiSelect(columns) {
|
||||
const { data,checkedArray } = this.state;
|
||||
const { multiSelect } = this.props;
|
||||
let select_column = {};
|
||||
let indeterminate_bool = false;
|
||||
// let indeterminate_bool1 = true;
|
||||
if (multiSelect && multiSelect.type === "checkbox") {
|
||||
let i = checkedArray.length;
|
||||
while(i--){
|
||||
if(checkedArray[i]){
|
||||
indeterminate_bool = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
let defaultColumns = [
|
||||
{
|
||||
title: (
|
||||
<Checkbox
|
||||
className="table-checkbox"
|
||||
checked={this.state.checkedAll}
|
||||
indeterminate={indeterminate_bool&&!this.state.checkedAll}
|
||||
onChange={this.onAllCheckChange}
|
||||
/>
|
||||
),
|
||||
key: "checkbox",
|
||||
dataIndex: "checkbox",
|
||||
width: "5%",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Checkbox
|
||||
className="table-checkbox"
|
||||
checked={this.state.checkedArray[index]}
|
||||
onChange={this.onCheckboxChange.bind(this, text, record, index)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
columns = defaultColumns.concat(columns);
|
||||
}
|
||||
return columns;
|
||||
}
|
||||
render() {
|
||||
let columns = this.renderColumnsMultiSelect(columns12);
|
||||
return <Table columns={columns} data={data12} />;
|
||||
}
|
||||
}
|
||||
Demo12.defaultProps = defaultProps12;
|
||||
|
||||
export default Demo12;
|
||||
|
|
@ -1,80 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 拖拽改变行顺序
|
||||
* @parent 行操作-拖拽
|
||||
* @description `rowDraggAble`参数设置是否使用行交换顺序功能，`useDragHandle`设置拖拽把手，`onDropRow` 是拖拽行后的回调函数。注意：表格行数据必须有唯一标识，可以通过 `data.key` 或 `rowKey` 两种方式传入。
|
||||
* Demo1201
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import Switch from 'bee-switch';
|
||||
|
||||
const columns = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 150 },
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width:200 },
|
||||
{ title: "系统权限", dataIndex: "c", key: "c", width: 200,render:()=>{return(<Switch size="sm" />)}},
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100 },
|
||||
{ title: "职级", dataIndex: "e", key: "e", width: 100 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1001" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", e: "T1", key: "1002" },
|
||||
{ a: "ASVAL_201903120001", b: "小红", c: "女", d: "财务四科", e: "T3", key: "1003" },
|
||||
{ a: "ASVAL_201903120002", b: "小姚", c: "女", d: "财务一科", e: "T2", key: "1004" },
|
||||
{ a: "ASVAL_201903120003", b: "小岳", c: "男", d: "财务五科", e: "T2", key: "1005" },
|
||||
{ a: "ASVAL_201903120004", b: "小王", c: "男", d: "财务一科", e: "T5", key: "1006" },
|
||||
{ a: "ASVAL_201903120005", b: "小绍", c: "男", d: "财务七科", e: "T2", key: "1007" },
|
||||
{ a: "ASVAL_201903120006", b: "小郭", c: "男", d: "财务一科", e: "T3", key: "1008" },
|
||||
{ a: "ASVAL_201903120007", b: "小杨", c: "女", d: "财务四科", e: "T2", key: "1009" }
|
||||
];
|
||||
|
||||
class Demo38 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data
|
||||
}
|
||||
}
|
||||
handleClick = () => {
|
||||
console.log('这是第' , this.currentIndex , '行');
|
||||
console.log('内容：' , this.currentRecord);
|
||||
}
|
||||
|
||||
/**
|
||||
* 行拖拽开始时触发
|
||||
* @param record 拖拽行的数据
|
||||
* @param index 拖拽行的下标序号
|
||||
*/
|
||||
onDragRowStart = (record,index) => {
|
||||
console.log('拖拽的行数据：', record);
|
||||
console.log('拖拽的行序号：', index);
|
||||
}
|
||||
|
||||
/**
|
||||
* 行拖拽结束时触发
|
||||
* @param data 拖拽改变顺序后的新data数组
|
||||
* @param record 拖拽行的数据
|
||||
*/
|
||||
onDropRow = (data, record) => {
|
||||
console.log('重排序后的data： ', data);
|
||||
console.log('拖拽的行数据： ', record);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
rowDraggAble={true}
|
||||
// useDragHandle={true}
|
||||
onDragRowStart={this.onDragRowStart}
|
||||
onDropRow={this.onDropRow}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo38;
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
/**
|
||||
*
|
||||
* @title 列排序、全选功能、合计
|
||||
* @description 列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）
|
||||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import Checkbox from "bee-checkbox";
|
||||
import Button from "bee-button";
|
||||
import Icon from "bee-icon";
|
||||
import multiSelect from "../../src/lib/multiSelect.js";
|
||||
import sort from "../../src/lib/sort.js";
|
||||
import sum from "../../src/lib/sum.js";
|
||||
|
||||
const columns13 = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200,
|
||||
sumCol: true,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 200
|
||||
}
|
||||
];
|
||||
|
||||
const data13 = [
|
||||
{ a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
|
||||
];
|
||||
const data13_1 = [
|
||||
{ a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
|
||||
{ a: "杨过", b: "男", c: 30, d: "内行", key: "22" },
|
||||
{ a: "杨过", b: "男", c: 30, d: "内行", key: "222" },
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
|
||||
];
|
||||
//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
|
||||
let ComplexTable = multiSelect(sum(sort(Table, Icon)), Checkbox);
|
||||
|
||||
class Demo13 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data13: data13,
|
||||
selectedRow: this.selectedRow,
|
||||
selectDisabled: this.selectDisabled
|
||||
};
|
||||
}
|
||||
getSelectedDataFunc = data => {
|
||||
// console.log(data);
|
||||
};
|
||||
selectDisabled = (record, index) => {
|
||||
// console.log(record);
|
||||
if (index === 1) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
selectedRow = (record, index) => {
|
||||
// console.log(record);
|
||||
if (index === 0) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
onClick = () => {
|
||||
this.setState({
|
||||
selectedRow: function() {}
|
||||
});
|
||||
};
|
||||
onClick1 = () => {
|
||||
this.setState({
|
||||
selectDisabled: (record, index) => {
|
||||
// console.log(record);
|
||||
if (index === 2) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
render() {
|
||||
let multiObj = {
|
||||
type: "checkbox"
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<Button className="editable-add-btn" onClick={this.onClick}>
|
||||
change selectedRow
|
||||
</Button>
|
||||
<Button
|
||||
className="editable-add-btn"
|
||||
style={{ marginLeft: "5px" }}
|
||||
onClick={this.onClick1}
|
||||
>
|
||||
change selectDisabled
|
||||
</Button>
|
||||
<ComplexTable
|
||||
selectDisabled={this.state.selectDisabled}
|
||||
selectedRow={this.state.selectedRow}
|
||||
columns={columns13}
|
||||
data={this.state.data13}
|
||||
multiSelect={multiObj}
|
||||
getSelectedDataFunc={this.getSelectedDataFunc}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default Demo13;
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 多选功能
|
||||
* @parent 行操作-选择
|
||||
* @description 支持多选、全选和禁止选择。getSelectedDataFunc方法是选中行的回调函数，返回当前选中的数据数组。给data数据添加_checked参数可设置当前数据是否选中，添加_disabled参数可禁止选择当前数据。
|
||||
* demo1301
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import {Checkbox} from "tinper-bee";
|
||||
|
||||
import Table from '../../src';
|
||||
import multiSelect from "../../src/lib/multiSelect.js";
|
||||
|
||||
const columns = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName"},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 200 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1",_checked:true },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2",_checked:false },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3",_checked:false },
|
||||
{ a: "ASVAL_201903280010", b: "小王", c: "女", d: "财务二科", key: "4",_disabled:true },
|
||||
{ a: "ASVAL_201903200021", b: "小李", c: "男", d: "财务一科", key: "5",_checked:false}
|
||||
];
|
||||
//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
|
||||
let MultiSelectTable = multiSelect(Table, Checkbox);
|
||||
|
||||
class Demo12 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data
|
||||
};
|
||||
}
|
||||
/**
|
||||
*@param selectedList:当前选中的行数据
|
||||
*@param record 当前操作行数据
|
||||
*@param index 当前操作行索引
|
||||
*@param newData 进行多选操作之后的新数据 data
|
||||
* @memberof Demo12
|
||||
*/
|
||||
getSelectedDataFunc = (selectedList,record,index,newData) => {
|
||||
console.log("selectedList", selectedList,"index",index);
|
||||
// 注意：需要用回调中提供的参数 newData，去更新 state 或 store 中的 data 属性值，否则当表格重新render的时候，已选数据会被冲刷掉。
|
||||
};
|
||||
|
||||
render() {
|
||||
let multiObj = {
|
||||
inverse: true, //设置选中为红色填充
|
||||
};
|
||||
return (
|
||||
<MultiSelectTable
|
||||
bordered
|
||||
columns={columns}
|
||||
data={data}
|
||||
// multiSelectConfig={multiObj} //可以自定义 Checkbox 属性
|
||||
getSelectedDataFunc={this.getSelectedDataFunc}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo12;
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 单选功能
|
||||
* @parent 行操作-选择
|
||||
* @description 表格支持单选行操作，可自定义选中行背景色。getSelectedDataFunc方法是选中行的回调函数。
|
||||
* Demo1302
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Radio from "bee-radio";
|
||||
|
||||
import Table from "../../src";
|
||||
import singleSelect from "../../src/lib/singleSelect.js";
|
||||
|
||||
const columns = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 300 },
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 200 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" },
|
||||
{ a: "ASVAL_201903280010", b: "小王", c: "女", d: "财务二科", key: "4" },
|
||||
{ a: "ASVAL_201903200021", b: "小李", c: "男", d: "财务一科", key: "5" }
|
||||
];
|
||||
|
||||
//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
|
||||
let SingleSelectTable = singleSelect(Table, Radio);
|
||||
|
||||
class Demo1302 extends Component {
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data,
|
||||
selectedRowIndex: 0,
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*@param selected 当前选中的行数据(当前操作行数据)
|
||||
*@param index 当前操作行索引
|
||||
* @memberof Demo12
|
||||
*/
|
||||
getSelectedDataFunc = (record,index) => {
|
||||
console.log("record", record, "index",index);
|
||||
|
||||
this.setState({
|
||||
selectedRowIndex:index
|
||||
})
|
||||
};
|
||||
|
||||
render() {
|
||||
let {selectedRowIndex} = this.state;
|
||||
|
||||
return (
|
||||
<SingleSelectTable
|
||||
className="demo1302"
|
||||
bordered
|
||||
columns={columns}
|
||||
data={data}
|
||||
selectedRowIndex={selectedRowIndex}
|
||||
getSelectedDataFunc={this.getSelectedDataFunc}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo1302;
|
||||
|
|
@ -0,0 +1,314 @@
|
|||
/**
|
||||
*
|
||||
* @title 编辑态表格
|
||||
* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）
|
||||
*
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import Table from "../../src";
|
||||
import Animate from "bee-animate";
|
||||
import Tooltip from "bee-tooltip";
|
||||
import Button from "bee-button";
|
||||
import Form from "bee-form";
|
||||
import Icon from "bee-icon";
|
||||
import Input from "bee-form-control";
|
||||
import Checkbox from "bee-checkbox";
|
||||
import Datepicker from "bee-datepicker";
|
||||
import Select from "bee-select";
|
||||
import renderInput from "../../build/render/InputRender.js";
|
||||
import renderDate from "../../build/render/DateRender.js";
|
||||
import renderSelect from "../../build/render/SelectRender.js";
|
||||
|
||||
const InputRender = renderInput(Form, Input, Icon);
|
||||
const DateRender = renderDate(Datepicker, Icon);
|
||||
const SelectRender = renderSelect(Select, Icon);
|
||||
|
||||
const format = "YYYY-MM-DD";
|
||||
const format2 = "YYYY-MM";
|
||||
const format3 = "YYYY-MM-DD HH:mm:ss";
|
||||
|
||||
const dateInputPlaceholder = "选择日期";
|
||||
const dateInputPlaceholder2 = "选择年月";
|
||||
const dataSource = [
|
||||
{
|
||||
key: "boyuzhou",
|
||||
value: "jack"
|
||||
},
|
||||
{
|
||||
key: "renhualiu",
|
||||
value: "lucy"
|
||||
},
|
||||
{
|
||||
key: "yuzhao",
|
||||
value: "yiminghe"
|
||||
}
|
||||
];
|
||||
class Demo14 extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
dataSource: [
|
||||
{
|
||||
key: "0",
|
||||
name: "沉鱼",
|
||||
number: "10",
|
||||
age: "y",
|
||||
address: "jack",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
},
|
||||
{
|
||||
key: "1",
|
||||
name: "落雁",
|
||||
number: "100",
|
||||
age: "y",
|
||||
address: "lucy",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
name: "闭月",
|
||||
number: "1000",
|
||||
age: "n",
|
||||
address: "lucy",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
name: "羞花",
|
||||
number: "9999",
|
||||
age: "y",
|
||||
address: "lucy",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
}
|
||||
],
|
||||
count: 4
|
||||
};
|
||||
this.columns = [
|
||||
{
|
||||
title: "普通输入",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: "150px",
|
||||
render: (text, record, index) => (
|
||||
<InputRender
|
||||
name="name"
|
||||
placeholder="请输入姓名"
|
||||
value={text}
|
||||
isclickTrigger={true}
|
||||
check={this.check}
|
||||
onChange={this.onInputChange(index, "name")}
|
||||
isRequire={true}
|
||||
method="blur"
|
||||
errorMessage={
|
||||
<Tooltip overlay={"错误提示"}>
|
||||
<Icon type="uf-exc-c" className="" />
|
||||
</Tooltip>
|
||||
}
|
||||
reg={/^[0-9]+$/}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "货币输入",
|
||||
dataIndex: "number",
|
||||
key: "number",
|
||||
width: "150px",
|
||||
render: (text, record, index) => (
|
||||
<InputRender
|
||||
format="Currency"
|
||||
name="name"
|
||||
placeholder="请输入姓名"
|
||||
value={text}
|
||||
isclickTrigger={true}
|
||||
check={this.check}
|
||||
onChange={this.onInputChange(index, "name")}
|
||||
isRequire={true}
|
||||
method="blur"
|
||||
errorMessage={
|
||||
<Tooltip overlay={"错误提示"}>
|
||||
<Icon type="uf-exc-c" className="" />
|
||||
</Tooltip>
|
||||
}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "复选",
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
width: "100px",
|
||||
render: (text, record, index) => (
|
||||
<Checkbox
|
||||
checked={record.age}
|
||||
onChange={this.onCheckChange(index, "age")}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "下拉框",
|
||||
dataIndex: "address",
|
||||
key: "address",
|
||||
width: "200px",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<SelectRender
|
||||
dataSource={dataSource}
|
||||
isclickTrigger={true}
|
||||
value={text}
|
||||
onChange={this.onSelectChange(index, "address")}
|
||||
>
|
||||
<Option value="jack">boyuzhou</Option>
|
||||
<Option value="lucy">renhualiu</Option>
|
||||
<Option value="disabled" disabled>
|
||||
Disabled
|
||||
</Option>
|
||||
<Option value="yiminghe">yuzhao</Option>
|
||||
</SelectRender>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "年月日",
|
||||
dataIndex: "datepicker",
|
||||
key: "datepicker",
|
||||
width: "200px",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<DateRender
|
||||
value={text}
|
||||
isclickTrigger={true}
|
||||
format={format}
|
||||
onSelect={this.onDateSelect}
|
||||
onChange={this.onDateChange}
|
||||
placeholder={dateInputPlaceholder}
|
||||
/>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "年月",
|
||||
dataIndex: "MonthPicker",
|
||||
key: "MonthPicker",
|
||||
width: "200px",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<DateRender
|
||||
value={text}
|
||||
type="MonthPicker"
|
||||
isclickTrigger={true}
|
||||
format={format2}
|
||||
onSelect={this.onSelect}
|
||||
onChange={this.onChange}
|
||||
placeholder={dateInputPlaceholder2}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
check = (flag, obj) => {
|
||||
console.log(flag);
|
||||
console.log(obj);
|
||||
};
|
||||
|
||||
onInputChange = (index, key) => {
|
||||
return value => {
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource[index][key] = value;
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
};
|
||||
onCheckChange = (index, key) => {
|
||||
return value => {
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource[index][key] = value;
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
};
|
||||
onSelectChange = (index, key) => {
|
||||
return value => {
|
||||
console.log(`selected ${value}`);
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource[index][key] = value;
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
};
|
||||
onDateChange = d => {
|
||||
console.log(d);
|
||||
};
|
||||
onDateSelect = d => {
|
||||
console.log(d);
|
||||
};
|
||||
onDelete = index => {
|
||||
return () => {
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource.splice(index, 1);
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
};
|
||||
handleAdd = () => {
|
||||
const { count, dataSource } = this.state;
|
||||
const newData = {
|
||||
key: count,
|
||||
name: `凤姐 ${count}`,
|
||||
age: 32,
|
||||
address: "jack",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
};
|
||||
this.setState({
|
||||
dataSource: [...dataSource, newData],
|
||||
count: count + 1
|
||||
});
|
||||
};
|
||||
|
||||
getBodyWrapper = body => {
|
||||
return (
|
||||
<Animate
|
||||
transitionName="move"
|
||||
component="tbody"
|
||||
className={body.props.className}
|
||||
>
|
||||
{body.props.children}
|
||||
</Animate>
|
||||
);
|
||||
};
|
||||
getData = () => {
|
||||
console.log(this.state.dataSource);
|
||||
};
|
||||
render() {
|
||||
const { dataSource } = this.state;
|
||||
const columns = this.columns;
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
className="editable-add-btn"
|
||||
type="ghost"
|
||||
onClick={this.handleAdd}
|
||||
>
|
||||
添加一行
|
||||
</Button>
|
||||
<Button
|
||||
style={{marginLeft:"5px"}}
|
||||
className="editable-add-btn"
|
||||
type="ghost"
|
||||
onClick={this.getData}
|
||||
>
|
||||
获取数据
|
||||
</Button>
|
||||
<Table
|
||||
data={dataSource}
|
||||
columns={columns}
|
||||
getBodyWrapper={this.getBodyWrapper}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo14;
|
||||
|
|
@ -1,90 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 万行以上数据渲染
|
||||
* @parent 无限滚动 Infinite-scroll
|
||||
* @description 万行数据渲染
|
||||
* demo1401
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Tooltip} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
import BigData from "../../src/lib/bigData";
|
||||
const BigDataTable = BigData(Table);
|
||||
const columns = [
|
||||
{
|
||||
title:'序号',
|
||||
dataIndex:'index',
|
||||
width:'60',
|
||||
key:'index',
|
||||
render:(text,record,index)=>{
|
||||
return index
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "用户名", dataIndex: "a", key: "a", width: 580, className: "rowClassName",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "block",
|
||||
width: "40px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "bottom",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 80},
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
|
||||
|
||||
];
|
||||
|
||||
const data = [ ...new Array(10000) ].map((e, i) => {
|
||||
const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
|
||||
if(i%3==0){
|
||||
rs.b = '女';
|
||||
}
|
||||
return rs;
|
||||
})
|
||||
|
||||
|
||||
class Demo30 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data,
|
||||
selectedRowIndex: 0
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 表体滚动加载时触发的回调函数
|
||||
* @param endIndex 可视区最后一条数据的 index 序号
|
||||
*/
|
||||
handleBodyScroll = endIndex => {
|
||||
console.log('endIndex：', endIndex);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<BigDataTable
|
||||
columns={columns}
|
||||
data={this.state.data}
|
||||
scroll={{y:300}}
|
||||
onRowClick={(record, index, indent) => {
|
||||
console.log('currentIndex--'+index);
|
||||
}}
|
||||
onBodyScroll={this.handleBodyScroll}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo30;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
.big-data tr td {
|
||||
// height: 48px;
|
||||
}
|
||||
|
|
@ -1,140 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 嵌套子表格滚动加载
|
||||
* @parent 无限滚动 Infinite-scroll
|
||||
* @description 通过expandedRowRender参数来实现子表格。注意：表格行数据必须有唯一标识，可以通过 `data.key` 或 `rowKey` 两种方式传入。
|
||||
* demo1402
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Popconfirm} from 'tinper-bee';
|
||||
import Table from "../../src";
|
||||
import BigData from "../../src/lib/bigData";
|
||||
const BigDataTable = BigData(Table);
|
||||
const outColumns = [
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width:200,
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
|
||||
<a href="javascript:;">
|
||||
一些操作
|
||||
</a>
|
||||
</Popconfirm>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ title: "用户名", dataIndex: "a", key: "a", width: 250 },
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
|
||||
];
|
||||
const innerColumns = [
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width:200,
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
|
||||
<a href="javascript:;">
|
||||
一些操作
|
||||
</a>
|
||||
</Popconfirm>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ title: "用户名", dataIndex: "a", key: "a", width: 100 },
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
|
||||
];
|
||||
|
||||
const data16 = [ ...new Array(10000) ].map((e, i) => {
|
||||
return { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
class Demo31 extends Component {
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state={
|
||||
data_obj:{
|
||||
0:[
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" }
|
||||
],
|
||||
1: [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "菲菲", b: "nv", c: 67, d: "操作", key: "2" }
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
expandedRowRender = (record, index, indent) => {
|
||||
let height = 200;
|
||||
let innderData = [ ...new Array(100) ].map((e, i) => {
|
||||
return { a: index+"-"+ i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: index+"-"+ i };
|
||||
})
|
||||
return (
|
||||
<Table
|
||||
|
||||
columns={innerColumns}
|
||||
scroll={{y:height}}
|
||||
data={innderData}
|
||||
|
||||
/>
|
||||
);
|
||||
};
|
||||
getData=(expanded, record)=>{
|
||||
//当点击展开的时候才去请求数据
|
||||
let new_obj = Object.assign({},this.state.data_obj);
|
||||
if(expanded){
|
||||
if(record.key==='1'){
|
||||
new_obj[record.key] = [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" }
|
||||
]
|
||||
this.setState({
|
||||
data_obj:new_obj
|
||||
})
|
||||
}else{
|
||||
new_obj[record.key] = [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "菲菲", b: "nv", c: 67, d: "操作", key: "2" }
|
||||
]
|
||||
this.setState({
|
||||
data_obj:new_obj
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
haveExpandIcon=(record, index)=>{
|
||||
//控制是否显示行展开icon，该参数只有在和expandedRowRender同时使用才生效
|
||||
if(index == 0){
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<BigDataTable
|
||||
columns={outColumns}
|
||||
data={data16}
|
||||
onExpand={this.getData}
|
||||
expandedRowRender={this.expandedRowRender}
|
||||
scroll={{y:350}}
|
||||
// defaultExpandedRowKeys={[0,1]}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo31;
|
||||
|
|
@ -1,90 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 多功能表格滚动加载
|
||||
* @parent 无限滚动 Infinite-scroll
|
||||
* @description
|
||||
* demo1403
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import {Tooltip,Checkbox,Icon,Popover} from "tinper-bee";
|
||||
import Table from "../../src";
|
||||
import BigData from "../../src/lib/bigData";
|
||||
import multiSelect from '../../src/lib/multiSelect';
|
||||
import filterColumn from '../../src/lib/filterColumn';
|
||||
|
||||
let ComplexTable = filterColumn(multiSelect(BigData(Table), Checkbox), Popover, Icon);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title:'序号',
|
||||
dataIndex:'index',
|
||||
width:'80',
|
||||
key:'index',
|
||||
render:(text,record,index)=>{
|
||||
return index
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "用户名", dataIndex: "a", key: "a", width: 580, className: "rowClassName",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "block",
|
||||
width: "40px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "bottom",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 80},
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
|
||||
];
|
||||
|
||||
const data = [ ...new Array(10000) ].map((e, i) => {
|
||||
const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
|
||||
if(i%3==0){
|
||||
rs.b = '女';
|
||||
}
|
||||
return rs;
|
||||
})
|
||||
|
||||
|
||||
class Demo43 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data,
|
||||
selectedRowIndex: 0
|
||||
}
|
||||
}
|
||||
getSelectedDataFunc = data => {
|
||||
console.log(data);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<ComplexTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
parentNodeId='parent'
|
||||
scroll={{y:300}}
|
||||
bordered
|
||||
onRowClick={(record, index, indent) => {
|
||||
this.setState({
|
||||
selectedRowIndex: index
|
||||
});
|
||||
}}
|
||||
getSelectedDataFunc={this.getSelectedDataFunc}/>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo43;
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
/**
|
||||
* @title 层级树大数据场景
|
||||
* @parent 无限滚动 Infinite-scroll
|
||||
* @description
|
||||
* demo1404
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import { Button } from "tinper-bee";
|
||||
|
||||
import Table from "../../src";
|
||||
import BigData from "../../src/lib/bigData";
|
||||
const BigDataTable = BigData(Table);
|
||||
const columns = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'index',
|
||||
width: '150',
|
||||
key: 'index',
|
||||
render: (text, record, index) => {
|
||||
return record.index ? record.index : index
|
||||
}
|
||||
},
|
||||
{ title: "用户名", dataIndex: "a", key: "a", width: 580, className: "rowClassName" },
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 80 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
|
||||
];
|
||||
|
||||
const data = [...new Array(10)].map((e, i) => {
|
||||
const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
|
||||
if (i % 3 == 0) {
|
||||
rs.b = '女';
|
||||
rs.children = [];
|
||||
for (let subi = 0; subi < 3; subi++) {
|
||||
rs.children.push({ a: i + subi + 'asub', b: i + subi + 'bsub', c: i + subi + 'csub', d: i + subi + 'dsub', key: i + `${subi} sub` });
|
||||
rs.children[subi].children = []
|
||||
for (let subj = 0; subj < 100; subj++) {
|
||||
rs.children[subi].children.push({ a: 333 + ' ' + subj, b: 333 + ' ' + subj, c: 333 + ' ' + subj, d: 333 + ' ' + subj, key: i + `${subj} sub1` });
|
||||
}
|
||||
}
|
||||
} else {
|
||||
rs.children = [];
|
||||
for (let subi = 0; subi < 3; subi++) {
|
||||
rs.children.push({ a: i + subi + 'asub', b: i + subi + 'bsub', c: i + subi + 'csub', d: i + subi + 'dsub', key: i + `${subi} sub` });
|
||||
}
|
||||
}
|
||||
return rs;
|
||||
})
|
||||
|
||||
const data2 = [...new Array(10000)].map((e, i) => {
|
||||
const rs = { a: i + 'a', b: i + 'b', c: i + 'c', d: i + 'd', key: i };
|
||||
if (i % 3 == 0) {
|
||||
rs.b = '女';
|
||||
}
|
||||
return rs;
|
||||
})
|
||||
|
||||
class Demo34 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* expanded : 当前的状态
|
||||
* record : 当前行的数据
|
||||
*/
|
||||
onExpand = (expanded, record) => {
|
||||
console.log('当前的状态---' + expanded, ' 当前行的数据---' , record);
|
||||
}
|
||||
handleClick = () => {
|
||||
this.setState({
|
||||
data: data2
|
||||
})
|
||||
}
|
||||
render () {
|
||||
return (
|
||||
<div>
|
||||
<Button onClick={this.handleClick} colors="secondary" style={{ marginBottom: '8px' }}>改变数据源</Button>
|
||||
<BigDataTable
|
||||
columns={columns}
|
||||
data={this.state.data}
|
||||
parentNodeId='parent'
|
||||
scroll={{ y: 300 }}
|
||||
onExpand={this.onExpand}
|
||||
onRowClick={(record, index, indent) => {
|
||||
console.log('currentIndex--' + index);
|
||||
}}
|
||||
rowKey="key"//每条数据的唯一标示，默认为key，如果不是key，必须传
|
||||
/>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo34;
|
||||
|
|
@ -1,13 +1,11 @@
|
|||
/**
|
||||
*
|
||||
* @title 自定义行、列合并
|
||||
* @parent 扩展行 Expanded Row
|
||||
* @title 表格行/列合并
|
||||
* @description 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
|
||||
* demo1108
|
||||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Button from 'bee-button';
|
||||
import Table from "../../src";
|
||||
|
||||
const renderContent = (value, row, index) => {
|
||||
|
|
@ -22,7 +20,7 @@ const renderContent = (value, row, index) => {
|
|||
};
|
||||
|
||||
const columns = [{
|
||||
title: '姓名',
|
||||
title: 'Name',
|
||||
key: "name",
|
||||
dataIndex: 'name',
|
||||
render: (text, row, index) => {
|
||||
|
|
@ -37,12 +35,12 @@ const columns = [{
|
|||
};
|
||||
},
|
||||
}, {
|
||||
title: '年龄',
|
||||
key: "age",
|
||||
title: 'Age',
|
||||
key: "Age",
|
||||
dataIndex: 'age',
|
||||
render: renderContent,
|
||||
}, {
|
||||
title: '联系方式',
|
||||
title: 'Home phone',
|
||||
colSpan: 2,
|
||||
key: "tel",
|
||||
dataIndex: 'tel',
|
||||
|
|
@ -63,115 +61,59 @@ const columns = [{
|
|||
return obj;
|
||||
},
|
||||
}, {
|
||||
title: '手机号',
|
||||
title: 'Phone',
|
||||
colSpan: 0,
|
||||
key: "phone",
|
||||
dataIndex: 'phone',
|
||||
render: renderContent,
|
||||
}, {
|
||||
title: '家庭住址',
|
||||
title: 'Address',
|
||||
key: "address",
|
||||
dataIndex: 'address',
|
||||
render: renderContent,
|
||||
}];
|
||||
|
||||
|
||||
const columns1 = [{
|
||||
title: '姓名',
|
||||
key: "name",
|
||||
dataIndex: 'name',
|
||||
render: (text, row, index) => {
|
||||
if (index < 4) {
|
||||
return <a href="#">{text}</a>;
|
||||
}
|
||||
return {
|
||||
children: <a href="#">{text}</a>,
|
||||
props: {
|
||||
colSpan: 5,
|
||||
},
|
||||
};
|
||||
},
|
||||
}, {
|
||||
title: '年龄',
|
||||
key: "age",
|
||||
dataIndex: 'age',
|
||||
render: renderContent,
|
||||
}, {
|
||||
title: '联系方式',
|
||||
colSpan: 2,
|
||||
key: "tel",
|
||||
dataIndex: 'tel',
|
||||
render: renderContent
|
||||
}, {
|
||||
title: '手机号',
|
||||
colSpan: 0,
|
||||
key: "phone",
|
||||
dataIndex: 'phone',
|
||||
render: renderContent,
|
||||
}, {
|
||||
title: '家庭住址',
|
||||
key: "address",
|
||||
dataIndex: 'address',
|
||||
render: renderContent,
|
||||
}];
|
||||
const data = [{
|
||||
key: '1',
|
||||
name: '小红',
|
||||
name: 'John Brown',
|
||||
age: 32,
|
||||
tel: '0571-22098909',
|
||||
phone: 18889898989,
|
||||
address: '北京海淀',
|
||||
address: 'New York No. 1 Lake Park',
|
||||
}, {
|
||||
key: '2',
|
||||
name: '小明',
|
||||
name: 'Jim Green',
|
||||
tel: '0571-22098333',
|
||||
phone: 18889898888,
|
||||
age: 42,
|
||||
address: '河北张家口',
|
||||
address: 'London No. 1 Lake Park',
|
||||
}, {
|
||||
key: '3',
|
||||
name: '张三',
|
||||
name: 'Joe Black',
|
||||
age: 32,
|
||||
tel: '0575-22098909',
|
||||
phone: 18900010002,
|
||||
address: '浙江杭州',
|
||||
address: 'Sidney No. 1 Lake Park',
|
||||
}, {
|
||||
key: '4',
|
||||
name: '李四',
|
||||
name: 'Jim Red',
|
||||
age: 18,
|
||||
tel: '0575-22098909',
|
||||
phone: 18900010002,
|
||||
address: '广州深圳',
|
||||
address: 'London No. 2 Lake Park',
|
||||
}, {
|
||||
key: '5',
|
||||
name: '王五',
|
||||
name: 'Jake White',
|
||||
age: 18,
|
||||
tel: '0575-22098909',
|
||||
phone: 18900010002,
|
||||
address: '北京昌平',
|
||||
address: 'Dublin No. 2 Lake Park',
|
||||
}];
|
||||
|
||||
class Demo15 extends Component {
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state={
|
||||
colFlag:false
|
||||
}
|
||||
}
|
||||
onChange=()=>{
|
||||
const colFlag = this.state.colFlag;
|
||||
this.setState({
|
||||
colFlag:!colFlag
|
||||
})
|
||||
}
|
||||
render() {
|
||||
let cols = this.state.colFlag?columns:columns1;
|
||||
return (
|
||||
<div>
|
||||
<Button onClick={this.onChange} colors="secondary" style={{marginBottom:'8px'}}>change列</Button>
|
||||
<Table columns={cols} data={data} bordered/>
|
||||
</div>
|
||||
|
||||
<Table columns={columns} data={data}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue