Версия jqGrid используется здесь: @license Guriddo jqGrid JS - v5.2.0 - 2016-11-27 Copyright (c) 2008, Тони Томов, tony @ trirand. comjqGrid custom editfunc не работает, если заданы параметры пользовательского поиска
Первый блок кода ниже представляет собой полностью автономную реализацию jqGrid. Фактически это в основном взято из одного из примеров на сайте jqGrid. В нем я добавил фрагмент, часть между строками комментариев с метками клипа.
Это добавленный снимок добавляет пользовательский editfunc. Он работает хорошо (в примере это, конечно, более или менее заглушка, только делая предупреждение). Кроме того, поиск работает со всеми его параметрами по умолчанию. Для обоих выберите строку и щелкните соответствующий значок «Правка» или «Поиск».
<!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>
Теперь возьмите тот же файл, удалить небольшой фрагмент между СниП линиями, и заменить его на следующий фрагмент, который больше похож на что-то мне нужно реализовать:
/*---- 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 ------*/
Здесь, увы editfunc вообще не работает, я получаю функцию редактирования по умолчанию. Поиск теперь работает, по желанию, с настраиваемыми параметрами.
Вкратце: я не могу получить как настраиваемый editfunc, так и поиск с настраиваемыми параметрами!
Я не вижу ничего плохого во втором фрагменте. Это кстати. также в некоторых примерах на wiki jqGrid.
Любые подсказки, чтобы получить как совместную работу, так и быть оценены.
Awesome.Похоже, это решает мою проблему. Большое спасибо! Что касается кода jqgrid, в последнее время я загружал довольно много версий, чтобы протестировать PHP-код, js-код и многое другое и посмотреть, что я могу использовать в текущем проекте. В конце концов, я нашел ваш бесплатный jqgrid несколько недель назад. Я мог бы поклясться, что я создал все необходимые символические ссылки для использования вашей реализации, но, судя по всему, со всеми версиями и тестированием я забыл изменить некоторые URL-адреса в моем коде ... Так что спасибо за намек в этом отношении! – Roadowl
@Roadowl: Добро пожаловать! Я немного модифицировал демо. См. Https://jsfiddle.net/OlegKi/odvxefra/3/ – Oleg
Ницца ... может быть, слишком блеск для меня, хотя ... ;-) Еще раз спасибо! – Roadowl