DHTMLX Grid

Порядок создания таблицы:
1. Create the grid object
2. Apply settings
3. Initialize
4. Add data

Как и все остальные DHTMLX объекты, DHTMLX grid можно прикрепить к DOM-элементу или к лейауту/ячейке.

document.body.innerHTML = "<div id='myGridCont'></div>";
var myGrid = new dhtmlXGridObject("myGridCont");
myGrid.setImagePath(config.imagePath);
myGrid.setHeader(["Column1", "Column2", "Column3"]);
myGrid.init();

// или

var myGrid = appLayout.cells("a").attachGrid();
myGrid.setImagePath(config.imagePath);
myGrid.setHeader(["Column1","Column2","Column3"]);
myGrid.init();

Типы столбцов:
• ro (readonly)
• ed (editor)
• txt (textarea)
• ch (checkbox)
• ra (radio button)
• co (combobox)

Методы:
var myGrid = appLayout.cells("a").attachGrid();

myGrid.setImagePath(config.imagePath);

myGrid.setHeader(["Column1", "Column2", "Column3"]);

// * - означает автоматическую длину
myGrid.setInitWidths("125,95,*");

myGrid.setColAlign("right,center,left");

myGrid.init(); // инициализация

myGrid.addRow(1,["test1","test2","test3"]);
myGrid.addRow(2,["test1","test2","test3"]);

myGrid.setColTypes("ro,ro,ro");

myGrid.getSelectedRowId();

myGrid.clearSelection();

myGrid.clearAll();

// Можно парсить XML string, CSV string, XML island, XML object, JSON object, and JavaScript array
myGrid.parse(data, "json");

События:
myGrid.attachEvent("onRowDblClicked", function(rowId){
 console.log(rowId);
});

myGrid.attachEvent("onRowSelect", function(rowId){
 console.log(rowId);
});

Пример добавления таблицы в файл app.js:
// Grid
var appGrid;
dhtmlxEvent(window, "load", function(){
 // create grid
 appGrid = appLayout.cells("a").attachGrid();
 appGrid.setHeader(["ID","First Name","MI",
 "Last Name","DOB","Email","Active"]);
 appGrid.setColTypes("ro,ro,ro,ro,ro,ro,ro");
 appGrid.setInitWidths("35,*,35,*,75,*,55");
 appGrid.setColAlign("center,left,center,left,center,left,center");
 appGrid.setImagePath(config.imagePath);
 appGrid.init();

 // attach grid events
 appGrid.attachEvent("onRowDblClicked", function(rowId){
 callbacks.editClick(rowId);
 });
 appGrid.attachEvent("onRowSelect", function(){
 callbacks.setToolbarItemStates();
 });
 // reset grid and load it with data
 callbacks.refreshGrid();
});

В файле app.js доработаем методы объекта callbacks:
// This method will disable and enable the remove button on the toolbar.
setToolbarItemStates: function(){
 if(appGrid.getSelectedRowId()){
 appToolbar.enableItem(3);
 }else{
 appToolbar.disableItem(3);
 }
},

// remove the selected user from the localStorage with the storage method removeUser
removeClick: function(){
 storage.removeUser(appGrid.getSelectedRowId());
},

//  updates the grid with the most recent data
refreshGrid: function(){
 appGrid.clearAll();
 appGrid.parse(storage.getUserGrid(), "json");
 callbacks.setToolbarItemStates();
},

// The data in the localStorage is changed whenever a user is added, edited, or removed.
dataChanged: function(){
 callbacks.refreshGrid();
}


Пример добавления строк:
storage.createUser({firstName: "George", dob: new Date("1991")});
storage.createUser({firstName: "Steve", dob: new Date("1982")});


Очистка локального хранилища:
localStorage.clear();


Теги: