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

数据是用ThinkPHP5操作

类型是固定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("业务")
					}
			})

代码：

<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>