layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例


Posted in Javascript onOctober 26, 2019

数据是用ThinkPHP5操作

layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例

类型是固定4个,

用layui templet - 自定义模板 方法一:

{field:'type', title: '类型', width: 200, templet: '#titleTpl'}

 <script type="text/html" id="titleTpl">
 if({{d.type}}=='2'){机构}else if({{d.type}}=='3'){财务}
</script>

其它方法二:(ThinkPHP5读数据)

//分类显示中文名称
 $("[data-field='type']").children().each(function(){
  if($(this).text()=='1'){
  $(this).text("教务")
  }else if($(this).text()=='2'){
  $(this).text("机构")
  }else if($(this).text()=='3'){
  $(this).text("财务")
  }else if($(this).text()=='4'){
  $(this).text("业务")
  }
 })

layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例

代码:

<script>
layui.use(['laypage', 'table', 'element', 'layer'], function () {
var table = layui.table;
layer = layui.layer;
laypage = layui.laypage;
element = layui.element;
 
//执行渲染
table.render({
 elem: '#demo' //指定原始表格元素选择器(推荐id选择器)
 ,url: '{:url('main/usertable')}'
 ,page: true
 ,id: 'idTest'
 ,limits: [10,20,30,60,90,150,300]
 ,limit: 10 //默认采用60
 ,height: 471 //容器高度
 ,cols: [[ //标题栏
 {checkbox: true}
 ,{field:'type', title: '类型',width:100}
 ,{field:'username', title: '用户名',width:150}
 ,{field:'nickname',title: '真实姓名', width:90}
 ,{field:'tel',title: '电话', width:120}
 ,{field:'wx',title: '微信', width:120}
 ,{field:'qq',title: 'QQ', width:120}
 ,{field:'email',title: '邮箱', width:120}
 ,{field:'add',title: '地址', width:120}
 ,{field: 'right', title: '操作',width:160, align:'center', toolbar: '#barDemo'}
 ]]
 ,initSort: {
 field: 'id' //排序字段,对应 cols 设定的各字段名
 ,type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默认排序
  }
 ,request: {
 pageName: 'page' //页码的参数名称,默认:page
  ,limitName: 'limit' //每页数据量的参数名,默认:limit
  }  
 ,done: function(res, page, count){
 //如果是异步请求数据方式,res即为你接口返回的信息。
 //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度
 
 //分类显示中文名称
 $("[data-field='type']").children().each(function(){
  if($(this).text()=='1'){
  $(this).text("教务")
  }else if($(this).text()=='2'){
  $(this).text("机构")
  }else if($(this).text()=='3'){
  $(this).text("财务")
  }else if($(this).text()=='4'){
  $(this).text("业务")
  }
 })
 
 console.log(res);
 
 //得到当前页码
 console.log(page); 
 //console.log(limit); 
 //得到数据总量
 console.log(count);
 }  
});
 
 //监听表格复选框选择
 table.on('checkbox(demo)', function(obj){
 console.log(obj)
 });
 //监听工具条
 table.on('tool(demo)', function(obj){
 var data = obj.data;
 if(obj.event === 'detail'){
  layer.msg('ID:'+ data.id + ' ,姓名:'+ data.nickname );
 } else if(obj.event === 'del'){
 layer.confirm('真的删除行么', function(index){
  obj.del();
  id= data.id;
  datatablename="manage";
  layer.close(index);
  $.ajax({
  url:'{:url('main/del')}',
  type:"post",
  data:{id:id,datatablename:datatablename},
  async:true,
  success:function(data){
    if(data[0]==1){
    layer.msg('成功!');
   table.reload('idTest');//重新加载表格数据
   }else{
   layer.msg('失败!'+data[1]); 
   }
  },
  error:function(){
   layer.msg('页面跳转失败!');
  }
  });
  });
 } else if(obj.event === 'edit'){
 //修改
  //layer.alert(JSON.stringify(data.id))
 layer.ready(function(){ 
  layer.open({
  type: 2,
  title: '修改',
  maxmin: true,
  area: ['750px', '600px'],
  content: '{:url('main/edituser')}?id='+data.id,
  cancel: function(){ //刷新网页
  table.reload('idTest');//重新加载表格数据
  }
  });
 });
 }
 });
 
 var $ = layui.$, active = {
 
 delAll: function(){ //批量删除
  var checkStatus = table.checkStatus('idTest')
 var dataall='';
 data = checkStatus.data;
 //循环把所有要删除的ID整成12,13,545
 for(var i=0;i<checkStatus.data.length;i++){
 dataall += data[i].id+",";
 }
 dataall=dataall.substring(0,dataall.length-1)
 //layer.alert(dataall);
 layer.confirm('真的删除行么', function(index){
  //obj.del();
  //id= data.id;
  datatablename="manage";
  layer.close(index);
  $.ajax({
  url:'{:url('main/del')}',
  type:"post",
  data:{id:dataall,datatablename:datatablename},
  async:true,
  success:function(data){
    if(data[0]==1){
    layer.msg('成功!');
          table.reload('idTest');//重新加载表格数据
   }else{
   layer.msg('失败!'+data[1]); 
   }
  },
  error:function(){
   layer.msg('页面跳转失败!');
  }
  });
  });
  
 }
 ,getCheckLength: function(){ //获取选中数目
  var checkStatus = table.checkStatus('idTest')
  ,data = checkStatus.data;
  layer.msg('选中了:'+ data.length + ' 个');
 }
 ,isAll: function(){ //验证是否全选
  var checkStatus = table.checkStatus('idTest');
  layer.msg(checkStatus.isAll ? '全选': '未全选')
 },
 //搜索
 reload: function(){
 var demoReload = $('#input-search').val();
 table.reload('idTest', {
 where: {
  sotype: $("#searchtype").val()
 ,type: $('#searchselect').val()
 ,key: $('#input-search').val()
 }
 });
 }
 };
 
 $('.demoTable .layui-btn').on('click', function(){
 var type = $(this).data('type');
 active[type] ? active[type].call(this) : '';
 });
 
});
</script>

以上这篇layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript的键盘控制事件说明
Apr 15 Javascript
JavaScript格式化日期时间的方法和自定义格式化函数示例
Apr 04 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
node学习记录之搭建web服务器教程
Feb 16 Javascript
js实现添加删除表格(两种方法)
Apr 27 Javascript
JavaScript使用readAsDataURL读取图像文件
May 10 Javascript
Angular实现双向折叠列表组件的示例代码
Nov 21 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
解决layui数据表格table的横向滚动条显示问题
Sep 04 Javascript
HTML元素拖拽功能实现的完整实例
Dec 04 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
Oct 25 #Javascript
js前端如何写一个精确的倒计时代码
Oct 25 #Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 #Javascript
layui实现数据表格隐藏列的示例
Oct 25 #Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 #Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 #Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 #Javascript
You might like
DIY实用性框形天线
2021/03/02 无线电
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
PHP写UltraEdit插件脚本实现方法
2011/12/26 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
PHP扩展程序实现守护进程
2015/04/16 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
php封装的数据库函数与用法示例【参考thinkPHP】
2016/11/08 PHP
php异常处理捕获错误整理
2019/09/23 PHP
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
2011/05/23 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
基于jQuery实现音乐播放试听列表
2016/04/14 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
2017/03/23 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
JS实现继承的几种常用方式示例
2019/06/22 Javascript
ES5新增数组的实现方法
2020/05/12 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
Python获取单个程序CPU使用情况趋势图
2015/03/10 Python
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
一步步教你用Python实现2048小游戏
2017/01/19 Python
python中的单引号双引号区别知识点总结
2019/06/23 Python
Python操控mysql批量插入数据的实现方法
2020/10/27 Python
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
物流管理专业大学生自荐信
2013/10/04 职场文书
一年级班主任寄语
2014/01/19 职场文书
高中生自我评语大全
2014/01/19 职场文书
微信小程序实现拍照和相册选取图片
2021/05/09 Javascript