单表备忘录 以查单表为例子
先写dao层写完会跳到xml里面 写sql语句

//    查询商品表内数据
List<Map> shangpin();

xml的内容

 <!--查询商品表数据-->
  <select id="shangpin" resultType="java.util.Map">

    select* from goodsinfo
  </select>

再写service层跟dao层写的一样

//    查询商品表内数据
List<Map> shangpin();

然后去service的实现类里面实现

@Override
    public List<Map> shangpin() {
        return goodsinfoDAO.shangpin();
    }

写controller

@RequestMapping("/select")
public Map select(){

    List<Map> maps = goodsinfoService.shangpin();
    Map map=new HashMap();
    map.put("code",0);
    map.put("msg","查询成功");
    map.put("data",maps);



    return map;
}

前台

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/res/js/layui/layui.js" ></script>
    <link rel="stylesheet" href="/res/js/layui/css/layui.css">
</head>
<body>


<div class="layui-row">

    <table class="layui-hide" id="test" lay-filter="test"></table>


    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <!--<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>-->
            <!--<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>-->
            <!--<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
            <!--<button class="layui-btn layui-btn-sm" lay-event="userAdd">新增</button>-->
            <!--<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="userDel">删除</button>-->
            <a href="add_ui.html" class="layui-btn">新增采购</a>
        </div>
    </script>


    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

</div>


</body>



<script>
    layui.use(['element', 'form', 'jquery', 'table', 'util' ,'layer','laydate' ], function () {
        var element = layui.element;
        var form = layui.form;
        var $ = layui.jquery;
        var table = layui.table;
        var util = layui.util;
        var layer = layui.layer;
        var laydate = layui.laydate;


        //表格的渲染
        table.render({
            elem: '#test'
            , url: '/apigoodsinfo/select'
            , method: 'post'
            , contentType: 'application/json'
            , toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
            , defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
                title: '提示'
                , layEvent: 'LAYTABLE_TIPS'
                , icon: 'layui-icon-tips'
            }]
            , title: '用户数据表'
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'goodsId', title:'货物编号', width:100, fixed: 'left', unresize: true, sort: true}
                ,{field:'goodsType', title:'货品类型', width:100}
                ,{field:'goodsName', title:'货品名称', width:100}
                ,{field:'goodsRent', title:'货品售价', width:100}
                ,{field:'goodsCount',title:'货品数量', width:100,}
                ,{field:'supplier',title:'供应商', width:100,}
                ,{field:'telphone',title:'电话', width:150,}
                ,{field:'goodsState',title:'上架情况', width:100,}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:166}



            ]]
            , page: true
            // , limit: 5
            // , parseData: function (res) { //res 即为原始返回的数据
            //     return {
            //         "code": res.code, //解析接口状态   重点和难点!!!
            //         "msg": res.msg, //解析提示文本
            //         "count": res.count, //解析数据长度
            //         "data": res.data.list //解析数据列表
            //     };
            // }
        });
    })
</script>





</html>
如果觉得我的文章对你有用,请随意赞赏
END
本文作者:
文章标题:layui数据表格笔记
本文地址:https://c924.cn/index.php/archives/118/
版权说明:若无注明,本文皆天乐Blog原创,转载请保留文章出处。