本文实例讲述了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] "htmlcode">{ "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框架的程序设计有所帮助。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年09月21日
2024年09月21日
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- 任天堂今晚举行直面会!第三方及独立游戏展示
- 《哆啦A梦的铜锣烧店物语》发售!开罗公式+哆啦A梦
- 任天堂公布《塞尔达传说》系列时间线:野炊与王泪独立在外
- 五条人.2012-一些风景2CD【刀马旦】【WAV+CUE】
- 陈奕迅.2013-Easons.Life演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 许美静.1995-遗憾(新马版)【上华】【WAV+CUE】
- 《叶倩文 歌声情缘》[WAV+CUE][410MB]
- 《张国荣 首首动听经典不容错过 追忆的风 2CD》[WAV+CUE][870MB]
- 《腾格尔 容中尔甲 亚东 高原三星 男人篇 3CD》[WAV/分轨][1GB]
- 命运圣契公测实测可用兑换码大全 命运圣契最新兑换码分享
- 黑神话悟空上品疾蝠精魄获取方法一览|上品疾蝠精魄收集攻略
- 《七龙珠电光炸裂!ZERO》GT角色预告片曝光,15位新角色登场
- [ABC]安娜-胆麦发烧女声[6N纯银镀膜][2016[低速原抓WAV+CUE]
- NewViennaOctetViennaWindSoloists-TheDeccaRecordings(2024)18CD[24-48][FLAC]-7