Tabular controls that can be used in a variety of front-end frameworks

Few yearsWebFront-end frames are particularly popular, such asAngularJS、AngularJS 2、Reactjs、Knockoutjs、Vuejs ET. Table controls are the controls that we often use in development. Are there table controls that can be used under a variety of front-end controls? Recent research found wijmo< Span style= "font-family: ' The song body '; font-size:10.5pt;" > flexgrid< Span style= "font-family: ' The song body '; font-size:10.5pt;" > is a nice tabular control that supports many mainstream frameworks. Here mainly introduced in pure Javascript and angularjsflexgrid the use of.

First, use FlexGrid in pure JavaScript

HTML file:

<! doctype html>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,&NBSP;I&NBSP;%&NBSP;28),                 amount:  Math.random ()  * 10000,                 active: i % 4 === 0             });        }         return data;    }}

The AppData is defined in App.js, where the GetData method produces data based on the count passed in.

Flexgrid.js:

(function (Wijmo, data) {var CV = data.getdata (30);    var Grid = new Wijmo.grid.FlexGrid (' #grid '); Grid.itemssource = CV; }) (Wijmo, appData);

In Flexgrid.js, call Data.getdata (30) to get the data. Getsthe Flex grid control and makes data binding.

Here is the result of the operation:

650) this.width=650; "Width=" 545 "height=" 632 "src=" http://images2015.cnblogs.com/blog/10730/201701/ 10730-20170111165220994-175697538.png "alt=" 10730-20170111165220994-175697538.png "/>

Second, the use of FlexGrid under the Angularjs

HTML file:

1. Introduction of Angular.min.js
2, the introduction of WIJMO related Documents Wijmo.min.js, Wijmo.grid.min.js, Wijmo.angular.min.js, wijmo.min.css
3. Introduction of App.js and Control.js
4. Add ng directive Ng-app, Ng-controller
5. Define the table through the Wj-flex-grid directive and set the data source

App.js File:
var app = Angular.module (' app ', [' WJ ']);

Control.js file:
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],              &Nbsp;  date: new date (2014, i % 12, i % 28),                 amount: math.random ()  * 10000,                 active: i % 4 == 0             });        }         return data;    }     $scope. Data = getdata (30);});
The result of the operation is exactly the same as that of pure JS.
Through the two examples above, you can see whether it is in pureJsis still inAngularJSUsed inFlexGridare very simple. Especially inAngularJSIn the framework throughWijmoCustom-DefinedAngularInstructionsWj-flex-gridUsing tabular controls is easy.WijmoSupportAngularJS、AngularJS 2,Reactjs,knockoutjs,vuejs,Ionic, and so on, are not in the one by one example. FlexGrid features include sorting, filtering, grouping, paging, cell merging, freezing, formatting, conditional styles, cell templates, themes, tree structures, and more. 
Source code Download

This article is from the "qiming" blog, please be sure to keep this source http://houbo.blog.51cto.com/3929133/1891710
Tabular controls that can be used in a variety of front-end frameworks