RepositorySys/wwwroot/layui/page/table-select.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table下拉选择器</title>
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

        <blockquote class="layui-elem-quote">
            table下拉选择器使用开源项目：TableSelect<br>
            在开源的基础上修改支持多条件搜索、宽以及高的自定义<br>
            <a href="https://gitee.com/lolicode/layui_component_tableselect" target="_blank" class="layui-btn layui-btn-danger">TableSelect</a>
        </blockquote>

        <form class="layui-form" action="" style="padding:20px;">
            <div class="layui-form-item">
                <label class="layui-form-label">多选</label>
                <div class="layui-input-inline">
                    <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input" id="demo" value="刘晓军,张恒" ts-selected="002,003">
                </div>
                <div class="layui-form-mid layui-word-aux">本地演示数据，分页选中和其他页一样，这不是BUG</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">单选</label>
                <div class="layui-input-inline">
                    <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input" id="demo2">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">多搜索条件</label>
                <div class="layui-input-inline">
                    <input type="text" name="" placeholder="请输入" autocomplete="off" class="layui-input" id="demo3">
                </div>
            </div>

        </form>

        <pre class="layui-code">

            //开始使用
            var tableSelect = layui.tableSelect;
            tableSelect.render({
                elem: '#demo',	//定义输入框input对象 必填
                checkedKey: 'id', //表格的唯一建值，非常重要，影响到选中状态 必填
                searchKey: 'keyword',	//搜索输入框的name值 默认keyword
                searchPlaceholder: '关键词搜索',	//搜索输入框的提示文字 默认关键词搜索
                height:'400',  //自定义高度
                width:'900',  //自定义宽度
                table: {	//定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
                    url:'',
                    cols: [[]]
                },
                done: function (elem, data) {
                //选择完后的回调，包含2个返回值 elem:返回之前input对象；data:表格返回的选中的数据 []