w2ui

npm install w2ui

<link rel="stylesheet" href="w2ui.css" />
<script src="w2ui.js"></script>

import {
  w2grid,
  w2layout,
  w2sidebar,
  w2toolbar,
  w2tabs,
  w2form,
  w2popup,
  w2utils,
} from "w2ui";

v2.0 has NO jQuery dependency.

let grid = new w2grid({
  name: "myGrid",
  box: "#grid",
  columns: [
    { field: "fname", text: "First Name", size: "30%" },
    { field: "lname", text: "Last Name", size: "30%" },
  ],
  records: [
    { recid: 1, fname: "John", lname: "Doe" },
    { recid: 2, fname: "Jane", lname: "Smith" },
  ],
});

let grid = new w2grid({
  name: "myGrid",
  box: "#grid",
  columns: [
    {
      field: "fname",
      text: "First Name",
      size: "30%",
      sortable: true,
      searchable: true,
    },
    {
      field: "lname",
      text: "Last Name",
      size: "30%",
      sortable: true,
    },
    {
      field: "email",
      text: "Email",
      size: "40%",
    },
  ],
  records: [
    { recid: 1, fname: "John", lname: "Doe", email: "jdoe@email.com" },
    { recid: 2, fname: "Jane", lname: "Doe", email: "jane@email.com" },
  ],
});

grid.add({ recid: 3, fname: "Bob" });
grid.remove(1, 2);
grid.set(1, { fname: "Updated" });
grid.get(1);
grid.find({ fname: "John" });

Add, remove, update records.

grid.select(1, 2);
grid.unselect(1);
grid.getSelection();

Selection management.

grid.search("fname", "John");
grid.searchReset();
grid.sort("fname", "asc");

Search and sort.

grid.reload();
grid.refresh();
grid.editField(recid, column);
grid.save();

Reload, refresh, inline edit.

let grid = new w2grid({
  name: "myGrid",
  box: "#grid",
  columns: [{ field: "fname", text: "First Name", size: "30%" }],
  searches: [
    { field: "fname", label: "First Name", type: "text" },
    { field: "lname", label: "Last Name", type: "text" },
    { field: "age", label: "Age", type: "int" },
  ],
  records: [
    /* ... */
  ],
});

let layout = new w2layout({
  name: "myLayout",
  box: "#layout",
  panels: [
    { type: "top", size: 50, html: "Top" },
    { type: "left", size: 200, resizable: true, html: "Left" },
    { type: "main", html: "Main" },
    { type: "right", size: 200, resizable: true, hidden: true },
    { type: "preview", size: 200, resizable: true, hidden: true },
    { type: "bottom", size: 50, html: "Bottom" },
  ],
});

Panels: top, left, main, right, preview, bottom.

layout.html("main", "<div>content</div>");
layout.show("right");
layout.hide("right");
layout.toggle("right");

Set content, show/hide panels.

layout.set("left", { size: 300 });
layout.sizeTo("left", 300);

Update panel properties.

layout.render();
layout.refresh();
layout.destroy();

Render, refresh, destroy.

let sidebar = new w2sidebar({
  name: "mySidebar",
  box: "#sidebar",
  nodes: [
    {
      id: "general",
      text: "General",
      group: true,
      expanded: true,
      nodes: [
        { id: "grid", text: "Grid", icon: "icon-page" },
        { id: "layout", text: "Layout", icon: "icon-page" },
      ],
    },
  ],
  onClick: function (event) {
    console.log("Clicked:", event.target);
  },
});

sidebar.add("parent-id", { id: "new", text: "New" });
sidebar.remove("node-id");
sidebar.set("node-id", { text: "Updated" });
sidebar.get("node-id");

Add, remove, update nodes.

sidebar.select("node-id");
sidebar.unselect("node-id");

Selection management.

sidebar.expand("node-id");
sidebar.collapse("node-id");
sidebar.toggle("node-id");
sidebar.scrollIntoView("node-id");

Expand/collapse, scroll to node.

let toolbar = new w2toolbar({
  name: "myToolbar",
  box: "#toolbar",
  items: [
    { type: "button", id: "save", text: "Save", icon: "icon-save" },
    { type: "break" },
    { type: "check", id: "bold", text: "Bold", icon: "icon-bold" },
    { type: "radio", id: "align-left", group: "1", text: "Left" },
    { type: "radio", id: "align-center", group: "1", text: "Center" },
    { type: "spacer" },
    {
      type: "menu",
      id: "file",
      text: "File",
      items: [
        { id: "new", text: "New" },
        { id: "open", text: "Open" },
      ],
    },
  ],
  onClick: function (event) {
    console.log("Item:", event.target);
  },
});

toolbar.set("save", { disabled: true });
toolbar.get("save");
toolbar.show("save");
toolbar.hide("save");

Update, get, show/hide items.

toolbar.enable("save");
toolbar.disable("save");
toolbar.check("bold");
toolbar.uncheck("bold");

Enable/disable, check/uncheck items.

let tabs = new w2tabs({
  name: "myTabs",
  box: "#tabs",
  active: "tab1",
  reorder: true,
  tabs: [
    { id: "tab1", text: "Tab 1" },
    { id: "tab2", text: "Tab 2", closable: true },
    { id: "tab3", text: "Tab 3", disabled: true },
  ],
  onClick: function (event) {
    console.log("Tab:", event.target);
  },
  onClose: function (event) {
    console.log("Closing:", event.target);
  },
});

tabs.add({ id: "new", text: "New Tab" });
tabs.remove("tab2");
tabs.select("tab1");
tabs.set("tab1", { text: "Updated" });
tabs.get("tab1");

Add, remove, select, update tabs.

tabs.show("tab3");
tabs.hide("tab3");
tabs.enable("tab3");
tabs.disable("tab3");

Show/hide, enable/disable tabs.

let form = new w2form({
  name: "myForm",
  box: "#form",
  fields: [
    {
      field: "first_name",
      type: "text",
      required: true,
      html: {
        label: "First Name",
        attr: 'style="width: 200px"',
      },
    },
    {
      field: "last_name",
      type: "text",
      html: { label: "Last Name" },
    },
    {
      field: "email",
      type: "email",
      html: { label: "Email" },
    },
    {
      field: "birthday",
      type: "date",
      html: { label: "Birthday" },
    },
  ],
  record: {
    first_name: "John",
    last_name: "Doe",
  },
  actions: {
    Save: function () {
      this.save();
    },
    Reset: function () {
      this.clear();
    },
  },
});

form.record;
form.get("first_name");
form.set("first_name", { required: false });

Access record, get/set field config.

form.getValue("first_name");
form.setValue("first_name", "Jane");

Get/set field values.

form.validate();
form.save();
form.clear();
form.reload();
form.refresh();

Validate, save, clear, reload.

{
  field: 'color',
  type: 'list',
  html: { label: 'Color' },
  options: {
    items: ['Red', 'Green', 'Blue']
  }
}

w2popup.open({
  title: "My Popup",
  body: "<div>Hello World</div>",
  width: 500,
  height: 300,
  modal: true,
  showClose: true,
  showMax: false,
  actions: {
    Ok: function () {
      w2popup.close();
    },
    Cancel: function () {
      w2popup.close();
    },
  },
});

w2popup.open({
  /* options */
});
w2popup.close();
w2popup.toggle();

Open, close, maximize/restore.

w2popup.lock("Loading...");
w2popup.unlock();

Lock with message, unlock.

w2popup.message({
  body: "Message text",
  buttons: "<button>OK</button>",
});

Show message inside popup.

widget.render(box);
widget.refresh();
widget.resize();
widget.destroy();

Render, refresh, resize, destroy.

widget.box; // Container element
widget.name; // Widget name (unique!)

Properties for all widgets.

widget.on("click", function (event) {
  console.log(event);
  event.done(() => {
    // After event processed
  });
});

Listen to events.

widget.off("click");
widget.off("click", handler);

Remove listeners.

widget.trigger("myEvent", { detail: "data" });

Trigger custom event.

v2.0 has NO jQuery dependency. Code from v1.5 using jQuery patterns needs updates.

Every widget MUST have a unique name property. Global w2ui[name] registry is used - duplicates cause errors.

Widgets must render after DOM is ready. If box is specified in constructor, widget renders automatically. Otherwise call .render(box) manually.

Grid records MUST have a recid property (not id). This is the unique identifier for grid operations.

// ✓ Correct
{ recid: 1, fname: 'John' }

// ✗ Wrong
{ id: 1, fname: 'John' }