xm-select agrupación de datos dinámicos selección múltiple

Los recursos de la página de inicio xm-select-v1.2.1 se pueden descargar gratis ~

Primero mira el
Inserte la descripción de la imagen aquí
código js del resultado

 	<script src="../static/xmSelect/xm-select.js"></script>
	<div id="demo" class="xm-select-demo" style="width: 300px; margin: 20px;"></div>

	<script>
	  layui.config({
    
    
            base: '静态文件根路径/'
        }).extend({
    
    
            // 根路径下的具体路径(xmSelect/xmSelect.js)
            xmSelect: 'xmSelect/xmSelect'
        }).use(['xmSelect'], function () {
    
    
            // 开始使用xmSelect
            var xmSelect = layui.xmSelect;
            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:" ",
	        success: function (res) {
    
    
	            demo.update({
    
    
	                data: res.data
	            })
	        }
	   });

</script>

El tipo de datos devuelto es el mismo que Layui, la diferencia es el vo en la matriz de datos

	{
    
    
        "code": 0,
        "msg": "success",
        "data": [
        	{
    
    name: '张三', value: 1},
            {
    
    name: '李四', value: 2},
            {
    
    
                name: '水果',
                children: [
                    {
    
    name: '苹果', value: 3},
                    {
    
    name: '香蕉', value: 4},
                    {
    
    name: '梨', value: 5}
                ]
            },
            {
    
    
                name: '蔬菜',
                 children: [
                    {
    
    name: '萝卜', value: 6},
                    {
    
    name: '白菜', value: 7}
                ]
            }
        }

Para más jugabilidad, consulte xm-select

Supongo que te gusta

Origin blog.csdn.net/aquariusVvZh/article/details/111592138
Recomendado
Clasificación