LayUI Table表格的增删改查

最新推荐文章于 2023-07-14 23:02:44 发布
最新推荐文章于 2023-07-14 23:02:44 发布
阅读量2.7k 收藏 17
点赞数 4
分类专栏： C#
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leaozhao/article/details/97029209
版权

前端部分：
在这里插入图片描述
表格

<div class="x-body">
        <xblock>
            <div class="demoTable">
                <button class="layui-btn layui-btn-danger" data-type="getCheckdata"><i class="layui-icon"></i>批量删除</button>
                <button class="layui-btn" onclick="x_admin_show('添加','./AddMessage',500,450)"><i class="layui-icon"></i>添加</button>
                <div class="layui-inline">
                    <input class="layui-input" name="ID" id="demoReload" autocomplete="off" placeholder="请输入姓名">
                </div>
                <button class="layui-btn" data-type="reload">搜索</button>
            </div>
        </xblock>
        <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
    </div>
     <div id="add-main" class="x-body" style="display: none;">
        <form class="layui-form" id="add-form" action="">
            <input type="text" name="ID" style="width: 240px;display:none;" class="layui-input">
            <div class="layui-form-item center">
                <label class="layui-form-label" style="width: 100px">名字</label>
                <div class="layui-input-block">
                    <input type="text" name="StuName" required value="" style="width: 240px" lay-verify="required" placeholder="请输入信息" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">性别</label>
                <div class="layui-input-block">
                    <input type="text" name="StuSex" required style="width: 240px" lay-verify="required" placeholder="请输入信息" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">年龄</label>
                <div class="layui-input-block">
                    <input type="text" name="StuAge" required style="width: 240px" lay-verify="required" placeholder="请输入信息" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">籍贯</label>
                <div class="layui-input-block">
                    <input type="text" name="StuArea" required style="width: 240px" lay-verify="required" placeholder="请输入信息" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: 100px">电话</label>
                <div class="layui-input-block">
                    <input type="text" name="StuPhone" required style="width: 240px" lay-verify="required" placeholder="请输入信息" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="save">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary" id="closeBtn">重置</button>
                </div>
            </div>
        </form>
    </div>

设置单元格样式

格式化

 <script type="text/html" id="sexTpl">
        {{#  if(d.StuSex === '女'){ }}
        <span style="color: #F581B1;">{{ d.StuSex }}</span>
        {{#  } else { }}
        {{ d.StuSex }}
        {{#  } }}
    </script>

添加链接

<script type="text/html" id="usernameTpl">
        <a href="http://www.baidu.com" class="layui-table-link" target="_blank">{{ d.StuName }}</a>
    </script>

js部分

<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>
  
<script type="text/javascript">
        layui.use('table', function () {
            var table = layui.table;
            var form = layui.form;

            //方法级渲染
            var tableIns = table.render({
                elem: '#LAY_table_user'
                //, toolbar: '#toolbarDemo'
                , url: '/Home/GetData'
                , cols: [[
                    { checkbox: true, fixed: true, width: 27, rowspan: 2 }
                    , { field: 'ID', width: 80, title: '编号', edit: 'text', sort: true, rowspan: 2 }
                    , { field: 'StuMessage', title: '个人信息', align: 'center', colspan: 3 }
                    , { field: 'StuArea', width: 180, title: '籍贯', edit: 'text', align: 'center', rowspan: 2 }
                    , { field: 'StuPhone', width: 180, title: '电话', edit: 'text', align: 'center', rowspan: 2 }
                    , { field: 'StuEdit', width: 180, title: '操作', align: 'center', fixed: 'right', toolbar: '#barDemo', rowspan: 2 }
                ], [
                    { field: 'StuName', width: 180, title: '名字', edit: 'text', align: 'center', templet: '#usernameTpl' }
                    , { field: 'StuSex', width: 180, title: '性别', edit: 'text', align: 'center', templet: '#sexTpl' }
                    , { field: 'StuAge', width: 180, title: '年龄', edit: 'text', align: 'center' }
                ]]
                , id: 'testReload'
                , page: {
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                }
                //, height: 450
                //, width: 900
                , method: 'post'
            });

            var $ = layui.$, active = {
                reload: function () {
                    var demoReload = $('#demoReload');

                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        , where: {
                            name: demoReload.val()
                        }
                        , url: '/Home/SearchData'
                        , method: 'post'
                    });
                },
                getCheckdata: function () {
                    var checkStatus = table.checkStatus('testReload')
                        , data = checkStatus.data;
                    var arr = [];
                    if (data.length < 0 || data.length == 0) {
                        layer.msg('至少选择一条数据', { icon: 2 });
                        return;
                    }
                    else {
                        for (var i = 0; i < data.length; i++) {
                            arr.push(data[i]);
                        }
                        layer.confirm('确定要删除吗？', function (index) {
                            $.ajax({
                                type: 'post',
                                url: '/Home/DeleData', // ajax请求路径
                                data: { data: JSON.stringify(arr) },
                                success: function (r) {
                                    if (r > 0) {
                                        layer.msg('删除成功');
                                        tableIns.reload();
                                    }
                                    else {
                                        layer.msg('删除失败');
                                    }
                                }
                            });
                        });
                    }
                }
            };

            $('.demoTable .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
            //监听单元格
            table.on('edit(user)', function (obj) {
                var value = obj.value //得到修改后的值
                    , data = obj.data //得到所在行所有键值
                    , field = obj.field; //得到字段
                layui.use('jquery', function () {

                    var $ = layui.$;
                    $.ajax({
                        type: 'post',
                        url: '/Home/EditData', // ajax请求路径
                        data: {
                            id: data.ID,
                            field: field,
                            value: value
                        },
                        success: function (data) {
                            if (data > 0) {
                                layer.msg('修改成功');
                                tableIns.reload();
                            }
                            else {
                                layer.msg('修改失败');
                            }
                        }
                    });
                });
                return false;
            });

            var index0pen;
            //监听工具条
            table.on('tool(user)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.msg('ID：' + data.ID + ' 的查看操作');
                } else if (obj.event === 'del') {
                    layer.confirm('真的删除行' + data.StuName, function (index) {
                        $.ajax({
                            url: '/Home/DeleData',
                            type: "POST",
                            data: { id: data.ID },
                            success: function (r) {
                                if (r > 0) {
                                    layer.msg("删除成功", { icon: 6 });
                                    tableIns.reload();
                                } else {
                                    layer.msg("删除失败", { icon: 5 });
                                }
                            }
                        });
                    });
                } else if (obj.event === 'edit') {
                    SetFromValues($("#add-main"), data);
                    index0pen = layer.open({
                        type: 1,
                        title: "编辑",
                        area: ['500px', '450px'],
                        content: $("#add-main"),
                    });
                }
            });
            //监听提交
            form.on('submit(save)', function (data) {
                var datas = data.field;
                $.ajax({
                    type: 'post',
                    url: '/Home/EditStudent', // ajax请求路径
                    data: datas,
                    success: function (r) {
                        if (r > 0) {
                            layer.alert('修改成功', { icon: 6 }, function () {
                                var index = layer.index;
                                layer.close(index0pen);
                                layer.close(index);
                            });
                        }
                        else {
                            layer.msg('修改失败', { icon: 5 });
                        }
                    }
                });
                return false;
            });
        });
        //弹传值
        function SetFromValues(el, data) {
            for (var p in data) {
                el.find(":input[name='" + p + "']").val(data[p]);
            }
        }

后端部分：

 public ActionResult GetData(int page, int limit)
        {
            Dictionary<String, Object> rsMap = new Dictionary<String, Object>();
            using (MySqlContext db = new MySqlContext())
            {
                int Total_ = db.Set<Student>().Where(c => c.ID > 0).Count();
                var students = getPageDate<Student, int>(c => new { c.ID, c.StuAge, c.StuArea, c.StuName, c.StuPhone, c.StuSex }, c => c.ID > 0, c => c.ID, page, limit, out Total_);
                rsMap["count"] = Total_;
                rsMap["code"] = 0;
                rsMap["msg"] = "detail";
                rsMap["data"] = students;

                return Content(JsonConvert.SerializeObject(rsMap));
            }
        }


        public List<dynamic> getPageDate<T, TKey>(Expression<Func<T, dynamic>> select, Expression<Func<T, bool>> where, Expression<Func<T, TKey>> order, int pageIndex, int pageSize, out int Total)
             where T : class
        {
            using (MySqlContext db = new MySqlContext())
            {
                Total = db.Set<T>().Where(where).Count();
                var list = db.Set<T>().Where(where).OrderBy(order).Select(select).Skip((pageIndex - 1) * pageSize).Take(pageSize);
                return list.ToList();
            }

        }


        public ActionResult EditData(int id, string field, string value)
        {
            int result = 0;
            using (MySqlContext db = new MySqlContext())
            {
                var hasStudent = db.Student.Where(r => r.ID == id).FirstOrDefault();
                if (hasStudent !=null)
                {
                    if (field == "StuName")
                    {
                        hasStudent.StuName = value;
                    }
                    else if (field == "StuSex")
                    {
                        hasStudent.StuSex = value;
                    }else if (field == "StuAge")
                    {
                        hasStudent.StuAge = value;
                    }
                    else if (field == "StuArea")
                    {
                        hasStudent.StuArea = value;
                    }
                    else if (field == "StuPhone")
                    {
                        hasStudent.StuPhone = value;
                    }
                   
                    result = db.SaveChanges();
                }
                
            }
            return Content(result.ToString());
        }


        public ActionResult DeleData(int id)
        {
            int result = 0;
            using (MySqlContext db = new MySqlContext())
            {
                var hasStudent = db.Student.Where(r => r.ID == id).FirstOrDefault();
                if (hasStudent != null)
                {
                    db.Student.Remove(hasStudent);
                    result = db.SaveChanges();
                }
            }
            return Content(result.ToString());
        }



        public ActionResult EditStudent(Student data)
        {
            int result = 0;
            using (MySqlContext db = new MySqlContext())
            {
                var hasStudent = db.Student.Where(r => r.ID == data.ID).FirstOrDefault();
                if (hasStudent != null)
                {
                    hasStudent.StuAge = data.StuAge;
                    hasStudent.StuArea = data.StuArea;
                    hasStudent.StuName = data.StuName;
                    hasStudent.StuPhone = data.StuPhone;
                    hasStudent.StuSex = data.StuSex;
                    result = db.SaveChanges();
                }
            }
            return Content(result.ToString());
        }


        [HttpPost]
        public ActionResult SearchData(int page, int limit)
        {
            Dictionary<String, Object> rsMap = new Dictionary<String, Object>();
            using (MySqlContext db = new MySqlContext())
            {
                string key = Request["name"].ToString();//接收值
                int Total_ = db.Set<Student>().Where(c => c.StuName.Contains(key)).Count();
                var students = getPageDate<Student, int>(c => new { c.ID, c.StuAge, c.StuArea, c.StuName, c.StuPhone, c.StuSex }, c => c.StuName.Contains(key), c => c.ID, page, limit, out Total_);
                rsMap["count"] = Total_;
                rsMap["code"] = 0;
                rsMap["msg"] = "detail";
                rsMap["data"] = students;

                return Content(JsonConvert.SerializeObject(rsMap));
            }
        }

        [HttpPost]
        public ActionResult AddStudent(Student data)
        {
            int result = 0;
            using (MySqlContext db = new MySqlContext())
            {
                db.Student.Add(data);
                result = db.SaveChanges();
            }
            return Content(result.ToString());
        }

        [HttpPost]
        public ActionResult DeleData(string data)
        {
            int result = 0;
            JArray studentID = JArray.Parse(data);

            using (MySqlContext db = new MySqlContext())
            {
                foreach(var items in studentID)
                {
                    var stuID = items["ID"].ToString();
                    var student = db.Student.Find(Convert.ToInt32(stuID));
                    if (student != null)
                    {
                        db.Student.Remove(student);
                        result = db.SaveChanges();
                    }
                }
            }
            return Content(result.ToString());
        }

每天学习一点记录一点进步一点

leaozhao
关注
  • 4
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery对table表格进行增删改查
10-20
主要为大家详细介绍了jQuery对table表格进行增删改查操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
BootStrapTable实现增删改查
03-07
如有使用不清楚的地方，请留言，我看到会回复。
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
10-15
今天小编就为大家分享一篇layui table表格数据的新增,修改,删除,查询,双击获取行数据方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
LayUi之数据表格的增删改查（内含完整源代码）
m0_74315688的博客
07-14 5084
关于使用layui进行增删改查的一整套流程清晰明了的编写出来啦！！感兴趣的话就点进来看看呢！！！
layui表格内使用edit属性修改行内容
m0_69439101的博客
04-20 4424
回调函数返回一个object参数。
修改Layui表格的数据
chnejgeo的博客
05-08 4632
修改Layui中数据表格的数据，先上layui.table的图 要求是修改“开头字母”和“单号格式”，单据名称是不能修改的。 单据名称和开头字母都是同一张表，而单号格式是引用另外一张表 先创建全局变量并渲染layui varlayer, layuiTable; varTableLayui; //修改开头字母数组（存放要修改的数据），两个数组的关系是通过索引连接（索引相同），intArray用来存放数据ID，stringArray用来存放修改后的数据 varintArray =...
LayUI实现数据的增删改查功能
沐小侠
03-30 2377
Laiui数据表的使用，实现增删改查功能。 主要使用Layui的数据表格 - layui.table 用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。
BootStrap实现带有增删改查功能的表格(DEMO详解)
09-01
主要介绍了BootStrap实现带有增删改查功能的表格，表格封装了3个版本，接下来通过本文给大家展示下样式及代码，对bootstrap增删改查相关知识感兴趣的朋友一起通过本文学习吧
layui table组件edit编辑事件获取单元格改之前的值,edit事件中给单元格赋值（附 判断一个js变量是否为数字）
weixin_41746337的博客
07-24 1万+
layui table组件edit编辑事件获取单元格改之前的值 table.on('edit(demo)',function (obj) { // 获取单元格编辑之前td的选择器 var selector = obj.tr.selector+' td[data-field="'+obj.field+'"] div'; // 单元格编辑之前的值 ...
Layui数据表格table自定义input text，input checkbox 修改列的值
夏已微凉、
07-03 1971
Layui数据表格table自定义input text，input checkbox 修改列的值
layui数据表格显示增删查改.zip
07-23
layui数据表格与后台数据连接，包含了layui数据表格的增加散出和修改以及显示的功能，利用jsp+servlet+dao层+T表+数据库
【转载】layui table组件edit编辑事件获取单元格改之前的值
Mervyn的博客
11-22 4480
获取修改前的值 table.on('edit(demo)',function (obj) { // 获取单元格编辑之前td的选择器 var selector = obj.tr.selector+' td[data-field="'+obj.field+'"] div'; // 单元格编辑之前的值 var oldtext = $(selector...
转载 Layui 数据表格 table 行数据修改 edit:text/edit:true
代码笔记
06-21 733
原文地址 :
layui单元格可编辑、layui单元格插入select、
qq_41944038的博客
10-08 6508
记录下最近工作中遇到一些容易忘记的知识点 想要layui的表格可编辑，只需要在col中加入edit即可： tableIns = table.render({ elem: '#buildInputTable', data: arr, page: false, limit: Number.MAX_VALUE, height: 300, id: 'buildInputT
layui的入坑之路
ni_new_sm_new的博客
09-09 1万+
关于创建数据表 ：（转）https://www.cnblogs.com/jingch/p/7620075.html 。
监听事件
weixin_44546452的博客
04-18 963
监听行的点击事件： 写的方法一般都是固定的 layuiTable.on(‘row(tabTitles)’, function (obj) { var data = obj.data; obj.tr.addClass(“layui-table-click”).siblings().removeClass(“layui-table-click”); 标注：选中行样式，当你点击一条行数据时它会发生一点颜...
layui表格修改（编辑）功能的实现，弹出表单框进行编辑，然后修改成功后表格数据自动更新
热门推荐
Hui_Hong_TaiLang的博客
10-31 6万+
layui表格修改（编辑）功能的实现，弹出表单框进行编辑，然后表单数据自动刷新 （1）主界面 本系统没有采用分页数据请求，直接取出后台全部数据 （2）点击编辑按钮，编辑功能界面展示 （3）代码实现 &amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;head&
layui中tablle 渲染数据后使用单元格编辑功能
qq_36688755的博客
06-11 474
详解 ： layui.table.on('edit(details)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值" }); 示例代码： <table id="details" class="layui-table" lay-filter="details" ></table> <input type="hidden" id="product_id" value="&...
Layui基本功能快速上手（增删改查）
最新发布
无法自律的人的博客
07-14 1662
R工具类可以更好的进行代码的优化。
Ajax layui动态表格增删改查
05-27
好的，下面是使用 Ajax 和 layui 实现动态表格增删改查的一个简单示例。 1. 引入 layui 首先需要在页面中引入 layui 的相关文件，例如： ```html <link rel="stylesheet" href="//cdn.layui....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值