Version jqGrid hier verwendet: @ Lizenz Guriddo jqGrid JS - v5.2.0 - 2016-11-27 Copyright (c) 2008, Tony Tomov, tony @ trirand. comjqGrid benutzerdefinierte Editfunc funktioniert nicht, wenn benutzerdefinierte Suchparameter angegeben sind
Der erste Codeblock unten ist eine vollständige eigenständige Implementierung von jqGrid. Es ist in der Tat meistens von einem der Beispiele auf der jqGrid-Seite genommen. Darin habe ich ein Snippet eingefügt, den Teil zwischen den Kommentarzeilen mit den Clipmarkierungen.
Die hinzugefügte Datei fügt eine benutzerdefinierte Editfunc hinzu. Es funktioniert gut (im Beispiel ist es natürlich mehr oder weniger ein Stub, nur eine Warnung). Außerdem funktioniert die Suche mit allen Standardparametern. Wählen Sie für beide eine Zeile und klicken Sie auf das entsprechende Symbol von Bearbeiten oder Suchen.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- The jQuery library is a prerequisite for all jqSuite products -->
<script type="text/ecmascript" src="./lib/jquery/jquery.min.js"></script>
<!-- This is the Javascript file of jqGrid -->
<script type="text/ecmascript" src="./lib/jqGrid-js-free/js/jquery.jqGrid.js"></script>
<!-- This is the localization file of the grid controlling messages, labels, etc.-->
<!-- We support more than 40 localizations -->
<script type="text/ecmascript" src="./lib/jqGrid-js-free/js/i18n/grid.locale-en.js"></script>
<!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
<link rel="stylesheet" type="text/css" media="screen" href="./lib/jquery-ui/jquery-ui.css" />
<!-- The link to the CSS that the grid needs -->
<link rel="stylesheet" type="text/css" media="screen" href="./lib/jqGrid-js-free/css/ui.jqgrid.css" />
<meta charset="utf-8" />
<title>jqGrid without PHP - Loading Data - JSON Live</title>
</head>
<body>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#jqGrid").jqGrid({
colModel: [
{
label: 'Title',
name: 'Title',
width: 150,
formatter: formatTitle
},
{
label: 'Link',
name: 'Link',
width: 80,
formatter: formatLink
},
{
label: 'View Count',
name: 'ViewCount',
width: 35,
sorttype:'integer',
formatter: 'number',
align: 'right'
},
{
label: 'Answer Count',
name: 'AnswerCount',
width: 25
}
],
viewrecords: true, // show the current page, data rang and total records on the toolbar
width: 780,
height: 200,
rowNum: 15,
datatype: 'local',
pager: "#jqGridPager",
caption: "Load live data from stackoverflow"
});
fetchGridData();
function fetchGridData() {
var gridArrayData = [];
// show loading message
$("#jqGrid")[0].grid.beginReq();
$.ajax({
url: "http://api.stackexchange.com/2.2/questions?order=desc&sort=activity&tagged=jqgrid&site=stackoverflow",
success: function (result) {
for (var i = 0; i < result.items.length; i++) {
var item = result.items[i];
gridArrayData.push({
Title: item.title,
Link: item.link,
CreationDate: item.creation_date,
ViewCount: item.view_count,
AnswerCount: item.answer_count
});
}
// set the new data
$("#jqGrid").jqGrid('setGridParam', { data: gridArrayData});
// hide the show message
$("#jqGrid")[0].grid.endReq();
// refresh the grid
$("#jqGrid").trigger('reloadGrid');
}
});
}
function formatTitle(cellValue, options, rowObject) {
return cellValue.substring(0, 50) + "...";
};
function formatLink(cellValue, options, rowObject) {
return "<a href='" + cellValue + "'>" + cellValue.substring(0, 25) + "..." + "</a>";
};
/*---- 8< ------*/
// editfunc here works (an alert is popped up), although the format of the function parameters is not according to spec:
// searchfunc also works (it is the default)
$('#jqGrid').jqGrid('navGrid', '#jqGridPager',{
add:false, del:false, view:false,
editfunc: function(){alert('EDIT');}
});
/*---- >8 ------*/
});
</script>
</body>
</html>
nun die gleiche Datei nehmen, entfernen Sie den kleinen Schnipsel zwischen den Snip Linien, und ersetzen Sie es mit dem folgenden Code-Schnipsel, sieht das eher wie etwas, das ich umsetzen müssen:
/*---- 8< ------*/
// editfunc does NOT work as desired here (no alert)
// search function works, WITH the parameters as specified here
// from the file jquery.jqGrid.js(): navGrid : function parameters: (elem, p, pEdit, pAdd, pDel, pSearch, pView)
// (=jqGrid-free @license Guriddo jqGrid JS - v5.2.0 - 2016-11-27 Copyright(c) 2008, Tony Tomov, [email protected])
$('#jqGrid').jqGrid('navGrid', '#jqGridPager',
{ add:false, del:false, view:false }, // p
{ editfunc: function(r){alert('EDIT');} }, // pEdit (does NOT work)
{ }, // pAdd
{ }, // pDel
{ multipleSearch: true, closeAfterSearch:true, closeOnEscape:true, searchOnEnter:true, showQuery:true }, // pSearch (works with these options)
{ } // pView
);
/*---- >8 ------*/
Hier ach Die Editfunc funktioniert überhaupt nicht, ich bekomme die Standard-Bearbeitungsfunktion. Die Suche funktioniert jetzt wie gewünscht mit den benutzerdefinierten Parametern.
Kurz gesagt: Ich kann nicht scheinen, sowohl eine benutzerdefinierte Editfunc und Suche mit benutzerdefinierten Parametern arbeiten!
Ich kann nichts falsch mit dem zweiten Schnipsel sehen. Es ist übrigens. auch nach einigen Beispielen im jqGrid-Wiki.
Alle Hinweise, um beide zusammen zu arbeiten würden geschätzt.
Ehrfürchtig.Sieht so aus, als ob das mein Problem löst. Vielen Dank! Was den jqgrid-Code angeht, hatte ich in letzter Zeit ziemlich viele Versionen heruntergeladen, um PHP-Code, JS-Code und was nicht zu testen und zu sehen, was ich im aktuellen Projekt verwenden könnte. Am Ende habe ich dein Free-Jqgrid vor ein paar Wochen gefunden. Ich hätte schwören können, dass ich alle erforderlichen Symlinks erstellt habe, um Ihre Implementierung zu verwenden, aber anscheinend habe ich bei all der Versionierung und dem Testen vergessen, einige URLs in meinem Code zu ändern ... Also danke auch für den Hinweis in dieser Hinsicht! – Roadowl
@Roadowl: Gern geschehen! Ich habe das Demo etwas modifiziert. Siehe https://jsfiddle.net/OlegKi/odvxefra/3/ – Oleg
Schön ... vielleicht ein bisschen zu blingy für mich aber ... ;-) Nochmals vielen Dank! – Roadowl