easyui datagrid动态列

来源：互联网发布：淘宝关键词排列组合编辑：程序博客网时间：2024/04/29 14:37

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();});//加载表格datagridfunction 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();});//加载表格datagridfunction 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());}

效果图

0 0