layUI分页处理--乐字节前端

layUI分页处理--乐字节前端,第1张

​ <font color="red">模块加载名称: laypage </font>

​ laypage 的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染。

通过核心方法: laypagerender(options) 来设置基础参数。

当分页被切换时触发,函数返回两个参数: obj (当前分页的所有选项值)、first(是否首次,一般用于初始加载的判断)

​ <font color="red">模块加载名称: table </font>

​ 创建一个table实例最简单的方式是,在页面放置一个元素 <table id="demo"></table> ,然后通过 tablerender() 方法指定该容器。

数据接口 userjson

​ 在一段 table 容器中配置好相应的参数,由 table 模块内部自动对其完成渲染,而无需你写初始的渲染方法。

​ 1) 带有 class="layui-table" 的 <table> 标签。

​ 2) 对标签设置属性 lay-data="" 用于配置一些基础参数

​ 3) 在 <th> 标签中设置属性 lay-data="" 用于配置表头信息

​ 页面已经存在了一段有内容的表格,由原始的table标签组成,只需要赋予它一些动态元素。

执行用于转换表格的JS方法

php 把数据导出到excel表格有多种方法,比如使用 phpExcel 等,以下代码是直接通过 header 生成 excel 文件的代码示例:

<php

header("Content-type:application/vndms-excel");

header("Content-Disposition:filename=xls_regionxls");

$cfg_dbhost = 'localhost';

$cfg_dbname = 'testdb';

$cfg_dbuser = 'root';

$cfg_dbpwd = 'root';

$cfg_db_language = 'utf8';

// END 配置

//链接数据库

$link = mysql_connect($cfg_dbhost,$cfg_dbuser,$cfg_dbpwd);

mysql_select_db($cfg_dbname);

//选择编码

mysql_query("set names "$cfg_db_language);

//users表

$sql = "desc users";

$res = mysql_query($sql);

echo "<table><tr>";

//导出表头(也就是表中拥有的字段)

while($row = mysql_fetch_array($res)){

$t_field[] = $row['Field']; //Field中的F要大写,否则没有结果

echo "<th>"$row['Field']"</th>";

}

echo "</tr>";

//导出100条数据

$sql = "select from users limit 100";

$res = mysql_query($sql);

while($row = mysql_fetch_array($res)){

echo "<tr>";

foreach($t_field as $f_key){

echo "<td>"$row[$f_key]"</td>";

}

echo "</tr>";

}

echo "</table>";

>等等 许多, 具体的在后盾网里面有详细的。

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>文件上传</title> <link rel="stylesheet" href="layui/css/layuicss"> <link rel="stylesheet" href="css/globalcss"> </head> <body> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>设定上传文件的格式</legend> </fieldset> <input type="file" name="file" class="layui-upload-file"> <input type="file" name="file1" lay-type="file" class="layui-upload-file"> <input type="file" name="file1" lay-type="audio" class="layui-upload-file"> <input type="file" name="file2" lay-type="video" class="layui-upload-file"> <blockquote class="layui-elem-quote" style="margin-top: 20px;">支持拖动文件上传</blockquote> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"> <legend>演示上传</legend> </fieldset> <div class="site-demo-upload"> <img id="LAY_demo_upload" src="layui/images/tongjpg"> <div class="site-demo-upbar"> <input type="file" name="file" class="layui-upload-file" id="test"> </div> </div> <p style="margin-top: 20px;">注:由于服务器资源有限,所以此处每次给你返回的是同一张</p> <script src="layui/layuijs"></script> <script> layuiuse('upload', function(){ layuiupload({ url: '' //上传接口 ,success: function(res){ //上传成功后的回调 consolelog(res) } }); layuiupload({ url: '/test/uploadjson' ,elem: '#test' //指定原始元素,默认直接查找class="layui-upload-file" ,method: 'get' //上传接口的>

一、 我们在使用layuitable前必须初始化layui模块,用到的模块一般常用的有两种 layer(d出层)和 table(数据表格),然后用function进行模快的初始化,当然在初始化模块之前我们必须声明几个全局变量,

声明两个变量(layer和layuiTable)来接收模块的数据,并且保存layui模块以便全局使用。

声明一个变量(tabStudent)来放置表格数据。

二、开始初始化模块

首先我们在加载事件里面将声明的那两个变量来接收layer(d出层)和 table(数据表格)

三、接下来就是初始化表格,初始化得到的数据就放入刚刚声明的全局变量(tabStudent)里面

四、在然后就是写初始化表格里面的参数:

将表格的ID放入elem(指定原始table容器的选择器或DOM,方法渲染方式必填)里面

查询方法的路径(url: 异步数据接口相关参数,url参数为必填项)

设置表头(cols) 将表格的结构放入

例:

需要写一个方法来设置最后一列来返回设置在最后一列所设置的 *** 作按钮,比如当我们要在 *** 作那行设置一个修改和删除的按钮的时候:

Onclick是点击事件

4 设置表格每页的行数:page(开启分页):{

limit:n (指定每页显示的条数)

limits: [ 5,10,20,n] (每页条数的选择项)}

5 当你需要表格的一些“列显示隐藏” “打印” 或者 “导出” 功能的时候你就必须设置开启表格的工具栏

参数toolbar的作用便是开启表格头部工具栏区域,该参数支持4种类型值:

 toolbar: ’#toolbarDemo(注:该代码取的是自定义好的模板的ID 该模板可以放在页面的任意位置)’ 指定自定义工具栏模板选择器

 toolbar: ’xxx’ 直接传入工具栏模板字符

 toolbar: true 仅开启工具栏,不显示左侧模板

 toolbar: ‘default ’ 让工具栏左侧显示默认的内置模板

该参数的默认值为false

6 设置表格的图标:

defaultToolbar:可以自由配置头部工具右侧的图标,数组可以3种:

defaultToolbar :[‘filter’]:显示筛选图标

defaultToolbar [‘exports’]:显示导出图标

defaultToolbar [‘print’]:显示打印图标

这些值也可以根据排序的顺序来显示排版图标,如defaultToolbar:[‘filter’,’exports’,’print’

7 Table容器的默认宽度是跟随它的父元素铺满的,你也可以设定一个固定的值(width),当容器中的内容超出了该宽度时,会自动出现横向滚动条。甚至还可以设置表格的高(height)。

8 如果你点击一个切换分页时不知道它是否为加载状态,则你可以添加loading这个参数,它的作用就是是否显示加载条,默认值是为true,如果设置false则在切换分页时不会出现加载条(注:该参数只是适于url参数开启的方式)。

五、然后就是在控制器为表格添加数据,数据添加完成后将其方法名称放入url里面。

最近有个需求,实现前端页面一个数据表格可编辑,随原页面的表单提交json数据,然后后端回传显示。Layui原来也没怎么用过,记个笔记记录一下。

添加行的有个小bug,超过分页行数后,再添加会变成无数据。所以只好初始设置分页为50。

另外,搞了个隐藏的标签随表单一起提交:

从数据表格的缓存中获取表格内输入的值放入标签:

这个之前从table的缓存中提取得到提交的json串含有Layui数据表格的索引,回传Layuitable显示的时候不需要,需要去掉。所以后端用了个正则表达式去除。

为了满足layui数据表格的返回格式,封装了一下数据格式。

以上就是关于layUI分页处理--乐字节前端全部的内容,包括:layUI分页处理--乐字节前端、如何接收layui上传excel上传及php处理、layui文件上传 接口怎么写等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/sjk/10192312.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-06
下一篇 2023-05-06

发表评论

登录后才能评论

评论列表(0条)

保存