<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="../css/bootstrap.min.css"> <link rel="stylesheet" href="../css/bootstrap-theme.min.css"> <link rel="stylesheet" href="../css/jqx.base.css"> <link rel="stylesheet" href="../css/jqx.bootstrap.css"> <link rel="stylesheet" href="../css/qfq-bs.css"> <title>Person Form Mockup</title> </head> <body> <label>Submit to <select name="submitTo" id="submitTo"> <option>404 error</option> <option>save_error_matno.json</option> <option>save_error_geburtstag.json</option> <option>save_no_redirect.json</option> <option>save_server_redirect.json</option> <option>save_client_redirect.json</option> </select> </label> <label>Delete URL <select name="deleteUrl" id="deleteUrl"> <option>404 error</option> <option>delete_client_redirect.json</option> <option>delete_error.json</option> <option>delete_no_redirect.json</option> <option>delete_server_redirect.json</option> </select> </label> <label>Upload to <select name="uploadTo" id="uploadTo"> <option>404 error</option> <option>uploadhandler.php</option> <option>uploadhandler_error.php</option> </select> </label> <label>File Delete Url <select name="fileDeleteUrl" id="fileDeleteUrl"> <option>404 error</option> <option>delete_file_ok.json</option> <option>delete_file_error.json</option> </select> </label> <label>Dirty <select name="dirtyUrl" id="dirtyUrl"> <option>404 error</option> <option>dirty_success.json</option> <option>dirty_denied.json</option> </select> </label> <div class="container-fluid"> <div class="row hidden-xs"> <div class="col-md-12"> <h1>Title with a long text</h1> </div> </div> <div class="row"> <div class="col-md-10"> <ul id="myTabs" class="nav nav-pills" role="tablist"> <li role="presentation" class="active"><a href="#person" data-toggle="tab">Person</a></li> <li role="presentation"><a href="#person2" data-toggle="tab">Person2</a></li> <li role="presentation"><a href="#funktion" data-toggle="tab">Funktion</a></li> <li role="presentation"><a href="#adresse" data-toggle="tab">Adresse</a></li> <li role="presentation"><a href="#display" data-toggle="tab">Display</a></li> <li role="presentation"><a href="#settings" data-toggle="tab">Settings</a></li> <li role="presentation" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button"> more <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#arbeitsgruppe" data-toggle="tab">Arbeitsgruppe</a></li> <li><a href="#publikation" data-toggle="tab">Publikation</a></li> <li><a href="#privilegien" data-toggle="tab">Privilegien</a></li> <li><a href="#technical" data-toggle="tab">Technical</a></li> <li><a href="#notes" data-toggle="tab">Notes</a></li> <li><a href="#referenzen" data-toggle="tab">Referenzen: Read Only</a></li> </ul> </li> </ul> </div> <div class="col-md-2 "> <div class="btn-toolbar pull-right" role="toolbar"> <div class="btn-group" role="group"> <button id="save-button" type="button" class="btn btn-default navbar-btn" data-class-on-change="wdc"><span class="glyphicon glyphicon-ok"></span></button> <button id="close-button" type="button" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-remove"></span></button> </div> <div class="btn-group" role="group"> <button id="delete-button" type="button" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-trash"></span></button> </div> <div class="btn-group" role="group"> <a id="form-new-button" href="personmock.html?s=badcaffe1" class="btn btn-default navbar-btn"><span class="glyphicon glyphicon-plus"></span></a> </div> </div> </div> </div> <form id="myForm" class="form-horizontal" data-toggle="validator" data-enable-save-button="false" data-disable-return-key-submit="false"> <input type="hidden" name="s" value="badcaffee1234"> <div class="tab-content"> <!--pill: Person--> <div role="tabpanel" class="tab-pane active" id="person"> <div class="form-group"> <div class="col-md-2"> <label for="id" class="control-label">id</label> </div> <div class="col-md-6 "> <p id="id" type="text" class="form-control-static">12345678</p> </div> </div> <div class="form-group"> <div class="col-md-2"> <label for="name" class="control-label">Name</label> </div> <div class="col-md-6"> <input id="name" name="name" type="text" class="form-control"> </div> </div> <div class="form-group"> <div class="col-md-2"> <label for="firstname" class="control-label">Vorname</label> </div> <div class="col-md-6"> <input id="firstname" name="firstname" type="text" class="form-control" required> <div class="help-block with-errors hidden"></div> </div> </div> <div class="form-group"> <div class="col-md-2"> <label for="nameShort" class="control-label">Vorname Kurz</label> </div> <div class="col-md-6"> <input id="nameShort" name="shortname" type="text" class="form-control" required data-error="Short name is required"> <div class="help-block with-errors"></div> </div> <div class="col-md-4"> <p class="help-block ">Abgekürzter Vorname. Für "Christian" z.B. "Ch."</p> </div> </div> <div class="form-group"> <div class="col-md-2"> <label for="personHandle" class="control-label">Kurzform</label> </div> <div class="col-md-6"> <input id="personHandle" name="personhandle" type="text" class="form-control" data-required="no"> </div> <div class="col-md-4"> <p class="help-block">Z.B. MC fuer Michel Chipot. Nur nach Absprache mit IT. Achtung: Check emaillisten (AG...).</p> </div> </div> <div class="form-group"> <div class="col-md-2"> <label for="personTitle" class="control-label">Titel</label> </div> <div class="col-md-6"> <select id="personTitle" class="form-control" name="persontitle"> <option></option> <option>Dr.</option> <option>Prof. Dr.</option> </select> </div> </div> <div class="form-group"> <div class="col-md-2"> <b class="control-label"> Gender </b> </div> <div class="col-md-6"> <div class="radio"> <label> <input type="radio" name="gender" required>male </label> </div> <div class="radio"> <label> <input type="radio" name="gender" required>female </label> </div> </div> <div class="col-md-4"> <p class="help-block"></p> </div> </div> <!-- This must be outside the form-group. --> <input name="gender" value="" type="hidden"> <div class="form-group"> <div class="col-md-2"> <label for="personGeburtstag" class="control-label">Geburtstag</label> </div> <div class="col-md-6"> <div id="personGeburtstag" class="jqw-datetimepicker" data-control-name="personGeburtstag" data-format-string="dd.MM.yyyy HH:mm" data-show-time-button="true"></div> </div> </div> <div class="form-group"> <div class="col-md-2"> <label for="anotherDate" class="control-label">Another Date</label> </div> <div class="col-md-6"> <div id="anotherDate" class="jqw-datetimepicker" data-control-name="anotherDate" data-format-string="dd.MM.yyyy" data-show-time-button="false"></div> </div> </div> <div class="form-group"> <div class="col-md-2"> <label for="combobox1" class="control-label">Combobox 1</label> </div> <div class="col-md-6"> <div id="combobox1" class="jqw-combobox" data-control-name="combobox1"></div> </div> </div> </div> <!--Pill: Person2--> <div role="tabpanel" class="tab-pane" id="person2"> <div class="form-group"> <div class="col-md-2"> <label for="personMat" class="control-label">Matrikelnummer</label> </div> <div class="col-md-6"> <input id="personMat" type="text" class="form-control" name="matno"> </div> <div class=" col-md-4"> <p class="help-block">Format: xxxxxxxx. Die von der Uni/ETH vergebenen Matrikelnummer. Wichtig bei Studenten.</p> </div> </div> <div class="form-group"> <div class="col-md-2"> <label for="personZusatz" class="control-label">Zusatz</label> </div> <div class="col-md-6"> <input id="personZusatz" type="text" class="form-control"> </div> <div class="col-md-4"> <p class="help-block ">Anzeige auf der Kontaktseite hinter dem Namen (wird automatisch klein und in Klammern gesetzt). Wiki</p> </div> </div> <div class="form-group"> <div class="col-md-2"> <label for="personeNameAlt" class="control-label">Name (alternativ)</label> </div> <div class="col-md-6"> <input id="personeNameAlt" type="text" class="form-control"> </div> <div class=" col-md-4"> <p class="help-block"> Alternativer Nachname. Wechselt der Nachname einer Person (z.B. durch Heirat) kann hier der alte Name hinterlegt werden. Das wird zur Zeit nur bei der Anzeige der Co-Autoren zu einer Publikation ausgewertet.</p> </div> </div> <div class="form-group"> <div class="col-md-2"> <label for="personDisplay" class="control-label">Display Name</label> </div> <div class="col-md-6"> <input id="personDisplay" type="text" class="form-control"> </div> <div class=" col-md-4"> <p class="help-block">Optional: Wird anstelle von 'titel / vorname / name / zusatz' auf der Kontaktseite und der 'persoenlichen Page' angezeigt. Wiki</p> </div> </div> <div class="form-group"> <div class="col-md-2"> <label for="personNameCredits" class="control-label">Credits</label> </div> <div class="col-md-6 "> <p id="personNameCredits" type="text" class="form-control-static">6000</p> </div> <div class=" col-md-4"> <p class="help-block">für PrintQuota-System (in Rp.)</p> </div> </div> <!--subrecord: account--> <!--subrecord: bilder zur person--> <div class="form-group"> <div class="col-md-2"> <label for="notes-editor" class="control-label">Notes</label> </div> <div class="col-md-6"> <textarea id="notes-editor" class="form-control qfq-tinymce" data-control-name="notesField" name="notesField" required></textarea> <div class="help-block with-errors"></div> </div> </div> </div> <!--pill: Funktion--> <div role="tabpanel" class="tab-pane" id="funktion"> <!--Persönliche Funktion (subrecord)--> <div class="form-group"> <div class="col-md-12"> <b>title subrecord_pers_funktion</b> <div id="subrecord_pers_funktion"> </div> </div> </div> <!--Properties der Person (subrecord)--> <div class="form-group"> <div class="col-md-12"> <b>title subrecord_properties</b> <div id="subrecord_properties"> </div> </div> </div> <!--Zustaendigkeitsbereiche (subrecord)--> <div class="form-group"> <div class="col-md-12"> <b>title subrecord_zustaendigkeitsbereiche</b> <div id="subrecord_zustaendigkeitsbereiche"> </div> </div> </div> </div> <!--pill: Adresse--> <div role="tabpanel" class="tab-pane" id="adresse"> <div class="form-group"> <div class="col-md-2"> <label for="personRaum" class="control-label">Raum</label> </div> <div class="col-md-6"> <select id="personRaum" class="form-control"> <option>Raum</option> <option>Raum</option> <option>Raum</option> <option>Raum</option> <option>Raum</option> <option>Raum</option> <option>Raum</option> <option>Raum</option> <option>Raum</option> </select> </div> <div class=" col-md-4"> <p class="help-block"></p> </div> </div> <div class="form-group"> <div class="col-md-2"> <b class="control-label"> Show office number </b> </div> <div class="col-md-6"> <div class="checkbox"> <label> <input type="checkbox"> </label> <p class="help-block"></p> </div> </div> </div> <!--Adresse (subrecord)--> <div class="form-group"> <div class="col-md-12"> <b>subrecord Adresse</b> <div id="subrecord_adresse"> </div> </div> </div> </div> <!--pill: Display--> <div role="tabpanel" class="tab-pane" id="display"> <div class="form-group"> <div class="col-md-2"> <label for="personHompage" class="control-label">Hompage</label> </div> <div class="col-md-6"> <input id="personHompage" type="text" class="form-control"> </div> <div class=" col-md-4"> <p class="help-block">Alternative zur default 'Persoenlichen Homepage'. Falls kein Link auf eine Homepage gesetzt werden soll: <b>no_homepage</b></p> </div> </div> <div class="form-group"> <div class="col-md-2"> <label for="personPublic" class="control-label">Publik. max. Jahre</label> </div> <div class="col-md-6"> <input id="personPublic" type="text" class="form-control"> </div> <div class=" col-md-4"> <p class="help-block">Begrenzt die Anzeige der Publikationen auf die letzten 'x' Jahre (persönliche Homepage).</p> </div> </div> <div class="form-group"> <div class="col-md-2"> <label for="personPublic2" class="control-label">Publik. seit Jahr</label> </div> <div class="col-md-6"> <input id="personPublic2" type="text" class="form-control"> </div> <div class=" col-md-4"> <p class="help-block">Anzeige aller Publikationen seit diesem Jahr (persönliche Homepage). 0=disable</p> </div> </div> <div class="form-group"> <div class="col-md-2"> <b class="control-label">Fotowand</b> </div> <div class="col-md-6"> <div class="form-inline"> <div class="form-group"> <label for="personZeile" class="control-label">Zeile (A-K)</label> <input id="personZeile" type="text" class="form-control"> </div> <div class="form-group"> <label for="personSpalte" class="control-label">Zeile (1-10)</label> <input id="personSpalte" type="text" class="form-control"> </div> <div class="form-group"> <div class="checkbox"> <label> <input type="checkbox">Zweizeilig </label> </div> </div> </div> </div> </div> <!--Module on my homepage (subrecord)--> <!--Conferences on my homepage (subrecord)--> </div> <!--pill: Settings--> <div role="tabpanel" class="tab-pane" id="settings"> <div class="form-group"> <div class="col-md-2"> <b class="control-label"> Zeige Bild auf Homepage </b> </div> <div class="col-md-6"> <div class="checkbox"> <label> <input type="checkbox"> </label> </div> </div> <div class=" col-md-4"> <p class="help-block">Feld 'Bild' muss auf ein Bild verweisen.</p> </div> </div> <div class="form-group"> <div class="col-md-2"> <b class="control-label"> Show on Alumni Liste </b> </div> <div class="col-md-6"> <div class="checkbox"> <label> <input type="checkbox"> </label> </div> </div> <div class=" col-md-4"> <p class="help-block">Assistenten die nicht mehr angestellt sind werden automatisch auf der Alumni Liste angezeigt. Falls das nicht gewünscht ist Checkbox deaktivieren.</p> </div> </div> <div class="form-group"> <div class="col-md-2"> <b class="control-label"> Modulbuchung Mat18x </b> </div> <div class="col-md-6"> <div class="checkbox"> <label> <input type="checkbox"> </label> </div> </div> <div class="col-md-4"> <p class="help-block">Dieser Student hat min. eine 'Service'-Vorlesung gebucht (kein Math. Student)</p> </div> </div> <div class="form-group"> <div class="col-md-2"> <label for="personHomepageAlias" class="control-label">Homepage Alias</label> </div> <div class="col-md-6"> <select id="personHomepageAlias" class="form-control"> <option>alias</option> <option>alias</option> <option>alias</option> <option>alias</option> <option>alias</option> <option>alias</option> </select> </div> </div> <div class="form-group"> <div class="col-md-2"> <label for="personSAPId" class="control-label">SAP ID</label> </div> <div class="col-md-6"> <input id="personSAPId" type="text" class="form-control"> </div> <div class="col-md-4"> <p class="help-block ">optional: ID dieser Person im SAP</p> </div> </div> <div class="form-group"> <div class="col-md-2"> <b class="control-label"> Reminder Veranstaltung </b> </div> <div class="col-md-6"> <div class="checkbox"> <label> <input type="checkbox"> </label> </div> </div> <div class="col-md-4"> <p class="help-block">Empfängt 'Reminder'-Mails für Veranstaltungen.</p> </div> </div> <div class="form-group"> <div class="col-md-2"> <b class="control-label"> Reminder Konferenz </b> </div> <div class="col-md-6"> <div class="checkbox"> <label> <input type="checkbox"> </label> </div> </div> <div class="col-md-4"> <p class="help-block">Empfängt 'Reminder'-Mails für Konferenzen.</p> </div> </div> <div class="form-group"> <div class="col-md-2"> <b class="control-label"> Reminder Diss.-Vortrag </b> </div> <div class="col-md-6"> <div class="checkbox"> <label> <input type="checkbox"> </label> </div> </div> <div class="col-md-4"> <p class="help-block">Empfängt 'Reminder'-Mails für Diss.-Vorträge.</p> </div> </div> <div class="form-group"> <div class="col-md-2"> <b class="control-label"> Reminder AG-Seminar </b> </div> <div class="col-md-6"> <div class="checkbox"> <label> <input type="checkbox"> </label> </div> </div> <div class="col-md-4"> <p class="help-block">Empfängt 'Reminder'-Mails für AG-Seminare.</p> </div> </div> <!--Arbeitszeiten (subrecord)--> </div> <!--pill: Arbeitsgruppe--> <div role="tabpanel" class="tab-pane" id="arbeitsgruppe"> <div class="form-group"> <div class="col-md-2"> <label for="fileupload" class="control-label">File upload</label> </div> <div class="col-md-6"> <div class="col-md-6"> <div class="uploaded-file "><span class="uploaded-file-name">john.doe.png</span> <button class="delete-file" data-sip="filedeletesip" name="trash-picture:1" type="button"><span class="glyphicon glyphicon-trash"></span></button> </div> <input id="fileupload" name="picture:1" disabled="disabled" class="hidden" type="file" data-sip="fileuploadsip"> <div class="help-block with-errors"></div> </div> </div> <div class=" col-md-4"> <p class="help-block"></p> </div> </div> <div class="form-group"> <div class="col-md-2"> <label for="mytextarea" class="control-label">Text area</label> </div> <div class="col-md-6"> <textarea class="form-control" id="mytextarea" name="mytextarea"></textarea> </div> <div class=" col-md-4"> <p class="help-block"></p> </div> </div> <!--Sekretariat fuer Arbeitsgruppe (subrecord)--> <!--Arbeitsgruppe (subrecord)--> </div> <!--pill: Publikation--> <div role="tabpanel" class="tab-pane" id="publikation"> <!--Publikation(subrecord)--> <!--Dissertation / Verteidigung(subrecord)--> <!--Hauptthemen Publikationen(subrecord)--> </div> <!--pill: Privilegien--> <div role="tabpanel" class="tab-pane" id="privilegien"> <!--Administration von Gaesten fuer: (subrecord)--> </div> <!--pill: Technical--> <div role="tabpanel" class="tab-pane" id="technical"> <div class="form-group"> <div class="col-md-2"> <label for="personAngelegt" class="control-label">Angelegt</label> </div> <div class="col-md-6"> <input id="personAngelegt" type="text" class="form-control"> </div> </div> <div class="form-group"> <div class="col-md-2"> <label for="personFe" class="control-label">FE User Id</label> </div> <div class="col-md-6"> <input id="personFe" type="text" class="form-control"> </div> <div class="col-md-4"> <p class="help-block">FE User ID aus der Typo3 Front End User Verwaltung.</p> </div> </div> <div class="form-group"> <div class="col-md-2"> <label for="personUniqueId" class="control-label">unique ID</label> </div> <div class="col-md-6"> <input id="personUniqueId" type="text" class="form-control"> </div> <div class=" col-md-4"> <p class="help-block">Eindeutige ID, fuer Personen mit gleichem Namen (i.d.R. leer). Achtung: Pro Name muss min. ein Name eine leere unique ID haben. </p> </div> </div> <div class="form-group"> <div class="col-md-2"> <label for="personAuth" class="control-label">auth</label> </div> <div class="col-md-6 "> <p id="personAuth" type="text" class="form-control-static">asdfasfdasf</p> </div> </div> <div class="form-group"> <div class="col-md-2"> <label for="personAutoUpdate" class="control-label">auto_update</label> </div> <div class="col-md-6"> <input id="personAutoUpdate" type="text" class="form-control"> </div> <div class=" col-md-4"> <p class="help-block"> =0 - kein Auto Update</p> </div> </div> <!--Registrierte MAC-Adressen (subrecord)--> <!--Hardware (subrecord)--> <!--Software Licenses (owner or used by) (subrecord)--> </div> <!--pill: Notes--> <div role="tabpanel" class="tab-pane" id="notes"> <!--Administrative Notizen zur Person (subrecord)--> </div> <!--pill: Referenzen--> <div role="tabpanel" class="tab-pane" id="referenzen"> <!--Homepage Notizen (subrecord)--> <!--Organisator: Seminar (subrecord)--> <!--Organisator: Konferenz (subrecord)--> <!--Sprecher: Konferenz (subrecord)--> <!--Sprecher: Seminar (subrecord)--> <!--Dozent: Vorlesung (subrecord)--> <!--Uebungsleiter: Vorlesung (subrecord)--> <!--Gast (subrecord)--> <!--Student einer Vorlesung (subrecord)--> <!--Student eines Seminars /Kolloquiums (subrecord)--> <!--Einladung schriftliche Pruefung (subrecord)--> <!--Webbox (subrecord)--> <!--Notizen zu Workflows (subrecord)--> <!--Konferenzteilnehmer (subrecord)--> <!--Workflow (subrecord)--> </div> </div> <input type="hidden" name="recordHashMd5" value="mock-hash"/> </form> <a href="https://www.google.ch">away</a> </div> <script type="application/jqw-combobox-source" id="combobox1_source"> [ { "value": 1, "text": "item 1" }, { "value": 2, "text": "item 2" }, { "value": 3, "text": "item 3" } ] </script> <script src="../js/jquery.min.js"></script> <script src="../js/bootstrap.min.js"></script> <script src="../js/validator.min.js"></script> <script src="../js/jqx-all.js"></script> <script src="../js/globalize.js"></script> <script src="../js/tinymce.min.js"></script> <script src="../js/EventEmitter.min.js"></script> <script src="../js/qfq.debug.js"></script> <script type="text/javascript"> $(function () { $("#subrecord_adresse").jqxDataTable( { columns: [ {text: 'id', datafield: 'id', minWidth: 30}, {text: 'Name 2', datafield: 'name2', minWidth: 30}, {text: 'Organisation', datafield: 'organisation', minWidth: 30}, {text: 'Abteilung', datafield: 'abteilung', minWidth: 30}, {text: 'Position', datafield: 'position', minWidth: 30}, {text: 'Strasse', datafield: 'strasse', minWidth: 30}, {text: 'PLZ', datafield: 'plz', minWidth: 30}, {text: 'Ort', datafield: 'ort', minWidth: 30}, {text: 'Land', datafield: 'land', minWidth: 30}, {text: 'Telefon', datafield: 'telefon', minWidth: 30}, {text: 'FAX', datafield: 'fax', minWidth: 30}, {text: 'Mobil', datafield: 'mobil', minWidth: 30}, {text: 'Email', datafield: 'Email', minWidth: 30}, {text: 'Typ', datafield: 'typ', minWidth: 30}, {text: 'UZH Lotus Fetchmail', datafield: 'UZH Lotus Fetchmail', minWidth: 30}, {text: 'Von', datafield: 'von', minWidth: 30}, {text: 'Bis', datafield: 'bis', minWidth: 30} ], sortable: true, height: "300", columnsResize: true, filterable: true }); $("#subrecord_pers_funktion").jqxDataTable( { columns: [ {text: 'id', datafield: 'id', minWidth: 30}, {text: 'gr_id_function', datafield: 'gr_id_function', minWidth: 30}, {text: 'Function', datafield: 'Function', minWidth: 30}, {text: 'von', datafield: 'von', minWidth: 30}, {text: 'bis', datafield: 'bis', minWidth: 30}, {text: 'Pri', datafield: 'Pri', minWidth: 30}, {text: 'valid', datafield: 'valid', minWidth: 30}, {text: 'Semester', datafield: 'Semester', minWidth: 30}, {text: 'quit', datafield: 'quit', minWidth: 30} ], sortable: true, height: "300", columnsResize: true, showToolbar: true, renderToolbar: function (toolBar) { toolBar.jqxToolBar({ tools: "button button button | button button | button button button | button button", initTools: function (type, index, tool, menuToolIninitialization) { var icons = [ '<span class="glyphicon glyphicon-plus"></span>', '<span class="glyphicon glyphicon-pencil"></span>', '<span class="glyphicon glyphicon-trash"></span>', '<span class="glyphicon glyphicon-ok-circle"></span>', '<span class="glyphicon glyphicon-ok-sign"></span>', '<span class="glyphicon glyphicon-copy"></span>', '<span class="glyphicon glyphicon-paste"></span>', '<span class="glyphicon glyphicon-scissors"></span>', '<span class="glyphicon glyphicon-filter"></span>', '<span class="glyphicon glyphicon-export"></span>' ]; tool.append(icons[index]); switch (index) { case 8: tool.click(function (evt) { evt.preventDefault(); $("#subrecord_pers_funktion").jqxDataTable( { filterable: !$("#subrecord_pers_funktion").jqxDataTable('filterable') } ); }); } } }); } }); var subrecord_source = { datatype: "json", datafields: [ {name: 'id'}, {name: 'property'}, {name: 'lock_invert'} ], url: 'mockData/person_properties.json' }; var subrecord_adapter = new $.jqx.dataAdapter(subrecord_source); $("#subrecord_properties").jqxGrid( { source: subrecord_adapter, columns: [ {text: 'id', datafield: 'id', minWidth: 30}, { text: 'Property', datafield: 'property', minWidth: 30, columntype: 'dropdownlist', initeditor: function (row, cellvalue, editor) { var source = [ 'flag: free printing bw', 'flag: free printing color', 'flag: permission onlinetool', 'flag: compute', 'online permission', 'admin' ]; editor.jqxDropDownList({source: source}); } }, {text: 'Lock / Invert', datafield: 'lock_invert', minWidth: 30, columntype: 'checkbox'}, ], sortable: true, height: 300, columnsResize: true, showToolbar: true, editable: true, renderToolbar: function (toolBar) { toolBar.jqxToolBar({ tools: "button button button | button button | button button button | button button", initTools: function (type, index, tool, menuToolIninitialization) { var icons = [ '<span class="glyphicon glyphicon-plus"></span>', '<span class="glyphicon glyphicon-pencil"></span>', '<span class="glyphicon glyphicon-trash"></span>', '<span class="glyphicon glyphicon-ok-circle"></span>', '<span class="glyphicon glyphicon-ok-sign"></span>', '<span class="glyphicon glyphicon-copy"></span>', '<span class="glyphicon glyphicon-paste"></span>', '<span class="glyphicon glyphicon-scissors"></span>', '<span class="glyphicon glyphicon-filter"></span>', '<span class="glyphicon glyphicon-export"></span>' ]; tool.append(icons[index]); switch (index) { case 8: tool.click(function (evt) { evt.preventDefault(); $("#subrecord_properties").jqxDataTable( { filterable: !$("#subrecord_properties").jqxDataTable('filterable') } ); }); } } }); } }); var subrecord_source_2 = { datatype: "json", datafields: [ {name: 'id'}, {name: 'bereich'} ], url: 'mockData/zustaendigkeitsbereiche.json' }; var subrecord_adapter_2 = new $.jqx.dataAdapter(subrecord_source_2); $("#subrecord_zustaendigkeitsbereiche").jqxDataTable( { source: subrecord_adapter_2, columns: [ {text: 'id', datafield: 'id', minWidth: 30}, {text: 'Bereich', datafield: 'bereich', minWidth: 30}, ], sortable: true, width: 500, height: 300, columnsResize: true, showToolbar: true, renderToolbar: function (toolBar) { toolBar.jqxToolBar({ tools: "button button button | button button | button button button | button button", initTools: function (type, index, tool, menuToolIninitialization) { var icons = [ '<span class="glyphicon glyphicon-plus"></span>', '<span class="glyphicon glyphicon-pencil"></span>', '<span class="glyphicon glyphicon-trash"></span>', '<span class="glyphicon glyphicon-ok-circle"></span>', '<span class="glyphicon glyphicon-ok-sign"></span>', '<span class="glyphicon glyphicon-copy"></span>', '<span class="glyphicon glyphicon-paste"></span>', '<span class="glyphicon glyphicon-scissors"></span>', '<span class="glyphicon glyphicon-filter"></span>', '<span class="glyphicon glyphicon-export"></span>' ]; tool.append(icons[index]); switch (index) { case 8: tool.click(function (evt) { evt.preventDefault(); $("#subrecord_zustaendigkeitsbereiche").jqxDataTable( { filterable: !$("#subrecord_zustaendigkeitsbereiche").jqxDataTable('filterable') } ); }); } } }); } }); var qfqPage = new QfqNS.QfqPage({ tabsId: 'myTabs', formId: 'myForm', submitTo: 'api/' + $("#submitTo").val(), deleteUrl: 'api/' + $("#deleteUrl").val(), fileUploadTo: 'api/' + $("#uploadTo").val(), fileDeleteUrl: 'api/' + $("#fileDeleteUrl").val(), dirtyUrl: 'api/' + $("#dirtyUrl").val(), }); $("#submitTo").on("change", function (evt) { qfqPage.settings.submitTo = 'api/' + $(evt.target).val(); qfqPage.qfqForm.submitTo = 'api/' + $(evt.target).val(); }); $("#deleteUrl").on("change", function (evt) { qfqPage.settings.deleteUrl = 'api/' + $(evt.target).val(); qfqPage.qfqForm.deleteUrl = 'api/' + $(evt.target).val(); }); $("#uploadTo").on("change", function (evt) { qfqPage.settings.fileUploadTo = 'api/' + $(evt.target).val(); qfqPage.qfqForm.fileUploader.targetUrl = 'api/' + $(evt.target).val(); }); $("#fileDeleteUrl").on("change", function (evt) { qfqPage.settings.fileDeleteUrl = 'api/' + $(evt.target).val(); qfqPage.qfqForm.fileDeleter.targetUrl = 'api/' + $(evt.target).val(); }); $("#dirtyUrl").on("change", function (evt) { qfqPage.settings.dirtyUrl = 'api/' + $(evt.target).val(); qfqPage.qfqForm.dirtyUrl = 'api/' + $(evt.target).val(); qfqPage.qfqForm.dirty.dirtyUrl = 'api/' + $(evt.target).val(); }); $('#myForm').on('invalid', function () { console.log("Invalid event catched"); }); QfqNS.Log.level = 0; }); </script> </body> </html>