精华内容
下载资源
问答
  • layui表格

    2019-05-08 11:35:57
    首先说一下渲染 layui表格渲染的步骤 首先要导入layui插件 下面详细说明一下渲染表格的方法 首先渲染表格的目的是显示数据,让数据有序排列展示,使得看起来简单明了。 所以我们应该先到控制器中写查询方法 public...

    首先说一下渲染 layui表格渲染的步骤
    首先要导入layui插件

    在这里插入图片描述
    下面详细说明一下渲染表格的方法
    首先渲染表格的目的是显示数据,让数据有序排列展示,使得看起来简单明了。
    所以我们应该先到控制器中写查询方法

      public ActionResult SelectEmployee(LayuiTablePage layuiTablePage)
            {
    
                List<PW_Employee> listAcademe = myModel.PW_Employee.OrderByDescending(m => m.employeeID).Skip(layuiTablePage.GetStartIndex())
                   .Take(layuiTablePage.limit).ToList();
                int intTotalRow = myModel.PW_Employee.Count();
                LayuiTableData<PW_Employee> layuiTableData = new LayuiTableData<PW_Employee>()
                {
                    count = intTotalRow,
                    data = listAcademe
                };
                return Json(layuiTableData, JsonRequestBehavior.AllowGet);
    
            }
    

    以上就是查询方法 上面有个易错点,要注意给数据倒叙排序,也就是orderby,
    这样才能使得后面新增数据排序在前面,使得更加直观的看到数据的变化。
    数据查询出来之后,我们就可以把查询出来的数据绑定到layui 表格中了,
    下面渲染表格并绑定数据

    <script>
            var layer, layuiTable;
            var TabEmployee;
            $(document).ready(function () {
                layui.use(['layer', 'table'], function () {
                    layer = layui.layer,
                    layuiTable = layui.table;
                    TabEmployee = layuiTable.render({
                        elem: '#employee',
                        //toolbar: '#toolbarDemo',
                        url: "/Main/SelectEmployee",
                        //data: [],
                        cols: [[
                           { title: '序号', type: 'numbers' },
                           { title: 'employeeID', field: 'employeeID', hide: true },
                           { title: '员工姓名', field: 'employeeName', align: 'center' },
                           { title: '员工编号', field: 'employeeNum', align: 'center' },
                           { title: '联系电话', field: 'telphone', align: 'center' },
                           { title: '家庭地址', field: 'address', align: 'center' },
                           { title: '操作', templet: setOperate, align: 'center' }
                        ]],
                        page: {
                            limit: 12,//指定每页显示的条数
                            limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],//每页条数的选择项
                        }, //开启分页 
                        //id: "tbEmployee"
                    });
                    layuiTable.on('row(tabAcademe)', function (obj) {
                        var data = obj.data;
                       
                        obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
                        
                        obj.tr.find('div.layui-unselect.layui-form-radio')[1].click();
                    });
                });
            });
    </script>
    

    以上就是渲染方法,下面来详细介绍步骤,
    首先是声明全局变量layuitable ,
    然后elem就是表格的样式绑定,
    url 数据接口,把刚才写的查询方法查询出的数据,连接起来,
    cols 二维数组,可以设置表头和绑定数据库的数据,使其显示到layui表格中,
    cols格式比较特别,需要两个中括号包含,cols里面的title就是设置表头名称,
    在这里插入图片描述
    field是绑定数据库ID显示数据,
    page是设置页码显示数据条数与分页
    limit是指定每页显示数据的条数
    limits页码显示数据条数的选择

    在这里插入图片描述
    以上就是表格渲染的效果。

    Layui表格中还有许多没有用的参数,可以多加尝试,阅读文档,来加深对表格的学习。

    展开全文
  • layui 表格

    2021-03-09 13:22:21
    layui生成表格包括分页 按钮 前段js代码 layui.use(['element','table'], function(){//所有代码要放到layui.use下面, var table = layui.table; var $ = layui.jquery; //表格生成 table.render({ elem: '#...

    用layui生成表格包括分页 按钮

    前段js代码

    layui.use(['element','table'], function(){//所有代码要放到layui.use下面,
    
    var table = layui.table;
    var $ = layui.jquery;
    		//表格生成
            table.render({
                elem: '#gongaozhanshi'
                ,url:'/qiyewx/message/gonggaozhanshi/'
                ,cols: [[
                    {type:'numbers'}
                    // ,{field:'id', width:80, title: '序号', sort: true}
                    ,{field:'title', width:150, title: '标题'}
                    ,{field:'created_at', width:150, title: '消息时间', sort: true}
                    ,{field:'content', width:1000, title: '公告内容'}
                    ,{field:'receiver_department', width:180, title: '接收人'}
                    ,{field:'is_read', width:85, title: '详情',templet:function (b) {
                        if (b.is_read == 1){
                            return "<span class='layui-badge layui-bg-green'>已读</span>";
                        }else{
                            return "<button name='id'  value="+b.id+" class='layui-badge gg gg"+b.id+" '><span>未读</span></button>" +
                                "<span class='layui-badge layui-bg-green ggyd"+b.id+"' style='display: none'>已读</span>";
                        }
                        }}
                ]]
                ,page: true
            });
    
    //ajax点击事件
            $(document).on('click',".gg",function () {
                var id = this.value;
                $.ajax({
                    type: "get",
                    url: "/qiyewx/message/changestatusgg?id="+id,
                    dataType: "json",
                    success: function (res) {
                        if (res === true){
                            $("."+"gg"+id).hide();
                            $("."+"ggyd"+id).show();
                        }else{
    
                        }
                    }
                });
            })
    

    后端主要是 注意返回的数据格式

        public function gonggaozhanshi(){
            $data = input('param.');
            $userid = session('user.id');
    
            $department_list = WorkuserService::getcrmDepartment();
            $sql = "SELECT * FROM work_message_announcement INNER JOIN work_message_announcement_rel ON work_message_announcement_rel.announcement_id = work_message_announcement.id WHERE username=".$userid." ORDER BY work_message_announcement.id desc";
            $all_mes_re = Db::query($sql);
            foreach ($all_mes_re as $key => $val){
                $department = explode(',',$val['receiver']);
                foreach ($department as $k => $v){
                    if(empty($all_mes_re[$key]['receiver_department'])){
                        $all_mes_re[$key]['receiver_department'] = $department_list[$v];
                    }else{
                        $all_mes_re[$key]['receiver_department'] = $all_mes_re[$key]['receiver_department'].','.$department_list[$v];
                    }
                }
            }
            $start=($data['page']-1)*$data['limit']; #计算每次分页的开始位置
            $pagedata=array_slice($all_mes_re,$start,$data['limit']);#用array_slice来进行数组分页
            $data = [
                'code'=>'0',
                'msg'=>'',
                'count'=>count($all_mes_re),
                'data'=>$pagedata
            ];
            return $data;
    
        }```
    
    
    展开全文
  • 问题1:layui如何做到刷新表格 而不重新渲染 使用如下方法重新加载表格时会出现页面闪动,...首先你需要结合layui表格插件和layui分页插件 let xxxTable= table.render({ ...... page: { layout: ['prev', 'n...

    问题1:layui如何做到刷新表格 而不重新渲染

    使用如下方法重新加载表格时会出现页面闪动,以及表格位置会重置的问题

    deviceTable.reload()
    

    目前有如下方法可以实现刷新的同时而不重新渲染页面
    首先你需要结合layui表格插件和layui分页插件

    let xxxTable= table.render({
    	......
    	page: {
    		layout: ['prev', 'next', 'page', 'skip', 'count', 'limit', 'refresh']
    	}
    	......
    });
    

    使用上述代码会覆盖你的分页按钮,可自由调整按钮顺序,各参数含义如下
    prev上一页按钮
    next下一页按钮
    page 1,2,3,4 页码按钮
    skip输入页码跳转按钮
    count总数据数量显示
    limit每页显示数据限制选择
    refresh刷新按钮(本文核心)

    由于该刷新按钮只能在页码这一行,如果不满足你的需求,我们可以通过jQuery调用该按钮的点击事件从而达到不渲染刷新的效果,代码如下

    $(".layui-icon-refresh").click();
    

    可在该页面任意地方使用,举个栗子,自动刷新代码如下

    let ref = null;
    $("#toggleRefresh").click(function () {
    	if (ref == null) {
    		ref = setInterval(function () {
    			$(".layui-icon-refresh").click();
    		}, 2000);
    	} else {
    		clearInterval(ref);
    		ref = null;
    	}
    });
    

    上述代码绑定至一个按钮即可实现开关自动刷新功能

    展开全文
  • layui表格 可搜索过滤 可分页layui表格
  • Layui表格编辑

    2019-07-07 19:41:15
    对于layui表格的用法,我们通常都只是 用来渲染表格,但其实layui表格还有很多功 能,只是我们不常用,所以有很多人都不知道 Layui表格的其他用法,比如说layui表格可 以单元格编辑的,就是想修改哪个数据就点击 ...

    对于layui表格的用法,我们通常都只是
    用来渲染表格,但其实layui表格还有很多功
    能,只是我们不常用,所以有很多人都不知道
    Layui表格的其他用法,比如说layui表格可
    以单元格编辑的,就是想修改哪个数据就点击
    单元格编辑,这个方法非常实用。
    Layui表格开启单元格编辑,只需要给表
    格添加一个可编辑的属性即可。
    在这里插入图片描述

    你想编辑那一条数据就在后面加上edit:‘text’
    这个属性,

    性别 城市 然后再重新运行一下就可以实用了,
    实际效果如下所示
    

    在这里插入图片描述

    比如说修改性别这条数据,只需要点击这个单元格,
    然后单元格就会如下图所示:

    在这里插入图片描述

    就可以在单元格里面输入文字了,
    就是把这个单元格变成了一个输入框,

    展开全文
  • layui表格实现代码

    2020-08-30 12:21:07
    主要为大家详细介绍了layui表格效果的实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • layui表格数据重载

    2020-12-29 20:20:01
    本文实例为大家分享了layui表格数据重载,供大家参考,具体内容如下 html代码 <form class=layui-form action=> <div class=layui-form-item xss=removed> <div class=layui-inline> <input type=...
  • layui-table-cros:layui表格跨域请求
  • 今天小编就为大家分享一篇LayUI表格批量删除方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Layui表格渲染

    2020-08-17 20:45:31
    Layui表格渲染 首先我们需要将layui插件引用到我们的vs当中; 然后在layui插件中选取我们需要的部分进行初始化,这里我们要用的就是数据表格模块; 我们先申明一个全局变量用来接收; 因为我们在后面使用时经常会...
  • Layui 表格渲染

    2020-01-10 10:37:13
    Layui 表格渲染 1、table 数据表格文档 - layui.table 2、相关代码 <!-- HTML --> <!-- 表格载体 --> <div class="layui-form ...
  • Layui表格好看样式

    千次阅读 2019-07-27 14:45:15
    Layui表格好看样式 开发工具与关键技术:web 作者:熊琪 撰写时间:2019.7.27 Layui表格的运用至今已经很广了,如需要以下样式的请继续往下看哦,如图一为layui表格的样式效果图,主要与layui的数据表格默认的样式...
  • 在学MVC过程中,我们一般都是利用layui插件里的layui数据表格加载数据库中的数据,而layui表格里有许多的事件监听,比如监听行的单双击事件,可利用行的单双击事件实现很多我们想要的功能,比单击某条数据可以进行...
  • Layui表格构建

    2020-08-18 15:16:15
    Layui表格构建 正文 由于在浏览网页的时候,我们有时候需要查看某些数据,这时候,部分数据由表格形式呈现出来,下面我们就来学习怎么用layui制作一个表格. 它用于对表格进行一些列功能和动态化数据操作,涵盖了...
  • Layui表格添加行删除保存代码是一款可用于对表格数据快速维护,展示修改功能,灵活自如。
  • layui表格显示问题

    2021-04-22 10:11:49
    <p><img alt="" height="441" src="https://img-ask.csdnimg.cn/upload/1619057447628.png" width="158" /> layui表格中,公司名称中部分内容以星号显示,怎么实现</p>
  • layui表格参数

    2018-07-17 14:29:00
    layui表格对数据进行用table样式展现 举个例子: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>layui表格div容器</title> 6 </...
  • 获取Layui表格数据

    2019-07-27 16:06:02
    获取layui表格的全部数据,先声明一个数组接收数据 初始化layui表格然后: layui.use(['layer', 'table'], function () { even: true; // 拿对象数组tableContent中的数据作为原始数据渲染数据表格 data:...
  • 传输layui表格的ID

    千次阅读 2019-07-29 09:27:09
    在渲染layui表格的需要在控制器先查询数据,在查询数据的时候把数据库表的主键ID也一并查询,然后把数据返回到视图的layui表格layui表格用一列隐藏的列来接收ID, 接着渲染出一列操作按钮的列,然后用传参的方式...
  • 今天小编就为大家分享一篇layui表格分页 记录勾选的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇layui表格内容溢出的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 使用layui表格时 表格内容溢出,表格宽度问题
  • layui表格注意事项

    2020-07-02 14:55:39
    @layui表格学习 table中response返回解析 layui表格接收后台数据展示,其中返回的数据表格有自己的格式定义,如果不规范,将报错,可以通过response重新定义返回的参数格式。 链接: 参考原文链接. table中cols解析...
  • layui 表格嵌套

    2020-01-15 15:32:05
    layui 表格嵌套 <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head th:include="shared/_layout::header('后台管理登录')"> </head> <body> <table class=...
  • layui表格高度

    千次阅读 2020-05-14 19:52:15
    layui表格的高度设置时使用 height:‘full’ 高度就是表格每个页面的总高度。也可以直接写数值,但是这是定高。 也可以使用 height:“full-数值”,比如 height:'full-100' 那么就会在表格占据剩余div的时候底部留...
  • Layui表格的扩展

    2019-05-28 08:58:35
    Layui表格的扩展 开发工具与关键技术:MVC layui表格 作者:盘洪源 撰写时间:2019年5月27日星期一 在做项目的时候需要用到动态数据表格的时候很多,用layui的数据表格就非常方便了,layui里面有自定义表格和数据...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,171
精华内容 2,068
关键字:

layui表格