LayUI添加表头工具栏和表行工具栏的实现

 在前面实现了layui的数据表格的分页，现在就在原基础上添加数据表头栏与数据行栏实现监听事件。那我该咋做呢？

首先，先上原基础代码：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all">
</head>
<body>

<table id="demo" lay-filter="test"></table>

<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 315
            ,url: '/admin/splitByMap' //数据接口
            ,page: true //开启分页
            ,limit:6
            ,limits:[10,15,20,30,40,50,100]
            ,cols: [[ //表头
                {field: 'studentID', title: '学号', width:160,align:"center"}
                ,{field: 'studentName', title: '姓名', width:160,align:"center"}
                ,{field: 'studentSex', title: '性别', width:160,align:"center"}
                ,{field: 'studentPhone', title: '手机号', width:160,align:"center"}
                ,{field: 'studentAddress', title: '地址', width:160,align:"center"}
                ,{field: 'studentProfession', title: '专业', width:160,align:"center"}
                ,{field: 'studentGrade', title: '年级', width:160,align:"center"}
            ]]
        });
    });
</script>
</body>
</html>

再上现在有数据表栏的代码，发现有何区别：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css" media="all">
</head>
<body>
<!-- 表头工具栏 -->
<script type="text/html" id="headbar">
    <a class="layui-btn layui-btn-xs" lay-event="select"><i class="layui-icon layui-icon-file">新增</i></a>
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit">修改</i></a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete">删除</i></a>
</script>
<%--数据表格主体--%>
<table id="demo" lay-filter="test"></table>
<!-- 表行工具栏 -->
<script type="text/html" id="hangbar">
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit">编辑</i></a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete">删除</i></a>
</script>

<script src="${pageContext.request.contextPath}/layui/layui.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 380
            ,url: '/admin/splitByMap' //数据接口
            ,page: true //开启分页
            ,toolbar:"#headbar"
            ,limit:6
            ,limits:[10,15,20,30,40,50,100]
            ,cols: [[ //表头
                {field: 'studentID', title: '学号', width:140,align:"center"}
                ,{field: 'studentName', title: '姓名', width:140,align:"center"}
                ,{field: 'studentSex', title: '性别', width:140,align:"center"}
                ,{field: 'studentPhone', title: '手机号', width:140,align:"center"}
                ,{field: 'studentAddress', title: '地址', width:140,align:"center"}
                ,{field: 'studentProfession', title: '专业', width:140,align:"center"}
                ,{field: 'studentGrade', title: '年级', width:140,align:"center"}
                ,{title: '年级',toolbar:'#hangbar', width:160,align:"center"}
            ]]
        });
    });
</script>
</body>
</html>

区别是不是在于我添加了两个script代码段和在显示数据表中添加了两个toolbar：

<!-- 表头工具栏 -->
<script type="text/html" id="headbar">
    <a class="layui-btn layui-btn-xs" lay-event="select"><i class="layui-icon layui-icon-file">新增</i></a>
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit">修改</i></a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete">删除</i></a>
</script>
<!-- 表行工具栏 -->
<script type="text/html" id="hangbar">
    <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit">编辑</i></a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete">删除</i></a>
</script>

根据两个数据表的栏中的id属性进行绑定：

<script>
    layui.use('table', function(){
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 380
            ,url: '/admin/splitByMap' //数据接口
            ,page: true //开启分页
            ,toolbar:"#headbar" 这个是绑定数据表头工具栏，头的工具栏是在cols的外面绑定的。
            ,limit:6
            ,limits:[10,15,20,30,40,50,100]
            ,cols: [[ //表头
                {field: 'studentID', title: '学号', width:140,align:"center"}
                ,{field: 'studentName', title: '姓名', width:140,align:"center"}
                ,{field: 'studentSex', title: '性别', width:140,align:"center"}
                ,{field: 'studentPhone', title: '手机号', width:140,align:"center"}
                ,{field: 'studentAddress', title: '地址', width:140,align:"center"}
                ,{field: 'studentProfession', title: '专业', width:140,align:"center"}
                ,{field: 'studentGrade', title: '年级', width:140,align:"center"}
                ,{title: '年级',toolbar:'#hangbar', width:160,align:"center"}这个是绑定数据表行工具栏，行的工具栏是在cols中绑定的。
            ]]
        });
    });
</script>

　　最终的实现效果是：

 

posted @ 2021-11-10 15:45  心向未来  Views(446)  Comments(0)    收藏  举报