用代码分析layui如何实现显示数据表格、搜索和修改功能

发布时间:2020-07-18 16:32:46 作者:小猪
来源:亿速云 阅读:448

小编这次要用代码分析layui如何实现显示数据表格、搜索和修改功能,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。

本文实例讲述了layui实现显示数据表格、搜索和修改功能。分享给大家供大家参考,具体如下:

<div  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] &#63; 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如何实现显示数据表格、搜索和修改功能的文章,如果觉得文章内容写得不错的话,可以把它分享出去给更多人看到。

推荐阅读:
  1. Layui实现数据表格默认全部显示(不要分页)
  2. layui的数据表格+springmvc如何实现搜索功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

layui

上一篇:C#学习追根溯源之集合方法集

下一篇:分布式系统介绍及MogileFS安装、基本配置

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》