layui数据表格.docx资源-CSDN文库

需积分: 3 179 浏览量 2019-09-25 19:18:48 上传评论收藏 147KB DOCX 举报

《使用Layui和EasyUI实现数据表格的操作》在互联网和计算机领域，前端界面的构建至关重要，其中数据展示和操作是核心部分。Layui和EasyUI是两个流行的JavaScript框架，它们提供了丰富的组件和便利的功能，使得网页的开发变得更加高效。本文将详细讲解如何利用这两个框架实现数据表格的操作。 Layui是一款轻量级的前端框架，它包含了诸如表格、按钮、弹窗等常用组件，易于学习和使用。在HTML页面中，我们需要引入Layui的CSS和JS文件，例如在<head>标签中添加以下代码： ```html <link rel="stylesheet" href="layui/css/layui.css" media="all"> <script src="layui/layui.js"></script> ``` 接着，我们可以创建一个隐藏的表格，用于Layui的表格组件渲染数据。例如： ```html <table class="layui-hide" id="demo" lay-filter="test"></table> ``` EasyUI则是一个基于jQuery的UI框架，它提供了一系列的组件，如对话框、表格、下拉列表等。在本例中，我们看到年龄选择使用了<select>标签，这是一个典型的EasyUI组件： ```html 年龄：<select><option>14</option><option>22</option><option>23</option><option>24</option></select> ``` Layui的表格组件可以通过`layui.use`加载模块并执行相关功能。在JavaScript部分，我们需要配置表格的参数，如数据接口、列定义、分页等： ```javascript layui.use(['table'], function(){ var table = layui.table; table.render({ elem: '#demo' ,url: 'servlet/Stuservlet?op=goodsList' //数据接口 ,cols: [[ //表头 {type: 'checkbox', fixed: 'left'} ,{field: 'stu_no', title: '学号', width:80, fixed: 'left'} ,{field: 'stu_name', title: '姓名', width:80} // ... ]] // 其他配置... }); }); ``` 此外，Layui还支持自定义操作栏，通过`<script type="text/html" id="barDemo">`定义模板，然后在表格配置中引用： ```html <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="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> ``` 这样，当用户点击表格中的按钮时，可以触发相应的事件处理函数，进行查看、编辑或删除操作。通过Layui和EasyUI的结合使用，我们可以轻松构建出具备数据查询、展示、操作等功能的表格。这种组合既满足了界面美观的需求，又保证了开发的效率，是现代Web应用开发中的常见实践。在实际项目中，开发者可以根据具体需求，灵活调整和扩展这些组件，以实现更加复杂的功能。

资源推荐

资源详情

资源评论

 数据页面布局：





!"#$%&'"()*

! +$'"    #$!"(),-..,#$!/()

,-,#$!'(),",.*



012%34'"

"

"

"$

    5  5"5"6  $$+6  $786

&$786$78

  数据操作.

9$$"":.$$.$$

$$$.#$ .$

$

+;-78&*<

$;""-=88&*""->88&*&-*<

.$

."

+



+$$"?$ .+

姓名：&&

年龄：$

 7=.

 >>.

 >@.

 >=.

.$



$&."+1

$$+++&$ 查看.

$$++&$ 编辑.

$$+++&$ 删除.

.$

$$.$ .$

$

?(;

$-A7BC8DCB@CC7CA..为了更新 $缓存，可忽略

<)*



$(EAA6AA6AA6A+A6A$A6AA6AA6A$AF6:();

..日期

6..分页

6..弹层

6++..表格

..执行一个 +实例

+(;

-AGA

6""-B>8

6-A$.!$H$$A..数据接口

6-A学生信息表A

6-..开启分页

6+-A:A..开启工具栏，此处显示默认图标，可以自定义模板，详见文档

6I5-:$..开启合计行

6$-EE..表头

;-A"9+&A6?&-AJA<

6;?-A$KA6-A学号A65"-86?&-AJA<

6;?-A$KA6-A姓名A65"-8<

6;?-A$K$&A6-A性别A65"-8<

6;?-A$KA6-A年龄A65"-8<

6;?-A$K+"A6-A出生日期A65"-7>8<

6;?&-A"A65"-7CB6-AA6+-AG+1A<

FF



<)*



..监听头工具栏事件

+(A+($)A6:(+);

"9!$+"9!$(+?)

6"9!$*..获取选中的数据

$5"(+);

$AA-

&(;

->6

-A编辑学生信息A6 

-EAB88&A6A@C8&AF6

$"-86

$L-76

$"%$-6

-A$.!$H$M:N$K8A6

$$$-:();



<6

+-EA提交A6A关闭A6A重置AF6

$-:(&6);

$O()?(A:A)E8FP5:1()*

O&(;

-A$A6

-A$.!$H$A6

-$6

3-A&A6

$$$-:($);

O(A+A)9()*

($)*

$(&)*

< 

<)* 

<6

+>-:();



<6

+@-:();

<6

 

<)*

+9*

$AA-

:("8);

$(A请选择一行A)*

<$:(" 7);

$(A只能同时编辑一个A)*

<$;

.(A编辑 EF：A,"9!$E8F)*.

&(;

->6

-A编辑学生信息A6 

-EAB88&A6A@C8&AF6

$"-86

$L-76

$"%$-6

  -  A$.!$H

$M:N$KA,"9!$E8F$K6

$$$-:();



<6

+-EA提交A6A关闭A6A重置AF6

$-:(&6);

$O()?(A:A)E8FP5:1()*

O&(;

-A$A6

-A$.!$H$A6

-$6

3-A&A6

$$$-:($);

O(A+A)9()*

($)*

$(&)*

< 

<)* 

<6

+>-:();



<6

+@-:();

<6

 

<)*

<

+9*

$AA-

:("8);

$(A请选择一行A)*

<$;

O&(;

-A$A6

-A$.!$H!N$KA,"9!$E8F$K6

3-A&A6

$$$-:($);

O(+)9()*

($)*

$(&)*

< 

<)*

<

+9*

<*

<)*



..监听行工具事件

+(A($)A6:(+);..注：是工具条事件名，$是 +原始容器的属

性 ?对应的值

+..获得当前行数据

6+*..获得 对应的值

:(AA);

$(A查看操作A)*

(;

->6

-A查看学生信息A6 

-EAC@8&A6A@C8&AF6

$"-86

$L-76

$"%$-6

-A$.!$H$$M:N$KA,$K

<)*

<$:(AA);

?(A真的删除行么A6:(&);

+()*..删除对应行（）的 12Q 结构

$(&)*

..向服务端发送删除指令

O&(;

-A$A6

-A$.!$H!N$KA,$K6

3-A&A6

$$$-:($);

O(A+A)9()*

($)*

$(&)*

< 

<)*

<)*

<$:(AA);

$(A编辑操作A)*

&(;

->6

-A编辑学生信息A6 

-EA=88&A6A@88&AF6

$"-86

$L-76

$"%$-6

-A$.!$H$M:N$KA,$K6

$$$-:();



<6

+-EA提交A6A关闭A6A重置AF6

$-:(&6);

$O()?(A:A)E8FP5:1()*

O&(;

剩余40页未读，继续阅读

评论收藏

内容反馈

素慔636

粉丝: 1
资源: 27

layui数据表格.docx

【高级工程师面试题】Java高级工程师简历表格.docx

“互联网”大学生创新创业大赛创意组项目标准表格.docx

基于Hive的淘宝用户行为数据分析.docx

Layui数据表格 前后端json数据接收的方法.docx

生产安全事故数据表格.docx

数据挖掘技术与应用：提取时间序列数据信息.docx

百度竞价数据分析必知5大核心数据指标.docx

Layui开发手册.docx

数据治理那些事(10)-元数据5.docx

数据治理那些事(11)-主数据1.docx

7-数据营销推广.docx

数据结构模拟试卷.docx

2020年IEC17025 数据控制和信息管理程序表格汇编.docx

网络安全技术实验报告实验10数据库及数据安全.docx

案例综述：360度图文剖析西门子北京数据中心.docx

数据库课程设计酒店管理系统(客户信息)数据字典.docx

运维常用表格.docx

网络安全等级保护.-通用要求-表格版.docx

毕业设计表格.docx

KepOPC DA2UA实现从OPCDA到OPCUA的转换及读写互操作

各地区-互联网主要发展指标情况（2001-2022年）.xlsx

开题报告大学社团管理系统 已通过开题答辩的.doc

kkFileView-4.4.0-SNAPSHOT.tar.gz

2024年Java基础面试题，附带详细解析答案

腾讯QQ秀立项调研PPT

5G介绍PPT.pptx

神州鲲泰 KunTai R522用户指南

海盗派测试分析.pdf

2024年最新最全面的Java后端面试资料

最新资源

Layui数据表格前后端json数据接收的方法.docx

开题报告大学社团管理系统已通过开题答辩的.doc