LayUI项目中使用方法

最新推荐文章于 2024-08-02 02:06:22 发布

xiaodongry8

最新推荐文章于 2024-08-02 02:06:22 发布

阅读量1.2k

点赞数 1

分类专栏： ASP.NET MVC

本文链接：https://blog.csdn.net/xiaodongry8/article/details/117257734

版权

ASP.NET MVC 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Layui在项目的后台使用中很是方便，尤其在数据提交方面使用很方便。

所有的方法可以都放包含的下面的方法中：

layui.use(['table', 'jquery', 'layer', 'form', 'laydate'], function () {}});

1、控件布局（解决按钮之间比较宽的方法）

使用class=layui-btn-group 。layui-inline要比layui-inline宽一些.

2、表单提交时，注意所有的值都是通过控件的name 属性来获取的。应该注意name的值就与数据库表的字段对应，才能得到相应的值。

3、获取表单值有两种方式：

(1), let data1 = form.val("表单的lay-filter名称"); //此时获取到的值是一个对象可直接使用

(2）form.on('submit('按钮的lay-filter名称')', function (data) {

data.field 为对象值。传值时就传递 data.field

}

4、表格加载问题：

1> table.render({}）//表格加载。详细情况可以查看帮助文档。里面很详细

注：<table class="layui-hide" id="Lay-Table" lay-filter="datatable"></table>

elem: '#Lay-Table',//表格窗口ID

testTable: 'test', //表格ID，必须设置，重载部分需要用到

加载数据时，注意分页 page:true. 分面参数：page 与 limit 可以封装在一起

返回的数据格式：//可自己定义

public class BaseModel<T>
{
/// <summary>
/// 总数（分页数）
/// </summary>
public int count { get; set; }
/// <summary>
/// 状态码 0:成功
/// </summary>
public int code { get; set; }

/// <summary>
/// 错误提示
/// </summary>
public string msg { get; set; }

/// <summary>
/// 返回实体数据
/// </summary>
public List<T> data { get; set; }
}

2>如果是加载的时候是带参的，可以在where中添加，可传一个对象，也可以是具体的几个参数（建议传对象，后续修改会很方便）

注意：如果后台有数据出现，前台没有数据出现在的现象，请查看参数传递是否正确。一般都是参数值传不正确造成的。

3>搜索功能：表格传递可以是搜索表单里面的几个控件。实现方式：

form.on('submit(“按钮的lay-filter”)', function (data) {
let field = data.field;
//field.page = 1;//都写在layui.use,这个地方要注意，数据表格分页每次都是第一页
//执行重载
table.reload('testTable', {//表格ID 向后台提交数据
method: 'post',
where: field,//搜索表单的数据
page: { curr: 1 }
});
});

4>多表头：示例如下：

1）行内改变文本颜色、修改显示值：

field: '数据字段名', title: '行标题', align: 'center', rowspan: 2, width: 100, templet: function (d) {
if (d.数据字段名) {//条件判断
return '<span style="color: #c00;">文本显示</span>';
}
else {
return '<span style="color: #060;">文本显示</span>';
}
}

2多表头:

cols: [[
{ field: '数据库字段', title: '标题', sort: true, align: 'center', rowspan: 2, width: 120 }, //rowspan: 2第一行与第二行合并显示
{ field: '数据库字段', title: '标题', align: 'center', rowspan: 2, width: 150 },
{ field: '数据库字段', title: '标题', align: 'center', rowspan: 2, width: 150 },
{ align: 'center', title: '标题', colspan: 4 }, //标题行-colspan: 4第一行4列合并显示
{ title: '附加工具栏', toolbar: '#ID(操作行的ID属性)', width: 400, rowspan: 2, align: 'center', fixed: 'right' },
], [

//标题行--第二行显示
{ field: '数据库字段', title: '标题', align: 'center', width: 100 },
{ field: '数据库字段', title: '标题', align: 'center', width: 100 },
{ field: '数据库字段', title: '标题', align: 'center', width: 200 },
{ field: '数据库字段', title: '标题', align: 'center', width: 150 },
]],

3)表头前序号的显示与实现

//方法1：这种方法的第页都从1开始计数

cols：添加 { title: '标题', align: 'center', templet: '#xuhao', rowspan: 2 }, //templet与下面的id对应

在<script>之上添加

//方法二：注意：该参数为 layui 2.2.0 新增

{ fixed: 'left', type: 'numbers', rowspan: 2 },//type: 'numbers' 编号从1开始，一直累加

4)操作行

5> 下拉列表框加载示例：

$("下载列表ID").append(new Option(value.stationname, value.stationname))//对应映射字段名第一个为显示的值第二个为value值
form.render("select"); //注间在form中渲染一下

6>动态生成的序列控件，批量向后台传递数据的声明方法:

动态控件：<input type="text" name="list[' + 索引+ '].属性" value = "' + 值 + '" disabled autocomplete="off" class="layui-input">

注：name中值：名字“list”需要与后台接收的属性名对应：索引必须从0开始。后用.属性，（list下的属性名称），这样就可以像普通对象一样接收数据库了。

7>遍历复选框的方法

let arr_deviceid = new Array();
$("input:checkbox[name='device']:checked").each(function () {
arr_deviceid.push($(this).val());
});

注：遍历所有选中的复选框，并将值放入数据中，将此数据放入所传值对象的数据中，就可以后台提交了。

8>数据编辑：

可以和数据添加用一个layer 注意字段名的一致性。

9> 复选框选中

10> 数组去重

function unique2(arr) {
let hash = [];
for (var i = 0; i < arr.length; i++) {
if (arr.indexOf(arr[i]) == i) {
hash.push(arr[i]);
}
}
return hash;
}

11> 移出Div中的指定tr

$('#div').find('tr[name="tr_' + value + '"]').remove();

12> JS判断两个时间的大小

function CompareDate(d1, date) {
//如果时间格式是正确的，那下面这一步转化时间格式就可以不用了
let dateBegin = new Date(d1.replace(/-/g, "/"));//将-转化为/，使用new Date
let dateNow = new Date(date.replace(/-/g, "/"));//将-转化为/，使用new Date

let beginDiff = dateNow.getTime() - dateBegin.getTime();//时间差的毫秒数
let beginDayDiff = Math.floor(beginDiff / (24 * 3600 * 1000));//计算出相差天数

if (beginDayDiff < 0) {//开始时间大于现在时间
return false;
}
if (beginDayDiff == 0) {//开始时间等于现在时间
return true;
}
return true;
}

13> JS判断当前时间是否在在两个时间内

function nowInDateBetween(d1, d2, date) {
//如果时间格式是正确的，那下面这一步转化时间格式就可以不用了
let dateBegin = new Date(d1.replace(/-/g, "/"));//将-转化为/，使用new Date
let dateEnd = new Date(d2.replace(/-/g, "/"));//将-转化为/，使用new Date
let dateNow = new Date(date.replace(/-/g, "/"));//将-转化为/，使用new Date

let beginDiff = dateNow.getTime() - dateBegin.getTime();//时间差的毫秒数
let beginDayDiff = Math.floor(beginDiff / (24 * 3600 * 1000));//计算出相差天数

14> 常用的layer

layer.open({
title: '标题'
type: 1,
area: ['1200px', '741px'],
fixed: false,
maxmin: false,
content:‘显示内容ID’,
success: function () {
//打开后的操作
}
});

15> form的赋值问题：

1）只赋值部分文本框：

form.val("form的lay-filter", {
"id": “赋值数据”, //表单的名称
});

16) 向后台提交数据提示样式：

form.on('submit(提交按钮的lay-filter)', function (data) {//注意好像按钮必须是lay-submit
var msg = JSON.stringify(data.field);
var index = parent.layer.msg('数据提交中,请稍候……', { icon: 16, time: false, shade: 0.8 });
$.ajax({
type: 'post',
url: '#',//后台数据提交路径
data: data.field,
async: true,
dataType: 'json',
success: function (data) {
if (正确返回) {
parent.layer.close(index);
parent.layer.msg(data.Item2, { icon: 1, time: 1800 });
layer.close(mainindex);
//window.setTimeout("window.close()", 1800);
//parent.layer.closeAll("iframe");
}
else {
parent.layer.close(index);
parent.layer.msg(data.Item2, { icon: 1, time: 1800 });
//window.setTimeout("window.close()", 1800);
//parent.layer.closeAll("iframe");
}

table.reload('表格ID', {//表格ID 向后台提交数据 //刷新表格
page: { curr: 1 }
});
},
error: function (data) {
layer.msg("Error");
}
});
//parent.layer.close(index);
return false;
});