layui前端框架表格如何进行屏幕适配

Posted 2023-05-04

标签：js代码 .com 效果 click .text jquer 参考 定义 html

项目中需要弹出层效果，使用了layui前端框架，主要使用了里面的弹出层特效（可以移动）

html代码

要给这个标签绑定click方法

1 <a href=‘javascript:;‘ data-method=‘offset‘ data-type=‘auto‘ class=‘showMean‘>显示</a>
点击以后，显示这个页面

1 <div class="con-no-ma displayNo" id="con-no-ma">
2 显示页面
3 </div>
js代码

function showMean()
layui.use(‘layer‘,function ()
var $ = layui.jquery, layer = layui.layer;

//触发事件,这个相当于设置参数
var active =
offset: function(othis)
var type = othis.data(‘type‘)
,text = othis.text();

layer.open(
title:"数据关联",
type: 1,
offset: type, //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
id: ‘LAY_demo‘+type, //防止重复弹出
content: $("#con-no-ma"), //在页面新定义，然后通过id绑定到这
btn: ‘关闭全部‘,
area: [‘1000px‘, ‘500px‘],
btnAlign: ‘c‘, //按钮居中
shade: 0, //不显示遮罩
//btn的方法
yes: function()
layer.closeAll();
,
//右上角关闭按钮的方法
cancel: function()
layer.closeAll();

);

;

//给指定标签绑定click事件
$(‘ .showMean‘).on(‘click‘, function()
var othis = $(this), method = othis.data(‘method‘);
active[method] ? active[method].call(this, othis) : ‘‘;
);
)
参考技术A 使用IDV ，外层DIV画进度条矩形边框，内层DIV使用JS，进行填充宽度 参考技术B layui框架是响应式的，Layui 是一款采用自身模块规范编写的国产前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发。
更多是为服务端程序员量身定做，无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切所需要的元素与交互。本回答被提问者采纳

layui 学习增删改查分页

1 layui 经典模块化前端框架

由职业前端倾情打造，面向所有层次的前后端开发者，零门槛开箱即用的前端UI解决方案

2 比较符合 ui设计 美感不好的 同学

3 上手快 扁平化

4正片

首先在GitHub 上 star 然后 下载到本地

记录下自己的 debug 经历

---

1 加载table

    // 表格渲染
  var tableIns=  table.render({
        elem: ‘#dateTable‘                  //指定原始表格元素选择器（推荐id选择器）
        , height: vipTable.getFullHeight()    //容器高度
        , cols: [[                  //标题栏
            {checkbox: true, sort: true, fixed: true, space: true}
            , {field: ‘tid‘, title: ‘ID‘, width: 80}
            ,{field: ‘teid‘, title: ‘teID‘, width: 80}
            , {field: ‘tname‘, title: ‘用户名‘, width: 120}
            , {field: ‘email‘, title: ‘email‘, width: 180}
            , {field: ‘tel‘, title: ‘tel‘, width: 120}
            , {field: ‘classid‘, title: ‘班级‘, width: 120}
            , {field: ‘subjectid‘, title: ‘学科‘, width: 120}
            , {field: ‘status‘, title: ‘状态‘, width: 70}
            , {fixed: ‘right‘, title: ‘操作‘, width: 240, align: ‘center‘, toolbar: ‘#barOption‘} //这里的toolbar值是模板元素的选择器
        ]]
        , id: ‘dataCheck‘
        , url: ‘./../teachers/datetable‘
        , method: ‘get‘
        , page: true
        , limits: [3, 6, 9, 30, 40]
        , limit: 3 //默认采用3
        , loading: false
        , done: function (res, curr, count) {
            //如果是异步请求数据方式，res即为你接口返回的信息。
            //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
            console.log(res);

            //得到当前页码
            console.log(curr);

            //得到数据总量
            console.log(count);
        }
    });

---

2 刷新
// 刷新
$(‘#btn-refresh‘).on(‘click‘, function () {
tableIns.reload({
url:‘./../teachers/datetable‘,
done: function(res,curr,count){
this.where={};
}
});
});

---

3             // 获取选中行
    table.on(‘checkbox(test)‘, function (obj) {
        layer.msg(‘checkboxtest‘);
        console.log(obj.checked); //当前是否选中状态
        console.log(obj.data); //选中行的相关数据
        console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
    });

---

4 //监听工具条 查询单个 修改 删除
table.on(‘tool(test)‘, function(obj){ //注：tool是工具条事件名，test是table原始容器的属性"对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的DOM对象

      if(layEvent === ‘detail‘){ //查看
        //do somehing
      } else if(layEvent === ‘del‘){ //删除
          layer.confirm(‘真的删除行么‘, function(index){
              console.log(data);
              $.ajax({
                  url: "./../teachers/deleteajax",
                  type: "POST",
                  data:{"tid":data.tid},
                  dataType: "json",
                  success: function(data){

                      if(data.state==1){
                          obj.del();
                          layer.close(index);
                          layer.msg("删除成功", {icon: 6});
                      }else{
                          layer.msg("删除失败", {icon: 5});
                      }
                  }

              });  
          });
      } 

---

5 //查询按钮点击事件
$(‘.demoTable .layui-btn‘).on(‘click‘, function(){
var type = $(this).data(‘type‘);
var teid = $(‘#teid‘);
var tname = $(‘#tname‘);
var status = $(‘#status‘);
var createdate = $(‘#createdate‘);
//按条件查询刷新table
tableIns.reload({
url:‘./../teachers/datetable‘,
where: {
teid: teid.val(),
tname: tname.val(),
status: status.val(),
createdate: createdate.val()
},done: function(res,curr,count){
this.where={};
}
});

        });

---

遇到的问题有 where 参数的重载

因为我 var tableIns= table.render({ 获取table实例
所有 table 查询重载 是
tableIns.reload({
url:‘./../teachers/datetable‘,
where: {
teid: teid.val(),
tname: tname.val(),
status: status.val(),
createdate: createdate.val()
},done: function(res,curr,count){
this.where={};
}
});
开始一直在加 reload “tableid” 后面才发现不用加 table的id

---

最后 layui 很不错的后台模板 然后 今年有很大的进步

学习的入门可以参考
https://www.layui.com/demo/

然后也官网下载 layui的资料