使用webapi绑定layui数据表格完整增删查改记录-前端开发

因为每次给layui数据表格绑定数据或者类似操作的时候总要重新做一遍而且忘记很多东西所以干脆写博客把相关东西记录下来便于查阅和修正

以下是一个完整的数据表格i项目的增删改查案例

先来看后台

LayuiContext db = new LayuiContext();
Result res = null;

#region 分页查询/查询参数为姓名/性别/班级利用if添加判断条件
[HttpGet]
public IHttpActionResult StudentList2(int page, int limit, string stuName, int? sex, int? classId)
{
var list = from s in db.Studnt
where s.Status == 1
join c in db.Classes on s.ClassId equals c.Id
where c.Status == 1
select new { s.Id, s.Name, s.Sex,s.Age, s.ClassId, s.CreateDate, className = c.Name };
if (!string.IsNullOrEmpty(stuName))
{
list = list.Where(x=>x.Name.Contains(stuName));
}
if (sex != null)
{
list = list.Where(x => x.Sex == sex);
}
if (classId != null)
{
list = list.Where(x => x.ClassId == classId);
}
var total = list.Count();
list = list.OrderByDescending(x => x.Id).Skip((page - 1) * limit).Take(limit);

ArrayList arrayList = new ArrayList();
foreach (var item in list)
{

arrayList.Add(new { item.Id, item.Name, item.Age, Sex = item.Sex == 1 ? "男" : "女", SexType = item.Sex, item.ClassId, CreateDate = item.CreateDate.ToString("yyyy-MM-dd"), item.className });
}

return Json(new { code = 0, msg = "", count = total, data = arrayList });
}
#endregion

#region 分页查询/查询参数为姓名/性别/班级利用expression添加判断条件
[HttpGet]
public IHttpActionResult StudentList(int page, int limit, string stuName, int? sex, int? classId)
{
List<Expression<Func<StudentModel, bool>>> wheres = new List<Expression<Func<StudentModel, bool>>>();
if (!string.IsNullOrEmpty(stuName))
{
wheres.Add(x => x.Name.Contains(stuName));
}
if (sex != null)
{
wheres.Add(x => x.Sex == sex);
}
if (classId != null)
{
wheres.Add(x => x.ClassId == classId);
}
var list = from s in db.Studnt
where s.Status == 1
join c in db.Classes on s.ClassId equals c.Id
where c.Status == 1
select new StudentModel() { Id=s.Id,Name=s.Name,Sex=s.Sex,Age=s.Age,ClassId=s.ClassId,CreateDate=s.CreateDate, className=c.Name};
if (wheres.Count > 0)
{
foreach (var item in wheres)
{
list = list.Where(item);
}
}
var total = list.Count();
list = list.OrderByDescending(x => x.Id).Skip((page - 1) * limit).Take(limit);

ArrayList arrayList = new ArrayList();
foreach (var item in list)
{

arrayList.Add(new { item.Id, item.Name, item.Age, Sex = item.Sex == 1 ? "男" : "女", SexType = item.Sex, item.ClassId, CreateDate = item.CreateDate.ToString("yyyy-MM-dd"), item.className });
}

return Json(new { code = 0, msg = "", count = total, data = arrayList });
}
#endregion

#region 删除学生
[HttpGet]
public IHttpActionResult DeleteStu(int id)
{
try
{
if (id <= 0)
{
throw new Exception("id不正确");
}
var stu = db.Studnt.Find(id);
stu.Status = 5;
db.SaveChanges();
res = new Result { code = 200, msg = "学生删除成功" };
}
catch (Exception ex)
{
res = new Result { code = 0, msg = ex.Message };
}
return Json(res);
}
#endregion

#region 修改学生第一种方法字段一个一个传入
[HttpPost]
public IHttpActionResult UpdateStu1(int id, string name, byte age, int classId, byte sex)
{
try
{
if (id <= 0)
{
throw new Exception("id不正确");
}
var stu = db.Studnt.Find(id);
stu.Name = name;
stu.Age = age;
stu.ClassId = classId;
stu.Sex = sex;
db.SaveChanges();
res = new Result { code = 200, msg = "学生修改成功" };
}
catch (Exception ex)
{
res = new Result { code = 0, msg = ex.Message };
}
return Json(res);
}
#endregion

#region 修改学生第二种方法直接传入学生实体
[HttpPost]
public IHttpActionResult UpdateStu(Student model)
{
try
{
if (model.Id <= 0)
{
throw new Exception("传入实体的id有误");
}
var stu = db.Studnt.Find(model.Id);
stu.Name = model.Name;
stu.Age = model.Age;
stu.ClassId = model.ClassId;
stu.Sex = model.Sex;
db.SaveChanges();
res = new Result { code = 200, msg = "学生修改成功" };
}
catch (Exception ex)
{
res = new Result { code = 0, msg = ex.Message };
}
return Json(res);
}
#endregion

#region 新增学生
[HttpPost]
public IHttpActionResult AddStu(Student model)
{
try
{
model.Status = 1;
model.Sort = 2;
model.CreateDate = DateTime.Now;
db.Studnt.Add(model);
db.SaveChanges();
res = new Result { code = 200, msg = "学生新增成功" };
}
catch (Exception ex)
{
res = new Result { code = 0, msg = ex.Message };
}
return Json(res);
}
#endregion

#region 返回班级id和名称
[HttpGet]
public IHttpActionResult ClassList()
{
var query = from c in db.Classes
select new DropTemplate { id = c.Id, name = c.Name };
return Ok(query);
}
#endregion

这是整个后台的代码

　　这其中StudentList2方法就是查询接口 layui的table.render方法或调用这个接口来给表格绑定数据后面string stuName, int? sex, int? classId 这三个参数是查询时用到的参数。

StudentList 也是一个查询接口这里做两个接口的原因是StudentList2使用的是if判断后直接在list上添加where条件而在StudentList中时使用了 List<Expression<Func<StudentModel, bool>>> wheres = new List<Expression<Func<StudentModel, bool>>>();这个东西来添加where条件实现的思路相同但是方法不同。这里记录一下将来也许会用到这个模式。这里要注意的是如果使用Expression 那么这里的类型必须要和返回的list类型相同因为学生关联了班级所以这里需要新加一个和数据库无关的实体类最后表连接查询得到的数据也应该构造称为新类型StudentModel。

　　DeleteStu是删除接口，传入一个id值。我在数据库中用status=5代表数据为删除项。所以这里其实是执行update。不过这里虽然update成功了。

但是

var stu = db.Studnt.Find(id);
stu.Status = 5;
db.SaveChanges();

在我的记忆中 ef是有update方法的啊我这里根本没有用就给更新成功了我也不懂为什么。

　　接下来是UpdateStu和AddStu 修改和新增传入的是model实体，实现相应功能很简单没什么要记录的

　　接下来是ClassList接口这个接口是为了给班级下拉框返回数据用的这里我定义了一个模型类DropTemplate 代码如下：

[HttpGet]
public IHttpActionResult ClassList()
{
var query = from c in db.Classes
select new DropTemplate { id = c.Id, name = c.Name };
return Ok(query);
}

这样做的目的是统一所有的下拉框的接口返回都为select new { id = c.Id, name = c.Name } 这样的类型前台就可以直接封装方法给下拉框绑定数据。到这里我突然发现模型类DropTemplate并没有什么用直接返回匿名类型就可以只要匿名类组成一致就行没必要新建类。但理论上为了统一标准防止忘记写上也没什么关系

　　至此，后台接口已经介绍完毕下面来看一下前台的页面

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/layui/layui.js"></script>
<link href="~/layui/css/layui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.3.1.js"></script>
<style>
#main .table, #search {
padding: 20px;
}

/*设置下拉框的背景颜色为蓝色*/

.layui-form-select dl dd.layui-this {
background-color: #1E9FFF;
}

/*防止下拉框弹层被遮住*/
.layui-layer-page .layui-layer-content {
position: relative;
overflow: visible !important;
}
</style>
</head>
<body>
<div id="search">
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn layui-btn-normal" id="btnAdd">新增</button>
</div>
</div>
<form class="layui-form">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">姓名</label>
<div class="layui-input-inline">
<input name="name" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">性别</label>
<div class="layui-input-inline">
<select name="sex">
<option value=""></option>
<option value="1">男</option>
<option value="2">女</option>

</select>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">班级</label>
<div class="layui-input-inline">
<select name="className" id="stuClassName">
<option value=""></option>
</select>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="button" class="layui-btn layui-btn-normal" id="btnSearch">查询</button>
<button id="btnReset" type="reset" class="layui-btn layui-btn-normal">重置</button>
</div>
</div>
</form>
</div>

@*分部视图（添加div）*@
@Html.Partial("/Views/Home/Add.cshtml")

@*分部视图（编辑div）*@
@Html.Partial("/Views/Home/Edit.cshtml")

//表格数据初始绑定
table.render({
elem: '#stuTable'
, url: tableurl
, where: { stuName: '', sex: '', classId: '' }
, page: { theme: '#1E9FFF' }
, cols: [[
{ field: 'Id', align: 'center', title: '编号' },
{ field: 'Name', align: 'center', title: '姓名' },
{ field: 'Age', align: 'center', title: '年龄' },
{ field: 'Sex', align: 'center', title: '性别' },
{ field: 'className', align: 'center', title: '班级' },
{ field: 'CreateDate', align: 'center', title: '创建日期' },
{ title: '操作', fixed: 'right', align: 'center', toolbar: '#barDemo' }
]]
});

//表格工具条事件
table.on('tool(test)', function (obj) {
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

if (layEvent === 'update') { //查看
$("#EditForm input[name='name']").val(data.Name);
$("#EditForm input[name='age']").val(data.Age);
$("#EditForm select[name='sex']").val(data.SexType);
$("#EditForm select[name='className']").val(data.ClassId);
form.render('select');
layer.open({
type: 1,
area: ['860px', '360px'],
content: $('#EditForm'),
btn: ['保存', '取消'],
yes: function (index, layero) {
var Name = $("#EditForm input[name='name']").val();
var Age = $("#EditForm input[name='age']").val();
var Sex = $("#EditForm select[name='sex']").val();
var ClassId = $("#stuEditClassName").val();
if (CheckAddForm(Name, Age, Sex, ClassId)) {
var d = {"Id":data.Id, "Name": Name, "Age": parseInt(Age), "ClassId": parseInt(ClassId), "Sex": parseInt(Sex)};
Save(d, editurl);
} else {
return false;
}
}
});
} else if (layEvent === 'delete') { //删除
layer.confirm('确定删除？', function (index) {
Delete(data.Id);
layer.close(index);
});
}
});

//班级下拉框绑定数据
InitDropList('/api/HomeApi/ClassList', $("select[name='className']"));

//点击查询按钮时表格重载
$("#btnSearch").click(function () {
ShowSearchResult();
});

//点击重置按钮时表格重载
$("#btnReset").click(function () {
var obj = { stuName: "", sex: "", classId: "" };
ReloadTable("stuTable", obj);
});

//点击新增按钮时弹出分部视图
$("#btnAdd").click(function () {
InitAddForm();
layer.open({
type: 1,
area: ['860px', '360px'],
content: $('#addForm'),
btn: ['保存', '取消'],
yes: function () {
var Name = $("#addForm input[name='name']").val();
var Age = $("#addForm input[name='age']").val();
var Sex = $("#addForm select[name='sex']").val();
var ClassId = $("#stuAddClassName").val();
if (CheckAddForm(Name, Age, Sex, ClassId)) {
var data = { "Name": Name, "Age": parseInt(Age), "ClassId": parseInt(ClassId), "Sex": parseInt(Sex), "Status": 1 };
Save(data, addurl);
} else {
return false;
}
}
});
})

/****自定义JS函数*****/

//封装表格重载函数
function ReloadTable(tableId, obj) {
table.reload(tableId, {
url: tableurl
, where: obj
});
}

//初始化layui下拉框函数
function InitDropList(url, obj) {
$.ajax({
url: url,
dataType: 'json',
type: 'get',
success: function (data) {
$.each(data, function (index, item) {
obj.append(new Option(item.name, item.id));// 下拉菜单里添加元素
});
layui.form.render("select");
}
})
}

//添加表单初始化(除去上次添加留下的文本)
function InitAddForm() {
$("#addForm input[name='name']").val("");
$("#addForm input[name='age']").val("");
$("#addForm select[name='sex']").val("");
$("#addForm select[name='className']").val("");
form.render('select');
}

//保存方法（传入实体数据保存数据提示操作结果信息）
function Save(model, url) {
$.ajax({
url: url,
contentType: 'application/json',
type: 'post',
data: JSON.stringify(model),
success: function (res) {
if (res.code == 200) {
ShowSearchResult();
layer.closeAll();
layer.msg(res.msg, { icon: 1 });
}
else {
layer.msg("操作失败，请联系管理员！", { icon: 2 });
console.log(res.msg);
}
}
});
}

//根据查询条件显示表格
function ShowSearchResult() {
var name = $("#search input[name='name']").val();
var sex = $("#search select[name='sex']").val();
var classId = $("#stuClassName").val();
var obj = { stuName: name, sex: sex, classId: classId };
ReloadTable("stuTable", obj);
}

//添加表单的格式验证
function CheckAddForm(Name, Age, Sex, ClassId) {
if (Name == "" || Name == null) {
layer.msg("请填写姓名", { icon: 0 });
return false;
}
if (Age == "" || Age == null) {
layer.msg("请填写年龄", { icon: 0 });
return false;
}
if (isNaN(Age)) {
layer.msg("年龄必须为数字", { icon: 0 });
return false;
}
if (Sex == "" || Sex == null) {
layer.msg("请选择性别", { icon: 0 });
return false;
}
if (ClassId == "" || ClassId == null) {
layer.msg("请选择班级", { icon: 0 });
return false;
}
return true;
}

//删除数据
function Delete(id) {
$.ajax({
url: deleteurl,
data: { "id": id },
type: "get",
success: function (data) {
if (data.code == 200) {
layer.msg("删除成功");
ShowSearchResult();
} else {
layer.msg("删除失败，请联系管理员！");
console.log(data.msg);
}

}
});
}

/****自定义JS函数*****/

});
</script>
</body>
</html>

前台页面代码如上在这里面有两个分部视图

@*分部视图（添加div）*@
@Html.Partial("/Views/Home/Add.cshtml")

@*分部视图（编辑div）*@
@Html.Partial("/Views/Home/Edit.cshtml")

其实就是添加和修改的div，在这里首先声明好需要用到的所有接口

//获取表格数据的接口
var tableurl = "/api/HomeApi/StudentList";
//添加数据接口
var addurl = "/api/HomeApi/AddStu";
//删除数据接口
var deleteurl = "/api/HomeApi/DeleteStu";
//修改数据接口
var editurl = "/api/HomeApi/UpdateStu";

然后开始layui数据表格的数据绑定