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 相关文章推荐
JQuery的Validation插件中Remote验证的中文问题
Jul 26 Javascript
关于JavaScript定义类和对象的几种方式
Nov 09 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
Apr 10 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
DOM操作一些常用的属性汇总
Mar 13 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
使用JavaScript触发过渡效果的方法
Jan 19 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
微信小程序实现蓝牙打印
Sep 23 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
无限级别菜单的实现
2006/10/09 PHP
用PHP实现多级树型菜单
2006/10/09 PHP
PHP 彩色文字实现代码
2009/06/29 PHP
如何用php生成扭曲及旋转的验证码图片
2013/06/07 PHP
php 伪静态之IIS篇
2014/06/02 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
HTML5附件拖拽上传drop &amp; google.gears实现代码
2011/04/28 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
JS中取二维数组中最大值的方法汇总
2016/04/17 Javascript
JavaScript中的Number数字类型学习笔记
2016/05/26 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
分析JS单线程异步io回调的特性
2017/12/01 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
Python中的高级数据结构详解
2015/03/27 Python
python动态加载包的方法小结
2016/04/18 Python
Python简单获取自身外网IP的方法
2016/09/18 Python
python3 图片referer防盗链的实现方法
2018/03/12 Python
python针对excel的操作技巧
2018/03/13 Python
django的autoreload机制实现
2020/06/03 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
python 爬虫如何实现百度翻译
2020/11/16 Python
学校岗位设置方案
2014/01/16 职场文书
数学教学随笔感言
2014/02/17 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
班主任对学生的评语
2014/04/26 职场文书
10的分与合教学反思
2014/04/30 职场文书
2014年党支部承诺书
2014/05/30 职场文书
留守儿童工作方案
2014/06/02 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书
护士岗位竞聘书
2015/09/15 职场文书
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis