v1.1.7

CHANGELOG.md

@@ -1,5 +1,25 @@
 ## 更新日志
 
+### 1.1.7
+
+*2020-01-02*
+
+#### 新增
+
+- tree模式下可以使用工具条
+- tree模式新增远程搜索
+- tree模式新增搜索结束回调
+
+#### Bug fixes
+
+- 修复搜索模式下, 有分页的情况, 二次搜索没有回到第一页的问题
+- 修复数据过多时的滚动样式问题
+
+#### 预告
+
+- 级联正在路上
+
+
 ### 1.1.6
 
 *2019-12-18*

docs/mds/ZP02.md

@@ -79,6 +79,10 @@ var demo1 = xmSelect.render({
 		indent: 20,
 		expandedKeys: [ -3 ],
 	},
+	toolbar: {
+		show: true,
+		list: ['ALL', 'REVERSE', 'CLEAR']
+	},
 	filterable: true,
 	height: 'auto',
 	data(){

docs/mds/ZTEST.md

@@ -7,14 +7,33 @@
 <script>
 var demo1 = xmSelect.render({
 	el: '#demo1', 
-	cascader: {
+	tree: {
 		show: true,
 		showFolderIcon: true,
 		showLine: true,
-		indent: 80,
+		indent: 20,
 		expandedKeys: true,
 	},
 	filterable: true,
+	filterDone(){
+		console.log('搜索结束')
+	},
+	remoteSearch: true,
+	//远程搜索回调
+	remoteMethod: function(val, cb){
+		console.log('远程')
+		cb([
+			{name: '销售员', value: -1, disabled: true, children: [
+				{name: '张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三张三1', value: 1, selected: true, children: []},
+				{name: '李四1', value: 2, selected: true},
+				{name: '王五1', value: 3, disabled: true},
+			]},
+		]);
+	},
+	toolbar: {
+		show: true,
+		list: ['ALL', 'REVERSE', 'CLEAR']
+	},
 	height: 'auto',
 	data(){
 		return [

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "xm-select",
-	"version": "1.1.6",
+	"version": "1.1.7",
 	"description": "始于Layui的select多选解决方案",
 	"main": "index.js",
 	"scripts": {

src/components/framework/index.js

@@ -6,7 +6,7 @@ import Label from '../label';
 import General from '../plugin/general';
 import Custom from '../plugin/custom';
 import Tree from '../plugin/tree';
-import Cascader from '../plugin/cascader';
+// import Cascader from '../plugin/cascader';
 
 /**
  * 框架渲染类, 渲染基础的外边框 + 属性变化监听
@@ -306,7 +306,7 @@ class Framework extends Component{
 		}else
 		//树状结构数据更新
 		if(type === 'treeData'){
-			this.value(this.state.sels, null, true)
+			this.value(data, null, true)
 		}else
 		//树状结构数据更新
 		if(type === 'close'){
@@ -384,7 +384,8 @@ class Framework extends Component{
 		const bodyProps = {  ...config, data, dataObj, flatData, sels, ck: this.itemClick.bind(this), show, onReset: this.onReset.bind(this) }
 
 		//渲染组件
-		let Body = content ? <Custom { ...bodyProps } /> : tree.show ? <Tree { ...bodyProps } /> : config.cascader.show ? <Cascader { ...bodyProps } /> : <General { ...bodyProps } />;
+		// let Body = content ? <Custom { ...bodyProps } /> : tree.show ? <Tree { ...bodyProps } /> : config.cascader.show ? <Cascader { ...bodyProps } /> : <General { ...bodyProps } />;
+		let Body = content ? <Custom { ...bodyProps } /> : tree.show ? <Tree { ...bodyProps } /> : <General { ...bodyProps } />;
 
 		return (
 			<xm-select { ...xmSelectProps } >

src/components/plugin/general.js

@@ -94,7 +94,7 @@ class General extends Component{
 			//让搜索变成异步的
 			this.searchCid = setTimeout(() => {
 				this.callback = true;
-				this.setState({ filterValue: this.__value, remote: true })
+				this.setState({ filterValue: this.__value, remote: true, pageIndex: 1 })
 			}, this.props.delay);
 		}
 	}

src/components/plugin/tree.js

@@ -1,5 +1,5 @@
 import { h, Component, render } from 'preact'
-import { deepMerge, isFunction } from '@/common/util'
+import { deepMerge, isFunction, mergeArr } from '@/common/util'
 
 const emptyVal = {};
 
@@ -77,7 +77,7 @@ class Tree extends Component{
 					item.__node.loading = false;
 					item[prop.children] = this.handlerData(result, prop.children);
 					item[prop.selected] = sels.findIndex(i => i[prop.value] === item[prop.value]) != -1
-					this.props.onReset(item, 'treeData');
+					this.props.onReset(sels, 'treeData');
 				});
 			}
 		}else if(type === 'checkbox'){
@@ -199,7 +199,7 @@ class Tree extends Component{
 
 	render(config, { expandedKeys }) {
 		let { prop, empty, sels, theme, radio, template, data, tree, filterable, remoteSearch, searchTips } = config;
-		let { name, value, disabled, children } = prop;
+		let { name, value, disabled, children, optgroup } = prop;
 
 		const showIcon = config.model.icon != 'hidden';
 		const renderItem = (item, indent, expand) => {
@@ -303,13 +303,16 @@ class Tree extends Component{
 			}
 		}
 
-		let arr = data.map(item => renderGroup(item, 10 - tree.indent)).filter(a => a);
-		let safetyArr = deepMerge([], arr);
+		let safetyArr = deepMerge([], data);
 		let safetySels = deepMerge([], sels);
-
 		this.tempData = safetyArr;
 
+		let arr = data.map(item => renderGroup(item, 10 - tree.indent)).filter(a => a);
+
 		//工具条操作
+		function flat(list, array){
+			array.forEach(item => item[optgroup] ? flat(list, item[children]) : list.push(item))
+		}
 		const toolbar = (
 			<div class='xm-toolbar'>
 				{ config.toolbar.list.map(tool => {
@@ -318,15 +321,30 @@ class Tree extends Component{
 					let info, name = config.languageProp.toolbar[tool];
 					if(tool === 'ALL'){
 						info = { icon: 'xm-iconfont xm-icon-quanxuan', name, method: (pageData) => {
-
+							let list = [];
+							flat(list, pageData);
+							list = list.filter(item => !item[disabled])
+							this.props.onReset(radio ? list.slice(0, 1) : mergeArr(list, sels, prop), 'treeData');
 						} };
 					}else if(tool === 'CLEAR'){
 						info = { icon: 'xm-iconfont xm-icon-qingkong', name, method: (pageData) => {
-
+							this.props.onReset(sels.filter(item => item[prop.disabled]), 'treeData');
 						} };
 					}else if(tool === 'REVERSE'){
 						info = { icon: 'xm-iconfont xm-icon-fanxuan', name, method: (pageData) => {
-
+							let list = [];
+							flat(list, pageData);
+							list = list.filter(item => !item[disabled])
+							let selectedList = [];
+							sels.forEach(item => {
+								let index = list.findIndex(pageItem => pageItem[value] === item[value]);
+								if(index == -1){
+									selectedList.push(item);
+								}else{
+									list.splice(index, 1);
+								}
+							})
+							this.props.onReset(radio ? selectedList.slice(0, 1) : mergeArr(list, selectedList, prop), 'treeData');
 						} };
 					}else {
 						info = tool
@@ -359,9 +377,9 @@ class Tree extends Component{
 			arr.push(<div class="xm-select-empty">{ empty }</div>)
 		}
 
-		// { config.toolbar.show && toolbar }
 		return (
 			<div onClick={ this.blockClick } class="xm-body-tree" >
+				{ config.toolbar.show && toolbar }
 				{ search }
 				<div class="scroll-body" style={ {maxHeight: config.height} }>{ arr }</div>
 				{ this.state.loading && <div class="loading" >