前書き
多肢選択式のソリューションは、layuiから始まりました。
レンダリング速度が遅く、コードが冗長であるため、以前のformSelectsは廃止されました
。xm-selectは、新しい開発方法を使用し、レンダリングにpreactを使用し、レンダリング速度を大幅に向上させ、柔軟に拡張できます。
xm-select-v1.2.1ホームページのリソースは無料でダウンロードできます〜
結果
リモートデータの動的割り当て
<script src="../static/xmSelect/xm-select.js"></script>
<div id="demo" class="xm-select-demo" style="width: 300px; margin: 20px;"></div>
<script>
xmSelect.render({
el: '#demo',
toolbar: {
show: true}, // 开启清空 全选
// 监听下拉框
on: function (data) {
// arr: 当前多选已选中的数据
var arr = data.arr;
// change, 此次选择变化的数据,数组
var change = data.change;
// isAdd, 此次操作是新增还是删除
var isAdd = data.isAdd;
console.log(arr);
},
data: []
});
$.ajax({
dataType: "json",
type: 'get',
url:"https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search",
success: function (res) {
demo.update({
data: res.data
})
}
});
</script>
返されるデータ型はlayuiと同じです
{
"code": 0,
"msg": "success",
"data": [
{
name: '张三', value: 1},
{
name: '李四', value: 2},
{
name: '王五', value: 3}
]
}
1.リモートデータグループの複数選択については 、動的データグループのxm-select
を参照してください。2。その他のゲームプレイについては、 xm-selectを参照してください。