easyui datagrid动态列 -

Gould

浏览: 10718 次
性别:

最近访客更多访客>>

1234561831

tanghui

ForLove_ForYOU

wangtao1727

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (14)

社区版块

存档分类

easyui datagrid动态列

1、用静态数据生成列 ——把columns 静态数据了解其结构

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><link rel="stylesheet" type="text/css" href="${path}/scripts/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${path}/scripts/easyui/themes/icon.css">
<script type="text/javascript" src="${path}/scripts/jquery-1.8.0.js"></script>
<script type="text/javascript" src="${path}/scripts/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
//页面加载
$(document).ready(function(){
			loadGrid();
});

//加载表格datagrid
function loadGrid()
{
	var columns = new Array();
	for(var i=0;i<10;i++){
		var col={};
		if(i==0){
			var col1={};
			col1["filed"]="ck";
			col1["checkbox"]="true";
			columns.push(col1);
		}
		col["title"]="列"+i;
		col["field"]="列"+i;
		col["align"]="center";
		col["width"]="100";
		columns.push(col);
	}
	//加载数据
	$('#test').datagrid({
				width: 'auto',
				height:300,				
				striped: true,
				singleSelect : true,
				//url:'',
				//queryParams:{},
				loadMsg:'数据加载中请稍后……',
				pagination: true,
				checkbox:true,
				rownumbers: true,	
				columns:[columns]
			});
}

//为loadGrid()添加参数
		var queryParams = $('#test').datagrid('options').queryParams;
	    queryParams.who = who.value;
	    queryParams.type = type.value;
	    queryParams.searchtype = searchtype.value;
	    queryParams.keyword = keyword.value;
	    //重新加载datagrid的数据
	    $("#test").datagrid('reload');
</script>
<body>
<div id ='test'>
</div></body>
</html>

2、通过Ajax请求从后台获取到

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><link rel="stylesheet" type="text/css" href="${path}/scripts/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${path}/scripts/easyui/themes/icon.css">
<script type="text/javascript" src="${path}/scripts/jquery-1.8.0.js"></script>
<script type="text/javascript" src="${path}/scripts/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript">
//页面加载
$(document).ready(function(){
			loadGrid();
});

//加载表格datagrid
function loadGrid()
{
	var columns = new Array();
	$.ajax({
		url : 'getgridconfig.do',
		method : 'POST',
		dataType : 'json',
		async:false,
		success : function(data) {
			alert(data);
			columns=data.result;
			//$("#zsktree").omTree("insert", data, node);
		}
	});
	//加载数据
	$('#test').datagrid({
				width: 'auto',
				height:300,				
				striped: true,
				singleSelect : true,
				//url:'',
				//queryParams:{},
				loadMsg:'数据加载中请稍后……',
				pagination: true,
				checkbox:true,
				rownumbers: true,	
				columns:[columns]
			});
}

//为loadGrid()添加参数
		var queryParams = $('#test').datagrid('options').queryParams;
	    queryParams.who = who.value;
	    queryParams.type = type.value;
	    queryParams.searchtype = searchtype.value;
	    queryParams.keyword = keyword.value;
	    //重新加载datagrid的数据
	    $("#test").datagrid('reload');
</script>
<body>
<div id ='test'>
</div></body>
</html>

后台方法其中Columns、Json和JsonUtils定义的工具体

@RequestMapping("/getgridconfig")
	public void getgridconfig(HttpServletRequest request,
			HttpServletResponse response) throws IOException, Exception {
		List<Columns> cols = new ArrayList<Columns>();
		
		for (int i = 0; i < 10; i++) {
			Columns col = new Columns();
			if(i==0){
				//加载复选框
				Columns ckcol = new Columns();
				ckcol.setField("checkchebox");
				ckcol.setCheckbox("true");
				cols.add(ckcol);
			}
			col.setField("列"+i);
			col.setAlign("center");
			col.setTitle("列"+i);
			col.setWidth("100");
			cols.add(col);
		}
		json.setSuccess(true);
		json.setResult(cols);
		JsonUtils.write(json, response.getWriter());
	}

效果图