lyaui之数据表格的简单使用

最新推荐文章于 2025-01-23 16:21:02 发布

黎明晓月

最新推荐文章于 2025-01-23 16:21:02 发布

阅读量1.1k

点赞数 25

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript layui

本文链接：https://blog.youkuaiyun.com/weixin_42949219/article/details/136341919

lyaui之数据表格的简单使用

这是从lyaui官网获取的示例，更为详细的解释或者其他的组件使用可以去官网查看：
官网示例：https://www.layuicdn.com/docs/v2/demo/table.html
官网文档：https://www.layuicdn.com/docs/v2/docs/index.htm
在这里插入图片描述

示例代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>示例演示</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 注意：项目正式环境请勿引用该地址 -->
  <link href="//www.layuicdn.com/layui-v2.7.6/css/layui.css" rel="stylesheet">
</head>
<body>
           
<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="getData">获取当前页数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="isAll">是否全选</button>
    <button class="layui-btn layui-btn-sm layui-bg-blue" id="reloadTest">
      重载测试 
      <i class="layui-icon layui-icon-down layui-font-12"></i>
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="multi-row">
      多行
    </button>
    <button class="layui-btn layui-btn-sm layui-btn-primary" lay-event="default-row">
      单行
    </button>
    <button class="layui-btn layui-btn-sm" id="moreTest">
      更多测试 
      <i class="layui-icon layui-icon-down layui-font-12"></i>
    </button>
  </div>
</script>
 
<script type="text/html" id="cityTpl">
  <select id="demoCity1" class="layui-border" lay-ignore>
    <option value="浙江杭州">浙江杭州</option>
    <option value="江西南昌">江西南昌</option>
    <option value="湖北武汉">湖北武汉</option>
  </select>
</script>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <