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 相关文章推荐
Mozilla 表达式 __noSuchMethod__
Apr 05 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
Nov 30 Javascript
JS文本框默认值处理详解
Jul 10 Javascript
js解决select下拉选不中问题
Oct 14 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
jQuery Easyui Tabs扩展根据自定义属性打开页签
Aug 15 Javascript
微信小程序 label 组件详解及简单实例
Jan 10 Javascript
highcharts 在angular中的使用示例代码
Sep 20 Javascript
jQuery md5加密插件jQuery.md5.js用法示例
Aug 24 jQuery
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 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 5.0对象模型深度探索之对象复制
2008/03/27 PHP
PHP三层结构(上) 简单三层结构
2010/07/04 PHP
那些年一起学习的PHP(三)
2012/03/22 PHP
linux下编译安装memcached服务
2014/08/03 PHP
深入理解PHP内核(二)之SAPI探究
2015/11/10 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
PHP数据库操作四:mongodb用法分析
2017/08/16 PHP
PHP学习笔记之session
2018/05/06 PHP
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
JavaScript Timer实现代码
2010/02/17 Javascript
javascript与CSS复习(三)
2010/06/29 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
JQuery实现DIV其他动画效果的简单实例
2016/09/18 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
2018/03/10 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
python实践项目之监控当前联网状态详情
2019/05/23 Python
python如何从文件读取数据及解析
2019/09/19 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
拉夫劳伦爱尔兰官方网站:Ralph Lauren爱尔兰
2020/04/10 全球购物
法学求职信
2014/06/22 职场文书
项目申请汇报材料
2014/08/16 职场文书
公司股东合作协议书
2014/09/14 职场文书
办护照工作证明
2014/10/01 职场文书
个人作风建设总结
2014/10/23 职场文书
党员个人总结自评
2015/02/14 职场文书
学生会招新宣传语
2015/07/13 职场文书
2016教师暑期培训学习心得体会
2016/01/09 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书
MySQL创建定时任务
2022/01/22 MySQL