jquery-easyui中的TreeGrid继承DataGrid的很多特性,比如复杂表头,冻结列等,利用这些特性可以制作一般的数据报表。
创建方法基本同datagrid,所不同的是需要定义treeField属性以指定那个字段可以收缩和展开:
$('#test').treegrid({
title:'Complex TreeGrid',
width:550,
height:300,
rownumbers: true,
animate:true,
url:'treegrid_data.json',
idField:'region',
treeField:'region',
frozenColumns:[[
{title:'Region',field:'region',width:100,rowspan:2}
]],
columns:[[
{title:'2009',colspan:4},
{title:'2010',colspan:4}
],[
{field:'f1',title:'1st qrt.',width:50,align:'right'},
{field:'f2',title:'2nd qrt.',width:50,align:'right'},
{field:'f3',title:'3rd qrt.',width:50,align:'right'},
{field:'f4',title:'4th qrt.',width:50,align:'right'},
{field:'f5',title:'1st qrt.',width:50,align:'right'},
{field:'f6',title:'2nd qrt.',width:50,align:'right'},
{field:'f7',title:'3rd qrt.',width:50,align:'right'},
{field:'f8',title:'4th qrt.',width:50,align:'right'}
]]
});
原文及下载地址:http://jquery-easyui.wikidot.com/tutorial:treegrid2
分享到:
- 2010-09-02 10:46
- 浏览 6224
- 评论(5)
- 论坛回复 / 浏览 (4 / 9984)
- 查看更多
相关推荐
标题"SSH+Easyui之TreeGrid树形展现数据"表明我们要讨论的是如何在SSH框架下利用EasyUI的TreeGrid组件来展示层次结构的数据。TreeGrid是一种结合了表格和树形结构的组件,它可以在同一视图中展示数据的层级关系,这...
在IT行业中,数据结构是计算机科学的基础,它研究如何组织和管理数据,以便高效地...在实际项目中,我们不仅要掌握基本的使用方法,还需要对数据结构和JavaScript有深入的理解,以便更好地利用TreeGrid实现复杂的功能。
ExtJS TreeGrid是一种结合了表格和树形结构的组件,常用于展示层次化的数据,它在ExtJS库中提供了一种高效且灵活的方式来展现多级数据。在这个“Extjs treeGrid 本地数据 例子”中,我们将探讨如何使用ExtJS创建一个...
TreeGrid是一种将表格数据以树形结构展示的插件,常...理解并掌握JSON数据格式、配置选项以及基本的实现方法,是有效利用TreeGrid的关键。在实际项目中,可以根据需要对TreeGrid进行深度定制,以满足各种复杂的需求。
TreeGrid是一种特殊的表格展示方式,它结合了树形结构和表格的数据展示,使得在单一视图中既能展示层次关系,又能处理大量的数据。在大数据环境下,优化TreeGrid使其能够高效地处理和显示上万条数据是一项挑战性任务...
当TreeGrid数据量过大的时候 使用 $('#tg').treegrid('collapseAll'); 和 $('#tg').treegrid('expandAll');会造成严重卡顿, 解决方案: 数据增加属性 state:closed, 即可默认收起,反之展开,需再展开时,将加载...
TreeGrid是WPF中的一个高级控件,它结合了树视图(TreeView)和数据网格(DataGrid)的功能,使得我们可以展示层次结构的数据,并且能够对这些数据进行编辑、排序和筛选。我们将基于“treegrid.zip”这个压缩包中的...
理解以上知识点,你将能够利用这个“treegrid_barku4k_treegrid_jqueryajax_”实现构建自己的树形表格,同时也能掌握如何利用jQuery和AJAX处理动态数据加载。在实际项目中,还可以结合后端框架如ASP.NET、PHP或Node....
如果"功能非常简单"指的是这个示例没有包含所有高级特性,那么基础的实现可能只包括基本的展开/折叠、点击事件处理和数据加载。 总的来说,"GridView+Jquery实现的TreeGrid"是一个结合了前后端技术,实现高效、动态...
TreeGrid是一种特殊的表格展示形式,它结合了树形结构和表格数据的优点,使得在单一的视图中可以同时展示层次关系和多列数据。在Web开发中,TreeGrid常用于组织和显示具有层级关系的数据,如目录结构、组织架构、...
总的来说,ExtJS4 TreeGrid实例的创建涉及模型定义、数据存储、列配置和面板创建等多个环节,能够有效地呈现层次结构的报表数据,提供丰富的用户交互体验。在实际应用中,你可能需要根据具体需求调整和扩展这个基础...
EasyUI的Treegrid扩展是一种对原生EasyUI TreeGrid组件的功能增强,主要目的是提供更加灵活的数据展示和操作方式。在传统的TreeGrid中,数据通常是以树状结构展示,每一行都可以展开或折叠,显示或隐藏子节点。然而...
Bootstrap TreeGrid是一款基于Bootstrap框架的表格插件,用于在网页中展示层次结构的数据,它将树形结构和表格结合在一起,使得数据呈现更加直观、易用。在ASP.NET MVC 3项目中,Bootstrap TreeGrid可以帮助开发者...
WPF TreeGrid是一种在Windows Presentation Foundation (WPF)框架中用于展示数据的控件,它结合了树形结构和表格的特性,使用户能够以层级方式查看和操作数据。这种控件非常适合显示具有层次关系的数据,例如组织...
JavaScript TreeGrid是一种在Web开发中常用的交互式数据展示控件,尤其适用于呈现具有层次结构的数据。TreeGrid结合了树形结构和表格的优点,允许用户以直观的方式浏览和操作多层数据。在给定的文件中,我们可以看到...
前端利用jQuery EasyUI的TreeGrid组件展示数据,后端通过Servlet提供JSON数据。这个过程涉及到前端界面的构建、后台数据的处理以及JSON格式的数据交换,是Web开发中常见的一种数据交互模式。在实际应用中,可以根据...
1. **表格树结构**:dhtmlxTreeGrid的独特之处在于其将表格与树形视图相结合,每一行都可以展开或折叠,显示或隐藏子级数据,这样可以清晰地展示数据间的层级关系,对于有组织结构的数据展示非常实用。 2. **数据...
dhtmlxTreeGrid1.2_Pro是一款基于JavaScript的富客户端数据网格组件,它结合了树形结构和表格的功能,提供了一种高效的方式来展示和操作层次化的数据。在这款早期的1.2专业版中,虽然功能可能相对现代版本有所限制,...
创建一个简单的TreeGrid实例: ```html <table id="demo"></table> layui.use(['treeGrid', 'form'], function(){ var treeGrid = layui.treeGrid({ id: 'demo', elem: '#demo', cols: [[ //标题栏 {...