我正在使用jQgrid，但我的要求就像我需要在网格导航面板上的刷新按钮旁边的自定义按钮来打开其他一些URL。单击该按钮，应在新的浏览器窗口中打开新URL。
以下是我到目前为止的代码......
<!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>