this is a rudimentary code to show how to use the w2ui-Grid with SpiderBasic
Prerequisites:
Download the the necessary css- und js-files from http://w2ui.com/web/ and extract them under resources/w2ui in your application directory
w2uiGridGadgetLight.sbi
Code: Select all
EnableExplicit
DeclareModule w2uiGrid
Global IsInitialized
Declare Init(Callback)
Declare Gadget(Gadget, x, y, Width, Height)
Declare SetColumns(Gadget, Columns)
Declare GetColumns(Gadget)
Declare GetRecords(Gadget)
Declare SetRecords(Gadget, Records)
EndDeclareModule
Module w2uiGrid
EnableExplicit
Macro GetSelector
! var selector = $(spider_GadgetID(v_gadget).div).find('.dijitContentPane');
EndMacro
Procedure Init(Callback)
! $('<link rel="stylesheet" type="text/css">').attr('href','resources/w2ui/w2ui-1.5.rc1.min.css').appendTo('head');
! require(["resources/w2ui/w2ui-1.5.rc1.min.js"],
! function() {
IsInitialized = #True
! v_callback();
! }
! );
EndProcedure
Procedure Gadget(Gadget, x, y, Width, Height)
If Gadget = #PB_Any
Gadget = ContainerGadget(Gadget, x, y, Width, Height)
Else
ContainerGadget(Gadget, x, y, Width, Height)
EndIf
CloseGadgetList()
GetSelector
! if (typeof w2ui['g_' + v_gadget] != 'undefined') w2ui['g_' + v_gadget].destroy();
! selector.w2grid({
! name: 'g_' + v_gadget,
! show: {
! toolbar: true,
! toolbarAdd: true,
! toolbarEdit: true,
! toolbarDelete: true,
! toolbarSave: true,
! },
! });
; Workaround...
! w2ui["g_" + v_gadget].show.toolbar = false;
! w2ui["g_" + v_gadget].toolbar.hide("w2ui-add");
! w2ui["g_" + v_gadget].toolbar.hide("w2ui-edit");
! w2ui["g_" + v_gadget].toolbar.hide("w2ui-delete");
! w2ui["g_" + v_gadget].toolbar.hide("w2ui-save");
ProcedureReturn Gadget
EndProcedure
Procedure SetRecords(Gadget, Records)
! w2ui["g_" + v_gadget].records = v_records;
! w2ui["g_" + v_gadget].refresh();
EndProcedure
Procedure GetRecords(Gadget)
! return w2ui["g_" + v_gadget].records;
EndProcedure
Procedure SetColumns(Gadget, Columns)
! w2ui["g_" + v_gadget].columns = v_columns;
! w2ui["g_" + v_gadget].refresh();
EndProcedure
Procedure GetColumns(Gadget)
! return w2ui["g_" + v_gadget].columns;
EndProcedure
Procedure Refresh(Gadget)
! w2ui["g_" + v_gadget].refresh();
EndProcedure
Procedure Clear(Gadget)
! w2ui["g_" + v_gadget].clear();
! w2ui["g_" + v_gadget].columns = [];
! w2ui["g_" + v_gadget].refresh();
EndProcedure
EndModule
Code: Select all
XIncludeFile "w2uiGridGadgetLight.sbi"
Enumeration
#Window
#GridGadget
EndEnumeration
Procedure SizeWindowEvent()
ResizeGadget(#GridGadget, #PB_Ignore, #PB_Ignore, WindowWidth(#Window), WindowHeight(#Window))
EndProcedure
Procedure Main()
OpenWindow(#Window, #PB_Ignore, #PB_Ignore, 800, 600, "w2uiGridGadgetTest", #PB_Window_SizeGadget | #PB_Window_ScreenCentered | #PB_Window_SystemMenu)
BindEvent(#PB_Event_SizeWindow, @SizeWindowEvent(), #Window)
w2uiGrid::Gadget(#GridGadget, 0, 0, WindowWidth(#Window), WindowHeight(#Window))
; Columns
Protected Columns
! v_columns = [
! { field: 'recid', caption: 'ID', size: '50px', sortable: true, attr: 'align=center' },
! { field: 'lname', caption: 'Last Name', size: '30%', sortable: true, resizable: true },
! { field: 'fname', caption: 'First Name', size: '30%', sortable: true, resizable: true },
! { field: 'email', caption: 'Email', size: '40%', resizable: true },
! { field: 'sdate', caption: 'Start Date', size: '120px', resizable: true },
! ];
w2uiGrid::SetColumns(#GridGadget, Columns)
; Records
Protected Records
! v_records = [
! { recid: 1, fname: 'John', lname: 'doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
! { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
! { recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
! { recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
! { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
! { recid: 6, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
! { recid: 7, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
! { recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
! { recid: 9, fname: 'Sergei', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
! { recid: 20, fname: 'Jill', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
! { recid: 21, fname: 'Frank', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
! { recid: 22, fname: 'Peter', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
! { recid: 23, fname: 'Andrew', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
! { recid: 24, fname: 'Manny', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
! { recid: 25, fname: 'Ben', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
! { recid: 26, fname: 'Doer', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
! { recid: 27, fname: 'Shashi', lname: 'bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' }
! ];
w2uiGrid::SetRecords(#GridGadget, Records)
Records = w2uiGrid::GetRecords(#GridGadget)
! v_records.push({ recid: 28, fname: 'Av', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012' });
w2uiGrid::SetRecords(#GridGadget, Records)
EndProcedure
w2uiGrid::Init(@Main())
Edit: Add destroy-Command to avoid 'The parameter "name" is not unique' - Message (see posting from karu below)