Skip to main content

动态数据

本地数据动态赋值

<div id="demo1" class="xm-select-demo"></div>

<script>
var demo1 = xmSelect.render({
el: '#demo1',
data: []
})

demo1.update({
data: [
{name: '张三', value: 1, selected: true},
{name: '李四', value: 2, selected: true},
{name: '王五', value: 3, disabled: true},
]
})

</script>

远程数据动态赋值

<div id="demo2" class="xm-select-demo"></div>

<script>
var demo2 = xmSelect.render({
el: '#demo2',
toolbar: {show: true},
data: []
})

axios({
method: 'get',
url: 'https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search',
}).then(response => {
var res = response.data;

demo2.update({
data: res.data,
autoRow: true,
})
});

</script>

动态创建xm-select多选

<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>