學習場景：
TP6+Layuiadmin+apache+mysql+vscode學習研究layui前端技術
問題描述
layui2.76版本，渲染的表格，因同一頁面不同用戶權限判斷，所需要有不同的表格列來支持時，目前無法滿足。
layui文檔中有hide:true這一方法。
單獨使用hide:true隱藏時是沒問題的，但是這是個初始化隱藏，無法進行判斷。
網上的方法都是使用done方法，表格渲染完成后的回調，根據條件判斷，修改表格列的display屬性進行隱藏。
代碼如下：（css和attr兩種方式都試過了）
, done: function (res) {
if (uid != 2) {
$("[data-field='dispaly']").css('display','none');
}
}
結果：要隱藏的列隱藏了，但是后面會有一個預留出來的空列，表格的最后有個整體空列。
layui官方說會在layui2.8的版本中，增加這個功能。
相關鏈接：table如何動態(tài)地隱藏/顯示某列？ · Issue #I5RUAJ · Layui/layui - Gitee.com
解決方案：
?在layui2.8正式版沒有出來之前，還是得要有解決方案的。
1.使用如下圖layui表格 02自動渲染和03靜態(tài)表格渲染。這里不介紹了。在table里直接做判斷就可以了。
渲染方法詳見layui文檔：table 數據表格文檔 - Layui
?2.如果必須用01的方法渲染方式，也就是table.render()方式。
自己琢磨了很久，發(fā)現table.render()中cols參數其實就是個大數組。
那我的方法就是把數組分開，進行權限判斷后再拼接在一起。
HTML部分（僅供學習參考）
<div class="layui-card-body">
<table id="LAY-app-article-list" lay-filter="LAY-app-article-list"></table>
<script type="text/html" id="table-content-list">
<div class="layui-btn-group">
{{# if(d.qs == 1){ }}
<a class="layui-btn layui-btn-xs" id="{{- d.id }}"><i class="layui-icon layui-icon-chart"></i>簽收情況</a>
{{# } }}
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>編輯</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>刪除</a>
</div>
</script>
<script type="text/html" id="switchSort">
<input type="checkbox" name="sort" value="{{d.sort}}" lay-skin="switch" lay-text=" 是 | 否 " lay-filter="switch_filter" {{ d.sort ==1 ? 'checked' : 0 }}>
</script>
<script type="text/html" id="switchDisplay">
{{# if(d.image == ''){ }}
<span style="color:#999;">無圖</span>
{{# }else{ }}
<input type="checkbox" name="display" value="{{d.display}}" lay-skin="switch" lay-text=" 顯 | 隱 " lay-filter="switch_filter" {{ d.display ==1 ? 'checked' : 0 }}>
{{# } }}
</script>
<script type="text/html" id="switchAudit">
<a class="layui-btn layui-btn-primary layui-btn-xs layui-border-green" lay-event="audit" id="{{- d.id }}">審核信息</a>
</script>
</div>layui的js部分（僅供學習參考）
<script>
layui.use(['admin', 'table', 'form'], function () {
var $ = layui.$
, admin = layui.admin
, setter = layui.setter
, view = layui.view
, table = layui.table
, layer = layui.layer
, form = layui.form;
let uid = layui.data(setter.tableName).uid;//獲取用戶ID值
var cols1 = [//將固定顯示列的數組賦值。
{ type: 'checkbox', fixed: 'left' }
, { field: 'id', width: 70, title: 'ID', align: 'center' }
, { field: 'title', title: '分類名稱' }
, { field: 'cat_name', title: '文章分類', width: 115, align: 'center', unresize: true }
, { field: 'user_name', title: '發(fā)布人', width: 78, align: 'center', unresize: true }
, { field: 'add_time', title: '發(fā)布日期', width: 110, align: 'center', unresize: true }
]
if (uid == 1) {//用戶ID判斷
var cols2 = [//將列的數組賦值。
{ field: 'dispaly', title: '幻燈顯隱', width: 92, align: 'center', templet:'#switchDisplay', unresize: true }
, { field: 'sort', title: '是否置頂', width: 88, align: 'center', templet:'#switchSort', unresize: true }
, { title: '審核信息', width: 90, align: 'center', templet:'#switchAudit', unresize: true }
]
} else {
var cols2 = [{//將列的數組賦值。
field: 'sh', title: '審核狀態(tài)', width: 87, align: 'center', templet: function (d) {
switch (d.sh) {
case 0:
return '<b style="color:#0351f0">待審核</b>';
break;
case 1:
return '<b style="color:#43ae02">已審核</b>';
break;
case 2:
return '<b style="color:#d70000">未通過</b>';
break;
}
}
}]
}
var cols3 = [//將最后操作列的數組賦值
{ title: '操作', width: 210, align: 'center', fixed: 'right', toolbar: '#table-content-list', unresize: true }
]
//拼接三個數組，使用的是concat
var sumarr = cols1.concat(cols2).concat(cols3);
//文章列表
table.render({
elem: '#LAY-app-article-list'
, url: '/ccadmins/Article/article_list_index' //接口
, cols: [sumarr] //將拼接好的數組給cols參數
, where: { uid: uid } //傳遞用戶ID值給后端
, page: true
, limit: 15
, limits: [10, 15, 20, 25, 30, 50, 100]
, text: {
none: '暫無相關數據'
}
});
form.render(null, 'app-article-content-list');
});
</script>thinkphp6部分（僅供學習參考）
<?php
namespace app\admins\controller;
use think\facade\Db;
use think\facade\Request;
class Article
{
//列表首頁
public function article_list_index(){
$data = Request::instance()->param();
$where = [];
$s = trim(Request::instance()->param('searcharticle.s'));
$cat_id = Request::instance()->param('searcharticle.aritcle_cat_id');
$user_id = Request::instance()->param('searcharticle.aritcle_user_id');
$page = $data['page'];
$limit = $data['limit'];
$uid = $data['uid']; //獲取前臺傳遞的用戶ID
if (!empty($s)) {
$where[] = array('title', 'like', '%'.$s.'%');
}
if (!empty($cat_id)) {
$where[] = array('cat_id', '=', $cat_id);
}
if (!empty($user_id)) {
$where[] = array('user_id', '=', $user_id);
}
if ($uid == 1) {
$where[] = array('sh','=','1');
$order = 'sort DESC, add_time DESC';
}else{
$where[] = array('user_id','=',$uid);
$order = 'sh ASC, add_time DESC';
}
$where[] =array(['delete','=','0']);
$count = Db::name('article')->where($where)->count();//文章總條數
$ret = Db::name('article')
->where($where) //查詢條件
->order($order) //排序方式
->withAttr('add_time',function ($value,$data) {
return date("Y-m-d",$value);//格式化時間戳日期格式
})
->withAttr('shtime',function ($value,$data) {
return date("Y-m-d",$value);//格式化時間戳日期格式
})
->page($page,$limit)
->select()
->toArray();
foreach ($ret as $key=>$value){//獲取文章分類
$cate = Db::name('article_category')->where(['cat_id' => $value['cat_id']])->field('cat_name')->find();
$ret[$key]['cat_name'] =$cate['cat_name'];
}
foreach ($ret as $key=>$value){//獲取文章發(fā)布人和文章審核人
$cate = Db::name('admin')->where(['user_id' => $value['user_id']])->field('user_name')->find();
$shr = Db::name('admin')->where(['user_id' => $value['shr']])->field('user_name')->find();
$ret[$key]['user_name'] =$cate['user_name'];
$ret[$key]['shr'] = $shr['user_name'];
}
return json(['code'=>0,'msg'=>'ok','limit'=>$limit,'page'=>$page,'count'=>$count,'data'=>$ret]);
}
}
?
文章來源：http://www.zghlxwxcb.cn/news/detail-812673.html
?文章來源地址http://www.zghlxwxcb.cn/news/detail-812673.html
到了這里，關于layui學習筆記（三）關于layui渲染表格因權限判斷需要動態(tài)隱藏列的研究的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
