layui 的使用 table 和后端数据交互
1 引用js和css
2在s layui.use(['laydate', 'form', 'table', 'laypage'], //需要使用哪个模块就声明哪 function () {
var laydate = layui.laydate; // 时间 var table = layui.table; //表格 var form = layui.form; //表单 var laypage = layui.laypage; //分页 //执行一个laydate实例 laydate.render({ elem: '#start' //指定元素 }); //执行一个laydate实例 laydate.render({ elem: '#end' //指定元素 });var url ="xxxxxx.xxxx.xxx"; var tableName = table.render({ elem: '#demo', //table的id url: url, page: true, //开启分页 request: { pageName: 'pageIndex' //页码的参数名称，默认：page，更改之后为pageIndex，在请求时会自动带过去 , limitName: 'pageSize' //每页数据量的参数名，默认：limit，更改之后为pageSize }, parseData: function (res) { //与后端数据交互，需要传固定格式，转换为下面所示 return { "code": 0, //数据状态 "msg": "", //状态信息 "count": res.Data.Count, //数据总数 "data": res.Data.Dtos, //后端的详细数据 } }, cols: [//表头 [{ field: 'column1', title: '列1', align: 'center', width: 240 }, { field: 'column2', title: '列2', align: 'center' }, { field: 'column3', title: '列3', align: 'center' }, ]], loading: true, //数据加载中。。。 id: 'idTest', }); //搜索 按钮在form表单中 样式class="layui-btn" lay-submit lay-filter="search"
//form内的按钮总会自动提交，将其设置为button，不会自动提交
// button 按钮的type有三个属性：button，submit，reset，button默认是submit，所以没有指定type类型情况下，点击button会触发form表单
//按钮需要加上lay-submit属性，layut的form.on的表单提交监听不到这个按钮，那么return false对提交的制止也就失效了
form.on('submit(search)', function (data) { var param1= $("#start").val(); var param2= $("#end").val();var url = "xxxxxxx?param1=" + param + "¶m2=" + param2 ; //第一种方法 tableName.reload({ url: url ,request: { pageName: 'pageIndex' //页码的参数名称，默认：page , limitName: 'pageSize' //每页数据量的参数名，默认：limit } ,where: { //设定异步数据接口的额外参数，任意设 第二种方法传参 parameter1: param1, parameter2: param2, } , page: { curr: 1 //重新从第 1 页开始 } }); return false; //表单按钮的js回调函数添加retrun false制止 });
//<button id="reloadbtn" > jquery 写法 //$('#reloadbtn').click(function () { //里面写法和上面一样 //}); });
监听工具条
table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值" var data = obj.data; //获得当前行数据 var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值） var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话） if (layEvent === 'detail') { //查看 var id = data["Id"]; xadmin.open('名字', 'url?Id=' + id); } else if (layEvent === 'del') { //删除 layer.confirm('真的删除行么', function (index) { obj.del(); //删除对应行（tr）的DOM结构，并更新缓存 layer.close(index); //向服务端发送删除指令 }); } else if (layEvent === 'edit') { //编辑 var column1= data["column1"]; //编辑行的column1的值 var column2= data["column2"]; xadmin.open('编辑', 'url?column1=' + column1+ '&column2=' + column2); } }); });
数据动态加载,使用laytpl
layui.use(['laytpl'], function () { var laytpl = layui.laytpl; var Id = getQueryVariable("Id"); var host = "https://localhost:5001"; layui.use(['laytpl'], function () { var laytpl = layui.laytpl;var url = url?id=" + Id; $.ajax({ url: url, type: 'get', dataType: 'json', success: function (res) { //res请求返回的结果for (i = 0; i < res.Data.length;i++) { $("#test").append("<ul class='layui-timeline'><li class='layui-timeline-item'> <i class='layui-icon layui-timeline-axis'></i>
<div class='layui-timeline-content layui-text'><h3 class='layui-timeline-title'>" + res.Data[i].xxx1+ "</h3><p><br>" + res.Data[i].xxx2+ "</p></li></ul>"); } } }) }); });
<script type="text/html" > <div class="layui-card"> <div class="layui-card-header">订单概况</div> <div class="layui-card-body" id="test"> </div> </div> </script>
//监听提交 form.on('submit(commit)', function (data) { var column1= data.field.column1; var column2= data.field.column2; var list= []; //这里数组要与后台的数组中的对象要对应，不然的话接受不到数据 $('input[type=checkbox]:checked').each(function () { //获取checkbox选择的属性 var title = this.title; //获取标题
var value=$(this).val(); var list= { Title:title, Value: value }; courseList.push(courseDto); }); var courseManagementDtos = { Column1: column1, Column2: column2, List: list }; //注意名字要对应 var url ="后台接口地址"; $.ajax({ url: url, type: "post", contentType: "application/json", dataType: "json", data: JSON.stringify(courseManagementDtos), success: function (res) { if (res.Code == 1) { layer.alert("提交成功"); } else { layer.alert("提交失败"); } } }) return false; });
动态加载html
$("#courseList").append(html代码） //添加不能移除 $("#courseList").html(html代码); //移除和添加
当前端传过来的数据要进行转换时，比如true要显示成是
{ field: 'value', title: '是否完成', align: 'center', templet: function (d) { if (d.value== true) { return '<span style="color: balck;">是</span>'; //可以添加自己想要的样式 } else { return '<span style="color: red;">否</span>'; } } },
动态绑定列
for (let item of cols) { tableCols.push({ field: item, title: item, width: 120, totalRow: true, align: "center", templet: function (d) { if (d[item] == null) { //这里是中括号，不是点 return ""; } return layui.util.toDateString(d[item], "yyyy-MM-dd"); //格式化， }, }); }
多选框引用
<link href="../../css/formSelects-v4.css" rel="stylesheet">
<script src="../../js/formSelects-v4.min.js"></script>
后端请求数据
$.ajax({ url:Common.WebApiUrl+ Method.CerType, dataType: 'json', type: 'get', success: function (res) { console.log(res.data); $.each(res.data, function ( i,item) { $('#cerType').append(new Option(item.FNUMBER, item.FENTRYID));// 下拉菜单里添加元素 }); formSelects.render('select'); } }),
监听行事件获取列索引和行索引
// //监听工具条，根据layEvent的名字来区别
table.on('tool(stocklayTable)',function(obj){
var colIndex=$(this).parent().parent().index();
var rowIndex = $(obj.tr).attr("data-index");
var fieldName=obj.tr[rowIndex].cells[colIndex].dataset.field; //列名
})
$('table tr td').click(
function()
{
alert( $(this).parent().parent().find("tr").index($(this).parent()[0]));//第几行
alert($(this).index());//第几列
}
);
获取select选中的值
let val = $('#cerType').val(); let text= $('#cerType option:selected').text();
body中只有一个跟div，如果有两个可能会出现问题，比如laypage的跳转会有问题(如下面这中形式)
<body>
<div>
<form>
</form>
</div>
<div>
</div>
</body>
其他的比如html已写好，绑定数据可以去看官方文档，比较简单，和vue绑定差不多
