0
버전 jqGrid는 여기에서 사용됩니다. @license Guriddo jqGrid JS - v5.2.0 - 2016-11-27 Copyright (c) 2008, tony @ trirand. com사용자 정의 검색 매개 변수가 지정된 경우 jqGrid 사용자 정의 editfunc가 작동하지 않습니다.
아래 코드의 첫 번째 블록은 jqGrid의 자체 포함 된 구현입니다. 실제로 대부분 jqGrid 사이트에있는 예제 중 하나에서 가져온 것입니다. 그 안에 클립 표식이있는 주석 줄 사이의 부분 인 스 니펫을 추가했습니다.
snipped가 추가 된 경우 맞춤 수정 기능이 추가되었습니다. 그것은 멋지게 작동합니다 (예를 들어 스텁이 많거나 적음). 또한 검색은 기본 매개 변수를 모두 사용하여 작동합니다. 둘 다에 대해 행을 선택하고 편집 또는 검색의 해당 아이콘을 클릭하십시오. 아아,
/*---- 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 ------*/
을 여기에 :
<!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>
지금, 같은 파일을 싹둑 라인 사이의 작은 조각을 제거하고 다음 코드로 교체, 그게 내가 구현해야 뭔가 더 좋아 보인다 editfunc가 전혀 작동하지 않습니다. 기본 편집 기능이 있습니다. 검색은 이제 사용자 지정 지정된 매개 변수로 원하는대로 작동합니다.
간단히 말해 사용자 정의 매개 변수가 작동하는 사용자 정의 editfunc 및 검색을 얻을 수없는 것 같습니다!
두 번째 스 니펫에 문제가없는 것 같습니다. 그것은 btw입니다. 또한 jqGrid 위키의 몇 가지 예제에 따라.
두 가지 모두를 해결하기위한 힌트가 있으면 감사하겠습니다.
굉장합니다.이게 내 문제를 해결하는 것 같아. 고마워요! jqgrid 코드에 관해서는 최근에 PHP 코드, js 코드 및 기타 등을 테스트하고 현재 프로젝트에서 사용할 수있는 버전을 확인하기 위해 요즘 버전을 다운로드하고있었습니다. 결국 나는 몇 주 전에 당신의 자유로운 jqgrid를 발견했다. 내가 필요한 구현을 사용하기 위해 필요한 모든 심볼릭 링크를 만들겠다고 맹세했지만 모든 버전 관리와 테스트를 통해 내 URL에서 일부 URL을 변경하는 것을 잊어 버렸습니다 ... 그런 점에서 힌트를 주셔서 감사합니다! – Roadowl
@Roadowl : 천만에요! 데모를 약간 수정했습니다. https://jsfiddle.net/OlegKi/odvxefra/3/ – Oleg
을 참조하십시오. 니스 ... 어쩌면 저를 위해 너무 블링 고를 수도 있습니다 ...--) 다시 한번 감사드립니다! – Roadowl