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 相关文章推荐
js 分栏效果实现代码
Aug 29 Javascript
jquery ajax 局部无刷新更新数据的实现案例
Feb 08 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
Apr 20 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
js实现鼠标拖拽多选功能示例
Aug 01 Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 Javascript
JavaScript制作3D旋转相册
Aug 02 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
vue 实现element-ui中的加载中状态
Nov 11 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
PHP4实际应用经验篇(9)
2006/10/09 PHP
使用swoole扩展php websocket示例
2014/02/13 PHP
PHP中使用memcache存储session的三种配置方法
2014/04/05 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
jQuery 性能优化手册 推荐
2010/02/23 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
详解如何用VUE写一个多用模态框组件模版
2018/09/27 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
python使用内存zipfile对象在内存中打包文件示例
2014/04/30 Python
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
Python BeautifulSoup [解决方法] TypeError: list indices must be integers or slices, not str
2019/08/07 Python
python如何保证输入键入数字的方法
2019/08/23 Python
python3正则模块re的使用方法详解
2020/02/11 Python
基于pytorch中的Sequential用法说明
2020/06/24 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
python中类与对象之间的关系详解
2020/12/16 Python
Lacoste澳大利亚官网:服装、鞋类及配饰
2018/11/14 全球购物
美国购买体育赛事门票网站:TicketCity
2019/03/06 全球购物
季度思想汇报
2014/01/01 职场文书
司法建议书范文
2014/05/13 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
项目工作说明书
2014/07/29 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
社区节水倡议书
2015/04/29 职场文书
2015年学校禁毒工作总结
2015/05/27 职场文书
在Python中如何使用yield
2021/06/07 Python
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python