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());
}
效果图
