-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
71 lines (70 loc) · 4.21 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
70
71
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<table id="list4"></table>
</body>
</html>
<script src="jquery.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="jquery.ui.position.js"></script>
<script src="jquery.contextMenu.js"></script>
<link href="jquery.contextMenu.css" rel="stylesheet" />
<script src="jquery.jqGrid.js"></script>
<link href="ui.jqgrid.css" rel="stylesheet" />
<script>
jQuery("#list4").jqGrid({
datatype: "local",
width: 700,
height: 250,
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [
{ name: 'id', index: 'id', width: 60, sorttype: "int", hidden: true, visibility: "visible" },
{ name: 'invdate', index: 'invdate', width: 90, sorttype: "date", visibility: "visible" },
{ name: 'name', index: 'name', width: 100, visibility: "visible" },
{ name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float", visibility: "visible" },
{ name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float", visibility: "visible" },
{ name: 'total', index: 'total', width: 80, align: "right", sorttype: "float", visibility: "fixed" },
{ name: 'note', index: 'note', width: 150, sortable: false, visibility: "visible" }
],
multiselect: true,
caption: "Manipulating Array Data",
shrinkToFit: false,
subGrid: true,
subGridRowExpanded: function (subgridDivId, rowId) {
var subgridTableId = subgridDivId + "_t";
$("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");
$("#" + subgridTableId).jqGrid({
datatype: 'local',
data: mydata,
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [
{ name: 'id', index: 'id', width: 60, sorttype: "int", hidden: true, visibility: "visible" },
{ name: 'invdate', index: 'invdate', width: 90, sorttype: "date", visibility: "visible" },
{ name: 'name', index: 'name', width: 100, visibility: "visible" },
{ name: 'amount', index: 'amount', width: 80, align: "right", sorttype: "float", visibility: "visible" },
{ name: 'tax', index: 'tax', width: 80, align: "right", sorttype: "float", visibility: "visible" },
{ name: 'total', index: 'total', width: 80, align: "right", sorttype: "float", visibility: "fixed" },
{ name: 'note', index: 'note', width: 150, sortable: false, visibility: "visible" }
]
});
}
});
var mydata = [
{ id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "4", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "5", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "6", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },
{ id: "7", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },
{ id: "8", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },
{ id: "9", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }
];
for (var i = 0; i <= mydata.length; i++)
jQuery("#list4").jqGrid('addRowData', i + 1, mydata[i]);
</script>