easyui datagrid动态列

最新推荐文章于 2024-07-23 11:07:53 发布
最新推荐文章于 2024-07-23 11:07:53 发布
阅读量74 收藏
点赞数
文章标签： json java javascript ViewUI

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

效果图



znie
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery Easyui datagrid动态列绑定
09-04 380
前几天有人在使用jQuery EasyUI的datagrid时，遇到不会动态绑定列的情况，而网上给出的例子可能也是比较早的处理办法，竟然需要修改easyui源码，其实解决这问题的思路是很简单，我们只需修改要显示的列即可。那位朋友最后改为这种处理时，发现还是有问题，最终我发现她返回不是合法json，里边多个方括号，这里推荐大家使用本站的JSON在线校验格式化工具来验证返回json是否正确。 这
easyui datagrid分页动态显示
徐小宝的博客
04-20 1506
datagrid分页动态显示 项目中有个页面需要按用户数多少来确定是否分页，大于1024个用户则分页。 function userListShow(){ selectedUserames = []; var role_name = $('input[name="aaaa_role_name"]').val(); var getPager = true; ...
EsayUI DataGrid 动态列生成
single209的专栏
01-06 1935
VS2013+Web MVC + EasyUI 控件库，动态列动态数据生成
EasyUI使用DataGrid实现动态列数据绑定
忧郁的蛋的专栏
11-25 1279
EasyUI DataGrid动态列数据绑定实现方式并不是很发杂，请求到远程数据后,通过其中一条列表数据获取到列字段，然后在通过datagrid对数据进行绑定，上代码。后台返回的数据对象是按datagrid要求的格式数据返回的。
easyui datagrid 动态生成列
热门推荐
yanjunlu的专栏
09-25 5万+
easyui datagrid 定义列的方式通常是： $('#grid').datagrid({columns:[[ {field:'f1',title:'字段1',width:160}, {field:'f2',title:'字段2',width:160} ]]}); 但在实际项目中，我们会经常需要datagrid能动态生成列。 在网上搜了一篇文章：再次谈谈eas
Easyui DataGrid动态生成列
ld_____的博客
08-13 4921
利用前台变量或动态交互方式动态生成column
easyui中datagrid动态生成列（动态formatter）
qq_40516010的博客
11-28 1712
需求: 客户需要按照月份查出当月所有天数的数据 解析需求: 后台需要拿到动态生成的数据（我们是用存储过程生成或者函数），前台进行拼接 前台实现： 取到对应的天数，然后初始化字段，接着加载数据 function dynamicLoad(){ //拿到月份，需要只选取年和月份的插件可以找我 var month = $("#query_month").datebox("getValue"); if(month==""){ $.msg.alert("请选择月份"); return;
easyUI页面datagrid动态列和form字段动态添加
05-31
easyUI页面datagrid动态列和form字段动态添加；项目开发时用到的，废了不少事，大概总了一下，现在发出来共享给想我一样的要用到的菜鸟们，谢谢
easyui datagrid 动态隐藏显示列
08-08
jquery easyui 扩展 datagrid 自定义动态隐藏显示列
JS EasyUI DataGrid动态加载数据
03-15
实现JS EasyUI DataGrid动态加载数据主要涉及以下几个步骤： 1. **配置DataGrid**: 在HTML中创建DataGrid，并设置其`url`属性为数据源接口，这将用于获取服务器上的数据。同时，设置`pagination`属性为`true`启用...
Easyui Datagrid自定义按钮列(最后面的操作列)
08-30
EasyUI Datagrid自定义按钮列实现 EasyUI Datagrid是当前Web开发中常用的数据表格组件，但是它没有提供添加操作列的功能，因此需要我们自定义按钮列来满足需求。下面我们将详细介绍如何自定义按钮列。 首先，我们...
easyui datagrid标题列宽度自适应
04-19
标题 "easyui datagrid标题列宽度自适应" 涉及到的是JavaScript库EasyUI中的一个功能特性，它主要用于Web应用程序的数据展示。EasyUI是一个基于jQuery的轻量级框架，提供了一系列易于使用的UI组件，包括datagrid，...
easyui datagrid动态列的方法
a363096s的专栏
09-03 699
前台台 function newDate(jhId) { $.post('../../ashx/operation/baogonglist.ashx?action=listsql', { jh: jhId }, function (data) { alert
easyui的datagrid动态列
流润的博客
06-12 1075
虽说easyui有点丑，但功能算是不错的。 我在工作中遇到了这样一个问题，先说下需求： 1.系统中可以动态维护表，就是对表可以进行增删改的操作 2.上述的这些表都对应有唯一的id存在一张表中，姑且叫做data_table吧 3.每张表的字段都动态可维护的 4.这些表的字段与它们所在的表一样都有一个唯一的id存在一张表中，目前命名为data_table_colmn 5.点开一个页面，这个
easyUi动态生成datagrid列
weixin_34357887的博客
08-09 311
应用目标 在一个公共页面用单选按钮实现查询信息，根据选择不同，返回不同的信息，因此需要生成不同的列 实现代码： function loadDataGrid(){ $('#datagrid').datagrid({ //生成datagrid基本信息 url : '${ctx}/userBpm/workspace-listPerso...
微信小程序安装vant组件库和使用
qq_61132537的博客
07-23 580
van-button type="primary">主要按钮</van-button>
本地部署SearXNG
最新发布
m0_62458145的博客
07-23 471
当您安装 SearXNG 时，默认的输出格式是 HTML 格式。请将以下行添加到 settings.yml 文件中。如前面的示例所示，settings.yml 文件位于 ${PWD}/searxng/settings.yml。SearXNG 是一个免费的互联网元搜索引擎，整合了各种搜索服务的结果。用户不会被跟踪，也不会被分析。中填写访问地址，例如：http://x.x.x.x:8080，如果你想通过其他方式安装 SearXNG，请参考。3. 在 Dify 中集成 SearXNG。
easyui datagrid动态隐藏列
03-28
可以使用easyui datagrid的columnFormatter属性来实现动态隐藏列。首先，在datagrid的初始化代码中，定义一个全局变量用于存储要隐藏的列的field值： ```javascript var hiddenCols = ['col1', 'col2']; // 要隐藏...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值