数据是用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')}",";
}
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 "#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=机构)显示中文名称示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
标签:
layui,中文名称,数据,表格
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例”评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新动态
2025年10月25日
2025年10月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]

