easyui，datagrid表格显示的字段内容随机

最新推荐文章于 2025-08-07 13:10:29 发布

原创最新推荐文章于 2025-08-07 13:10:29 发布 · 506 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #javascript #显示随机字段

easyui 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用EasyUI的datagrid组件实现从MySQL数据库中动态获取并展示表的所有字段。通过后端Java代码获取字段名，并利用jQuery AJAX请求将这些字段名传递到前端，再由前端动态设置datagrid的列属性。

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

easyUI的datagrid表格，在向用户展现内容的时候，随机获得字段，而非指定固定的字段显示

1.后台获得所有字段的方法（MySQL数据库）

public void getColumns(){
		List list=new ArrayList();
		String sql="select COLUMN_NAME from information_schema.COLUMNS where table_name = 'test'";
		list=this.getSession().createSQLQuery(sql).list();
		if(list!=null){
			for(int i=0;i<list.size();i++){
				System.out.println(list.get(i));
			}
		}
		JSONArray arr=JSONArray.fromObject(list);
		this.getWrite().write(arr.toString());
	}

2.页面随机展示字段（js部分）

$(function(){
		getDatas();
	});
	
	function getDatas(){
		$.ajax({
			type:'post',
			url:'_web/getColumns',//获得所有字段
			success:function(data){
				var arr=[];
				var columns=[];//数组，包含所有的字段
				
				data=eval(data);
				$(data).each(function(){
					arr.push({field:'',title:'',align:'center',width:80});
				});
				
				columns.push(arr);
				
				$(data).each(function(index,column){
					columns[0][index]['field']=column;
					columns[0][index]['title']=column;
				});
				getDatagrid(columns);
			}
		});
	}
	
	function getDatagrid(columns){
		$("#dg").datagrid({
			height:300,
			title:'数据表格',
			url:'_web/getList',//获得datagrid数据
			pagination:true,
			columns:columns,
			pageList:[10,20,30],

		});
	}