单表新增修改和删除

本文介绍如何使用JQuery和MVC进行数据库操作,包括单表的新增、修改和删除。通过整合JQuery、Bootstrap和layui插件,实现美观且功能丰富的前端界面,如自定义列模板和模态窗体的弹出。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

开发工具与关键技术:JQuer和MVC开发工具
作者:郑健鹏
撰写时间:2019年4月23日

今天我们来使用数据库和VS实现单表的新增、修改和删除,首先我们需要在数据库里创建或附加需要用到的表格来供VS写入数据,为了美观的原因在编写代码的时候加入了三个比较实用的插件,分别是JQuery、Bootstrap和layui,加入JQuery的原因是写代码比较方便,加入Bootstrap是需要用到里面的模态窗体,加入layui的作用就大了,需要用到里面最主要的表格,其次是提示框样式和一些自带的css样式。
当创建完项目,第一步就是先把我们需要的这三个插件引入,第二步则是渲染出表格的样式,以下是渲染表格的方法

 employee = layuiTable.render({
                    elem: '#employee',//指定原始表格元素选择器
                    url: '/Main/Select',//这是控制器的名称以及路径
                    cols: [[//这是表头
                        { title: '序号', type: 'numbers', align: 'center' },
                        { title: '员工编号', field: 'employeeNum', align: 'center' },
                        { title: '员工姓名', field: 'employeeName', align: 'center' },
                        { title: '联系电话', field: 'telphone', align: 'center' },
                        { title: '家庭住址', field: 'address', align: 'center' },
                        { title: '操作', templet: setOption, align: 'center' }
                    ]],
});
 // 自定义列
        function setOption(data) {
            var employeeID = data.employeeID;
            var btn = "";
            btn += "<button type='button' class='layui-btn layui-btn-xs' onclick='openUpdate("+ employeeID + ")'>修改</button>";
            btn += "<button type='button' class='layui-btn layui-btn-xs layui-btn-danger' onclick='saveDelete("+ employeeID + ")'>删除</button>";
            return btn;
        }

templet:自定义列模板,模板遵循 laytpl 语法。这是一个非常实用的功能,你可借助它实现逻辑处理,以及将原始数据转化成其它格式,如时间戳转化为日期字符等。

field:设定字段名。字段名的设定非常重要,且是表格数据列的唯一标识。

title:设定标题名称。
表格渲染完成的样子:
在这里插入图片描述
当点击新增按钮则弹出新增的模态窗体,修改按钮则弹出修改的模态窗体而且数据回填,供用户修改。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值