0
私はjQgridを使用していますが、私の要件は他のURLを開くためにグリッドのナビゲーションパネルの更新ボタンのすぐ横にカスタムボタンが必要なようです。そのボタンをクリックすると、新しいURLが新しいブラウザウィンドウに表示されます。以下は 他のURLを開くためにjqGridにカスタムボタンを追加する
は<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/ecmascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/ecmascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script type="text/ecmascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.src.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css" />
<title>jqGrid</title>
</head>
<body>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
<script type="text/javascript">
var mydata = [
{ id : "01", "name" : "row one", age : "25", "sex" : "male","Lname" : "row one", location: "pune", dob:"12oct"},
{ id : "02", "name" : "row two" , age : "26", "sex" : "female","Lname" : "row one", location: "Agra", dob:"12oct"},
{ id : "03", "name" : "row one" , age : "27", "sex" : "male","Lname" : "row one", location: "Delhi", dob:"12oct"},
{ id : "04", "name" : "row two", age : "28", "sex" : "female","Lname" : "row one", location: "Mumbai", dob:"12oct"},
{ id : "05", "name" : "row one" , age : "29", "sex" : "male","Lname" : "row one", location: "Haidrabad", dob:"12oct"},
{ id : "06", "name" : "row two" , age : "30", "sex" : "female","Lname" : "row one", location: "Chennai", dob:"12oct"},
{ id : "07", "name" : "row one" , age : "31", "sex" : "male","Lname" : "row one", location: "Kolkatta", dob:"12oct"},
{ id : "08", "name" : "row two" , age : "32", "sex" : "female","Lname" : "row one", location: "Chandigarh", dob:"12oct"},
{ id : "09", "name" : "row one", age : "33", "sex" : "male","Lname" : "row one", location: "Bhopal", dob:"12oct" },
{ id : "10", "name" : "row two" , age : "34", "sex" : "female","Lname" : "row one", location: "Surat", dob:"12oct"},
{ id : "11", "name" : "row three", age : "35", "sex" : "male","Lname" : "row one", location: "Ahmadabad", dob:"12oct" }
];
$(document).ready(function() {
$("#jqGrid").jqGrid({
data: mydata, //insert data from the data object we created above
datatype: 'local',
colNames:['Id','Name', 'Age', 'Sex','Lastname', 'Location', 'DOB'], //define column names
colModel:[
{name:'id', index:'id', key: true, width:50},
{name:'name', index:'name', width:100},
{name:'age', index:'age', width:100},
{name:'sex', index:'sex', width:100},
{name:'Lname', index:'lname', width:100},
{name:'location', index:'location', width:100},
{name:'dob', index:'dob', width:100}
],
viewrecords: true,
width: 480,
height: 150,
rowNum: 8,
shrinkToFit: false,
pager: "#jqGridPager"
});
$('#jqGrid').navGrid('#jqGridPager',
{
edit: false,
add: false,
del: false,
search: false,
view: false,
refresh: true,
position: "left",
cloneToTop: false
});
});
</script>
</body>
</html>
ありがとうございました................... –
@ abhishekkumar：ようこそ！ – Oleg