master

分支 (2)

管理

管理

master

develop

layui-component_1
/
dropdownTable-example.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>下拉表格组件使用演示</title>
  <link rel="stylesheet" href="layui/css/layui.css">
</head>

<body>

  <div class="layui-container" style="margin-top:20px">
    <blockquote class="layui-elem-quote" style="margin-top:50px;">
      <legend>下拉表格-使用示例 </legend>
    </blockquote>
    <form class="layui-form">
      <div class="layui-form-item">
        <label class="layui-form-label" for="name">姓名</label>
        <input type="hidden" name="name" id="name" data-display-value="王五" value="1" />
        <div class="layui-input-block">
          <a id="genderSelect"></a>
        </div>
      </div>
    </form>
  </div>

  <script src="layui/layui.js"></script>
  <script>
    layui.config({
      base: 'layui-exts'
    }).extend({
      'dropdownTable': '/dropdownTable/dropdownTable'
    });

    layui.use(['dropdownTable', 'jquery'], () => {
      let dropdownTable = layui.dropdownTable,
        layer = layui.layer,
        $ = layui.jquery;

      dropdownTable.render({
        emptyMsg: '请选择人员',
        elem: "#genderSelect",
        bindInput: "#name", //结果集绑定到对应的input上，多选为$符号分割的值
        selectType: 'checkbox', //支持单选和多选，默认为单选，值：checkbox【多选】、radio【单选】
        searchName: 'keyWords', //搜索框提交key，默认为keyWords
        needPopup: true, //是否需要弹窗选择方式，默认为true，会在后自动添加选择按钮,如需要关闭，请改为false
        selectTable: {
          uniqueId: 'id',
          displayField: 'username',
          //具体可参考layui的table模块，和table模块的保持一致
          cols: [[
            { field: 'id', title: 'ID' },
            { field: 'username', title: '用户' },
            { field: 'sex', title: '性别' },
            { field: 'city', title: '城市' }
          ]],
          data: [
            { "id": "1", "username": "王五", "sex": "男", "city": "浙江杭州" },
            { "id": "2", "username": "三甲", "sex": "女", "city": "浙江杭州" },
            { "id": "3", "username": "李四", "sex": "女", "city": "浙江杭州" }
          ],
          page: true,
          limit: 2
        },
        //选中行的ID集合，可结合自身业务，去后台获取自己完整的数据
        onSelected: (ids) => {
          console.log(ids);
        }
      });

    });
  </script>
</body>

</html>