Html部分:
<div class="container mt-5">
<div class="row">
<div class="col-auto">
<button class="btn btn-outline-primary" type="button" onclick="openInsertModal()">新增button>
div>
div>
<div class="row mt-5">
<table id="demo" lay-filter="tbAcademe">table>
div>
div>
这给到了一个新增按钮和一个table表格,之后还需要对Bootstrap框架和layui框架进行引入,如图:css:
Js:
如果是不使用jquery写代码的话可以选择不引入第一条
JQ部分
- 这里我们会用到Layui框架中的“加载所需模块”(layui.use([mods],callback)): Layui的内置模块并非默认就加载的,他必须在你执行该方法后才会加载。它的参数跟上述的 define方法完全一样: 详细内容还请查看之前的“使用layui框架创建表格”;
var table, laytable;//全局变量
var SearchData;//全局变量
layui.use(["table", "layer"], function () {
laytable = layui.layer;
table = layui.table;
SearchData=table.render({
elem: "#demo",
page:true,
cols:[[
{title:"序号",type:"numbers",width:80},
{title:"学院名称",field:"academeName",align:"center"},
{title:"学院编号",field:"academeCode",align:"center"},
//{title:"操作",templet:ButtonData,align:"center",width:150}
]],
data: [],
page: {
limit: 10,
limits:[5,10,15,20]
}
})
Search();
})
- 操作列在新建当中也可暂时不打,操作列下的内容为修改和新增暂不牵扯新增,代码如下: function ButtonData() {
var set = '修改删除';
return set;
}
添加的内容也就是一个简单的字符串拼接,之后在返回一些它的值即可;
这里因为没有输入获取内容的渠道,所以需要配合一个表格重载,如上已引入好了,表格重载代码如下:
function Search() {
var Text = $("#searchText").val().trim();
SearchData.reload({
url: "/Areas/Academe/AddTable",
where: {
SearchText: Text
},
page: {
curr:1
}
})
}
- url后的渠道则就是获取控制台的内容,一般的话只会有一个控制器名称和方法名称,这里的话我因为是把控制器打在了区域当中使用会出现两个控制名称 ,控制器的代码的话在下面哦!
- 表格重载的话在之后的修改和删除也都会用到,page: {curr:1}这句的作用是当页面重载后会回到表格的第一页;
- 新增
function openInsertModal() {
$("#formInsert")[0].reset();//清除表单的内容(每当点击新增按钮时都会对表单进行清除,该方法为JS方法,需要先进行对JQ的转换)
$("#insertModal").modal("show");
}
function InsertSaveAcademe() {
var academeName = $("#academeNameI").val().trim();
var academeCode = $("#academeCodeI").val().trim();
$.post("/Areas/Academe/SelectTable", {
academeName: academeName,
academeCode: academeCode
}, function (msg) {
layer.alert(msg.Text)
if (msg.state) {
Search();
$("#insertModal").modal("hide");
}
})
}
- 因为我设置的是一个模态框的效果,所以需要先对模态框(模态框的话可以在Bootstrap框架内查看)进行打开操作如上;
- 之后便是对新增的内容进行保存,首先是的表格内输入的内容进行获取,在通过post方法提交;
注意:{
academeName: academeName,
academeCode: academeCode
}
这里的左右两边的内容含义不同,右边的话是刚获取好的内容,左边的是数据库表格中的内容,这里的话是接收右边刚获取的内容然后提交到控制器,然后通过控制器传到数据库;
- 然后就是接收从控制器内返回来的数据,下面还添加了一个判断,它判断的是控制器传过来的数据是tru还是false,为前者的话就执行下面代码;
控制器代码
public ActionResult SelectTable(SYS_Academe academe)
{
DataSense http = new DataSense();
if (!string.IsNullOrEmpty(academe.academeName) &&
!string.IsNullOrEmpty(academe.academeCode)&&
Regex.IsMatch(academe.academeCode, "^\\d{2}$"))
{
var option = myModel.SYS_Academe.Count(h => h.academeID != academe.academeID
&& h.academeCode == academe.academeCode
|| h.academeName == academe.academeName);
if (option == 0)
{
myModel.SYS_Academe.Add(academe);
if (myModel.SaveChanges() > 0)
{
http.state = true;
http.Text = "新增成功";
}
else
{
http.Text = "新增失败";
}
}
else
{
http.Text = "内容已存在";
}
}
else
{
http.Text="你还有未填写的内容";
}
return Json(http, JsonRequestBehavior.AllowGet);
}
因为需要对数据进行判断,所以在这还新建了一个类,如下:
public class DataSense
{
public string Text { get; set; }
public bool state { get; set; }
}
这便是新增类中的内容了很简单,名称呢都是可以自己取的,之后对其进行引用便可以了,新增的核心代码前面也有说过,可自行查找之前的文章,唯一不同的是多加了两条判断,第一个判断是传过来的值是否为空(!string.IsNullOrEmpty())后面还写了一条判断正则的代码:Regex:表示不可变的正则表达式. IsMatch: 指示所指定的正则表达式在指定的输入字符串中是否找到了匹配项。在然后便是判断的对象和正则格式;