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 相关文章推荐
学习ExtJS table布局
Oct 08 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 Javascript
两种不同的方法实现js对checkbox进行全选和反选
May 13 Javascript
jquery实现兼容IE8的异步上传文件
Jun 15 Javascript
JS实现弹性菜单效果代码
Sep 07 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
Jun 13 Javascript
vue一步步实现alert功能
Jul 05 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
JS+CSS实现随机点名(实例代码)
Nov 04 Javascript
利用js实现简单开关灯代码
Nov 23 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
2020显卡排行榜天梯图 显卡天梯图2020年3月最新版
2020/04/02 数码科技
php获取通过http协议post提交过来xml数据及解析xml
2012/12/16 PHP
PHP字符串的编码问题的详细介绍
2013/04/27 PHP
thinkphp实现like模糊查询实例
2014/10/29 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
python类和继承用法实例
2015/07/07 Python
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
三个python爬虫项目实例代码
2019/12/28 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
使用Django清空数据库并重新生成
2020/04/03 Python
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
Python面试题集
2012/03/08 面试题
毕业生求职推荐信
2013/11/04 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
人力资源主管的岗位职责
2014/03/15 职场文书
儿童生日会策划方案
2014/05/15 职场文书
车辆工程专业求职信
2014/06/14 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
SQLServer中exists和except用法介绍
2021/12/04 SQL Server
Win11查看设备管理器
2022/04/19 数码科技