<html>
<head>
<title>ActiveWidgets Examples</title>
<style>body {font: 12px Tahoma}</style>
<!-- include links to the script and stylesheet files -->
<script src="./runtime/lib/aw.js"></script>
<link href="./runtime/styles/system/aw.css" rel="stylesheet"></link>
<!-- change default styles, set control size and position -->
<style>
#myGrid {height: 220px; width: 100%;} /* 设置Grid宽度高度 */
#myGrid .aw-alternate-even {background: #efe} /* 设置奇数行颜色 */
#myGrid .aw-alternate-odd {background: #def} /* 设置偶数行颜色 */
#myGrid .aw-grid-row {border-bottom: 1px dashed #ccc} /* 设置行边的虚线 */
#myGrid .aw-mouseover-row {background: #ccc} /* 设置划过行颜色 */
#myGrid .aw-grid-row {color: #000000} /* 设置行内容字体颜色 */
#myGrid .aw-column-0 {text-align: left} /* 设置列0为居左 */
#myGrid .aw-column-1 {text-align: center} /* 设置列1为居中 */
#myGrid .aw-column-2 {text-align: right} /* 设置列2为右对齐 */
</style>
</head>
<body>
<!-- insert control tag -->
<span id="myGrid"></span><br>
<span id="myLabel"></span>
<p>
<script>
var myData = [
[1, "World", 1018057389, 2005, "world"],
[2, "European Union", 247000000, 2006, "eu"],
[3, "United States", 205326680, 2005, "us"],
[4, "China", 123000000, 2006, "cn"],
[5, "Japan", 86300000, 2005, "jp"],
[6, "India", 60000000, 2005, "in"],
[7, "Germany", 50616000, 2006, "de"],
[8, "United Kingdom", 37600000, 2005, "gb"],
[9, "Korea South", 33900000, 2005, "kr"],
[10, "France", 29945000, 2006, "fr"] // no comma in the last line
];
var myHeaders = ["Id","Rank", "Country", "Internet users", "Data from"];
var grid = new AW.UI.Grid;
grid.setId("myGrid");
grid.setHeaderText(myHeaders);
grid.setCellData(myData);
grid.setColumnCount(5);
grid.setRowCount(10);
grid.setSelectorVisible(true);
grid.setSelectorWidth(50);
grid.setSelectorText(function(r){return this.getRowPosition(r)+1}); // 加载行标号
grid.setSelectionMode("multi-row-marker"); // 列中加入checkboxes
grid.refresh();
var label = new AW.UI.Label;
label.setId("myLabel");
label.refresh();
grid.onSelectedRowsChanged = function(rowIndicesArray){
label.setControlText("rows: [" + rowIndicesArray + "]");
var c= "["+rowIndicesArray+"]";
alert(c.length);
}
</script>
</p>
</body>
</html>
别忘记加runtime这个文件包
不次于Extjs Grid这个
分享到:
相关推荐
在实际项目中,开发者需要将ActiveWidgets Grid的JavaScript和CSS文件引入到JSP页面中,然后使用JavaScript编写逻辑来配置Grid,如设置列、加载数据、监听事件等。此外,为了适应不同的需求,ActiveWidgets Grid可能...
1. **自由使用**:作为开源软件,ActiveWidgets Grid可以免费用于商业和个人项目,无需支付额外费用,这降低了开发成本。 2. **源码透明**:源代码的开放使得开发者可以深入理解其工作原理,便于调试、优化和二次...
Playwright 结合 Selenium Grid - Windows 环境使用教程 本资源提供了 Playwright 结合 Selenium Grid 在 Windows 环境中的使用教程,介绍了如何将 Playwright 连接到 Selenium Grid Hub,启动 Google Chrome 或 ...
4. **文档内容**:Sigma Grid.docx 文件很可能是详细的使用手册,包含插件安装、基本用法、高级特性和常见问题解答等内容。它可能还提供了代码示例和最佳实践,帮助开发者快速上手并熟练掌握 Sigma Grid。 5. **...
下面我们将深入探讨PropertyGrid控件的使用方法和特点。 1. **控件介绍** PropertyGrid控件通过反射技术自动发现对象的公共属性、方法和事件,并以网格的形式展示出来。用户可以方便地查看和修改这些属性的值,极...
例如,一个典型的sigma_grid使用示例可能涉及加载数据集,使用API进行过滤和排序,然后进行内存优化的计算。而gt_grid的示例则可能涵盖创建表格,添加格式化规则,以及生成带有交互元素的复杂报告。 在学习过程中,...
在给定的"Extjs4 grid使用例子"中,我们可以深入理解如何在MVC架构下有效地利用ExtJS4的Grid组件。Grid组件是ExtJS中的核心部分,它提供了一个灵活的、可定制的数据展示网格,通常用于显示和操作大量数据。 1. **...
在Grid布局中,我们还可以使用`grid-gap`来设置网格项之间的间距,`grid-auto-rows`和`grid-auto-columns`用于定义自动生成的行和列的大小。此外,`grid-template-areas`属性允许我们通过命名网格区域来创建更直观的...
下面我们将详细介绍标题中提到的`PropertyGrid`的三种使用方法,并结合提供的压缩包文件进行解释。 1. **PropertyBag方式**(Propertygrid_PropertyBag.rar) `PropertyGrid`控件可以通过`PropertyBag`(即`...
当我们需要在一个`Grid`中展示的数据本身具有层次结构时,可以使用`Grid`嵌套`Grid`的方法。例如,一个`Grid`显示公司的部门,每个部门下面又包含多个员工,此时,部门可以作为父`Grid`,员工作为子`Grid`进行嵌套。...
本文将深入探讨如何在C#环境中利用Grid++库生成报表,以及如何有效地使用线程和委托,同时讲解如何指定打印机进行打印。 首先,让我们来看看“C#如何调用Grid++生成报表源码”。Grid++是一个强大的网格控件,适用于...
使用 Vue 实现 Grid Layout 功能实例代码 本文主要介绍了使用 Vue 实现 Grid Layout 功能的代码讲解,涵盖了基本布局、节点排版、拖拽事件等多个方面的知识点。 基本布局 在实现 Grid Layout 功能之前,首先需要 ...
在压缩包内的“Draw-Grid_100.CATScript”文件很可能就是插件的脚本程序,这种格式通常用于存储定制的CATIA宏命令或者插件功能。 综上所述,Draw-Grid是一款专为CATIA设计的增强型插件,它的主要任务是帮助用户高效...
在本教程中,我们将深入探讨如何使用 Vue-Grid-Layout 实现自定义工作台。 首先,我们需要安装 Vue-Grid-Layout 和其依赖 Vue.js。如果你还没有设置 Vue 项目,可以使用 Vue CLI 创建一个新的项目。在已有的项目中...
在本文中,我们将讨论如何在 .NET 中使用 PropertyGrid 控件来显示下拉列表,并实现编辑表的各种属性。我们将通过一个自定义控件 CheckedListBoxUC 来实现这个功能。 PropertyGrid 控件是 .NET 中一个功能非常强大...
本篇文章将详细介绍如何使用LigerUI的Grid组件来显示数据。 首先,我们需要了解Grid的基本结构。在HTML页面中,你需要创建一个div元素作为Grid的容器。例如: ```html <div id="gridContainer"> ``` 接下来,我们...
UltimateGrid是一款强大的MFC(Microsoft Foundation Class Library)控件,完全使用C++语言编写,专为商业级应用设计。这款控件以其优秀的性能、高度的可定制性和丰富的功能,深受开发者喜爱。与同类产品如GridCtrl...
SAP ALV Grid 资料整理(很全面) SAP ALV Grid 是一种灵活的工具,用于显示列表,并提供了常见的列表操作通用函数,可以通过自定义选项来增强其功能。ALV Grid 控件可以创建非层次的友好交互式报表,是一个基于...