JavaScript UI library for data-driven web applications

Related tags

Frameworks w2ui
Overview

Road to 2.0

The master branch has new, in-progress version of w2ui. You might want to consider 1.5 branch that is stable and supports older browsers. Here are the goals for the new version of w2ui.

Road to 2.0 discussion

About W2UI

W2UI is a modern JavaScript UI library for building data-driven web applications. It aims to let you define UI in expressive JSON-like structures. The library has small footprint and has only one dependency - jQuery.

The library implements following UI controls:

The complete library is under 100Kb (minified & gzipped).

Quick Start

Current stable version is 1.5 Current development version is 2.0

Getting Started Guide

You can download latest stable version here: http://w2ui.com. If you want to use dev version, see dist/ folder in the master branch.

To start using the library you need to include into your page:

  • w2ui.js (or w2ui.min.js)
  • w2ui.css (or w2ui.min.css)

All the controls and their css classes are defined inside of these two files. There is no image dependencies, some images are embedded into CSS file, as well as font icons.

There is no requirement for a server side language. Node, Java, PHP, ASP, Perl or .NET all will work, as long as you can return JSON format from the server (or write a converter into JSON format on the client). Some server side example implementations can be found here.

Documentation & Demos

You can find documentation and demos here:

Bug Tracking

Have a bug or a feature request? Please open an issue here https://github.com/vitmalina/w2ui/issues. Please make sure that the same issue was not previously submitted by someone else.

Building

It is a Node.JS repository, so, you need to have node installed to install all dependencies run

npm install

To compile JS and CSS, run

gulp

It will bundle all necessary files into dist/w2ui.min.js and dist/w2ui.min.css

File Structure

- dist        - compiled JS and CSS files
- src         - source JS files
  - kickstart - module loader & router, see https://github.com/vitmalina/w2ui-starter
  - less      - LESS files (source for css)
- demos       - all demos, same as on the website
- libs        - external libs, som used in demos, etc.
- server      - server api samles (to get you started)
- specs       - some qunit test
- test        - manual testing files

Who is Using It

List of projects that use w2ui!

If you're using w2ui, I'd love to hear about it, please email to [email protected] the name of your project and a link to a public website or demo, and I will add it to the list.

Contributing

Your contributions are welcome. However, few things you need to know before contribution:

  1. Please check out latest code before changing anything. It is harder to merge if your changes will not merge clean.
  2. If you are changing JS files - do all changes in /src folder
  3. If you are changing CSS files - do all changes in LESS in /src/less/src
  4. If you want to help with unit test - do all changes in /qa
  5. If you want to change documentation - do all changes in /docs
  6. If you want to add demos - do all changes in /demos
Comments
  • W2ui grid binding

    W2ui grid binding

    I am loading 2 lakh records in the w2ui grid . Its loads perfectly . The grid has 10 columns . The issue : after l0,000 recs the grid columns and records are not in sync , the css is disturbed , records are loaded properly but columns are not aligned to it . can you help me with this issue.

    opened by priyajoseph 47
  • records status is not update to modified. Issue refrance #1552

    records status is not update to modified. Issue refrance #1552

    thanks - @mpf82 for resolved this issue : Set object is not update all records #1552 But this is not resolved completely description below

    ** records status is not update to modified.**

    This code is not fill data in changes object so my changes object is display empty.

    var updatedRows=w2ui['gridIABU'].changes;

    this red mark image

    but this is showing blank....

    all record selected but red mark identifier is not showing on records

    opened by ImAbhishekTomar 21
  • Local Sort but remote data?

    Local Sort but remote data?

    Is it possible to have remote data but local sort ? I couldn't find out how to configure such a scenario.

    This is especially required for inline editable grids: the data must be remote: to be able to load and save it, no paging is required (since the user edits the data and must see the changed cells), but the user should be able to multi-sort so that it can easier figure out what to change.

    Thank you.

    opened by hansgru 19
  • Kind of listview

    Kind of listview

    Hello, I must put my question here because on disqus(http://w2ui.com/web/docs/1.5/form/fields-custom) nobody answers. Is it possible to make custom field(type), similar to asp.net repeater, to display a list of links?, or some kind of listview that I can put in w2ui form and bind to datasource like {id:1, link:"http://google.ro"} and display like a list of links, for example:

    http://google.ro http://yahoo.com http:// ............

    Thank you!

    opened by tudorels 17
  • I had defined the row style in the records, but is invalid

    I had defined the row style in the records, but is invalid

    Hi, I meeted a bug, I had defined the row style ["background-color: red"] in the records, but is invalid. see http://jsfiddle.net/api/post/jquery/2.1/

    opened by chenduansheng 16
  • Toolbar button with two Grid

    Toolbar button with two Grid

    hello, The following code,edit button can not be enable or disable.

    var config = {
    grid1: {name: 'grid1',show: {toolbar: true,toolbarEdit: true},
    columns: .....
    },
    grid2: {name: 'grid2',show: {toolbar: true,toolbarEdit: true},
    columns: .....
    }
    };
    $().w2layout({
    name: 'layout',
    panels: [
    { type: 'left', size:'50%',content: $().w2grid(config.grid1) },
    { type: 'main', content: $().w2grid(config.grid2) }
    ]
    });
    

    help,thanks

    opened by camelhush 16
  • Rows and table too wide

    Rows and table too wide

    Hi,

    i've got two problems with the w2ui grid. I want to make a grid with expandables elements. See the picture attached to understand what i specifically want.

    1. As you can see, my rows are too wide and that make the end of them unreadable. It seems that the total width is too big, even with only one column set to 100%.
    2. When i expand my subgrids, some of my general records are hidden on the bottom of the grid. I want the grid to expand when subgrids are expanding but i can't seem to do it.

    Is this a common problem or am i doing something wrong ?

    Thanks for your work and your help. capture

    opened by rodolpheh 15
  • w2ui 1.4.3. grid not displaying

    w2ui 1.4.3. grid not displaying

    I have a previous version of w2ui 1.4.3.

    If i inspect the Grid is there but is hidden. I see it generates column headers but without values (captions). I wouldn't be asking but I am using the w2ui 1.4 grid in several projects and it works everywhere but here I can't figure out what is wrong I've been at it a couple of days now.. A have checked the objects(columns and rows) generated and everything but can't figure out the reason for such behaviour. I would really appreciate if you could take a look, or at least point me in direction in which to look.

    Console log is clean and there aren't any js errors. Here you can see the data object I've printed. w2ui console log Here you can see what is rendered on a web page w2ui web printscreen And here you can see the html element that is rendered, w2ui rendered html result.html.txt

    opened by dregos 14
  • Grid header, toolbar, footer always show in Chrome version Version 58.0.3029.110 (64-bit)

    Grid header, toolbar, footer always show in Chrome version Version 58.0.3029.110 (64-bit)

    /* w2ui 1.5.x (nightly) (c) http://w2ui.com, [email protected] */

    This version incorrectly always shows the header, footer and toolbar by default and also if configured as false in the grid component in Chrome Version 58.0.3029.110 (64-bit).

    It is okay in Edge, and Firefox.

    Jim Dale

    opened by JimmyDale 14
  • Properly formatted JSON doesn't render

    Properly formatted JSON doesn't render

    It would appear that using properly formatted JSON doesn't render anything in the grid. I'm using PHPs json_encode function to encode a string of data and although it is returned properly it doesn't render anything in the grid.

    I noticed that you use eval to objectify the data rather than jQuery's parseJSON but I can't see why? Properly formatted JSON has quotes around the object properties, but is still an object. I don't think this is the issue as, after some debugging that part of code doesn't even seem to be running.

    It looks like somewhere around line 1001 of w2grid.js callback isn't defined so a false boolean is returned rather than any actual rendering.

    opened by ahallicks 14
  • fast scrolling in Buffered Scroll example empty set

    fast scrolling in Buffered Scroll example empty set

    Hi, i just started using w2ui and as some of my friends tested it they noticed that if they scroll fast down and while loading scroll up the rows are not showing, to be able to see them you have to scroll down and then slowly up... the json is random generated with php, and everything works as long as i slowly scroll, if i scroll fast up while data is generated, everything is gone, white background where rows should be ..., and as i said, if i slowly go down to load more data and then back up i can see the rows.

    if i only move the scroll slowly this doesn't happen . any suggestion?

    i got the demo source from

    http://test.localhost/w2ui-master/demos/#!combo/combo-4

    and i have this configuration [code] var config = { grid: { name: 'grid', url : 'fake-json.php', show: { footer : true, toolbar : true }, columns: [
    { field: 'id', caption: 'ID', size: '50px', sortable: true, resizable: true }, { field: 'title', caption: 'First Name', size: '140px', sortable: true, searchable: 'text', resizable: true }, { field: 'desc', caption: 'Last Name', size: '140px', sortable: true, searchable: 'text', resizable: true }, ] } }

    function refreshGrid(auto) { w2ui.grid.autoLoad = auto; w2ui.grid.skip(0);
    }

    $(function () { $('#main').w2grid(config.grid); }); [/code] Here is a screenshot, maybe you can understand :) w2ui

    PS same happens on your demo page

    http://w2ui.com/web/demos/#!combo/combo-9

    if you scroll up fast while data is loading the rows are gone . . not all, but from a point up, see screens w2ui1 w2ui2

    opened by Wyzix33 13
  • Triggering the 'error' event in the after phase in the error() functions of the w2grid and w2form classes after clicking the 'Ok' button in the drop-down dialog box.

    Triggering the 'error' event in the after phase in the error() functions of the w2grid and w2form classes after clicking the 'Ok' button in the drop-down dialog box.

    It seems to me it would be logical to trigger the 'error' events of the after phase in the error() functions of the w2grid and w2 form classes only after the user clicks the 'Ok' button in the drop-down dialog box.

    This behavior can be useful if we want to hide a grid or a form as a reaction to an error, but at the same time we want to be sure that the user has read the error message.

    Something like this:

    this.message(msg)
        .ok(event => {
            edata.finish()
        })
    
    opened by heady-yar 0
  • Remote Source for list fields doesn't appear to work as at latest versions

    Remote Source for list fields doesn't appear to work as at latest versions

    as per the demo page https://w2ui.com/web/demos/#/fields/6

    the url property for list and multi list fields does not appear to work.

    the demo page does not work, attempting to follow the documentation also appears to not work. On the demo page the request and load events should be logging to console, however there is nothing.

    attempting to create remote data list boxes in forms also appears to have the same issue of the url property being ignored.

    opened by markusdf 0
  • Toolbar overflow does not work on mobile (iPhone 10)

    Toolbar overflow does not work on mobile (iPhone 10)

    Short description When the toolbar overflow button is clicked on the toolbar using an iPhone, the extra toolbar items do not scroll into view.

    What is current behavior Nothing happens when the toolbar overflow button is clicked using an iPhone. This prevents being able to access toolbar items that are not in the initial view on the toolbar.

    What is desired behavior The toolbar will scroll the extra toolbar items into view when the overflow button is clicked.

    Link to jsfidle/codepan with sample code See the toolbar demo

    Steps to reproduce or sample Load the toolbar demo from an iPhone to reproduce.

    opened by coltonfischer 0
  • Drag tabs between panels, containers, or divs.

    Drag tabs between panels, containers, or divs.

    Describe the problem your feature will solve. Drag tabs between two tab bars that may exist in separate panels/containers/divs.

    Describe the solution you'd like I can drag tabs within a tab bar to reorder them. I would like to be able to have two panels, say on a dashboard, and drag a tab from one to the other.

    opened by abalter 1
Owner
Vitali Malinouski
Vitali Malinouski
🌟 DataFormsJS 🌟 A minimal JavaScript Framework and standalone React and Web Components for rapid development of high quality websites and single page applications.

?? Welcome to DataFormsJS! Thanks for visiting! ?? ?? ?? ?? ?? ?? 中文 (简体) 欢迎来到 DataFormsJS Español Bienvenido a DataFormsJS Português (do Brasil) Bem

DataFormsJS 156 Dec 8, 2022
Ember.js - A JavaScript framework for creating ambitious web applications

Ember.js is a JavaScript framework that greatly reduces the time, effort and resources needed to build any web application. It is focused on making yo

Ember.js 22.4k Jan 8, 2023
Lightweight MVC library for building JavaScript applications

Spine Spine is a lightweight MVC library for building JavaScript web applications. Spine gives you structure and then gets out of your way, allowing y

Spine JS Project 3.6k Jan 4, 2023
A JavaScript Framework for Building Brilliant Applications

mithril.js What is Mithril? Installation Documentation Getting Help Contributing What is Mithril? A modern client-side JavaScript framework for buildi

null 13.5k Dec 26, 2022
A framework for real-time applications and REST APIs with JavaScript and TypeScript

A framework for real-time applications and REST APIs with JavaScript and TypeScript Feathers is a lightweight web-framework for creating real-time app

Feathers 14.2k Dec 28, 2022
The tiny framework for building hypertext applications.

Hyperapp The tiny framework for building hypertext applications. Do more with less—We have minimized the concepts you need to learn to get stuff done.

Jorge Bucaran 18.9k Jan 4, 2023
MVC framework making it easy to write realtime, collaborative applications that run in both Node.js and browsers

Derby The Derby MVC framework makes it easy to write realtime, collaborative applications that run in both Node.js and browsers. Derby includes a powe

DerbyJS 4.7k Dec 31, 2022
🙋‍♀️ 3kb library for tiny web apps

3kb library for tiny web apps. Sometimes, all you want to do is to try and do something—No boilerplate, bundlers, or complex build processes. Lucia ai

Aiden Bai 699 Dec 27, 2022
Lightweight and powerful data binding.

Rivets.js Rivets.js is a lightweight data binding and templating system that facilitates building data-driven views. It is agnostic about every aspect

Michael Richards 3.2k Dec 28, 2022
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

Supporting Vue.js Vue.js is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome ba

vuejs 201.7k Jan 8, 2023
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development. Explore Bootstrap docs » Report bug · Request feat

Bootstrap 161.1k Jan 4, 2023
A no-dependency, intuitive web framework from scratch in Javascript

Poseidon ?? Intro Poseidon is, to use a nice description by Reef, an anti-framework. It's a a no-dependency, component-based Javascript framework for

Amir Bolous 45 Nov 14, 2022
:fire: An extremely fast, React-like JavaScript library for building modern user interfaces

Inferno is an insanely fast, React-like library for building high-performance user interfaces on both the client and server. Description The main obje

Inferno 15.6k Jan 3, 2023
AngularJS - HTML enhanced for web apps!

AngularJS AngularJS lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade/Pug and

Angular 59.3k Jan 4, 2023
Cybernetically enhanced web apps

What is Svelte? Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient

Svelte 64.3k Dec 28, 2022
An open-source, self-hosted, low-code framework to build internal tools, web apps, admin panels, BI dashboards, workflows, and CRUD apps with YAML or JSON.

An open-source, self-hosted, low-code framework to build internal tools, web apps, admin panels, BI dashboards, workflows, and CRUD apps with YAML or JSON.

Lowdefy 2k Jan 4, 2023
Super minimal MVC library

Espresso.js Espresso.js is a tiny MVC library inspired by Backbone and React with a focus on simplicity and speed. We've aimed to bring the ideas of u

TechLayer 534 Dec 11, 2022
Simple and elegant component-based UI library

Simple and elegant component-based UI library Custom components • Concise syntax • Simple API • Tiny Size Riot brings custom components to all modern

Riot.js 14.7k Jan 4, 2023
An unofficial SmartThings websocket API library (alpha)

An unofficial SmartThings websocket API library (alpha) ?? Installation This is a Node.js module available through the npm registry. $ npm i -S smart-

Stephen Mendez 4 Sep 20, 2021