layui的table查询编辑&tableSelect控件使用

最新推荐文章于 2026-05-21 06:42:13 发布
原创 最新推荐文章于 2026-05-21 06:42:13 发布 · 4.8k 阅读 · 2 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#layui #数学建模 #java
这篇文章展示了如何在HTML页面中使用layui框架来创建表格，包括设置表头、数据接口、操作列、复选框功能以及表格外的按钮操作。通过Ajax与后端MVC控制器交互，实现了数据查询、编辑、删除以及弹窗传值等功能。

HTML:


@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>layui和Table</title>
    <link href="~/Content/layui/css/layui.css" rel="stylesheet" />
    <script src="~/Content/layui/layui.js"></script>
    <script src="~/Content/layui/tableSelect.js"></script>
</head>
<body>
    <div>
        <!--脱离table的按钮-->
        <div class="layui-btn-group demoTable">
            <button class="layui-btn" data-type="getCheckData">获取选中行数据</button>
            <button class="layui-btn" data-type="getCheckLength">获取选中数目</button>
            <button class="layui-btn" data-type="isAll">验证是否全选</button>&nbsp;
            <input class="layui-text" type="text" id="txtSearch" placeholder="查询条件" />
            <button class="layui-btn" data-type="Search">查询</button>
        </div>

        <!--table的toolbar 需layui-hide隐藏-->
        <div class="layui-hide layui-btn-group" id="toolbar">
            <button class="layui-btn " lay-event="getall">查看所选数据</button>
            <button class="layui-btn " lay-event="getnum">查看所选数量</button>
            <button class="layui-btn  layui-btn-danger" lay-event="delall">批量删除</button>
        </div>

        <!--表格-->
        <table class="layui-table" id="idTest" lay-filter="demo"></table>

        <!--表格的操作列的模板:  toolbar: '#barDemo'  -->
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        </script>

    </div>

    <script>
        layui.use('table', function () {
            var $ = layui.$;//在layui里引用jQuery
            var table = layui.table;//实例化layui 表格

            //执行表格渲染 方法化渲染 推荐
            var tableIns = table.render({
                elem: '#idTest' //指定原始表格元素选择器（推荐id选择器）
                , url: '/Demo/TableList'//数据接口地址
                , where: { search: $('#txtSearch').val() }//查询条件,类似 ajax的date属性
                , height: 400 //容器高度
                , width: 1000
                , toolbar: '#toolbar'//开启头部栏，写入我们的盒子id
                , cols: [[//表头及字段绑定:
                    { type: 'checkbox', fixed: 'left' },//type:控件类型
                    { field: 'UID', sort: true, fixed: true, title: "UID" },//fixed是冻结列
                    { field: 'USERNAME', sort: true, fixed: true, title: "USERNAME" },//sort:是否排序
                    { field: 'NICKNAME', title: "NICKNAME", edit: 'text' },//field:绑定字段
                    { field: 'EMAIL', title: "EMAIL", edit: 'text' },//title:表头名称
                    { field: 'MOBILE', title: "MOBILE", edit: true },//edit: 'text' 可编辑状态,编辑类型是文本
                    { fixed: 'right', width: 178, align: 'center', toolbar: '#barDemo' }//toolbar操作列的模板
                ]], //设置表头
                page: true,//开启分页
                limit: 5,//每页最大行数
                limits: [5, 10, 15, 20]//最大行数集合
            });
            //demo就是: lay-filter="demo" (table的)
            //监听表格复选框选择
            table.on('checkbox(demo)', function (obj) {
                console.log(obj)
            });

            //监听table内操作按钮
            table.on('tool(demo)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.msg('UID：' + data.UID + ' 的查看操作');
                    //查看操作
                } else if (obj.event === 'del') {
                    layer.confirm('真的删除吗?', function (index) {
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        //删除操作
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    layer.alert('编辑行：<br>' + JSON.stringify(data))
                }
            });

            //监听table外按钮
            var $ = layui.$, active = {
                getCheckData: function () { //获取选中数据
                    var checkStatus = table.checkStatus('idTest')
                        , data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                }
                , getCheckLength: function () { //获取选中数目
                    var checkStatus = table.checkStatus('idTest')
                        , data = checkStatus.data;
                    layer.msg('选中了：' + data.length + ' 个');
                }
                , isAll: function () { //验证是否全选
                    var checkStatus = table.checkStatus('idTest');
                    layer.msg(checkStatus.isAll ? '全选' : '未全选')
                }, Search: function () {  //表格的查询按钮
                    tableIns.reload({
                        where: { search: $('#txtSearch').val() }
                        , page: { curr: 1 }
                    });
                }
            };
            //监听 data-type 值
            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type'); //alert(type);
                active[type] ? active[type].call(this) : '';
            });

            //监听 toolbar 按钮
            table.on('toolbar(demo)', function (obj) {//我给表格设置的lay-filter叫demo
                var checkStatus = table.checkStatus('idTest')//表格id，获取选中行
                switch (obj.event) {//对lay-event的值，进行不同的判断
                    case 'getall'://lay-event
                        layer.msg(JSON.stringify(checkStatus.data));
                        break;
                    case 'getnum'://lay-event
                        layer.msg(JSON.stringify(checkStatus.data.length));
                        break;
                    case 'delall'://lay-event
                        var a = [];
                        for (var i = 0; i < checkStatus.data.length; i++) {
                            a.push(checkStatus.data[i].UID)
                        }
                        let strid = a.toString();//数组转字符串 用,逗号间隔
                        layer.msg(strid);
                        let num = checkStatus.data.length;
                        if (num != 0) {
                            //$.ajax({
                            //    url: '/Controller/delete?ids=' + strid
                            //    , type: 'get'
                            //    , success: function (d) {
                            //        layer.msg("删除了" + num + "条数据");
                            //        location.href = '/Controller/index';
                            //    }
                            //})
                        }
                        else {
                            layer.msg("至少选择一个！")
                        }
                        break;
                }
            });

            //编辑table
            listenTableEdit('/Demo/TableUpdate', 'demo', 'POST');//'demo'就是table的lay-filter="demo"
            //监听表格edit事件
            function listenTableEdit(url, tableElem, type) {
                table.on('edit(' + tableElem + ')', function (obj) {
                    var dataLine = obj.data //得到所在行所有键值
                        , field = obj.field //得到字段
                        , value = obj.value; //得到修改后的值

                    // console.log(dataLine);
                    // console.log(field);
                    // console.log(value);
                    // console.log(dataLine.UID); //主键ID

                    let data = { UID: dataLine.UID };
                    data[field] = value;
                    updateData(url, data, tableElem, type)
                });
            }

            //更新数据
            function updateData(url, data, tableElem, type) {
                //console.log(data); //打印看数据
                type = type ? type : 'POST';
                $.ajax({
                    url: url, //请求地址
                    data: data,
                    type: type,
                    beforeSend: function () {
                        layer.load(1); //开启加载效果
                    },
                    success: function (res) {
                        layer.closeAll(); //关闭加载效果
                        layer.msg(res.msg, { time: 1000 }, function () {
                            table.reload(tableElem);
                        });
                    },
                    error: function (res) {
                        layer.closeAll(); //关闭加载效果
                        console.log(res); //根据res的返回结果输出数据，我这里为了演示，直接输出 '服务器异常'
                        layer.alert('服务器异常');
                    }
                });
            }

        });
    </script>

    <hr />
    <!--弹窗传值-->
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <table width="400">
                <tr>
                    <td>点击并选择:</td>
                    <td><input type="text" name="" placeholder="NICKNAME" autocomplete="off" class="layui-input" id="demo"></td>
                    <td><label id="lab_USERNAME">USERNAME</label></td>
                </tr>
            </table>
        </div>
    </div>

    <script type="text/javascript">
        var form = layui.form;
        form.render();
        var tableSelect = layui.tableSelect;
        var $ = layui.$;//jQuery

        tableSelect.render({
            elem: '#demo',//id="demo"的text
            checkedKey: 'id',
            searchPlaceholder: 'NICKNAME',//搜索框的Placeholder
            searchKey: 'search',//后台获取方法: string search = Request["search"];// "search"可以改成任何你需要的参数名称,例:?search=管理员
            table: {
                url: '/Demo/TableList',
                cols: [[
                    //{ type: 'checkbox' }, //多选
                    { type: 'radio' },//单选
                    { field: 'UID', sort: true, title: "UID" },//field:绑定字段
                    { field: 'USERNAME', sort: true, title: "USERNAME" },//sort:是否排序
                    { field: 'NICKNAME', title: "NICKNAME" },//title:表头名称
                ]]
            },
            done: function (elem, data) {
                var NICKNAME_JSON = [];
                var USERNAME_JSON = [];

                layui.each(data.data, function (index, item) {
                    NICKNAME_JSON.push(item.NICKNAME)
                    USERNAME_JSON.push(item.USERNAME)
                })
                elem.val(NICKNAME_JSON.join(","));
                $("#lab_USERNAME").html(USERNAME_JSON.join(","));
            }
        })

    </script>

</body>
</html>

mvc：

using System;
using System.Web.Mvc;
using XrErp.DAL;
using XrErp.Model;
using SqlSugar;
using FluentNHibernate.Data;

namespace XrErp.Web.Controllers
{
    public class DemoController : Controller
    {
        public ActionResult Table()
        {
            return View();
        }

        public ActionResult TableList()
        {
            try
            {
                int pageIndex = Convert.ToInt32(Request["page"]);//页码
                int pageSize = Convert.ToInt32(Request["limit"]);//页宽              

                string search = Request["search"];//查询条件
                string where = string.IsNullOrWhiteSpace(search) ? "" : " NICKNAME LIKE '%" + search + "%'";//查询条件
                string orderBy = "";//排序条件
                int totalCount = 0;//总记录数

                BaseDal<SYS_USER> baseDal = new BaseDal<SYS_USER>();//SqlSugar
                var list = baseDal.Query(where, pageIndex, pageSize, ref totalCount, orderBy);//分页查询

                var obj = new { code = 0, msg = "", count = totalCount, data = list };
                return Json(obj, JsonRequestBehavior.AllowGet);
            }
            catch
            {
                return View();
            }
        }

        public ActionResult TableUpdate()
        {
            var obj = new { code = 0, msg = "" };
            try
            {
                int UID = Convert.ToInt32(Request["UID"]);//UID
                string NICKNAME = Request["NICKNAME"];//NICKNAME
                string EMAIL = Request["EMAIL"];//EMAIL
                string MOBILE = Request["MOBILE"];//MOBILE

                string sql = " UPDATE SYS_USER SET ";
                sql += " UID=" + UID;//用于卡一个逗号,
                if (!string.IsNullOrWhiteSpace(NICKNAME))
                {
                    sql += " ,NICKNAME='" + NICKNAME + "'";
                }
                if (!string.IsNullOrWhiteSpace(EMAIL))
                {
                    sql += " ,EMAIL='" + EMAIL + "'";
                }
                if (!string.IsNullOrWhiteSpace(MOBILE))
                {
                    sql += " ,MOBILE='" + MOBILE + "'";
                }
                sql += " where UID=" + UID;

                var db = DbContext.GetSqlSugarClient();
                var b = db.Ado.ExecuteCommand(sql) > 0;
                if (b)
                    obj = new { code = 100, msg = "成功" };
                else
                    obj = new { code = 200, msg = "失败" };
            }
            catch (Exception ex)
            {
                obj = new { code = 404, msg = "报错," + ex.Message };
            }
            return Json(obj, JsonRequestBehavior.AllowGet);
        }
    }
}

 预览:

 

djk8888
关注
LayUi组件TableSelect
08-09
LayUi组件：TableSelect
layui tableSelect 数据表格下拉框（多选或单选）
Light
03-12 1万+
记录：使用tableSelect插件实现下拉框表格，并多选或单选数据 HTML代码： <!-- 部分代码 --> <tr> <td><label class="layui-form-label required">巡防点</label></td> <td> <input type="text" name="point" class="layui-input" lay-verify="re
layui tableSelect 数据表格下拉框 条件查询
qq_36636312的博客
10-16 1万+
效果图： 步骤 1，引入插件tableSelect layui.config({ base: '/static/layui-v2.5.6/ext/',// 第三方模块所在目录 version: 'v1.5.10' // 插件版本号 }).extend({ soulTable: 'soulTable/soulTable', tableChild: 'soulTable/tableChild', tableMerge: '
STC8H8K64U USBCDC库函数移植与数据回显实战：从HID到CDC的调试升级之路
最新发布
weixin_30954265的博客
05-21 832
本文详细介绍了如何在STC8H8K64U上实现USBCDC与HID双模通信，保留原有HID功能的同时新增CDC虚拟串口调试通道。通过工程化实现方案，开发者可以轻松实现串口数据收发与调试信息输出，大幅提升嵌入式开发效率。文章包含硬件配置、软件库整合、双协议栈实现及性能优化等实战内容。
Layui表格添加select组件显示问题-Layui表格添加select-Layui表格底部的select下拉时把表格撑开
北海山人
01-05 2026
Layui表格添加select组件显示问题-Layui表格添加select-Layui表格底部的select下拉时把表格撑开
Layui的table中使用select
江湖郎中
06-19 1万+
这段时间用Layui做前端开发，遇到不少问题，已圆满解决，记录如下： 1、穿梭框 Layui从2.5.0版本增加了穿梭框，但项目要求左右两边均是表格，无奈只好使用第三方的穿梭框。 2、左右两边的表列数显示不一样 在原代码的基础上修改，使之支持两表的列定义。 3、未选择行，两表中间的按钮依然可以点击 由于原按钮显示状态是完全正确的，只是无选中的行时按钮未禁用，所以只需要在相应的按钮上用r...
layui 组件tableSelect 下拉表格选择器的应用
热门推荐
无名有道
10-13 3万+
     在后台管理项目中的表单输入经常需要通过下拉框来选择输入项，为防止用户录入错误，需要下拉框的选项可以维护，并能搜索。发现一个 layui 组件tableSelect组件正好可以实现下拉框列表进行选择的功能，正好可以满足需求。     效果如下图所示： 插件下载地址  https://gitee.com/lolicode/layui_component_tableselect 使用...
【layui】在table 内嵌入表单元素select
Minions_Fatman的博客
09-29 3627
/ ----加样式----给dl加position: fixed;计算left，top。/* 防止下拉框的下拉列表被隐藏---必须设置--- *//* 设置下拉框的高度与表格单元相同 */// 进件状态-select下拉框。// select选择。
layui table组件中增加select编辑控件
lanfeng330的专栏
10-26 3048
在使用table组件时，有时需要能直接在table的单元格中编辑数据，原生是提供普通的单行文本编辑框的。只需要在列定义中增加属性：edit:'text'。在一些特定应用下，提供select的编辑方式更友好。 这就需要自己变通的实现了。在列的定义中可以使用模板：templet。而这种方式又分两种： 直接复值模板的id："#[模板id]"；再就是把templet当成一个列渲染函数，函数里返回视图数据即可。 如果你的select的option是固定的，不需要从后台动态获取的。那可以直接用：templet
LayUI 在 table 中 使用 select 选择框
wa123579的博客
08-14 4226
需求 在表格中用 select 选择数据并返回到后台 实现 所用扩展 码云链接 大佬已经介绍了如何使用，以下是我个人的使用记录 使用情况(代码并不是连贯的） layui.config({ base: '/static/layui/' }).extend({ tableEdit: 'tableEdit/tableEdit' }); var params = [ { name: "text"
layui table内嵌入select
星星点灯的博客
02-25 2701
layui数据表格没有支持select的参数，因此需要手动加入模板进去到td中，具体使用方法如下 HTML <script type="text/html" id="selectTool"> <select name="materialtype" lay-filter="materialtype" id="materialtype"> <option value="">请选择或输入</option> {{# layui.ea
layui table 添加表单元素select
qq_39702981的博客
08-10 2829
HTML <div class="layui-card-body "> <table class="layui-hide" id="test" lay-filter="test"></table> <script type="text/html" id="selectTpl" > <select name="status" lay-verify="required" id="{{d.id}}" lay-filter="
layui实现选择框搜索（下拉搜索）功能
Hyanl的博客
06-29 1万+
【代码】layui实现选择框搜索（下拉搜索）功能。
layui table 行内下拉框select不显示的解决办法（进一步优化）
ylens的博客
05-16 1945
之前写过一个文章：layui table 行内下拉框select不显示的解决办法。地址：https://blog.csdn.net/ylens/article/details/136075856，在使用过程中发现下拉框显示不完整。
layui table 行内下拉框select不显示的解决办法
ylens的博客
02-08 1689
经查找，终于知道，只需要更改CSS样式就可以解决问题。
layui的table可搜索下拉框(select)
qq_42303129的博客
11-04 2686
这个实现采用了layui 社区一位大神的代码，在此感谢大神的分享，我自己做个记录，也给使用layui 的小伙伴们做一个分享。 思路是这样的 <table class="layui-hide" id="tableId" lay-filter="tableEvent"></table> <script> layui.use(['table','layuiTabl...
layui table 中增加select
hopeful_ddy的博客
05-15 1万+
layui table 中增加select <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <me...
【layui+tableSelect】尝试和修改
今天兔兔写代码了嘛？
01-27 1796
【layui+tableSelect】尝试和修改举个栗子其他尝试关于隐藏域分页准备的修改 举个栗子 https://gitee.com/lolicode/layui_component_tableselect ↑大佬的码云地址 ↓示范代码 //开始使用 var tableSelect = layui.tableSelect; tableSelect.render({ elem: '#demo', //定义输入框input对象 必填 checkedKey: 'id', //表格的唯一建值，非常重要，影响到
LayUi- 动态表格table中下拉框Select的设置和监听及更新
syyYoung的博客
08-20 5594
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="/adminlte/layui/css/layui.css" media="all" /> <style> .layui-table-cell { overflow: visible; } .layui-table-box { overfl
layui 集合 xm-select 、tableSelect、cascader级联选择器
weixin_41965172的博客
03-10 5766
layui 官方镜像站 http://layui-doc.pearadmin.com/ layui 免费CDN静态库 https://www.layuicdn.com/#Layui 基于layui xm-select 多选 https://maplemei.gitee.io/xm-select/#/senior/getValue lay_cascader 级联选择器 https://gitee.com/yixiacoco/lay_cascader LayUi组件：TableSelect
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值