v1.1.0.Beta+

2019-11-22 20:33:17 +08:00
parent db6fdae5cd
commit b14cbaa913
17 changed files with 366 additions and 160 deletions
--- a/docs/mds/XM08.md
+++ b/docs/mds/XM08.md
@@ -174,3 +174,105 @@ var demo4 = xmSelect.render({
 </script>
 ```
 :::
+
+
+###  远程分页
+
+```
+xmSelect.render({
+    //...
+	//开启分页
+    paging: true,
+	//远程分页
+    pageRemote: true,
+	//实现方法
+    remoteMethod: function(val, cb, show, pageIndex),
+})
+```
+
+:::demo `render`后, 就会进行一次回调, 用于渲染第一次数据
+```html
+<div id="demo5" class="xm-select-demo"></div>
+
+<script>
+var demo5 = xmSelect.render({
+	el: '#demo5', 
+	paging: true,
+	pageRemote: true,
+	remoteMethod: function(val, cb, show, pageIndex){
+		//val: 搜索框的内容, 不开启搜索默认为空, cb: 回调函数, show: 当前下拉框是否展开, pageIndex: 当前第几页
+		
+		//这里的axios类似于ajax
+		axios({
+			method: 'get',
+			url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
+			params: {
+				keyword: val + '_' + pageIndex,
+			}
+		}).then(response => {
+			//这里是success的处理
+			var res = response.data;
+			//回调需要两个参数, 第一个: 数据数组, 第二个: 总页码
+			cb(res.data, 10)
+		}).catch(err => {
+			//这里是error的处理
+			cb([], 0);
+		});
+	}
+})
+</script>
+```
+:::
+
+
+###  搜索 + 远程分页
+
+```
+xmSelect.render({
+    //...
+	//开启分页
+    paging: true,
+	//远程分页
+    pageRemote: true,
+	//实现方法
+    remoteMethod: function(val, cb, show, pageIndex),
+})
+```
+
+:::demo `render`后, 就会进行一次回调, 用于渲染第一次数据
+```html
+<div id="demo6" class="xm-select-demo"></div>
+
+<script>
+var demo6 = xmSelect.render({
+	el: '#demo6', 
+	//配置搜索
+	filterable: true,
+	//配置远程分页
+	paging: true,
+	pageRemote: true,
+	//数据处理
+	remoteMethod: function(val, cb, show, pageIndex){
+		//val: 搜索框的内容, 不开启搜索默认为空, cb: 回调函数, show: 当前下拉框是否展开, pageIndex: 当前第几页
+		
+		//这里的axios类似于ajax
+		axios({
+			method: 'get',
+			url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
+			params: {
+				keyword: val + '_' + pageIndex,
+			}
+		}).then(response => {
+			//这里是success的处理
+			var res = response.data;
+			//回调需要两个参数, 第一个: 数据数组, 第二个: 总页码
+			cb(res.data, 10)
+		}).catch(err => {
+			//这里是error的处理
+			cb([], 0);
+		});
+	}
+})
+</script>
+```
+:::
--- a/docs/mds/ZM06.md
+++ b/docs/mds/ZM06.md
@@ -1,4 +1,4 @@
-## 远程搜索
+## 弹框中的多选


 ### layer弹出框
--- a/docs/mds/ZP02.md
+++ b/docs/mds/ZP02.md
@@ -102,3 +102,76 @@ var demo1 = xmSelect.render({
 </script>
 ```
 :::
+
+
+### 懒加载的树
+
+```
+tree: {
+	show: true,
+	expandedKeys: [ -1 ],
+	//开启懒加载
+	lazy: true,
+	//加载方法
+	load: function(item, cb){
+		//item: 点击的节点, cb: 回调函数
+		//这里模拟ajax
+		setTimeout(function(){
+			var name = item.name + 1;
+			cb([
+				{name: item.name + 1, value: item.value + '1', children: [] },
+				{name: item.name + 2, value: item.value + '2' },
+			])
+		}, 500)
+	}
+},
+```
+
+:::demo 
+```html
+<div id="demo2" class="xm-select-demo"></div>
+
+<script>
+var demo2 = xmSelect.render({
+	el: '#demo2', 
+	autoRow: true,
+	tree: {
+		show: true,
+		showFolderIcon: true,
+		showLine: true,
+		indent: 20,
+		expandedKeys: [ -1 ],
+		lazy: true,
+		load: function(item, cb){
+			setTimeout(function(){
+				cb([
+					{name: item.name + 1, value: item.value + '1', children: [] },
+					{name: item.name + 2, value: item.value + '2' },
+				])
+			}, 500)
+		}
+	},
+	height: 'auto',
+	data(){
+		return [
+			{name: '销售员', value: -1, children: [
+				{name: '张三1', value: 100, selected: true, children: []},
+				{name: '李四1', value: 2, selected: true},
+				{name: '王五1', value: 3, disabled: true},
+			]},
+			{name: '奖品', value: -2, children: [
+				{name: '奖品3', value: -3, children: [
+					{name: '苹果3', value: 14, selected: true},
+					{name: '香蕉3', value: 15},
+					{name: '葡萄3', value: 16},
+				]},
+				{name: '苹果2', value: 4, selected: true, disabled: true},
+				{name: '香蕉2', value: 5},
+				{name: '葡萄2', value: 6},
+			]},
+		]
+	}
+})
+</script>
+```
+:::
--- a/docs/mds/ZTEST.md
+++ b/docs/mds/ZTEST.md
@@ -1,34 +1,41 @@
 ## 测试

-
-:::demo 
-```html
-
-<div id="demo1" class="xm-select-demo"></div>
-
-<script>
-//先渲染多选
+:::demo 
+```html
+<div id="demo1" class="xm-select-demo"></div>
+
+<script>
 var demo1 = xmSelect.render({
 	el: '#demo1', 
 	autoRow: true,
 	tree: {
 		show: true,
-		expandedKeys: [-3],
+		showFolderIcon: true,
+		showLine: true,
+		indent: 20,
+		expandedKeys: [ -1 ],
+		lazy: true,
+		load: function(item, cb){
+			setTimeout(function(){
+				var name = item.name + 1;
+				cb([
+					{name: item.name + 1, value: item.value + '1', children: [] },
+					{name: item.name + 2, value: item.value + '2' },
+				])
+			}, 500)
+		}
 	},
 	height: 'auto',
-	on({ arr, change, isAdd }){
-		console.log(arr, change, isAdd)
-	},
 	data(){
 		return [
-			{name: '销售员', value: -1, disabled: true, children: [
-				{name: '张三1', value: 1, selected: true},
+			{name: '销售员', value: -1, children: [
+				{name: '张三1', value: 100, selected: true, children: []},
 				{name: '李四1', value: 2, selected: true},
 				{name: '王五1', value: 3, disabled: true},
 			]},
 			{name: '奖品', value: -2, children: [
 				{name: '奖品3', value: -3, children: [
-					{name: '苹果3', value: 14, selected: true, disabled: true},
+					{name: '苹果3', value: 14, selected: true},
 					{name: '香蕉3', value: 15},
 					{name: '葡萄3', value: 16},
 				]},
@@ -39,6 +46,6 @@ var demo1 = xmSelect.render({
 		]
 	}
 })
-</script>
-```
+</script>
+```
 :::
--- a/docs/mds/options.md
+++ b/docs/mds/options.md
@@ -18,13 +18,14 @@
 | filterMethod	  | 搜索回调函数 | function(val, item, index, prop)  val: 当前搜索值, item: 每个option选项, index: 位置数据中的下标, prop: 定义key		   |	-	|	-	|
 | filterDone		| 搜索完成函数 | function(val, list)  val: 当前搜索值, list: 过滤后的数据		   |	-	|	-	|
 | remoteSearch	  | 是否开启自定义搜索 (远程搜索)| boolean		   |	true / false   |	false	|
-| remoteMethod	  | 自定义搜索回调函数 | function(val, cb, show)  val: 当前搜索值, cb: 回调函数, 需要回调一个数组, 结构同data, show: 下拉框显示状态		 |	-	|	-	|
+| remoteMethod	  | 自定义搜索回调函数 | function(val, cb, show, pageIndex)  val: 当前搜索值, cb(arr, totalPage): 回调函数, 需要回调一个数组, 结构同data, 远程分页需要第二个参数: 总页码, show: 下拉框显示状态, pageIndex: 分页下当前页码		 |	-	|	-	|
 | direction		 | 下拉方向| string		   |	auto / up / down   |	auto	|
 | style			 | 自定义样式| object		   |	-   |	{ }	|
 | height			| 默认最大高度| string		   |	-   |	200px   |
 | paging			| 是否开启自定义分页 | boolean		   |	true / false   |	false	|
 | pageSize		  | 分页条数 | int		   |	-   |	10	|
 | pageEmptyShow	 | 分页无数据是否显示 | boolean		   |	true / false   |	true	|
+| pageRemote	 | 是否开启远程分页 | boolean		   |	true / false   |	true	|
 | radio			 | 是否开启单选模式 | boolean		   |	true / false   |	false	|
 | repeat			| 是否开启重复性模式 | boolean		   |	true / false   |	false	|
 | clickClose		| 是否点击选项后自动关闭下拉框 | boolean		   |	true / false   |	false	|