单表新增修改和删除

开发工具与关键技术：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：设定标题名称。
表格渲染完成的样子：

当点击新增按钮则弹出新增的模态窗体，修改按钮则弹出修改的模态窗体而且数据回填，供用户修改。