xm-select/docs/mds/ZP01.md
2019-11-19 20:13:50 +08:00

76 lines
1.3 KiB
Markdown

## 下拉自定义
### 下拉表格
至于能干什么, 就看你们的想象了~~
:::demo
```html
<div id="demo1"></div>
<script>
//先渲染多选
var demo1 = xmSelect.render({
el: '#demo1',
prop: {
name: 'username',
value: 'username',
},
content: `
<table class="layui-table" lay-filter="demo">
<thead>
<tr>
<th lay-data="{field:'username', width:80}">昵称</th>
<th lay-data="{field:'experience', width:50, sort:true}">积分</th>
<th lay-data="{field:'sign', width: 200}">签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心1</td>
<td>66</td>
<td>人生就像是一场修行a</td>
</tr>
<tr>
<td>贤心2</td>
<td>88</td>
<td>人生就像是一场修行b</td>
</tr>
<tr>
<td>贤心3</td>
<td>33</td>
<td>人生就像是一场修行c</td>
</tr>
</tbody>
</table>
`,
height: 'auto',
})
layui.table.init('demo', {
done: function(res){
demo1.update({ data: res.data })
}
}).on('row(demo)', function(obj){
var values = demo1.getValue();
var item = obj.data;
var has = values.find(function(i){
return i.username === item.username
})
if(has){
demo1.delete([ item ]);
}else{
demo1.append([ item ]);
}
})
</script>
```
:::