详解能在多种前端框架下使用的表格控件
近几年Web前端框架特别流行，比如AngularJS、AngularJS 2、ReactJS、KnockoutJS、VueJS等。表格控件是我们在开发中经常要用到的控件。有没有能够在多种前端控件下都能使用的表格控件？最近研究发现Wijmo中的FlexGrid是一款不错的表格控件，它能支持很多主流的框架。这里主要介绍在纯JavaScript和AngularJS下FlexGrid的使用。
一、在纯JavaScript下使用FlexGrid
HTML文件：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> <!-- Wijmo --> <link href="styles/vendor/wijmo.min.css" rel="stylesheet" /> <script src="scripts/vendor/wijmo.min.js" type="text/javascript"></script> <script src="scripts/vendor/wijmo.grid.min.js" type="text/javascript"></script> <script src="scripts/app.js" type="text/javascript"></script> <script src="scripts/FlexGrid.js" type="text/javascript"></script> </head> <body> <div id="grid"> </div> </body> </html>
1、 引入Wijmo的JS文件和样式：wijmo.min.css 、wijmo.min.js、wijmo.grid.min.js
2、 引入app.js和FlexGrid.js文件。
3、 定义一个div元素用于显示Grid
App.js文件：
var appData = {
getData: function (count) {
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = new wijmo.collections.ObservableArray();
for (var i = 0; i < count; i++) {
data.push({
id: i,
country: countries[i % countries.length],
date: new Date(2014, i % 12, i % 28),
amount: Math.random() * 10000,
active: i % 4 === 0
});
}
return data;
}
}
在app.js中定义appData，其中的getData方法根据传入的Count产生数据。
FlexGrid.js：
(function (wijmo, data) {
var cv = data.getData(30);
var grid = new wijmo.grid.FlexGrid('#grid');
grid.itemsSource = cv;
})(wijmo, appData);
在FlexGrid.js中调用data.getData(30)获取数据30个数据。获得FlexGrid控件，并进行数据绑定。
下面就是运行结果：
二、在AngularJS下使用FlexGrid
HTML文件：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> <script src="scripts/vendor/wijmo.min.js"></script> <script src="scripts/vendor/wijmo.grid.min.js"></script> <script src="scripts/vendor/wijmo.angular.min.js"></script> <link rel="stylesheet" href="styles/vendor/wijmo.min.css" /> <script src="scripts/app.js"></script> <script src="scripts/control.js"></script> </head> <body ng-app="app" ng-controller="appCtrl"> <wj-flex-grid items-source="data" > </wj-flex-grid> </body> </html>
1、 引入angular.min.js
2、 引入Wijmo相关的文件wijmo.min.js、wijmo.grid.min.js、wijmo.angular.min.js、wijmo.min.css
3、 引入app.js和control.js
4、 添加NG指令ng-app、ng-controller
5、 通过wj-flex-grid指令定义表格，并设置数据源
app.js文件：
var app = angular.module('app', ['wj']);
control.js文件：
app.controller('appCtrl', function ($scope) {
// generate some random data
function getData(count) {
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = new wijmo.collections.ObservableArray();
for (var i = 0; i < count; i++) {
data.push({
id: i,
country: countries[i % countries.length],
date: new Date(2014, i % 12, i % 28),
amount: Math.random() * 10000,
active: i % 4 == 0
});
}
return data;
}
$scope.data = getData(30);
});
其运行结果和纯JS的结果完全一样。
通过上面的两个示例可以看到无论是在纯JS中还是在AngularJS中使用FlexGrid都非常简单。尤其是在AngularJS框架中通过Wijmo自定义的Angular指令wj-flex-grid使用表格控件很容易。Wijmo支持AngularJS、AngularJS 2、ReactJS、KnockoutJS、VueJS、Ionic等前端框架，就不在一一示例。FlexGrid的功能包括排序、过滤、分组、分页、单元格合并、冻结、格式化、条件样式、单元格模板、主题、树形结构等。
源码下载
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！
相关推荐
-
在web中js实现类似excel的表格控件
Execl功能非常强大,内置的很多函数或公式可以大大提高对数据的加工处理能力.那么在web中有没有类似的控件呢?经过一番搜寻,发现handsontable具备了基本的excel功能支持公式,同时能对数据进行实时编辑.另外支持拖动复制.Ctrl+C .Ctrl+V 等等.在浏览器支持方面,它支持以下的浏览器: IE7+, FF, Chrome, Safari, Opera. 首先引入相关库文件,公式支持不包含在handsontable.full.js中,需要单独引入: <script src=&quo
-
Android自定义表格控件满足人们对视觉的需求
Android平台已经给我们提供了很多标准的组件,如:TextView.EditView.Button.ImageView.Menu等,还有许多布局控件,常见的有:AbsoluteLayout.LinerLayout.RelativeLayout.TableLayout等.但随着人们对视觉的需求,基本组件已无法满足人们求新求异的要求,于是我们常常会自定义组件,用来实现更美观的UI界面. 实现自定义控件通常有两种途径,一种是继承View类,重写其中的重要方法,另一种是继承ViewGroup类,通过
-
javascript表格控件：Chgrid，简化型
本着自由共享的精神,把代码帖出来,同时大家也可以一起来测试以及添加新功能,请大家根据网友提出的问题,把自己修改好的版本都帖出来跟在下面,最后作为一款比较全面的表格软件. Chgrid的简单功能介绍: 1:支持自定义排序 2:支持列宽度的拖放 3:支持自定义函数 4:支持分页 5:支持自动编号 6:多浏览器支持,支持ie6,ie7,ff,opera 7:div布局 已知问题: 1:由于使用的div布局,如果使用margin或者padding会改变定义的列宽度,所以目前文字只能居中或者靠左或靠右,不
-
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
dotNetFlexGrid是一款asp.net原生的异步表格控件,他的前身是Jquery FlexiGrid插件,我们重构了FlexiGrid的大部分Javascript代码,使其工作的更有效率,BUG更少:同时将其封装为dotNet控件,提供了简单易用的使用方式. dotNetFlexGrid扩展和优化了FlexiGrid原有的功能,并提供了更多具有针对性的功能,使用dotNetFlexGrid,您的用户可以轻松拥有如下功能 提供简易的方式自行调整表格列宽 根据实际情况调整表格的大小 针对合
-
ASP.NET Table 表格控件的使用方法
一个Table对象包含多个行TableRow,每一行又包含TableCell,TableCell中可以包含其他的HTML或者服务器控件作为Web服务器控件. 一.Table中的属性 Table对象: BackImageUrl 表格的背景图像的URL Caption 表格标题 CaptionAlign 标题文本对齐方式 CellPadding Table单元格内容和单元格边框之间的空间量(单位:像素) CellSpacing 相邻单元格之间的空间量 Rows Table控件中行的集合 TableR
-
Android自定义DataGridView数据表格控件
我是一个.net程序员,但是苦于公司要求开发一个android app,没办法,只能硬着头皮上了. 由于项目里面很多地方需要用到数据显示控件(类似于.net的DataGridView),度娘找了下发现没人公开类似的控件,没办法只好自己写了. 废话不多说,直接贴代码: public class DataGridView extends HorizontalScrollView { private List<DataGridViewColumn> columns; private List<
-
左侧是表头的JS表格控件(自写,网上没有的)
今天,项目中要用到该表格,找了一遍,发现没有合适的,于是自己动手丰衣足食. 最终呈现效果如上图, 1.左侧是表头的表格数据展现, 2.支持多行,多表头 3.固定表头的功能 4.能够支持标题 5.获取表格中的数据 6.支持IE/CHROME 7. 表格能够自适应根据内容行居中 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh
-
jquery miniui 教程 表格控件 合并单元格应用
表格:合并单元格 参考示例:合并单元格 调用方法:margeCells.如下代码: 复制代码 代码如下: grid.on("load", onLoad); function onLoad(e) { var grid = e.sender; var marges = [ { rowIndex: 1, columnIndex: 0, rowSpan: 1, colSpan: 2 }, { rowIndex: 3, columnIndex: 0, rowSpan: 4, colSpan: 3
-
最棒的Angular2表格控件
现在市面上有大量的JavaScript数据表格控件,包括开源的第三方的和自产自销的.可以说Wijmo的Flexgrid是目前适应Angular 2的最好的表格控件. Angular 2数据表格基本要求: 更小.更快.更熟悉. 为了使用Angular 2表格,首先你需要了解表格的基本要求.FlexGrid开始于1996年,当时使用C++为Visual Basic编写的控件.多年来,它不断进化并在多个平台得到完善,尤其是JavaScript平台.FlexGrid 因为Flex的理念而命名,控件应当包
-
ExtJS 配置和表格控件使用第1/2页
ExtJS是一套完整的RIA解决方案,也因为功能完整造成了ext-all.js有400多k,由于是基于JS和CSS的功能实现,对客户端机器性能也有一定的要求,即不支持IE6以下的版本.如果您的项目对网页响应时间有严格的限制,或者客户端操作系统过于陈旧,一定不要选择ExtJS. 本文主要是介绍ExtJS的下载和配置以及一些简单的使用方法.目前最新版本为3.0,但是本文主要介绍2.2版本. 一.ExtJS下载以及配置 1.下载地址:www.extjs.com/(这是官网,大家可以选择自己喜欢的版本下