easyui中datagrid动态显示和隐藏某一列

傻瓜傻了个瓜

于 2023-03-29 10:35:24 发布

阅读量2.8k

点赞数 1

文章标签： easyui javascript ecmascript

本文链接：https://blog.youkuaiyun.com/qq_41309961/article/details/129831791

版权

这段代码展示了如何在前端使用jQuerydatagrid插件根据角色类型动态显示或隐藏轮转时间列。通过datagrid(showColumn,start_time)显示列，datagrid(hideColumn,start_time)隐藏列，实现表格列的动态管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

显示
$(‘#fileTable’).datagrid(‘showColumn’, ‘start_time’);
隐藏
$(‘#fileTable’).datagrid(‘hideColumn’, ‘start_time’);

$('#fileTable').datagrid({
		toolbar:'#div_fileTable_toobar',
	    url:contextPath+'/a/nursetrain/personalFile/findTraineeTable',
	    queryParams: {  
	        roleType:roleType,
	        office_id:office_id,
	        office_name:office_name
	    },
		pagination:true,
		pageSize:20,
	    columns:[[  
	        {field:'id',checkbox:true}, 
	        {field:'batch',title:'批次'}, 
	        {field:'name',title:'姓名'},
			{field:'idcard',title:'身份证号'},
			{field:'phone',title:'手机号'},
			{field:'work_no',title:'工号'},
			{field:'stud_type',title:'学员类别'},
			{field:'education',title:'学历',hidden:true},
			{field:'educationName',title:'学历'},
			{field:'university',title:'毕业院校'},
			{field:'graduation_time',title:'毕业时间',hidden:true},
			{field:'certificate_No',title:'资格证号'},
			{field:'trade_No',title:'执业证号'},
			{field:'train_start_time',title:'培训开始时间'},
			{field:'start_time',title:'轮转时间',formatter:function (value,row){
				return row.start_date+"-"+row.end_date;
			}}
	    ]],
	    onLoadSuccess:function(data){
	    	$('.datagrid-header div').css('textAlign', 'center');
	    	if (roleType=='hsgpksgly'){
				$('#fileTable').datagrid('showColumn', 'start_time');
			}else{
				$('#fileTable').datagrid('hideColumn', 'start_time');
			}
	    },
	    onClickRow:function(index,field,value){
			 var rows = $(this).datagrid('getSelections');
			 for(var i=0;i<rows.length;i++){
				 var rowIndex=$(this).datagrid('getRowIndex',rows[i]);
				 if(index != rowIndex){
					 $(this).datagrid('unselectRow', rowIndex);
				 }
			 }
		}
	});
	$('#fileTable').datagrid('getPager').pagination({  
		pageSize: 20,
		pageNumber: 1,  
		pageList: [10, 20, 30, 40, 50],  
		beforePageText: '第',//页数文本框前显示的汉字   
		afterPageText: '页    共 {pages} 页',  
		displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',  
   });