layui 數(shù)據(jù)表格 根據(jù)值(1=業(yè)務(wù),2=機(jī)構(gòu))顯示中文名稱示例
數(shù)據(jù)是用ThinkPHP5操作

類型是固定4個(gè),
用layui templet - 自定義模板 方法一:
{field:'type', title: '類型', width: 200, templet: '#titleTpl'}
<script type="text/html" id="titleTpl">
if({{d.type}}=='2'){機(jī)構(gòu)}else if({{d.type}}=='3'){財(cái)務(wù)}
</script>
其它方法二:(ThinkPHP5讀數(shù)據(jù))
//分類顯示中文名稱
$("[data-field='type']").children().each(function(){
if($(this).text()=='1'){
$(this).text("教務(wù)")
}else if($(this).text()=='2'){
$(this).text("機(jī)構(gòu)")
}else if($(this).text()=='3'){
$(this).text("財(cái)務(wù)")
}else if($(this).text()=='4'){
$(this).text("業(yè)務(wù)")
}
})

代碼:
<script>
layui.use(['laypage', 'table', 'element', 'layer'], function () {
var table = layui.table;
layer = layui.layer;
laypage = layui.laypage;
element = layui.element;
//執(zhí)行渲染
table.render({
elem: '#demo' //指定原始表格元素選擇器(推薦id選擇器)
,url: '{:url('main/usertable')}'
,page: true
,id: 'idTest'
,limits: [10,20,30,60,90,150,300]
,limit: 10 //默認(rèn)采用60
,height: 471 //容器高度
,cols: [[ //標(biāo)題欄
{checkbox: true}
,{field:'type', title: '類型',width:100}
,{field:'username', title: '用戶名',width:150}
,{field:'nickname',title: '真實(shí)姓名', 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' //排序字段,對(duì)應(yīng) cols 設(shè)定的各字段名
,type: 'desc' //排序方式 asc: 升序、desc: 降序、null: 默認(rèn)排序
}
,request: {
pageName: 'page' //頁碼的參數(shù)名稱,默認(rèn):page
,limitName: 'limit' //每頁數(shù)據(jù)量的參數(shù)名,默認(rèn):limit
}
,done: function(res, page, count){
//如果是異步請(qǐng)求數(shù)據(jù)方式,res即為你接口返回的信息。
//如果是直接賦值的方式,res即為:{data: [], count: 99} data為當(dāng)前頁數(shù)據(jù)、count為數(shù)據(jù)總長度
//分類顯示中文名稱
$("[data-field='type']").children().each(function(){
if($(this).text()=='1'){
$(this).text("教務(wù)")
}else if($(this).text()=='2'){
$(this).text("機(jī)構(gòu)")
}else if($(this).text()=='3'){
$(this).text("財(cái)務(wù)")
}else if($(this).text()=='4'){
$(this).text("業(yè)務(wù)")
}
})
console.log(res);
//得到當(dāng)前頁碼
console.log(page);
//console.log(limit);
//得到數(shù)據(jù)總量
console.log(count);
}
});
//監(jiān)聽表格復(fù)選框選擇
table.on('checkbox(demo)', function(obj){
console.log(obj)
});
//監(jiān)聽工具條
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');//重新加載表格數(shù)據(jù)
}else{
layer.msg('失??!'+data[1]);
}
},
error:function(){
layer.msg('頁面跳轉(zhuǎn)失敗!');
}
});
});
} 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(){ //刷新網(wǎng)頁
table.reload('idTest');//重新加載表格數(shù)據(jù)
}
});
});
}
});
var $ = layui.$, active = {
delAll: function(){ //批量刪除
var checkStatus = table.checkStatus('idTest')
var dataall='';
data = checkStatus.data;
//循環(huán)把所有要?jiǎng)h除的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');//重新加載表格數(shù)據(jù)
}else{
layer.msg('失?。?+data[1]);
}
},
error:function(){
layer.msg('頁面跳轉(zhuǎn)失?。?);
}
});
});
}
,getCheckLength: function(){ //獲取選中數(shù)目
var checkStatus = table.checkStatus('idTest')
,data = checkStatus.data;
layer.msg('選中了:'+ data.length + ' 個(gè)');
}
,isAll: function(){ //驗(yàn)證是否全選
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 數(shù)據(jù)表格 根據(jù)值(1=業(yè)務(wù),2=機(jī)構(gòu))顯示中文名稱示例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
DVA框架統(tǒng)一處理所有頁面的loading狀態(tài)
dva 有一個(gè)管理 effects 執(zhí)行的 hook,并基于此封裝了 dva-loading 插件。下面通過本文給大家分享DVA框架統(tǒng)一處理所有頁面的loading狀態(tài),感興趣的朋友一起看看吧2017-08-08
JS實(shí)現(xiàn)的拋物線運(yùn)動(dòng)效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的拋物線運(yùn)動(dòng)效果,結(jié)合實(shí)例形式分析了javascript拋物線運(yùn)動(dòng)的相關(guān)運(yùn)算與元素動(dòng)態(tài)操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-01-01
詳解使用Nuxt.js快速搭建服務(wù)端渲染(SSR)應(yīng)用
這篇文章主要介紹了詳解使用Nuxt.js快速搭建服務(wù)端渲染(SSR)應(yīng)用,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
Javascript實(shí)現(xiàn)拖拽排序的代碼
這篇文章主要介紹了Javascript實(shí)現(xiàn)拖拽排序的代碼,本文在vue運(yùn)行環(huán)境下給大家演示下效果圖,對(duì)js拖拽排序?qū)嵗a感興趣的朋友跟隨小編一起看看吧2022-09-09
學(xué)習(xí)JavaScript設(shè)計(jì)模式(封裝)
這篇文章主要帶領(lǐng)大家學(xué)習(xí)JavaScript設(shè)計(jì)模式,其中重點(diǎn)介紹封裝,舉例說明封裝的思想,對(duì)封裝進(jìn)行詳細(xì)剖析,感興趣的小伙伴們可以參考一下2015-11-11

