1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
|
<!doctype html>
<html>
<head>
<script type="text/javascript" src="./webix.js"></script>
<link rel="stylesheet" type="text/css" href="./webix.css">
<title>TEST DATABASE</title>
</head>
<body>
<script>
webix.ready(function(){
var grid = {
id:"grid",
view:"datatable",
css:"my_style",
select:"row",
columns:[
{id:"column_1", header:["Column_1", {content:"textFilter"}], editor:"text", fillspace:0.5},
{id:"column_2", header:["Column_2", {content:"textFilter"}], editor:"text", fillspace:0.3},
{id:"column_3", header:["Column_3", {content:"textFilter"}], editor:"text", fillspace:0.2},
{id:"column_4", header:["Column_4", {content:"textFilter"}], editor:"text", fillspace:0.2},
{id:"column_5", header:["Column_5", {content:"textFilter"}], editor:"text", fillspace:0.25},
<!-- {id:"status", header:["Status", {content:"selectFilter"}], editor:"select", options:["Active", "Closed"], fillspace:0.2}, -->
],
editable:true, editaction:"dblclick"
};
function add_row(){
$$("grid").add({name:"New item"});
}
function delete_row(){
$$("grid").remove($$("grid").getSelectedId(true));
}
webix.ui({
rows:[
{view:"toolbar", elements:[
{view:"button", value:"New item", click:add_row},
{view:"button", value:"Delete item", click:delete_row},
{gravity:2}
]},
grid
]
});
})
</script>
</body>
</html> |
Partager