1、使用前：
到官网下载Layui，将主要的文件layui.js、layui.css引入到你的文件里
2、使用动态表格，如：
代码如下：
步骤1：
<table class="layui-hide" id="test" lay-filter="hdshow"></table>
<input id="handle_status" value="" style="text-align:center; display:none" />
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-danger layui-btn-xs del" lay-event="del">删除</a>
</script>
步骤:2：在<script>文件中，添上：layui.use('table', function () {
var table = layui.table;
var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
table.render({
elem: '#test' //渲染的table
, limit: 10
, url: "/你访问的后台方法"
, cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
, cols: [[
{ field: 'Id', width: 150, title: 'ID', sort: true }
, { field: 'Name', width: 100, title: '货代名称'}
, { field: 'Lxr', width: 150, title: '收货联系人', edit: 'text' }
, { fixed: 'right', width: 80, align: 'center', toolbar: '#barDemo' }//设置编辑、删除的工具栏
]]
, page: true
, done: function (res, curr, count) {
$(".layui-table-box").find("[data-field='Id']").css("display", "none"); // 隐藏列
}
});
//监听工具条
table.on('tool(hdshow)', function (obj) {
var data = obj.data;
if (obj.event === 'del') {
layer.confirm('真的删除行么', function (index) {
//对数据库的操作
$.ajax({
url: "/你的后台方法r",
type: "post",
data: { "id": data.Id },
dataType: "json",
async: false, //这很重要，要写上，否则数据会延迟，得不到你想要的效果
success: function (d) {
layer.msg('刪除成功！', {
icon: 1,
time: 2000 //2秒关闭（如果不配置，默认是3秒）
}, function () {
history.go(0);
});
}
});
obj.del();
layer.close(index);
});
}
});
}）；
3、点击按钮，弹出页面的方法
步骤1：添加一个按钮：
setTop是active触发事件的方法
<button data-method="setTop" data-type="auto" class="layui-btn" id="btnAdd">新增</button>
<input id="handle_status" value="" style="text-align:center; display:none" /> //用来自动关闭弹出层
步骤2：在<script>文件中，添上：
layui.use(['form', 'layedit', 'laydate', 'layer'], function () {
var form = layui.form
, layer = layui.layer
var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
//触发事件
var active = {
setTop: function () {
var that = this;
layer.open({
type: 2 //彈出新頁面
, title: '新增货代'
, area: ['700px', '300px'] //页面大小
, shade: 0
, maxmin: true
, offset: [ //坐标
100
,100
]
, content: '/你的方法'
, zIndex: layer.zIndex //重点1
, success: function (layero) {
// layer.setTop(layero); //把返回内容放在里面
layer.close();
},
//最后执行
end: function () {
var handle_status = $("#handle_status").val(); //在你访问方法成功后赋值，然后判断成功/失败---》关闭刷新页面
if (handle_status == '1') {
layer.msg('添加成功！', {
icon: 1,
time: 2000 //2秒关闭（如果不配置，默认是3秒）
}, function () {
history.go(0);
});
} else if (handle_status == '2') {
layer.msg('添加失败！', {
icon: 2,
time: 2000 //2秒关闭（如果不配置，默认是3秒）
}, function () {
history.go(0);
});
}
}
});
}
};
//彈出提示框、窗口
$('#btnAdd').on('click', function () {
var othis = $(this), method = othis.data('method');
active[method] ? active[method].call(this, othis) : '';
});
});
4、当你重新为下拉框之类赋值，要重新渲染表单：form.render('select');
5、后台方法返回的Json：具体参考官网
动态表格：
return new JsonResult()
{
Data = new
{
code = "", //解析接口状态
msg = "", //解析提示文本
count = CustomerService.returnCount(), //解析数据长度
status = 200,
data = clist
},
JsonRequestBehavior = JsonRequestBehavior.AllowGet
};