<!DOCTYPE HTML><meta charset="utf-8"><html><head> <script src="https://unpkg.com/[email protected]/dist/jquery.js"></script> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/sunny/jquery-ui.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <link rel="stylesheet" href="d.css" /> <link rel="stylesheet" href="pqgrid.min.css" /> <link rel="stylesheet" href="pqgrid.ui.min.css" /> <link rel="stylesheet" href="themes/bootstrap/pqgrid.rtl.css"/> <script type="text/javascript" src="pqgrid.min.js" ></script> <script src="localize/pq-localize-en.js"></script> <script type="text/javascript" src="pqTouch/pqtouch.min.js" ></script> <script type="text/javascript" src="jsZip-2.5.0/jszip.min.js" ></script> <script> $(function () { function filterhandler() { var $toolbar = this.toolbar(), $value = $toolbar.find(".filterValue"), value = $value.val(), condition = $toolbar.find(".filterCondition").val(), dataIndx = $toolbar.find(".filterColumn").val(), filterRules; if (dataIndx == "") { filterRules = this.getColModel().map(function(column){ return { dataIndx: column.dataIndx, condition: condition, value: value }; }) } else { filterRules = [{ dataIndx: dataIndx, condition: condition, value: value}]; } this.filter({ oper: 'replace', rules: filterRules }); } function filterRender(ui) { var val = ui.cellData, filter = ui.column.filter, crules = (filter || {}).crules; if (filter && filter.on && crules && crules[0].value) { var condition = crules[0].condition, valUpper = val.toUpperCase(), txt = crules[0].value, txt = (txt == null) ? "" : txt.toString(), txtUpper = txt.toUpperCase(), indx = -1; if (condition == "end") { indx = valUpper.lastIndexOf(txtUpper); if (indx + txtUpper.length != valUpper.length) { indx = -1; } } else if (condition == "contain") { indx = valUpper.indexOf(txtUpper); } else if (condition == "begin") { indx = valUpper.indexOf(txtUpper); if (indx > 0) { indx = -1; } } if (indx >= 0) { var txt1 = val.substring(0, indx); var txt2 = val.substring(indx, indx + txt.length); var txt3 = val.substring(indx + txt.length); return txt1 + "<span style='background:yellow;color:#333;'>" + txt2 + "</span>" + txt3; } else { return val; } } else { return val; } } var colM = [ { title: "<b>Ön Resim</b>", id: 'EmployeeID', validations: [ { type: 'minLen', value: '1', msg: 'Bu Alan Gerekli' } ], width: 150, dataIndx: "Featured_Image", render: function(ui){ if(ui.cellData==null){return "<img height='100' style='border-radius:50%;' src='resimYok.jpg'/>";}else{ return "<img height='150' style='border-radius:50%;' src='" + ui.cellData + "'/> ";} } }, { title: "<b>3. Ek Görsel</b>", width: 300, dataIndx: "Product_Gallery.3",render: function(ui){ if(ui.cellData==null){return "<img height='100' style='border-radius:50%;' src='resimYok.jpg'/>";}else{ return "<img height='150' style='border-radius:50%;' src='" + ui.cellData + "'/> ";} } }, { title: "<b>Kategori</b>", width: 200, dataIndx: "Category",style: {'font-size': '12px'},validations: [ { type: 'minLen', value: '1', msg: 'Bu Alan Gerekli' } ] }, // { title: "<b>Adet</b>", width: 75, dataIndx: "Quantity",style: {'font-size': '12px'},validations: [ { type: 'minLen', value: '1', msg: 'Bu Alan Gerekli' } ] }, { title: "<b>Beden</b>", width: 150, dataIndx: "Attribute_Bedenler",style: {'font-size': '12px'},validations: [ { type: 'minLen', value: '1', msg: 'Bu Alan Gerekli' } ] }, { title: "<b>Renk</b>", width: 150, dataIndx: "Attribute_Renk",style: {'font-size': '12px'},validations: [ { type: 'minLen', value: '1', msg: 'Bu Alan Gerekli' } ] }, ]; var dataModel = { location: "remote", dataType: "JSON", method: "GET", url : "../urunduz/router.php?baslat=<?php echo $marka.'&py='.$py;?>", getData: function (dataJSON) { var data = dataJSON; return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: data }; } }; var groupModel = { on: false, dataIndx: ['Product_Name'], showSummary: [false], grandSummary: false, collapsed: [false], title: [ "{0} ({1})", "{0} - {1}" ] } var pageModel = { type: "local", rPP: 50, strRpp: "{0}", //customize localization strings. strDisplay: "{0} to {1} of {2}", strPage: "Sayfa {0} / {1}", layout: ['first','prev', 'next','last', "|", "strPage"] } var obj = { height: "100%", width: "100%", editable: false, freezeCols: 2, collapsible: { toggle: false, on: false }, pageModel: pageModel,complete:function(evt, ui) {this.toggle()}, contextMenu: { on: true, imgItems: [ ] }, toolbar: { cls: 'pq-toolbar', items: [ { type: 'button', label: 'Add', listeners: [{ click: addRow}], icon: 'ui-icon-plus' }, { type: 'button', label: 'Edit', listeners: [{ click: editRow}], icon: 'ui-icon-pencil' }, { type: 'button', label: 'Delete', listeners: [{ click: deleteRow}], icon: 'ui-icon-minus' }, { type: 'select', label: 'Number of frozen columns: ', options: [0, 1, 2, 3], listener: function (evt) { this.option("freezeCols", evt.target.value); this.refresh(); } }, { type: 'button', label: "Kaydet", icon: 'ui-icon-arrowthickstop-1-s', listener:function () { grid.reset( { group: true, filter: true } );grid.showLoading( ); this.exportData({ url: "post.php?baslat=<?php echo $marka; ?>&py=<?php echo $py; ?>", format: "json", zip: $("#export_zip").prop("checked"), nopqdata: true, //applicable for JSON export. render: true, noheader: true, })window.setTimeout(function () {grid.hideLoading( );}, 5000 );} }, ],cls: "pq-toolbar-search", items: [ { type: 'button', label: 'Add', listeners: [{ click: addRow}], icon: 'ui-icon-plus' }, { type: 'button', label: 'Edit', listeners: [{ click: editRow}], icon: 'ui-icon-pencil' }, { type: 'button', label: 'Delete', listeners: [{ click: deleteRow}], icon: 'ui-icon-minus' }, { type: 'button', label: "Kaydet", icon: 'ui-icon-arrowthickstop-1-s', listener:function () { this.reset({filter: true});grid.showLoading( ); this.exportData({ url: "post.php?baslat=<?php echo $marka; ?>&py=<?php echo $py; ?>", format: "json", zip: $("#export_zip").prop("checked"), nopqdata: true, //applicable for JSON export. render: true, noheader: true, })window.setTimeout(function () {grid.hideLoading( );}, 5000 );} }, { type: 'textbox', label: 'Filtrele: ', attr: 'placeholder="Filtrelenecek Kelime"', cls: "filterValue", listener: { timeout: filterhandler } }, { type: 'select', cls: "filterColumn", listener: filterhandler, options: function (ui) { var opts = [{ '': '[ Aranacak Alanı Seç ]'}]; this.getColModel().forEach(function(column){ var obj = {}; obj[column.dataIndx] = column.title; opts.push(obj); }) return opts; } }, { type: 'select', cls: "filterCondition", listener: filterhandler, options: [ { "contain": "İçerir" }, { "begin": "İle Başlar" }, { "end": "İle Biter" }, { "notcontain": "İçermez" }, { "equal": "Eşit" }, { "notequal": "Eşit Değil" }, { "empty": "Boş" }, { "notempty": "Boş Değil" }, { "less": "Daha Az" }, { "great": "Daha Fazla" }, { "regexp": "Regex" } ] }, { type: 'separator'}, { type: 'select', cls:'rpp', label: "Sayfa Başı Gösterim: ", value: pageModel.rPP, options: [50, 100, 1000, 10000], listener: function(evt) { this.option('pageModel.rPP', $(evt.target).val()) this.refreshDataAndView(); } }, { type: 'button', label: "Önceki Sayfa", cls:'prev', listener: function() { var page = this.option('pageModel.curPage'); this.goToPage({page: page-1}) } }, { type: 'button', label: "Sonraki Sayfa", cls:'next', listener: function() { var page = this.option('pageModel.curPage'); this.goToPage({page: page+1}) } }, ] }, dataModel: dataModel, scrollModel: { autoFit: false }, colModel: colM, numberCell: { show: true }, menuIcon: false, width: 900, height: 460, editable: false, pageModel: { type: "local", rPP: 15, rPPOptions: [10, 15, 20, 50, 100] }, flexHeight: true, title: "Companies listed on the <b>NASDAQ</b>", freezeCols: 1, resizable: true, editModel: { clicksToEdit: 2 }, selectionModel: { mode: 'single', type: 'row' } }; var grid = pq.grid("#grid_export", obj); // var $grid = $("#grid_export").pqGrid(obj); //create popup dialog. $("#popup-dialog-crud").dialog({ width: 400, modal: true, open: function () { $(".ui-dialog").position({ of: "#grid_export" }); }, autoOpen: false }); //edit Row function editRow() { var rowIndx = getRowIndx(); if (rowIndx != null) { var row = $grid.pqGrid('getRowData', {rowIndx: rowIndx}); var $frm = $("form#crud-form"); $frm.find("input[name='company']").val(row[0]); $frm.find("input[name='symbol']").val(row[1]); $frm.find("input[name='price']").val(row[3]); $frm.find("input[name='change']").val(row[4]); $frm.find("input[name='pchange']").val(row[5]); $frm.find("input[name='volume']").val(row[6]); $("#popup-dialog-crud").dialog({ title: "Edit Record (" + (rowIndx + 1) + ")", buttons: { Update: function () { //update row. var row = []; row[0] = $frm.find("input[name='company']").val(); row[1] = $frm.find("input[name='symbol']").val(); row[3] = $frm.find("input[name='price']").val(); row[4] = $frm.find("input[name='change']").val(); row[5] = $frm.find("input[name='pchange']").val(); row[6] = $frm.find("input[name='volume']").val(); $grid.pqGrid('updateRow', { rowIndx: rowIndx, row: row, checkEditable: false }); $(this).dialog("close"); }, Cancel: function () { $(this).dialog("close"); } } }).dialog("open"); } } //append Row function addRow() { var $frm = $("form#crud-form"); $frm.find("input").val(""); $("#popup-dialog-crud").dialog({ title: "Add Record", buttons: { Add: function () { var row = []; //save the record in DM.data. row[0] = $frm.find("input[name='company']").val(); row[1] = $frm.find("input[name='symbol']").val(); row[3] = $frm.find("input[name='price']").val(); row[4] = $frm.find("input[name='change']").val(); row[5] = $frm.find("input[name='pchange']").val(); row[6] = $frm.find("input[name='volume']").val(); $grid.pqGrid('addRow', { rowData: row }); $(this).dialog("close"); }, Cancel: function () { $(this).dialog("close"); } } }); $("#popup-dialog-crud").dialog("open"); } //delete Row. function deleteRow() { var rowIndx = getRowIndx(); if (rowIndx != null) { $grid.pqGrid("deleteRow", { rowIndx: rowIndx }); $grid.pqGrid("setSelection", { rowIndx: rowIndx }); } } function getRowIndx() { var arr = $grid.pqGrid("selection", { type: 'row', method: 'getSelection' }); if (arr && arr.length > 0) { return arr[0].rowIndx; } else { alert("Select a row."); return null; } } });</script> <div id="grid_export" > </div> <div id="popup-dialog-crud"><form id="crud-form"> <table align="center"> <tbody><tr> <td>Company Name:</td> <td><input type="text" name="company"></td> </tr> <tr> <td>Symbol:</td> <td><input type="text" name="symbol"></td> </tr> <tr> <td>Price:</td> <td><input type="text" name="price"></td> </tr> <tr> <td>Change:</td> <td><input type="text" name="change"></td> </tr> <tr> <td>%Change:</td> <td><input type="text" name="pchange"></td> </tr> <tr> <td>Volume:</td> <td><input type="text" name="volume"></td> </tr> </tbody></table></form></div>
