Show Posts
1
ParamQuery Pro Evaluation Support / POPUP EDITING
« on: December 25, 2020, 02:34:32 pm »
Hello,
I'm trying add popup editing but its not working.Someone can redirect me ?
I'm trying add popup editing but its not working.Someone can redirect me ?
Code: [Select]
<!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>