HTML:
Code: Select all
<!doctype html>
<html>
<head>
<style>
.grid {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
div.grid {
font-family: sans-serif;
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
}
</style>
<link href="https://cdn.jsdelivr.net/npm/tabulator-tables@6.3.1/dist/css/tabulator.min.css" rel="stylesheet">
</head>
<body>
<div class="grid" id="array-grid"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/tabulator-tables@6.3.1/dist/js/tabulator.min.js"></script>
<script>
var table;
var tabledata = [
{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
];
table = new Tabulator("#array-grid", {
data:tabledata,
height:false,
editTriggerEvent:"dblclick",
columns:[
{title:"Name", field:"name", width:150, resizable:true, editor:"input"},
{title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
{title:"Favourite Color", field:"col"},
{title:"Date of Birth", field:"dob", sorter:"date", hozAlign:"center"},
],
});
table.on("cellEdited", function(cell) {
let column = cell.getColumn();
let row = cell.getRow();
window.OnCellEdited(row.getIndex(), column.getField(), cell.getValue());
});
</script>
</html>Code: Select all
EnableExplicit
Declare OnCellEdited(params.s)
OpenWindow(0, 100, 100, 640, 480, "Grid", #PB_Window_SystemMenu | #PB_Window_Invisible)
WebViewGadget(0, 0, 0, WindowWidth(0), WindowHeight(0), #PB_WebView_Debug)
SetGadgetText(0, "file://" + GetCurrentDirectory() + "grid.html")
BindWebViewCallback(0, "OnCellEdited", @OnCellEdited())
HideWindow(0, #False)
Repeat : Until WaitWindowEvent() = #PB_Event_CloseWindow
Procedure OnCellEdited(params.s)
Protected json.i, id, column.s, value.s
json = ParseJSON(#PB_Any, params)
If IsJSON(json)
id = GetJSONInteger(GetJSONElement(JSONValue(json), 0))
column = GetJSONString(GetJSONElement(JSONValue(json), 1))
value = GetJSONString(GetJSONElement(JSONValue(json), 2))
Debug "Row " + Str(id) + ", column '" + column + "' edited: " + value
FreeJSON(json)
EndIf
EndProcedure
