layui操作table表格全功能演示代码

代码语言:html

所属分类:表格

代码描述:layui操作table表格全功能演示代码,包括添加编辑、多选、排序、菜单、导出excel、打印、分页 幻灯片、日期、分页、上传、滑块等控件,采用了ajax请求后台数据。

代码标签: layui table 表格 全功能 演示 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
 
<meta charset="UTF-8">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/layui.2.8.9.css">
<style>
body
{
 
padding: 16px;
}
.demo-carousel {
 
height: 200px;
 
line-height: 200px;
 
text-align: center;
}
</style>


 
 
</head>

<body >
 
<blockquote class="layui-elem-quote layui-text" id="version">
  当前演示版本:Layui-v{{= layui.v }}
</blockquote>

<table class="layui-hide" id="ID-test-table"></table>
 
<script type="text/html" id="barDemo">
 
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
 
<a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
</script>
 
<div class="layui-tab layui-tab-brief" lay-filter="filter-test-tab">
 
<ul class="layui-tab-title">
   
<li class="layui-this">演示说明</li>
   
<li>日期</li>
   
<li>分页</li>
   
<li>上传</li>
   
<li>滑块</li>
 
</ul>
 
<div class="layui-tab-content">
   
<div class="layui-tab-item layui-show">
     
<div class="layui-carousel" id="ID-test-carousel">
       
<div carousel-item>
         
<div><p class="demo-carousel">在这里,您将以最直观的形式体验 Layui!</p></div>
         
<div><p class="layui-bg-red demo-carousel">在编辑器中编码 Layui 相关的代码</p></div>
         
<div><p class="layui-bg-green demo-carousel">您可以结合 Layui 官方文档来此处进行示例演示</p></div>
       
</div>
      .........完整代码请登录后点击上方下载按钮下载查看

网友评论0