`
gougouqihao
  • 浏览: 7090 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jquery easyui datagrid 动态表头 + 嵌套对象属性展示

    博客分类:
  • js
阅读更多

代码功能:

1、datagrid 的表头由后台生成,可以配置在数据库

2、datagrid 的列绑定数据 支撑嵌套对象

 

$(function() {
	var columns = new Array();
	var cols = new Array();
	var colData = new Object();
	
	$.post("url","params",function(data){
		//动态生成表头开始
		if(data.xxxx != null){
			$.each(data.xxxx,function(){
				colData = new Object();
				colData.field = this.resCode;
				colData.title = this.resName;
				colData.width = 100;//也可以配置在数据库,这样整个页面的生成全部是配置的
				colData.formatter =  function(value,row,index){
					
					//这两句是嵌套对象属性绑定,insideObject 为嵌套的对象,field 为对象的属性
					//datagrid 的field不能重复,注意在绑定field 时不能全部用 insideObject,需要使用  insideObject 的属性绑定
					var field = this.field;
					return row.insideObject[field];
					
				};
				cols.push(colData);
			});
		};
		columns.push(cols);
		//动态生成表头结束
		
		var gridCfg = {
			fit			: true,
			loadMsg		: '数据加载中......',
			url			: opts.resDataQueryUrl,
			nowrap		: true,
			border		: false,  
			striped		: true,
			pagination	: true,
			pageSize	: opts.pageSize,
			rownumbers	: true,
			singleSelect: false,
			columns		: columns,
			fitColumns : false,
			queryParams	: {},
			frozenColumns	:	[[  
			    {field:'ck',checkbox:true}  
			]], 
			onLoadSuccess:function(data){
			}
		};
		$('#id').datagrid(gridCfg);
	
	});

});

 

0
0
分享到:
评论

相关推荐

    jquery easyui datagrid demo

    Datagrid 是 jQuery EasyUI 中一个强大的数据展示组件,常用于表格数据的展示和操作,支持分页、排序、过滤、编辑等功能。通过阅读这份文档,我们可以了解 Datagrid 的基本配置和高级特性,以及如何与后端数据源进行...

    扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件完整版Demo下载

    jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像(onMouseOver/onMouseOut) Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件,源码奉献!!!

    jQuery EasyUI编辑DataGrid用combobox实现多级联动

    在jQuery EasyUI中,DataGrid是一种常用的表格展示控件,它可以与各种编辑器结合使用,如combobox(下拉框)来实现更丰富的交互功能。本文主要探讨的是如何利用jQuery EasyUI的DataGrid和combobox组件实现多级联动的...

    Easyui-DataGrid表头拖动效果

    UI设计在一个系统中的重要性是不容忽视的,我们开发人员要做到:让用户去控制...给你的Easyui-DataGrid 表头添加一点料吧 Easyui-Datagrid—表头灵活显示http://blog.csdn.net/u010293698/article/details/47956865

    datagrid 多表头及动态生成的实现

    本文的目标是通过一个具体的案例来展示如何使用JQuery EasyUI的datagrid组件来实现多表头和根据数据库动态生成列的需求。 #### 解决方案 ##### 1. 后端逻辑准备 为了实现前端表格能够根据数据库内容动态变化,...

    easyui datagrid 动态隐藏显示列

    jquery easyui 扩展 datagrid 自定义动态隐藏显示列

    JS EasyUI DataGrid动态加载数据

    JS EasyUI DataGrid是一款基于jQuery和EasyUI框架的数据表格组件,它提供了丰富的功能,如数据分页、排序、过滤和自定义操作等。在实际应用中,动态加载数据是DataGrid的一个重要特性,允许用户在需要时加载更多的...

    jquery easyui datagrid性能优化

    jquery easyui datagrid 性能优化,优化后可快速提升查询性能。唯一的缺陷就是不支持可编辑grid了。只需要在引入easyui.js后面引入此js即可。

    jQuery+EasyUI+1.2.4+API+中文文档

    - **特性**:jQuery EasyUI 提供了诸如窗口(window)、表格(datagrid)、表单(form)、菜单(menu)等常见UI组件。这些组件都是基于HTML元素封装的,易于操作和配置。 - **事件**:每个组件都有一系列的事件,...

    JqueryEasyUI DataGrid例子

    在网页开发中,jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了丰富的用户界面组件,如 DataGrid,用于创建交互式、数据驱动的表格。DataGrid 是 EasyUI 的一个重要组件,它可以帮助开发者轻松地展示、操作和...

    EasyUI DataGrid过滤用法实例

    EasyUI 是一个基于 jQuery 的 UI 框架,它提供了丰富的组件,包括表格(DataGrid)等,使得 Web 应用程序的界面开发更加便捷。在这个"EasyUI DataGrid 过滤用法实例"中,我们将深入探讨如何利用 EasyUI 的 DataGrid ...

    jquery easyUI+struts2+spring+hibernate基于annotation实现的CRM

    【标题】:“jQuery EasyUI+Struts2+Spring+Hibernate基于注解实现的CRM系统” 在IT领域,CRM(Customer Relationship Management,客户关系管理)系统是企业用来优化与客户交互和管理的重要工具。本项目利用一系列...

    jquery-easyui拓展之datagrid复合表头列锁定/解锁和列隐藏/显示

    http://blog.csdn.net/tianxiawudi0720/article/details/47401399

    easyui datagrid 数据导出到Excel

    在IT行业中,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如排序、分页、过滤等。在实际工作中,我们经常需要将这些展示的数据导出到Excel文件,以便进行进一步的分析或存储。下面...

    easyui datagrid标题列宽度自适应

    标题 "easyui datagrid标题列宽度自适应" 涉及到的是JavaScript库EasyUI中的一个功能特性,它主要用于Web应用程序的数据展示。EasyUI是一个基于jQuery的轻量级框架,提供了一系列易于使用的UI组件,包括datagrid,...

    jquery easyui 项目 +hibernate+spring+struts2.0

    这个项目展示了如何将流行的前端框架jQuery EasyUI与后端的流行Java开发框架Hibernate、Spring和Struts2.0进行集成,以构建一个完整的Web应用程序。jQuery EasyUI是一个基于jQuery的UI组件库,提供了丰富的用户界面...

    easyui datagrid 表格 打印

    在IT领域,EasyUI Datagrid是一款基于jQuery的前端数据展示组件,它提供了丰富的表格功能,如数据分页、排序、筛选等。当我们需要将Datagrid中的数据进行打印时,可能会遇到一些挑战,因为通常默认的浏览器打印功能...

    JQuery EasyUI DataGrid服务端分页时行号不延续的解决方法

    JQuery EasyUI DataGrid服务端分页加载数据后,DataGrid行号不能延续,总是重新由1开始。因为服务端分页取回的是单页数据,通过LoadData方法加载数据后,pageNumber属性被初始化为1,因此行号总是重新由1开始。现在...

    jquery easyui1.3.3,api+demo

    jQuery EasyUI 是一个基于 jQuery 的前端开发框架,用于构建现代Web应用程序。它提供了一系列易于使用的组件,如对话框、表格、菜单、按钮等,大大简化了网页的界面开发。EasyUI 1.3.3是这个框架的一个稳定版本,...

    jquery easyui + Ztree +折线图

    在Web开发中,jQuery EasyUI、ZTree和折线图是三种常见的组件,它们分别用于构建用户界面、实现树形结构展示和数据可视化。本篇文章将深入探讨这些技术及其在实际项目中的应用。 首先,jQuery EasyUI是一个基于...

Global site tag (gtag.js) - Google Analytics