layui实现显示数据表格、搜索和修改功能示例
作者:huangyuxin_ 发布时间:2024-04-18 10:01:46
标签:layui,显示数据表格,搜索
本文实例讲述了layui实现显示数据表格、搜索和修改功能。分享给大家供大家参考,具体如下:
<div style="text-align: center" id='btn'>
<div class="layui-inline">
<input class="layui-input" name="keyword" id="demoReload" autocomplete="off">
</div>
<button class="layui-btn" data-type="reload">搜索</button>
</div>
<table class="layui-hide" id="test"></table>
<script>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'/getdata.php'
,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
,page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
//,curr: 5 //设定初始在第 5 页
,groups: 1 //只显示 1 个连续页码
,first: false //不显示首页
,last: false //不显示尾页
}
,cols: [[
{field:'id', width:80, title: 'ID', sort: true}
,{field:'columnname', width:80, title: '字段名'}
,{field:'descriptionCN', width:80, title: '中文描述', sort: true}
,{field:'name', width:80, title: '名称'}
,{field:'description_table', title: '表描述', width: '30%', minWidth: 100} //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
,{field:'description', title: '字段类型', sort: true}
,{field:'primaryKey', title: '主键', sort: true}
,{field:'class', width:137, title: '分类', sort: true}
]]
});
var $ = layui.$, active = {
reload: function(){
var demoReload = $('#demoReload');
//执行重载
table.reload('test', {
page: {
curr: 1 //重新从第 1 页开始
}
,where: {
keyword: demoReload.val()
}
});
}
};
$('#btn .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
});
</script>
引用样式和js,这是必须的。
后台返回数据格式
{
"code": 0,
"msg": "",
"count": 4,
"data:{}
}
数据表格单元格数据修改
<script>
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url:'/classdata.php'
,cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增
,page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
//,curr: 5 //设定初始在第 5 页
,groups: 1 //只显示 1 个连续页码
,first: false //不显示首页
,last: false //不显示尾页
}
,cols: [[
{field:'id', width:80, title: 'ID', sort: true}
,{field:'columnname', width:80, title: '字段名'}
,{field:'descriptionCN', width:80, title: '中文描述', sort: true}
,{field:'name', width:80, title: '名称'}
,{field:'description_table', title: '表描述', minWidth: 100} //minWidth:局部定义当前单元格的最小宽度,layui 2.2.1 新增
,{field:'description', title: '字段类型'}
,{field:'primaryKey', title: '主键'}
,{field:'class', title: '分类'}
,{field:'checkclass', title: '用户标注','edit':'text'}
,{field:'reason', title: '标注理由','edit':'text'}
]]
});
//监听单元格编辑
table.on('edit(test)', function(obj){
var value = obj.value //得到修改后的值
,data = obj.data //得到所在行所有键值
,field = obj.field; //得到字段
if(value){
$.post('doclass.php',{'id':data.id,'field':field,'value':value},function(data){
console.log(data)
data = $.parseJSON(data);
if(data.status == 1){
layer.msg('修改成功,请等待管理员的审核');
location.href=location.href;
}else{
layer.msg(data.msg);
}
})
}
});
});
</script>
在表格初始化的时候加上 'edit':'text' 就可以编辑
然后再添加一个监听的单元格事件
希望本文所述对大家基于layui框架的程序设计有所帮助。
来源:https://blog.csdn.net/huangyuxin_/article/details/90714665
0
投稿
猜你喜欢
- Linux系统下调用动态库(.so) 1、linuxany.c代码如下: #include "stdio.h"
- FastApi快速构建一个web项目已经使用FastApi很久了。这个一个非常优秀的框架。和flask一样能够快速构建一个web服务。开发效
- 由于最近需要做项目,需要进行分词等,查了资料之后,发现python NLTK很强大,于是就想试试看。在网上找了很多安装资料,都不太完整,下载
- collections是Python内建的一个集合模块,提供了许多有用的集合类。这里举几个例子:namedtuple我们知道tuple可以表
- 前言Pandas是为一次性处理整个行或列的矢量化操作而设计的,循环遍历每个单元格、行或列并不是它的设计用途。所以,在使用Pandas时,你应
- 简单介绍正则表达式并不是Python的一部分。正则表达式是用于处理字符串的强大工具,拥有自己独特的语法以及一个独立的处理引擎,效率上可能不如
- 一、关于m3u8:m3u8是苹果公司推出一种视频播放标准,是m3u的一种,不过编码方式是utf-8,是一种文件检索格式,将视频切割成一小段一
- 一、插补查找算法插补查找算法又称为插值查找,它是折半查找算法的改进版。插补查找是按照数据的分布,利用公式预测键值所在的位置,快速缩小键值所在
- 装饰器(Decorators)是 Python 的一个重要部分。简单地说:他们是修改其他函数的功能的函数。他们有助于让我们的代码更简短,也更
- virtualenv创建一个拥有自己安装目录的环境, 这个环境不与其他虚拟环境共享库, 能够方便的管理python版本和管理python库。
- DbUtils是Javar的一个为简化JDBC操作类库commons-dbutils是Apache组织提供的一个开源JDBC工具类库,它是对
- 代码'########### '检测远程文件是否存在 '########### function CheckURL(
- Python判断变量是否已经定义是一个非常重要的功能,本文就来简述这一功能的实现方法。其实Python中有很多方法可以实现判断一个变量是否已
- 本文实例讲述了symfony2.4的twig中date用法。分享给大家供大家参考,具体如下:获得当前时间:{{ "now"
- 本文实例讲述了mysql变量用法。分享给大家供大家参考,具体如下:本文内容:系统变量用户变量局部变量首发日期:2018-04-18系统变量:
- 使用matplotlib创建百分比堆积柱状图的思路与堆积柱状图类似,只不过bottom参数累计的不是数值而是百分比,因此,需要事先计算每组柱
- 今早开机发现,打开SQL Server 2008 的 SQL Server Management Studio,输入sa的密码发现,无法登陆
- 前言在任何编程语言中,代码需要根据不同的条件在给定的输入中做不同的决定和执行相应的动作。例如,在一个游戏中,如果玩家生命点为0,游戏结束。在
- 画星星程序2-7-7主要使用turtle.forward前进操作和turtle.left左转操作在屏幕上画星星。#!/usr/bin/env
- 将VS2017上配置OpenCV4.1.0的过程记录于此。准备工具:OpenCV:4.1.0IDE:VS2017安装环境:Win10 &nb