source: main/trunk/model-sites-dev/cambridge-museum/collect/waikato-independent/pre-import/EditableDatabaseTable/WebContent/index.html@ 34493

Last change on this file since 34493 was 34493, checked in by davidb, 4 years ago

Base project for providing jquery/jquery-ui controlled interface to editing a database table
File size: 5.6 KB
Line 
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Making DataTable fully editable</title>
5 <link href="media/dataTables/demo_page.css" rel="stylesheet" type="text/css" />
6 <link href="media/dataTables/demo_table.css" rel="stylesheet" type="text/css" />
7 <link href="media/dataTables/demo_table_jui.css" rel="stylesheet" type="text/css" />
8 <link href="media/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
9 <link href="media/themes/smoothness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" media="all" />
10 <script src="scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
11 <script src="scripts/jquery.dataTables.min.js" type="text/javascript"></script>
12 <script src="scripts/jquery.dataTables.editable.js" type="text/javascript"></script>
13 <script src="scripts/jquery.jeditable.js" type="text/javascript"></script>
14 <script src="scripts/jquery.validate.js" type="text/javascript"></script>
15 <script src="scripts/jquery-ui.js" type="text/javascript"></script>
16 <script type="text/javascript">
17 $(document).ready(function () {
18 $("#companies").dataTable({
19 "bServerSide": true,
20 "sAjaxSource": "/EditableDataTable/CompanyAjaxDataSource",
21 "bProcessing": true,
22 "sPaginationType": "full_numbers",
23 "bJQueryUI": true,
24 "aoColumns": [
25 { "sName": "ID",
26 "bSearchable": false,
27 "bSortable": false,
28 "bVisible": false
29 },
30 { "sName": "COMPANY_NAME" },
31 { "sName": "ADDRESS" },
32 { "sName": "TOWN" }
33 ]
34 }).makeEditable({
35 "aoColumns": [
36 {
37 cssclass: "required"
38 },
39 null,//null for read-only columns
40 {
41 indicator: 'Saving...',
42 tooltip: 'Click to select town',
43 loadtext: 'loading...',
44 type: 'select',
45 onblur: 'submit',
46 data: '{"London":"London","Liverpool":"Liverpool","Portsmouth": "Portsmouth","Edinburgh":"Edinburgh", "Blackburn":"Blackburn","Kent":"Kent","Essex":"Essex","Oxon":"Oxon","Lothian":"Lothian", "West Sussex":"West Sussex","Lanarkshire":"Lanarkshire", "Birmingham":"Birmingham","East Sussex":"East Sussex","Surrey":"Surrey"}'
47 }
48 ]
49 });
50 });
51 </script>
52 </head>
53 <body id="dt_example">
54 <div id="container">
55 <div id="demo_jui">
56 <button id="btnAddNewRow" value="Ok">Add new company...</button>
57 <button id="btnDeleteRow" value="cancel">Delete selected company</button>
58 <table id="companies" class="display">
59 <thead>
60 <tr>
61 <th>ID</th>
62 <th>Company name</th>
63 <th>Address</th>
64 <th>Town</th>
65 </tr>
66 </thead>
67 <tbody>
68
69 </tbody>
70 </table>
71 </div>
72
73
74 <form id="formAddNewRow" action="#" title="Add new company">
75 <input type="hidden" id="id" name="id" value="-1" rel="0" />
76 <label for="name">Name</label><input type="text" name="name" id="name" class="required" rel="1" />
77 <br />
78 <label for="name">Address</label><input type="text" name="address" id="address" rel="2" />
79 <br />
80 <label for="name">Postcode</label><input type="text" name="postcode" id="postcode"/>
81 <br />
82 <label for="name">Town</label><input type="text" name="town" id="town" rel="3"/>
83 <br />
84 <label for="name">Country</label><select name="country" id="country">
85 <option value="1">Serbia</option>
86 <option value="2">France</option>
87 <option value="3">Italy</option>
88 </select>
89 <br />
90 </form>
91
92 </div>
93 </body>
94</html>
95
96<!--
97
98 <tr>
99 <td>Emkay Entertainments</td>
100 <td>Nobel House, Regent Centre</td>
101 <td>Lothian</td>
102 </tr>
103 <tr>
104 <td>The Empire</td>
105 <td>Milton Keynes Leisure Plaza</td>
106 <td>Buckinghamshire</td>
107 </tr>
108 <tr>
109 <td>Asadul Ltd</td>
110 <td>Hophouse</td>
111 <td>Essex</td>
112 </tr>
113 <tr>
114 <td>Ashley Mark Publishing Company</td>
115 <td>1-2 Vance Court</td>
116 <td>Tyne &amp; Wear</td>
117 </tr>
118 <tr>
119 <td>MuchMoreMusic Studios</td>
120 <td>Unit 29</td>
121 <td>London</td>
122 </tr>
123 <tr>
124 <td>Audio Records Studios</td>
125 <td>Oxford Street</td>
126 <td>London</td>
127 </tr>
128
129
130 -->
Note: See TracBrowser for help on using the repository browser.