`
wanchong998
  • 浏览: 236078 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

ActiveWidgets Grid 使用 很吊的Grid

阅读更多

<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这个
分享到:
评论
1 楼 hanyoud 2008-08-12  
这个是要钱的 ExtJs现在还是免费的
不能比
不知道哪位能不能提供一个免费的 最新的是2.5.2

相关推荐

    ActiveWidgets Grid (Free Edition) 1.0.0.rar免费jsp数据展示控件

    在实际项目中,开发者需要将ActiveWidgets Grid的JavaScript和CSS文件引入到JSP页面中,然后使用JavaScript编写逻辑来配置Grid,如设置列、加载数据、监听事件等。此外,为了适应不同的需求,ActiveWidgets Grid可能...

    ActiveWidgets Grid (Free Edition)-开源

    1. **自由使用**:作为开源软件,ActiveWidgets Grid可以免费用于商业和个人项目,无需支付额外费用,这降低了开发成本。 2. **源码透明**:源代码的开放使得开发者可以深入理解其工作原理,便于调试、优化和二次...

    Playwright 结合 Selenium Grid - windows 环境使用教程.pdf

    Playwright 结合 Selenium Grid - Windows 环境使用教程 本资源提供了 Playwright 结合 Selenium Grid 在 Windows 环境中的使用教程,介绍了如何将 Playwright 连接到 Selenium Grid Hub,启动 Google Chrome 或 ...

    Sigma-Grid.zip_grid_grid jquery_html jquery_jquery grid

    4. **文档内容**:Sigma Grid.docx 文件很可能是详细的使用手册,包含插件安装、基本用法、高级特性和常见问题解答等内容。它可能还提供了代码示例和最佳实践,帮助开发者快速上手并熟练掌握 Sigma Grid。 5. **...

    PropertyGrid控件使用教程

    下面我们将深入探讨PropertyGrid控件的使用方法和特点。 1. **控件介绍** PropertyGrid控件通过反射技术自动发现对象的公共属性、方法和事件,并以网格的形式展示出来。用户可以方便地查看和修改这些属性的值,极...

    sigma_grid api使用手册 教程示例

    例如,一个典型的sigma_grid使用示例可能涉及加载数据集,使用API进行过滤和排序,然后进行内存优化的计算。而gt_grid的示例则可能涵盖创建表格,添加格式化规则,以及生成带有交互元素的复杂报告。 在学习过程中,...

    Extjs4 grid使用例子

    在给定的"Extjs4 grid使用例子"中,我们可以深入理解如何在MVC架构下有效地利用ExtJS4的Grid组件。Grid组件是ExtJS中的核心部分,它提供了一个灵活的、可定制的数据展示网格,通常用于显示和操作大量数据。 1. **...

    Grid布局综合Demo案例

    在Grid布局中,我们还可以使用`grid-gap`来设置网格项之间的间距,`grid-auto-rows`和`grid-auto-columns`用于定义自动生成的行和列的大小。此外,`grid-template-areas`属性允许我们通过命名网格区域来创建更直观的...

    PropertyGrid的三种使用方法

    下面我们将详细介绍标题中提到的`PropertyGrid`的三种使用方法,并结合提供的压缩包文件进行解释。 1. **PropertyBag方式**(Propertygrid_PropertyBag.rar) `PropertyGrid`控件可以通过`PropertyBag`(即`...

    C# 调用Grid++及线程的使用

    本文将深入探讨如何在C#环境中利用Grid++库生成报表,以及如何有效地使用线程和委托,同时讲解如何指定打印机进行打印。 首先,让我们来看看“C#如何调用Grid++生成报表源码”。Grid++是一个强大的网格控件,适用于...

    grid嵌套grid

    当我们需要在一个`Grid`中展示的数据本身具有层次结构时,可以使用`Grid`嵌套`Grid`的方法。例如,一个`Grid`显示公司的部门,每个部门下面又包含多个员工,此时,部门可以作为父`Grid`,员工作为子`Grid`进行嵌套。...

    ag grid enterprise 中文文件

    ag-grid中文一直是个问题,从网上找到了,中文版的js文件,经过改造后,实现了ag-grid中文转换。 在程序中locales中新建文件夹,拷贝,然后在程序中调用。比如 import { AG_GRID_...如需能长期使用的企业版,请私信我。

    使用vue实现grid-layout功能实例代码

    使用 Vue 实现 Grid Layout 功能实例代码 本文主要介绍了使用 Vue 实现 Grid Layout 功能的代码讲解,涵盖了基本布局、节点排版、拖拽事件等多个方面的知识点。 基本布局 在实现 Grid Layout 功能之前,首先需要 ...

    Draw-Grid_100_catia插件_catia车线_drawgrid_Draw-Grid下载_catia_

    在压缩包内的“Draw-Grid_100.CATScript”文件很可能就是插件的脚本程序,这种格式通常用于存储定制的CATIA宏命令或者插件功能。 综上所述,Draw-Grid是一款专为CATIA设计的增强型插件,它的主要任务是帮助用户高效...

    使用Vue-Grid-Layout实现自定义工作台

    在本教程中,我们将深入探讨如何使用 Vue-Grid-Layout 实现自定义工作台。 首先,我们需要安装 Vue-Grid-Layout 和其依赖 Vue.js。如果你还没有设置 Vue 项目,可以使用 Vue CLI 创建一个新的项目。在已有的项目中...

    .net C# PropertyGrid 显示下拉列表

    在本文中,我们将讨论如何在 .NET 中使用 PropertyGrid 控件来显示下拉列表,并实现编辑表的各种属性。我们将通过一个自定义控件 CheckedListBoxUC 来实现这个功能。 PropertyGrid 控件是 .NET 中一个功能非常强大...

    LigerUI之Grid使用详解(一)——显示数据

    本篇文章将详细介绍如何使用LigerUI的Grid组件来显示数据。 首先,我们需要了解Grid的基本结构。在HTML页面中,你需要创建一个div元素作为Grid的容器。例如: ```html &lt;div id="gridContainer"&gt; ``` 接下来,我们...

    UltimateGrid 7.3.zip

    UltimateGrid是一款强大的MFC(Microsoft Foundation Class Library)控件,完全使用C++语言编写,专为商业级应用设计。这款控件以其优秀的性能、高度的可定制性和丰富的功能,深受开发者喜爱。与同类产品如GridCtrl...

    SAP ALV Grid资料整理 (很全面)

    SAP ALV Grid 资料整理(很全面) SAP ALV Grid 是一种灵活的工具,用于显示列表,并提供了常见的列表操作通用函数,可以通过自定义选项来增强其功能。ALV Grid 控件可以创建非层次的友好交互式报表,是一个基于...

Global site tag (gtag.js) - Google Analytics