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 相关文章推荐
异步加载script的代码
Jan 12 Javascript
动态加载js、css等文件跨iframe实现
Feb 24 Javascript
jQuery中的jQuery()方法用法分析
Dec 27 Javascript
jquery实现公告翻滚效果
Feb 27 Javascript
jquery.map()方法的使用详解
Jul 09 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
关于单文件组件.vue的使用
Sep 20 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
使用 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
php的memcache类分享(memcache队列)
2014/03/26 PHP
使用PHP进行微信公众平台开发的示例
2015/08/21 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
javascript定义函数的方法
2010/12/06 Javascript
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
jQuery修改CSS伪元素属性的方法
2014/07/30 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
微信小程序 video详解及简单实例
2017/01/16 Javascript
9102年webpack4搭建vue项目的方法步骤
2019/02/20 Javascript
使用Vue-Awesome-Swiper实现旋转叠加轮播效果&amp;平移轮播效果
2019/08/16 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
Python实现各种排序算法的代码示例总结
2015/12/11 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
部署Django到阿里云服务器教程示例
2020/06/03 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
python openCV自制绘画板
2020/10/27 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
2020/12/29 Python
《神奇的克隆》教学反思
2014/04/10 职场文书
环卫工人节活动总结
2014/08/29 职场文书
学校师德师风自我剖析材料
2014/09/29 职场文书
英镑符号 £
2022/02/17 杂记
MySql重置root密码 --skip-grant-tables
2022/04/11 MySQL
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers