<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. **源码透明**：源代码的开放使得开发者可以深入理解其工作原理，便于调试、优化和二次...
8. ActiveWidgets：ActiveWidgets是一款JavaScript组件库，包含各种控件，如数据网格、日历、树形视图等，旨在提高Web应用的用户体验。 9. TreeTable_eval：这可能是TreeTable的一个评估版本或示例代码，用于演示...
并像使用任何标准Svelte组件一样使用它们。 < script > import { Datagrid } from '@activewidgets/svelte' ; import './styles.css' ; let rows = [ { message : 'Hello, World!' } ] ; </ s
ActiveWidgets / React•Datagrid ActiveWidgets是一个多框架UI组件库。 这个包提供了。 // 安装 将@ activewidgets / react添加到您的项目依赖项中- > npm i --save @activewidgets/react 用法 现在，您可以...
例如，`dhtmlxGrid`是一个流行的JavaScript库，它提供了一个高度灵活和功能强大的表格组件，可以处理大量数据并支持各种操作，如添加、删除、编辑行，以及自定义列和过滤器。 2. **表单元素**： HTML表单是收集...