comparison: www/js/inv_suppliers.js
www/js/inv_suppliers.js
- changeset 208
- 578c78abf058
- parent 64
- 5d5fc6f7cbfe
- child 488
- 77f1617b6994
equal
deleted
inserted
replaced
| 207:f87ff15be531 | 208:578c78abf058 |
|---|---|
| 1 /***************************************************************************** | 1 /***************************************************************************** |
| 2 * Copyright (C) 2014-2018 | 2 * Copyright (C) 2014-2019 |
| 3 * | 3 * |
| 4 * Michiel Broek <mbroek at mbse dot eu> | 4 * Michiel Broek <mbroek at mbse dot eu> |
| 5 * | 5 * |
| 6 * This file is part of Brewery Management System | 6 * This file is part of Brewery Management System |
| 7 * | 7 * |
| 133 $("#city").jqxInput({ theme: theme, width: 350, height: 23 }); | 133 $("#city").jqxInput({ theme: theme, width: 350, height: 23 }); |
| 134 $("#country").jqxInput({ theme: theme, width: 250, height: 23 }); | 134 $("#country").jqxInput({ theme: theme, width: 250, height: 23 }); |
| 135 $("#website").jqxInput({ theme: theme, width: 640, height: 23 }); | 135 $("#website").jqxInput({ theme: theme, width: 640, height: 23 }); |
| 136 $("#email").jqxInput({ theme: theme, width: 640, height: 23 }); | 136 $("#email").jqxInput({ theme: theme, width: 640, height: 23 }); |
| 137 $("#phone").jqxInput({ theme: theme, width: 175, height: 23 }); | 137 $("#phone").jqxInput({ theme: theme, width: 175, height: 23 }); |
| 138 $("#notes").jqxInput({ theme: theme, width: 640, height: 48 }); | 138 $("#notes").jqxInput({ theme: theme, width: 800, height: 100 }); |
| 139 | 139 |
| 140 var dataAdapter = new $.jqx.dataAdapter(source); | 140 var dataAdapter = new $.jqx.dataAdapter(source); |
| 141 var editrow = -1; | 141 var editrow = -1; |
| 142 // initialize jqxGrid | 142 // initialize jqxGrid |
| 143 $("#jqxgrid").jqxGrid({ | 143 $("#jqxgrid").jqxGrid({ |
| 149 renderstatusbar: function (statusbar) { | 149 renderstatusbar: function (statusbar) { |
| 150 var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>"); | 150 var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>"); |
| 151 var addButton = $("<div style='float: right; margin-right: 15px;'><img style='position: relative; margin-top: 2px;' src='images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Nieuw</span></div>"); | 151 var addButton = $("<div style='float: right; margin-right: 15px;'><img style='position: relative; margin-top: 2px;' src='images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Nieuw</span></div>"); |
| 152 container.append(addButton); | 152 container.append(addButton); |
| 153 statusbar.append(container); | 153 statusbar.append(container); |
| 154 addButton.jqxButton({ theme: theme, width: 120, height: 20 }); | 154 addButton.jqxButton({ theme: theme, width: 90, height: 20 }); |
| 155 // add new row. | 155 // add new row. |
| 156 addButton.click(function (event) { | 156 addButton.click(function (event) { |
| 157 editrow = -1; | 157 editrow = -1; |
| 158 $("#popupWindow").jqxWindow({ position: { x: 230, y: 30 } }); | 158 $("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } }); |
| 159 $("#name").val(''); | 159 $("#name").val('Nieuwe leverancier'); |
| 160 $("#address").val(''); | 160 $("#address").val(''); |
| 161 $("#city").val(''); | 161 $("#city").val(''); |
| 162 $("#zip").val(''); | 162 $("#zip").val(''); |
| 163 $("#country").val(''); | 163 $("#country").val('Nederland'); |
| 164 $("#website").val(''); | 164 $("#website").val(''); |
| 165 $("#email").val(''); | 165 $("#email").val(''); |
| 166 $("#phone").val(''); | 166 $("#phone").val(''); |
| 167 $("#notes").val(''); | 167 $("#notes").val(''); |
| 168 $("#popupWindow").jqxWindow('open'); | 168 $("#popupWindow").jqxWindow('open'); |
| 169 }); | 169 }); |
| 170 }, | 170 }, |
| 171 filterable: true, | 171 filterable: false, |
| 172 filtermode: 'excel', | |
| 173 columns: [ | 172 columns: [ |
| 174 { text: 'Leverancier naam', datafield: 'name' }, | 173 { text: 'Leverancier naam', datafield: 'name' }, |
| 175 { text: 'Adres', datafield: 'address', width: 300 }, | 174 { text: 'Adres', datafield: 'address', width: 300 }, |
| 176 { text: 'Plaats', datafield: 'city', width: 250 }, | 175 { text: 'Plaats', datafield: 'city', width: 250 }, |
| 177 { text: 'Land', datafield: 'country', width: 200 }, | 176 { text: 'Land', datafield: 'country', width: 200 }, |
| 178 { text: 'Telefoon', datafield: 'phone', width: 175 }, | 177 { text: 'Telefoon', datafield: 'phone', width: 175 }, |
| 179 { text: 'Wijzig', datafield: 'Edit', width: 120, align: 'center', columntype: 'button', cellsrenderer: function () { | 178 { text: 'Wijzig', datafield: 'Edit', width: 100, align: 'center', columntype: 'button', cellsrenderer: function () { |
| 180 return "Wijzig"; | 179 return "Wijzig"; |
| 181 }, buttonclick: function (row) { | 180 }, buttonclick: function (row) { |
| 182 // open the popup window when the user clicks a button. | 181 // open the popup window when the user clicks a button. |
| 183 editrow = row; | 182 editrow = row; |
| 184 $("#popupWindow").jqxWindow({ position: { x: 230, y: 30 } }); | 183 $("#popupWindow").jqxWindow({ position: { x: 110, y: 30 } }); |
| 185 // get the clicked row's data and initialize the input fields. | 184 // get the clicked row's data and initialize the input fields. |
| 186 var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); | 185 var dataRecord = $("#jqxgrid").jqxGrid('getrowdata', editrow); |
| 187 $("#name").val(dataRecord.name); | 186 $("#name").val(dataRecord.name); |
| 188 $("#address").val(dataRecord.address); | 187 $("#address").val(dataRecord.address); |
| 189 $("#city").val(dataRecord.city); | 188 $("#city").val(dataRecord.city); |
| 199 } | 198 } |
| 200 ] | 199 ] |
| 201 }); | 200 }); |
| 202 // initialize the popup window and buttons. | 201 // initialize the popup window and buttons. |
| 203 $("#popupWindow").jqxWindow({ | 202 $("#popupWindow").jqxWindow({ |
| 204 width: 860, resizable: false, theme: theme, isModal: true, autoOpen: false, cancelButton: $("#Cancel"), modalOpacity: 0.40 | 203 width: 1050, |
| 204 height: 550, | |
| 205 resizable: false, | |
| 206 theme: theme, | |
| 207 isModal: true, | |
| 208 autoOpen: false, | |
| 209 cancelButton: $("#Cancel"), | |
| 210 modalOpacity: 0.40 | |
| 205 }); | 211 }); |
| 206 $("#popupWindow").on('open', function () { | 212 $("#popupWindow").on('open', function () { |
| 207 $("#name").jqxInput('selectAll'); | 213 $("#name").jqxInput('selectAll'); |
| 208 }); | 214 }); |
| 209 $("#Delete").jqxButton({ template: "danger", width: '80px', theme: theme }); | 215 $("#Delete").jqxButton({ template: "danger", width: '90px', theme: theme }); |
| 210 $("#Delete").click(function () { | 216 $("#Delete").click(function () { |
| 211 if (editrow >= 0) { | 217 if (editrow >= 0) { |
| 212 // Open a popup to confirm this action. | 218 // Open a popup to confirm this action. |
| 213 $('#eventWindow').jqxWindow('open'); | 219 $('#eventWindow').jqxWindow('open'); |
| 214 $("#delOk").click(function () { | 220 $("#delOk").click(function () { |
| 216 $("#jqxgrid").jqxGrid('deleterow', rowID); | 222 $("#jqxgrid").jqxGrid('deleterow', rowID); |
| 217 }); | 223 }); |
| 218 } | 224 } |
| 219 $("#popupWindow").jqxWindow('hide'); | 225 $("#popupWindow").jqxWindow('hide'); |
| 220 }); | 226 }); |
| 221 $("#Cancel").jqxButton({ template: "primary", width: '80px', theme: theme }); | 227 $("#Cancel").jqxButton({ template: "primary", width: '90px', theme: theme }); |
| 222 $("#Save").jqxButton({ template: "success", width: '80px', theme: theme }); | 228 $("#Save").jqxButton({ template: "success", width: '90px', theme: theme }); |
| 223 // update the edited row when the user clicks the 'Save' button. | 229 // update the edited row when the user clicks the 'Save' button. |
| 224 $("#Save").click(function () { | 230 $("#Save").click(function () { |
| 231 var rowID = -1; | |
| 225 if (editrow >= 0) { | 232 if (editrow >= 0) { |
| 226 var rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); | 233 rowID = $('#jqxgrid').jqxGrid('getrowid', editrow); |
| 227 var row = { | 234 } |
| 228 record: rowID, | 235 var row = { |
| 229 name: $("#name").val(), | 236 record: rowID, |
| 230 address: $("#address").val(), | 237 name: $("#name").val(), |
| 231 city: $("#city").val(), | 238 address: $("#address").val(), |
| 232 zip: $("#zip").val(), | 239 city: $("#city").val(), |
| 233 country: $("#country").val(), | 240 zip: $("#zip").val(), |
| 234 website: $("#website").val(), | 241 country: $("#country").val(), |
| 235 email: $("#email").val(), | 242 website: $("#website").val(), |
| 236 phone: $("#phone").val(), | 243 email: $("#email").val(), |
| 237 notes: $("#notes").val() | 244 phone: $("#phone").val(), |
| 238 }; | 245 notes: $("#notes").val() |
| 246 }; | |
| 247 if (editrow >= 0) { | |
| 239 $('#jqxgrid').jqxGrid('updaterow', rowID, row); | 248 $('#jqxgrid').jqxGrid('updaterow', rowID, row); |
| 240 $("#popupWindow").jqxWindow('hide'); | |
| 241 } else { | 249 } else { |
| 242 // Insert a record | 250 $('#jqxgrid').jqxGrid('addrow', null, row); |
| 243 var newrow = { | 251 } |
| 244 record: -1, | 252 $("#popupWindow").jqxWindow('hide'); |
| 245 name: $("#name").val(), | 253 location.reload( true ); // reload ourself. |
| 246 address: $("#address").val(), | |
| 247 city: $("#city").val(), | |
| 248 zip: $("#zip").val(), | |
| 249 country: $("#country").val(), | |
| 250 website: $("#website").val(), | |
| 251 email: $("#email").val(), | |
| 252 phone: $("#phone").val(), | |
| 253 notes: $("#notes").val() | |
| 254 }; | |
| 255 $('#jqxgrid').jqxGrid('addrow', null, newrow); | |
| 256 $("#popupWindow").jqxWindow('hide'); | |
| 257 } | |
| 258 }); | 254 }); |
| 259 createDelElements(); | 255 createDelElements(); |
| 260 }); | 256 }); |
| 261 | 257 |
