文档新增示例代码

docs/mds/ZM05.md

@@ -51,6 +51,102 @@ axios({
 	})
 });
 
+</script>
+```
+:::
+
+
+### 动态创建xm-select多选
+
+:::demo 
+```html
+<table id="form-create" class="layui-table">
+	<thead>
+		<tr>
+			<th style="width: 50px;">序号</th>
+			<th>性别</th>
+			<th>爱好</th>
+			<th style="width: 150px;">操作</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td colspan="3">
+				<span>这里呢, 演示一下动态添加多选的例子</span>
+			</td>
+			<td colspan="1">
+				<div class="layui-btn-group">
+					<button type="button" class="layui-btn add">增加</button>
+				</div>
+			</td>
+		</tr>
+	</tbody>
+</table>
+
+<script>
+var $ = layui.jquery;
+var index = 1;
+				
+$('.add').on('click', function(){
+	var element = $([
+		'<tr>',
+			'<td>'+ index +'</td>',
+			'<td class="gender"></td>',
+			'<td class="hobby"></td>',
+			'<td class="handler">',
+				'<button type="button" class="layui-btn layui-btn-normal get">取值</button>',
+				'<button type="button" class="layui-btn layui-btn-danger del">删除</button>',
+			'</td>',
+		'</tr>',
+	].join(''))
+	
+	var hobby = element.find('.hobby')[0];
+	var hobbySelect = xmSelect.render({
+		el: hobby,
+		data: function(){
+			return [
+				{name: '篮球' + index, value: 1},
+				{name: '足球' + index, value: 2},
+				{name: '乒乓球' + index, value: 3},
+			]
+		}
+	})
+	
+	var gender = element.find('.gender')[0];
+	xmSelect.render({
+		el: gender,
+		radio: true,
+		clickClose: true,
+		model: { label: { type: 'text' } },
+		data: function(){
+			return [
+				{name: '男', value: 1},
+				{name: '女', value: 2},
+				{name: '保密', value: 3},
+			]
+		},
+		on: function(data){
+			var changeItem = data.change[0];
+			if(data.isAdd && changeItem.value == 3){
+				this.update({ disabled: true })
+			}else{
+				this.update({ disabled: false })
+			}
+		}.bind(hobbySelect),
+	})
+	
+	element.find('.get').on('click', function(){
+		alert('valueStr: ' + this.getValue('valueStr'));
+	}.bind(hobbySelect))
+	
+	element.find('.del').on('click', function(){
+		$(this).parents('tr').remove();
+	})
+	
+	index++;
+	
+	$('#form-create tbody').append(element)
+});
 </script>
 ```
 :::

docs/mds/ZP02.md

@@ -180,3 +180,140 @@ var demo2 = xmSelect.render({
 </script>
 ```
 :::
+
+
+### 单选树(radio模式)
+
+```
+//显示为text模式
+model: { label: { type: 'text' } },
+//单选模式
+radio: true,
+//选中关闭
+clickClose: true,
+//树
+tree: {
+	show: true,
+	//非严格模式
+	strict: false,
+	//默认展开节点
+	expandedKeys: [ -1 ],
+},
+```
+
+:::demo 
+```html
+<div id="demo3" class="xm-select-demo"></div>
+
+<script>
+var demo3 = xmSelect.render({
+	el: '#demo3', 
+	model: { label: { type: 'text' } },
+	radio: true,
+	clickClose: true,
+	tree: {
+		show: true,
+		strict: false,
+		expandedKeys: [ -1 ],
+	},
+	height: 'auto',
+	data(){
+		return [
+			{name: '销售员', value: -1, children: [
+				{name: '张三', 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>
+```
+:::
+
+
+### 单选树(on处理模式)
+
+```
+//显示为text模式
+model: { label: { type: 'text' } },
+//树
+tree: {
+	show: true,
+	//非严格模式
+	strict: false,
+	//默认展开节点
+	expandedKeys: [ -1, -3 ],
+},
+//处理方式
+on: function(data){
+	if(data.isAdd){
+		return data.change.slice(0, 1)
+	}
+},
+```
+
+:::demo 
+```html
+<div id="demo4" class="xm-select-demo"></div>
+
+<script>
+var demo4 = xmSelect.render({
+	el: '#demo4', 
+	model: { label: { type: 'text' } },
+	tree: {
+		show: true,
+		strict: false,
+		expandedKeys: [ -1 ],
+	},
+	on: function(data){
+		if(data.isAdd){
+			return data.change.slice(0, 1)
+		}
+	},
+	height: 'auto',
+})
+
+//这里模拟ajax
+setTimeout(function(){
+	demo4.update({
+		data: [
+			{name: '销售员', value: -1, children: [
+				{name: '张三', value: 100, children: []},
+				{name: '李四1', value: 2},
+				{name: '王五1', value: 3, disabled: true},
+			]},
+			{name: '奖品', value: -2, children: [
+				{name: '奖品3', value: -3, children: [
+					{name: '苹果3', value: 14},
+					{name: '香蕉3', value: 15},
+					{name: '葡萄3', value: 16},
+				]},
+				{name: '苹果2', value: 4, disabled: true},
+				{name: '香蕉2', value: 5},
+				{name: '葡萄2', value: 6},
+			]},
+		]
+	})
+	
+	//设置默认值
+	demo4.setValue([
+		{name: '李四1', value: 2},
+		{name: '苹果3', value: 14},
+	], null, true)
+	
+}, 300)
+
+</script>
+```
+:::

docs/mds/ZTEST.md

@@ -11,7 +11,7 @@ var demo1 = xmSelect.render({
 	pageSize: 2,
 	autoRow: true,
 	tree: {
-		strict: true,
+		strict: false,
 		show: true,
 		showFolderIcon: true,
 		showLine: true,
@@ -33,7 +33,7 @@ var demo1 = xmSelect.render({
 	model: {
 		icon: 'show'
 	},
-	radio: false,
+	radio: true,
 	toolbar: {
 		show: true
 	},
@@ -47,7 +47,7 @@ var demo1 = xmSelect.render({
 				{name: '朝阳区', value: 1, children: [
 					{name: '河北省', value: -12, children: [
 						{name: '廊坊市', value: 14, selected: true},
-						{name: '石家庄', value: 15},
+						{name: '石家庄', value: 15, selected: true},
 						{name: '邯郸市', value: 16},
 					]}