使用webapi绑定layui数据表格完整增删查改记录
2021-03-19 23:26
YPE html>
标签：status none 注意 联系 classlist BMI limit 属性 block
因为每次给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
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 {
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 {
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 {
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
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;
}
@*分部视图（添加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函数*****/
});
前台页面代码如上 在这里面有两个分部视图
@*分部视图（添加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数据表格的数据绑定
//表格数据初始绑定
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‘ }
]]
});
然后开始layui数据表格的数据绑定 这里where是除了limit和page之外的参数 代表当前是不带有条件的 全部显示就行了
这里所有的前台js代码都写得有注释 接下来上传文件到gitee 以后有问题就直接看代码来做 省心很多
这里还有提一个今天遇到的坑 在form里面的button 今天没有加type属性 当我点击他的时候总是会刷新整个页面 这是因为如果type属性没有写，那么默认为submit 所以会刷新整个页面
两个分部视图的代码如下
使用webapi绑定layui数据表格完整增删查改记录
标签：status none 注意 联系 classlist BMI limit 属性 block
原文地址：https://www.cnblogs.com/yagamilight/p/12319724.html
文章标题：使用webapi绑定layui数据表格完整增删查改记录
文章链接：http://soscw.com/index.php/essay/66448.html