Layui

刘恒123456789

已于 2024-08-26 10:59:28 修改

阅读量548

点赞数

文章标签： layui js javascript

于 2023-09-26 10:35:21 首次发布

本文链接：https://blog.csdn.net/weixin_56049214/article/details/133299236

版权

开发笔记

推荐链接
查看layui的版本
子页面代码传递到父页面
数据表格删除功能之后的补充检查(可以用作判断是否还有数据)
动态执行 select 选择框的事件
动态设置是否必填
获取表格数据
表格无刷新修改某一行数据
表单在iframe页面关闭自身
开启复选框并动态设置选中
表格在done回调中修改表格数据
认为原本数据表格的edit功能不好，通过 templet 进行重写
验证规则
- 单选框必填限制
- 多选框必填限制

查看layui的版本

在控制台查看版本：在页面上使用layui框架时，可以在浏览器的控制台中查看layui的版本信息。在 Chrome 浏览器中，可以按 F12 打开控制台，然后切换到 Console 标签，输入 “layui” 并回车，控制台会显示 layui 的版本号。

子页面代码传递到父页面

//layui 2.3.0
// 子页面代码
// 触发自定义事件并传递数据
var data = {name: '张三', age: 18};
parent.layui.event('myEvent', 'myEvent', data);
// 父页面代码
layui.onevent('myEvent', 'myEvent', function(data){
    console.log(data); // 输出 {name: '张三', age: 18}
});
// 子页面重载父页面表格
 parent.layui.table.reload('表格的lay-filter');


//windows中进行子页面向父页面传递数据
//在子页面中，可以使用 window.postMessage() 方法向父页面发送消息，并在父页面中通过监听 message 事件来接收消息。
// window.parent.postMessage(data, targetOrigin) 中，targetOrigin 参数指定了消息的目标来源。该参数可以是一个具体的 URL，或者是特定的字符串,如果 targetOrigin 参数设置为具体的 URL，那么只有与该 URL 相匹配的父窗口才能接收到消息。例如，targetOrigin 参数设置为 "https://example.com"，则只有来自该 URL 的父窗口才能接收到消息。如果 targetOrigin 参数设置为 "*"（星号），则表示消息可以被任意父窗口接收，无论来源是什么。这样做存在一定的安全风险，因为任何窗口都可以监听并接收消息。
// 子页面发送消息给父页面，
var data = { key: 'value' };
window.parent.postMessage(data, '*');

// 父页面监听 message 事件来接收消息
window.addEventListener('message', function(event) {
  var data = event.data; // 接收到的数据
  console.log(data);
});

数据表格删除功能之后的补充检查(可以用作判断是否还有数据)

//    将导入的数据存入到数据库里面
let WefdlPurchase = [];
// $.isEmptyObject() 函数用于检查对象是否为空（不包含任何属性）。
$.each(table.cache.ContractNumberTable,function (index,value){
    // console.log(index,value.length,$.isEmptyObject(value),value);
    if(!($.isEmptyObject(value))){
        WefdlPurchase.push(value)
    }
})

动态执行 select 选择框的事件

layui.event.call(elem,'form','select(lay-filter)',data);
//elem,表示事件函数中的this，
//form,表示模块，固定值
/'select(lay-filter),需要触发的filter
//data,事件函数接受的参数

form.on('select(lay-filter)',function(data){
       //data 就是上面的
       //this就是上面的elem
})

//正常情况下很少使用完整的data，只会用到 data.value,那么可以伪造一个对象来传过去
var data = {value: value}; 
layui.event.call($('#ID'),'form','select(lay-id)',{data});
//子页面控制父页面select 则parent.layui.event.call

动态设置是否必填

//增加必填
$('#id').attr('lay-verify', 'required');

//删除必填
$('#id').removeAttr('lay-verify');

获取表格数据

// 里面的id也可以换成表格的elem
 let data = layui.table.cache[id] 
 console.log(data);

表格无刷新修改某一行数据

table.on('edit(tableContent)', function (obj) {
    console.log(obj.value); // 得到编辑修改后的值
    console.log(obj.field); // 得到编辑的字段名
    console.log(obj.data); // 得到修改后该行的数据
    var dataIndex = obj.data.LAY_TABLE_INDEX; // 要修改的行的索引，根据实际情况进行设置
    //如果obj.data里面没有LAY_TABLE_INDEX这个键值就可以使用下面这个
    //var dataIndex =  $(obj.tr).attr("data-index");
    
    var tableRow = document.querySelector('tr[data-index="' + dataIndex + '"]'); // 获取指定索引的行元素
    if (tableRow) {
        var tableCells = tableRow.querySelectorAll('td[data-field]'); // 获取行中带有 data-field 属性的单元格元素
        tableCells.forEach(function(cell) {
            var field = cell.getAttribute('data-field'); // 获取单元格的字段名
            var cellValue = cell.querySelector('.layui-table-cell').innerText; // 获取单元格的值
            console.log('cell',cellValue);
            // 在这里根据需要修改单元格的值
            if (field === 'xxxx') {
                // 修改字段对应的单元格值
                cell.querySelector('.layui-table-cell').innerText = 'New Value';
            }
        });
    //确定需要修改的字段名称(不用循环处理)
    //var cell = tableRow.querySelector('td[data-field="字段名称"]');
    //var cellValue = cell.querySelector('.layui-table-cell').innerText;
    //console.log('123',cell,cellValue);
    //cell.querySelector('.layui-table-cell').innerText = '新的值';

	//如果不满意用户输入的值，可以置空
	//$(this).val(0);

    }
})

表单在iframe页面关闭自身

var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭

开启复选框并动态设置选中


//这句才是真正选中，通过设置关键字LAY_CHECKED为true选中
obj.data[i]["LAY_CHECKED"] = 'true';
//在表格中也可以通过这样设置复选框
if (!obj.data.hasOwnProperty("LAY_CHECKED")) {
    obj.data.LAY_CHECKED = true;
    //如果上面的LAY_CHECKED 不起作用则解除下面的注释
    //layui.table.cache.table[dataIndex].LAY_CHECKED = true;
}

//下面三句是通过更改css来实现选中的效果，主要是LAY_TABLE_INDEX这个键值,其他都不重要
var index= obj.data[i]['LAY_TABLE_INDEX'];
$('tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
$('tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');

表格在done回调中修改表格数据

res.data.forEach(function (obj2) {

   obj2.LAY_CHECKED = true;
   $('tr[data-index=' + LAY_TABLE_INDEX + '] input[type="checkbox"]').prop('checked', true);
   $('tr[data-index=' + LAY_TABLE_INDEX + '] input[type="checkbox"]').next().addClass('layui-form-checked');

	//data-field="htsl" 这个需要注意
   let htsl = document.querySelector('tr[data-index="' + LAY_TABLE_INDEX + '"] td[data-field="htsl"]');
   htsl.getElementsByClassName('layui-table-cell')[0].innerText = value;
})

认为原本数据表格的edit功能不好，通过 templet 进行重写

<style>
    .sel{
        font-size: 12px;
        height: 28px;
    }
</style>
<!--调整分数-->
<script type="text/html" id="AdjustScore">
    <input type="text" name="AdjustScore" class="form-control sel" data-id="AdjustScore-{{d.ID}}" value="{{d.Adjust_Score}}" autocomplete="off" placeholder="分数" onchange = "if(/\D/.test(this.value)){layer.alert('只能输入数字');this.value='';}">
    <span  data-id="AdjustScore-{{d.ID}}">{{d.Adjust_Score || 0}}</span>
</script>
<!--调整备注-->
<script type="text/html" id="AdjustRemark">
    <input type="text" name="AdjustRemark" class="form-control sel" data-id="AdjustRemark-{{d.ID}}" value="{{d.Adjust_Remark}}" autocomplete="off" placeholder="备注" >
    <span  data-id="AdjustRemark-{{d.ID}}">{{d.Adjust_Remark || ""}}</span>
</script>


table.on('checkbox(tableContent)', function(obj){
    // console.log(obj); //当前行的一些常用操作集合
    // console.log(obj.checked); //当前是否选中状态
    // console.log(obj.data); //选中行的相关数据
    // console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
    var id = obj.data.ID;
    var checkStatus = table.checkStatus('table'),
        data = checkStatus.data ;

    if(obj.checked){
        for(let i=0;i<data.length;i++){
            $("input[data-id='AdjustScore-"+id+"']").show();
            $("span[data-id='AdjustScore-"+id+"']").hide();
            $("input[data-id='AdjustRemark-"+id+"']").show();
            $("span[data-id='AdjustRemark-"+id+"']").hide();
        }
    }else{
        $("input[data-id='AdjustScore-"+id+"']").hide();
        $("span[data-id='AdjustScore-"+id+"']").show();
        $("input[data-id='AdjustRemark-"+id+"']").hide();
        $("span[data-id='AdjustRemark-"+id+"']").show();
    }

    //用来控制显隐
    //控制按钮是否能被点击
    if(data.length === 0) {
        $("a[data-type='saveEdit']").attr("class","btn btn-warning btn-edit btn-disabled disabled");

    }else if(data.length > 1){
        $("a[data-type='saveEdit']").attr("class","btn btn-warning btn-edit btn-disabled disabled");
    } else{
        $("a[data-type='saveEdit']").attr("class","btn btn-warning btn-edit");
    }
});

验证规则

单选框必填限制

radioRequired: function(value,item){
      var verifyName=$(item).attr('name'),
          verifyType=$(item).attr('type');
      let radio_checked = false;
      $('input[name= "' + verifyName  +'"]').each(function() {
          if ($(this).is(":checked")) {
              radio_checked = true;
          }
      });
      if (!radio_checked) {
          var focusElem = $('input[name= "' + verifyName  +'"]').next().find('i.layui-anim.layui-icon');//焦点元素
          focusElem.css(verifyType=='radio'?{"color":"#FF5722"}:{"border-color":"#FF5722"});
          //对非输入框设置焦点
          focusElem.first().attr("tabIndex","1").css("outline","0").blur(function() {
              focusElem.css(verifyType=='radio'?{"color":""}:{"border-color":""});
          }).focus();
          return '必填项不能为空';
      }
  },

多选框必填限制

 checkboxRequired: function(value, item) {
      var verifyName=$(item).attr('name'),
          verifyType=$(item).attr('type');
      let checkbox_checked = false;
      $('input[name= "' + verifyName  +'"]').each(function() {
          if ($(this).is(":checked")) {
              checkbox_checked = true;
          }
      });
      if (!checkbox_checked) {
          var focusElem = $('input[name= "' + verifyName  +'"]').next().find('i.layui-icon-ok.layui-icon');//焦点元素
          focusElem.css(verifyType=='checkbox'?{"color":"#FF5722"}:{"border-color":"#FF5722"});
          //对非输入框设置焦点
          focusElem.first().attr("tabIndex","1").css("outline","0").blur(function() {
              focusElem.css(verifyType=='checkbox'?{"color":""}:{"border-color":""});
          }).focus();
          return '必填项不能为空';
      }
  }