开发工具与关键技术: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:设定标题名称。
表格渲染完成的样子:
当点击新增按钮则弹出新增的模态窗体,修改按钮则弹出修改的模态窗体而且数据回填,供用户修改。