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

Source: Internet
Author: User

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.


(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=" 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

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.