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 相关文章推荐
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
Google AJAX 搜索 API实现代码
Nov 17 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 Javascript
js常用的继承--组合式继承
Mar 06 Javascript
Bootstrap模态框(Modal)实现过渡效果
Mar 17 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 jQuery
简单实现js上传文件功能
Aug 21 Javascript
微信小程序实现刷脸登录
May 25 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
JS实现简单移动端鼠标拖拽
Jul 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
收集的PHP中与数组相关的函数
2007/03/22 PHP
php格式化金额函数分享
2015/02/02 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
Javascript 二维数组
2009/11/26 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
10分钟学会写Jquery插件实例教程
2014/09/06 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
js获取鼠标位置实例详解
2015/12/09 Javascript
JSONP和批量操作功能的实现方法
2016/08/21 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
python删除文件示例分享
2014/01/28 Python
Python利用pyHook实现监听用户鼠标与键盘事件
2014/08/21 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
解决Python使用列表副本的问题
2019/12/19 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
新加坡最早生产电动滑板车的制造商之一:FunsToTheFore
2020/09/08 全球购物
得到Class的三个过程是什么
2012/08/10 面试题
天网面试题
2013/04/07 面试题
大学生个人简历自我评价
2013/11/16 职场文书
饭店工作计划书
2014/01/10 职场文书
外贸专业求职信
2014/03/09 职场文书
机关干部个人对照检查材料思想汇报
2014/09/28 职场文书
安全员岗位职责范本
2015/04/11 职场文书
公司仓库管理制度
2015/08/04 职场文书
教师研修随笔感言
2015/11/18 职场文书
解除租赁合同协议书
2016/03/21 职场文书
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python