【超简单】基于 Layui + JQuery 的多项展示（可删除）

【超简单】基于 Layui + JQuery 的多项展示（可删除）

效果预览：

1. 导入 Layui 的依赖文件

<link rel="stylesheet" href="./js/layui/css/layui.css">
<script type="text/javascript" src="./js/layui/layui.all.js"></script>

2. 在页面中创建展示用的容器

<div class="layui-input" id="multi-deletable-container"></div>

这里原本放在表单里使用，所以用了class="layui-input"，你可以根据自己的需要进行修改。

3. 准备 Layui 的环境

<script>
    layui.use(['table', 'layer', 'form'], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        
        // 下面的代码放在这里
    });
</script>

4. 初始化数据

let itemList = [
    { id: 1, name: '张三', gender: '男' },
    { id: 2, name: '李四', gender: '女' },
    { id: 3, name: '王五', gender: '女' },
    // ...
];

// 初始化
itemList.forEach(function (item) {
    let _html = [
        '<span class="layui-btn layui-btn-sm itemInfo">' + item.name,
        	'<i class="layui-icon layui-icon-close btn-delete"></i>',
        '</span>'
    ].join('');
    $(_html).appendTo('#multi-deletable-container');
});

5. 监听删除小图标

// 删除
// 因为是根据数据动态生成的，所以要用事件委托
$('#multi-deletable-container').on('click', '.btn-delete', function () {
    $(this).closest('span').remove();
});

7. 最后，稍微修改下样式

#multi-deletable-container {
    height: auto;
    min-height: 42px;	/* 保持与其他表单控件的高度一致 */
    padding-top: 10px;
}

#multi-deletable-container .itemInfo {
    margin-bottom: 10px;
    margin-right: 10px;
    cursor: auto;
}

#multi-deletable-container .itemInfo+.itemInfo {
    margin-left: unset;
}

#multi-deletable-container i.btn-delete {
    font-size: 14px !important;
    padding: 2px;
    border-radius: 50%;
    margin-left: 5px;
    margin-right: -5px;
    cursor: pointer;
}

#multi-deletable-container i.btn-delete:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

---

这样就完成了基本的显示 + 删除的功能。
如果你还不满足，来自定义吧 ~
下面演示一个按住弹出提示的功能：

6. 按住提示（松开/移出关闭）

1. 首先，在初始化的时候，先使用.data()将需要用到的数据保存到名牌中：

   // 初始化
   itemList.forEach(function (item) {
      let _html = [
          '<span class="layui-btn layui-btn-sm itemInfo">' + item.name,
              '<input type="hidden" name="demo" value="' + item.id + '" />',
              '<i class="layui-icon layui-icon-close btn-delete"></i>',
          '</span>'
      ].join('');
      $(_html).data('itemInfo', item).appendTo('#multi-deletable-container');
   });
   

2. 监听名牌的鼠标事件，data()获取保存的数据，进行展示：

   var itemInfoTipsTimeout;
   var itemInfoTips;
   $('#multi-deletable-container')
   	// 按住提示
       .on('mousedown', '.itemInfo', function () {
           var that = this;
           itemInfoTipsTimeout = window.setTimeout(function () {
   
               // 获取数据，自定义展示
               var itemInfo = $(that).data('itemInfo');
               var msg = JSON.stringify(itemInfo);
               itemInfoTips = layer.msg(msg, { time: 0 })
   
           }, 200);
       })
       // 松开/移出关闭
       .on('mouseup mouseleave', '.itemInfo', function () {
           layer.close(itemInfoTips);
           window.clearTimeout(itemInfoTipsTimeout);
       });