layui实现显示数据表格、搜索和修改功能示例


Posted in Javascript onJune 03, 2020

本文实例讲述了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框架的程序设计有所帮助。

Javascript 相关文章推荐
Prototype Hash对象 学习
Jul 19 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
javascript中Array数组的迭代方法实例分析
Feb 04 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
Nov 23 Javascript
javascript中new关键字详解
Dec 14 Javascript
关于vue.js弹窗组件的知识点总结
Sep 11 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
详解Eslint 配置及规则说明
Sep 10 Javascript
webpack@v4升级踩坑(小结)
Oct 08 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 Javascript
微信小程序文章详情功能完整实例
Jun 03 #Javascript
VueQuillEditor富文本上传图片(非base64)
Jun 03 #Javascript
微信小程序文章列表功能完整实例
Jun 03 #Javascript
Angular8 简单表单验证的实现示例
Jun 03 #Javascript
JS实现前端动态分页码代码实例
Jun 02 #Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 #Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
Jun 02 #jQuery
You might like
PHP使用者状态管理功能的应用
2006/10/09 PHP
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
div li的多行多列 无刷新分页示例代码
2013/10/16 PHP
php学习笔记之字符串常见操作总结
2019/07/16 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
javascript 程序库的比较(一)之DOM功能
2010/04/07 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
jquery清空表单数据示例分享
2014/02/13 Javascript
IE8下Jquery获取select选中的值post到后台报错问题
2014/07/02 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
Python实现的彩票机选器实例
2015/06/17 Python
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
深入理解Python3中的http.client模块
2017/03/29 Python
教你用 Python 实现微信跳一跳(Mac+iOS版)
2018/01/04 Python
python使用Tesseract库识别验证
2018/03/21 Python
python代码编写计算器小程序
2020/03/30 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
如何通过Python3和ssl实现加密通信功能
2020/05/09 Python
Python正则re模块使用步骤及原理解析
2020/08/18 Python
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
护士个人简历自荐信
2013/10/18 职场文书
大学生旅游业创业计划书
2014/01/29 职场文书
工程质量承诺书范文
2014/03/27 职场文书
文秘求职信范文
2014/04/10 职场文书
公开致歉信
2019/06/24 职场文书