<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>jqgrid+button测试
</title>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="../js/jquery.jqGrid.min.js"></script>
<link href="../js/ui.jqgrid.css" rel="stylesheet" type="text/css"/>
<link href="../js/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript">
$(function () {
$( "button" ).button({
icons: {
primary: "ui-icon-plus"
}
}).next().button({
icons: {
primary: "ui-icon-minus"
}
});
$("#jqGrid").jqGrid({
url: '../data.json',
datatype: "json",
colModel: [
{ label: 'ID', name: 'CustomerID', key: true, width: 75 },
{ label: 'Company Name', name: 'CompanyName', width: 150 },
{ label: 'Contact Name', name: 'ContactName', width: 150 },
{ label: 'Phone', name: 'Phone', width: 150 },
{ label: 'City', name: 'City', width: 150 }
],
width: 780,
height: 150,
rowNum: 7,
viewrecords: true,
loadonce: true,
toolbar:[true,"top"],
onSelectRow: function(rowid, selected) {
if(rowid != null) {
jQuery("#jqGridDetails").jqGrid('setGridParam',{url: rowid+".json",datatype: 'json'});
jQuery("#jqGridDetails").jqGrid('setCaption', 'Detail Grid::'+rowid);
jQuery("#jqGridDetails").trigger("reloadGrid");
}
},
pager: "#jqGridPager"
});
$("#jqGrid").navGrid('#jqGridPager', { add: false, edit: false, del: false,
search: false,refresh:false
}) .navButtonAdd('#jqGridPager',
{
caption: "Refresh",
onClickButton:function() {
Refresh(); return false; },
position: "last",
buttonicon:"ui-icon-refresh"
}).navButtonAdd('#jqGridPager',
{
caption: "Search",
onClickButton:function() {
Refresh(); return false; },
position: "last",
buttonicon: "ui-icon-search"
})
.navButtonAdd('#jqGridPager',
{
caption: "Save",
onClickButton:function() {
Save(); return false; },
position: "last"
})
.navButtonAdd('#jqGridPager',
{
caption: "Back",
onClickButton:function() { redirectBack(); return false; },
position: "last"
});
$("#t_jqGrid").css({"height":30});
$("#btn").appendTo("#t_jqGrid");
});
</script>
</head>
<body>
<div id="btn">
<button>Add
</button>
<button>Delete
</button>
</div>
<div style="margin-left:8px;">
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
</div>
</body>
</html>
Jqgrid Toolbar - 892847834 - ITBOX的博客
转载请注明原文地址: https://ju.6miu.com/read-500149.html
