如何快速创建一个LayUI 数据表格

最新推荐文章于 2024-08-06 02:06:34 发布

nnn_net

最新推荐文章于 2024-08-06 02:06:34 发布

阅读量6.5k

点赞数 3

分类专栏：前端文章标签： layui table

本文链接：https://blog.csdn.net/nnn_net/article/details/77835127

版权

本文介绍了如何使用LayUI快速创建一个数据表格，包括修改API参数、后台Action逻辑、前端数据处理及模板语法的应用，展示了自定义列和条件筛选的方法。

摘要由CSDN通过智能技术生成

最近LayUI API频繁更新，碰巧做了个Demo，准备把项目中的table给换个方式显示，就着手做了一个基础的表格，先上个效果图。

HTML：

<div class="row" id="divParams">
        <div class="panel col-md-12">
            <br />
            <div class="demoTable">
                关键字：
                <div class="layui-inline">
                    <input name="id" class="layui-input" id="keyword" placeholder="请输入查询关键字">
                </div>
                时间段：
                <div class="layui-inline">
                    <input class="layui-input" id="timearea" placeholder="请选择查询时间段" type="text">
                </div>
                <button class="layui-btn" data-type="reload" οnclick="initTable();">搜索</button>
            </div>
            <table class="layui-table" id="demo" lay-filter="demo"></table>
        </div>
    </div>
    <script id="dateTpl" type="text/html">
        {
  {#  var fn = function(){
        return moment(d.ApplyDate).format("YYYY-MM-DD");
         }; if(true){ }}
        {
  { fn() }}
        {
  {#  } }}

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