Show Posts
This section allows you to view all posts made by this member. Note that you can only see posts made in areas you currently have access to.
function autoCompleteEditor( source, di ) {
return function (ui) {
ui.$cell.addClass('ui-front');//so that dropdown remains with input.
//initialize the editor
ui.$editor.autocomplete({
source: source,
position: {
collision: 'flipfit',
within: ui.$editor.closest(".pq-grid")
},
select: function (event, ui2) {
ui.$editor.val( ui2.item.text ); // display the selected text
ui.rowData[di] = ui2.item.id; // save selected id
return false;
},
minLength: 0
}).focus(function () {
//open the autocomplete upon focus
$(this).autocomplete("search", "");
});
}
}combo_box = ( source ) =>
{
var func = function( ui )
{
ui.$cell.addClass('ui-front')
ui.$editor.autocomplete(
{
source : source,
position:
{
collision: 'flipfit',
within: ui.$editor.closest( ".pq-grid" )
},
selectItem : { on: true }, //custom option
highlightText: { on: true }, //custom option
minLength : 0
}).focus( function()
{
$( this ).autocomplete( "search", "" )
})
}
return func
}
... itemId colmodel column editor
colMd[ t ].editor =
{
type: "textbox",
init: combo_box( 'phpf/prg_combo.php?tps=' + myParam ) // added own needful parameter
}
menuIcon: true,
menuUI:{
tabs: ['hideCols']
},
How to solve that ? window.confirm = function( message_confirm )
{
var defer = $.Deferred();
$( '<div/>', { title: 'Question!', 'class': 'confirm', 'id': 'dialogconfirm', text: message_confirm } )
.dialog(
{
buttons:
{
Taip: function()
{
defer.resolve( "yes" )
$( this ).attr( 'yesno', true)
$( this ).dialog( 'close' )
},
Ne: function()
{
defer.resolve( "no" )
$( this ).attr( 'yesno', false )
$( this ).dialog( 'close' )
}
},
close: function()
{
if ( $( this ).attr( 'yesno' ) === undefined )
{
defer.resolve( "no" )
}
$( this ).remove()
},
draggable: true,
modal : true,
resizable: false,
width : 'auto',
hide : { effect: "fade", duration: 300 }
})
return defer.promise()
}
_onEvent: function(e, n, r) {
return function(i) {
var o = r.type;
"checkbox" == o ? r.value = t(i.target).prop("checked") : r.value = t(i.target).val(), n.call( e, i ), "file" == o && t(this).val("")
}
},
. Sorry, but documnetation and samples not helped to me ... beforeFilter : function( evt ){ pqVS.init() },
If to click for sorting, then renew data and then it view correct ... for ( var u in kortos )
{
var grd_id = kortos[ u ].grido_id // grido ID
var pqVS =
{
rpp: ( kortos[ u ].limitas * 1 ),
init: function ()
{
this.totalRecords = 0;
this.requestPage = 1;
this.data = [];
}
}
pqVS.init()
var grd_obj =
{
width : '98%',
height : '96%',
virtualX : true,
virtualY : true,
resizable : true,
reactive : true,
scrollModel : { autoFit: false },
flex : { one: true },
numberCell : { show: false },
showHeader : true,
columnBorders : true,
rowBorders : true,
selectionModel : { type: 'cell' },
stripeRows : true,
sortable : true,
sortModel : { type: 'remote', single: false, sorter: [], space: true, multiKey: null },
beforeSort : function( evt ){ if ( evt.originalEvent ){ pqVS.init(); } },
filterModel : { type: 'remote', on: true, header: true },
beforeTableView: function( evt, ui )
{
var initV = ui.initV,
finalV = ui.finalV,
data = pqVS.data,
rpp = pqVS.rpp,
tot = pqVS.totalRecords,
requestPage;
if ( initV != null )
{
if ( data[ initV ] && data[ initV ].pq_empty )
{
requestPage = Math.floor( initV / rpp ) + 1
}
else if ( data[ finalV ] && data[ finalV ].pq_empty )
{
requestPage = Math.floor( finalV / rpp ) + 1
}
if ( requestPage >= 1 )
{
if ( pqVS.requestPage != requestPage )
{
pqVS.requestPage = requestPage;
this.refreshDataAndView();
}
}
}
}
}
grd_obj.colModel = gridai[ grd_id ].grido_conf.columns
grd_obj.dataModel =
{
dataType : "JSON",
location : "remote",
url : 'phpf/prg_crud.php',
recIndx : 'irs_id',
postData : function()
{
var pst = {}
pst[ "pq_curpage" ] = pqVS.requestPage
pst[ "pq_rpp" ] = pqVS.rpp
pst[ "cmd" ] = 'get'
pst[ "pnk" ] = pusl_prm
pst[ "grd" ] = grd_id
return pst;
},
getData : function( response )
{
if ( response.status !== 'error' )
{
var data = response.data,
totalRecords = response.totalRecords,
curPage = response.curPage,
len = data.length,
pq_data = pqVS.data,
init = ( curPage - 1 ) * pqVS.rpp;
if ( !pqVS.totalRecords )
{
for ( var i = len; i < totalRecords; i++ )
{
pq_data[ i + init ] = { pq_empty: true };
}
pqVS.totalRecords = totalRecords;
}
for ( var i = 0; i < len; i++ )
{
pq_data[ i + init ] = data[ i ];
pq_data[ i + init ].pq_empty = false;
}
return { data: pq_data }
}
else
setTimeout( () => { walert( response.message, 'php' ) }, 100 )
},
error: function( jqXHR, textStatus, errorThrown )
{
//alert(errorThrown);
}
}
$( "#konteineris" ).pqGrid( grd_obj );
}
0:
align: "left"
columnDrag: true
dataIndx: "ord_id"
filter: {crules: Array(1), listeners: Array(1)}
hidden: false
resizable: true
sortable: true
title: "Užsakymo ID"
width: "127"
[[Prototype]]: Object
1: {dataIndx: 'item_id', title: 'Modelis', width: '127', hidden: false, columnDrag: true, …}
2: {dataIndx: 'prekes_pvd', title: 'Pavadinimas', width: '127', hidden: false, columnDrag: true, …}
3: {dataIndx: 'ord_model', title: 'Nav modelis', width: '100', hidden: false, columnDrag: true, …}
4: {dataIndx: 'ord_qnt', title: 'Kiekis', width: '62', hidden: false, columnDrag: true, …}
5: {dataIndx: 'ord_color', title: 'Spalva', width: '65', hidden: false, columnDrag: true, …}
6: {dataIndx: 'ord_date', title: 'Užsak.data', width: '93', hidden: false, columnDrag: true, …}
7: {dataIndx: 'ord_week', title: 'Užsak.sav.', width: '90', hidden: false, columnDrag: true, …}
8: {dataIndx: 'ret_date', title: 'Graž.data', width: '80', hidden: false, columnDrag: true, …}
9: {dataIndx: 'ret_week', title: 'Grąž.sav.', width: '90', hidden: false, columnDrag: true, …}
10: {dataIndx: 'fact_date', title: 'Fakt.data', width: '99', hidden: false, columnDrag: true, …}
11: {dataIndx: 'fact_week', title: 'Fakt.sav.', width: '90', hidden: false, columnDrag: true, …}
12: {dataIndx: 'mint_fact', title: 'Minut.', width: '100', hidden: false, columnDrag: true, …}
13: {dataIndx: 'sew_sum', title: 'Suma', width: '100', hidden: false, columnDrag: true, …}
postData: function()
{
var pst = {}
pst[ "pq_curpage" ] = pqVS.requestPage
pst[ "pq_rpp" ] = pqVS.rpp
return pst;
},
dataModel: this.$options.data1<?php
require_once 'conf2.php';
$dbh = getDatabaseHandle();
$sql = "select orders.*, items.prekes_pvd from orders
left join items on items.prekes_id = orders.item_id and items.prekes_tipo_id ='prod'";
$url = $_SERVER[ 'QUERY_STRING' ];
parse_str( $url, $rqs );
$pq_curPage = $rqs[ "pq_curpage" ];
$pq_rPP= $rqs[ "pq_rpp" ];
$sqt = "Select count(*) from orders";
$stmt = $dbh->query($sqt);
$total_Records = $stmt->fetchColumn();
$skip = ($pq_rPP * ($pq_curPage - 1));
if ($skip >= $total_Records)
{
$pq_curPage = ceil($total_Records / $pq_rPP);
$skip = ($pq_rPP * ($pq_curPage - 1));
}
$sql .= " limit " . $skip . ", " .$pq_rPP;
$stmt = $dbh->query($sql);
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
$jrt = [];
$jrt[ "totalRecords" ] = $total_Records;
$jrt[ "curPage" ] = $pq_curPage;
$jrt[ "data" ] = $rows;
echo json_encode( $jrt );
?>
<!DOCTYPE html>
<html lang="lt">
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://unpkg.com/[email protected]/jquery-ui.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/jquery-ui.structure.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/jquery-ui.theme.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/jquery.js"></script>
<script src="https://unpkg.com/[email protected]/jquery-ui.js"></script>
<link href="dist/pqgrid.min.css" rel="stylesheet" />
<link href="dist/pqgrid.ui.min.css" rel="stylesheet" />
<link href="dist/themes/chocolate/pqgrid.css" rel="stylesheet" />
<script src="dist/pqgrid.min.js"></script>
<script src="dist/pq-localize-en.js"></script>
<script src="dist/pq-localize-lt.js"></script>
<script src="dist/react.development.js"></script>
<script src="dist/react-dom.development.js"></script>
<script src="dist/babel.js"></script>
</head>
<body>
<div id="app" style="height: 99vh;" ></div>
<script type = "text/babel" src="index.js"></script>
</body>
</html>
class Pqgrid extends React.Component
{
componentDidMount()
{
this.options = this.props.options
pq.grid( this.refs.grid, this.options )
}
componentDidUpdate(prevProps)
{
Object.assign( this.options, this.props.options )
}
render()
{
return <div style={{ height: '90vh'}} ref="grid" ></div>
}
}
class App extends React.Component
{
constructor( props )
{
super( props )
this.handleChange = this.handleChange.bind( this );
var pqVS =
{
rpp: 500,
init: function()
{
this.totalRecords = 0
this.requestPage = 1
this.data = []
}
}
pqVS.init();
this.columns1 =
[
{ title: "Order ID", width: 100, dataIndx: "ord_id" },
{ title: "Product Id", width: 190, dataIndx: "item_id" },
{ title: "Product Name", width: 250, dataIndx: "prekes_pvd" },
{ title: "Quantity", width: 100, dataIndx: "ord_qnt", align:"right" },
{ title: "Order Date", width: 100, dataIndx: "ord_date"},
{ title: "Order Week", width: 100, dataIndx: "ord_week"},
{ title: "Return Date", width: 100, dataIndx: "ret_date" },
{ title: "Return Week", width: 100, dataIndx: "ret_week" },
{ title: "Fact Date", width: 100, dataIndx: "fact_date" },
{ title: "Fact Week", width: 100, dataIndx: "fact_week" },
]
this.data1 =
{
dataType: "JSON",
location: "remote",
url: "phpf/remote.php",
postData: function()
{
var pst = {}
pst[ "pq_curpage" ] = pqVS.requestPage
pst[ "pq_rpp" ] = pqVS.rpp
return pst;
},
getData: function( response )
{
var data = response.data,
totalRecords = response.totalRecords,
len = data.length,
curPage = response.curPage,
pq_data = pqVS.data,
init = ( curPage - 1 ) * pqVS.rpp;
if ( !pqVS.totalRecords )
{
for ( var i = len; i < totalRecords; i++ )
{
pq_data[ i + init ] = { pq_empty: true }
}
pqVS.totalRecords = totalRecords
}
for ( var i = 0; i < len; i++ )
{
pq_data[ i + init ] = data[ i ]
pq_data[ i + init ].pq_empty = false
}
return { data: pq_data }
},
error: function ( jqXHR, textStatus, errorThrown)
{
//alert(errorThrown);
}
}
this.state =
{
reactive: true,
width: '98%',
height: '96%',
showTitle: false,
locale: 'lt',
menuIcon: false,
collapsible: { on: false, toggle: false },
resizable: true,
reactive: true,
scrollModel: { autoFit: false },
flex:{one: true},
numberCell: { show: false },
showHeader: true,
columnBorders: true,
rowBorders: true,
selectionModel: { type: 'cell' },
stripeRows: true,
filterModel: { header: false },
beforeTableView: function( evt, ui )
{
var initV = ui.initV,
finalV = ui.finalV,
data = pqVS.data,
rpp = pqVS.rpp,
requestPage;
if ( initV != null )
{
if ( data[ initV ] && data[ initV ].pq_empty )
{
requestPage = Math.floor( initV / rpp ) + 1
}
else if ( data[ finalV ] && data[ finalV ].pq_empty )
{
requestPage = Math.floor( finalV / rpp ) + 1
}
if ( requestPage >= 1 )
{
if ( pqVS.requestPage != requestPage )
{
pqVS.requestPage = requestPage
this.refreshDataAndView()
}
}
}
},
colModel: this.columns1,
animModel: { on: true },
dataModel: this.data1
}
}
handleChange( event )
{
this.setState( { locale: event.target.value } )
}
render()
{
return <div>
<div style={{ margin: 20 }}>
<label>Change locale:</label>
<select value={this.state.locale} onChange={this.handleChange}>
<option value="lt">Lthuania</option>
<option value="en">English</option>
</select>
</div>
<Pqgrid options={this.state} />
</div>
}
}
ReactDOM.render(
<App />,
document.getElementById( 'app' )
)
<!DOCTYPE html>
<html lang="lt">
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://unpkg.com/[email protected]/jquery-ui.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/jquery-ui.structure.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/jquery-ui.theme.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/jquery.js"></script>
<script src="https://unpkg.com/[email protected]/jquery-ui.js"></script>
<link href="dist/pqgrid.min.css" rel="stylesheet" />
<link href="dist/pqgrid.ui.min.css" rel="stylesheet" />
<link href="dist/themes/chocolate/pqgrid.css" rel="stylesheet" />
<script src="dist/pqgrid.min.js"></script>
<script src="dist/pq-localize-en.js"></script>
<script src="dist/pq-localize-lt.js"></script>
<script src="dist/vue.js"></script>
</head>
<body>
<div id="app">
<div style="margin:20px;">
<label>Change locale:</label>
<select v-model="options.locale">
<option value="en">English</option>
<option value="lt">Lithuania</option>
</select>
</div>
<pq-grid :options="options"></pq-grid>
</div>
<script src="index2.js" ></script>
</body>
</html>
var pqVS =
{
rpp: 500,
init: function()
{
this.totalRecords = 0
this.requestPage = 1
this.data = []
}
}
pqVS.init();
Vue.component( "pq-grid",
{
props: ["options"],
mounted: function()
{
pq.grid(this.$el, this.options);
},
template: '<div :options="options"></div>'
});
var app = new Vue(
{
el: "#app",
columns1:
[
{ title: "Order ID", width: 100, dataIndx: "ord_id" },
{ title: "Product Id", width: 190, dataIndx: "item_id" },
{ title: "Product Name", width: 250, dataIndx: "prekes_pvd" },
{ title: "Quantity", width: 100, dataIndx: "ord_qnt", align:"right" },
{ title: "Order Date", width: 100, dataIndx: "ord_date"},
{ title: "Order Week", width: 100, dataIndx: "ord_week"},
{ title: "Return Date", width: 100, dataIndx: "ret_date" },
{ title: "Return Week", width: 100, dataIndx: "ret_week" },
{ title: "Fact Date", width: 100, dataIndx: "fact_date" },
{ title: "Fact Week", width: 100, dataIndx: "fact_week" },
],
data1:
{
dataType: "JSON",
location: "remote",
url: "phpf/remote.php",
postData: function()
{
return
{
pq_curpage = pqVS.requestPage,
pq_rpp = pqVS.rpp
};
},
getData: function( response )
{
var data = response.data,
totalRecords = response.totalRecords,
len = data.length,
curPage = response.curPage,
pq_data = pqVS.data,
init = ( curPage - 1 ) * pqVS.rpp;
if ( !pqVS.totalRecords )
{
for ( var i = len; i < totalRecords; i++ )
{
pq_data[ i + init ] = { pq_empty: true }
}
pqVS.totalRecords = totalRecords
}
for ( var i = 0; i < len; i++ )
{
pq_data[ i + init ] = data[ i ]
pq_data[ i + init ].pq_empty = false
}
return { data: pq_data }
},
error: function ( jqXHR, textStatus, errorThrown)
{
//alert(errorThrown);
}
},
data: function()
{
this.options =
{
showTitle: false,
reactive: true,
locale: "lt",
height: "flex",
numberCell: { show: false },
columnTemplate: { width: 100 },
colModel: this.$options.columns1,
animModel: { on: true },
dataModel: this.data1 //{ data: this.$options.data1 }
};
return {};
}
});
<?php
require_once 'conf2.php';
$dbh = getDatabaseHandle();
$sql = "select orders.*, items.prekes_pvd from orders
left join items on items.prekes_id = orders.item_id and items.prekes_tipo_id ='prod'";
$pq_curPage = $_GET["pq_curpage"];
$pq_rPP=$_GET["pq_rpp"];
$sqt = "Select count(*) from orders";
$stmt = $dbh->query($sqt);
$total_Records = $stmt->fetchColumn();
$skip = ($pq_rPP * ($pq_curPage - 1));
if ($skip >= $total_Records)
{
$pq_curPage = ceil($total_Records / $pq_rPP);
$skip = ($pq_rPP * ($pq_curPage - 1));
}
$sql .= " limit " . $skip . ", " .$pq_rPP;
$stmt = $dbh->query($sql);
$rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
$sb = "{\"totalRecords\":" . $total_Records . ",\"curPage\":" . $pq_curPage . ",\"data\":".json_encode($rows)."}";
echo $sb;
?>