/
index.html
69 lines (59 loc) · 2.57 KB
/
index.html
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>XFields for JSGrid example</title>
<script src="db.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.10.2/jsoneditor.min.css" rel="stylesheet"/>
</head>
<body>
<div id="jsGrid"></div>
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsoneditor/9.10.2/jsoneditor.min.js"></script>
<script src="../src/lib/jsgrid.popup.basic.js"></script>
<script src="../src/jsgrid.field.Xcheckbox.js"></script>
<script src="../src/jsgrid.field.Xselect.js"></script>
<script src="../src/jsgrid.field.Xtextarea.js"></script>
<script src="../src/jsgrid.field.Xjsoneditor.js"></script>
<script src="../src/jsgrid.field.XimgField.js"></script>
<script src="../src/jsgrid.field.XRowSelectField.js"></script>
<script>
$(function () {
$("#jsGrid").jsGrid({
width: "100%",
sorting: true,
paging: true,
editing: true,
filtering: true,
autoload: true,
controller: db,
fields: [
{name: "Name", type: "text", width: 150},
{name: "Age", type: "number", width: 50},
{name: "Address", type: "Xtextarea", width: 200},
{name: "Country", type: "Xselect", items: db.countries, valueField: "Id", textField: "Name"},
{name: "Religion", type: "Xselect", items: db.religion, valueField: "Id", textField: "Name"},
{name: "Married", type: "Xcheckbox", title: "Is Married"},
{name: "Json", type: "Xjsoneditor", title: "Json"},
{name: "img", type: "XimgField", title: "Img", width: 30},
{
type: "XRowSelectField", width: 10,
selectedItemsAction: function (selectedItems) {
console.log("Selected:", selectedItems);
//To unselect all call this.unselectAll();
},
buttonText: "Some action",
},
{type: "control"}
]
});
});
</script>
</body>
</html>