行内控制按钮增删改查Bootstrap
http://www.guriddo.net/demo/bootstrap/
<html lang="en">
<head>
<!-- The jQuery library is a prerequisite for all jqSuite products -->
<script type="text/ecmascript" src="../../../js/jquery.min.js"></script>
<!-- We support more than 40 localizations -->
<script type="text/ecmascript" src="../../../js/trirand/i18n/grid.locale-en.js"></script>
<!-- This is the Javascript file of jqGrid -->
<script type="text/ecmascript" src="../../../js/trirand/jquery.jqGrid.min.js"></script>
<!-- A link to a Boostrap and jqGrid Bootstrap CSS siles-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="../../../css/trirand/ui.jqgrid-bootstrap.css" />
<script>
$.jgrid.defaults.width = 780;
$.jgrid.defaults.responsive = true;
$.jgrid.defaults.styleUI = 'Bootstrap';
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<meta charset="utf-8" />
<title>jqGrid Loading Data - Inline Editing with Row buttons</title>
</head>
<body>
<div style="margin-left:20px">
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#jqGrid").jqGrid({
url: 'data.json',
editurl: 'clientArray',
datatype: "json",
colModel: [
{
label: "Edit Actions",
name: "actions",
width: 100,
formatter: "actions",
formatoptions: {
keys: true,
editOptions: {},
addOptions: {},
delOptions: {}
}
},
{
labe: 'Employee ID',
name: 'EmployeeID',
width: 75
},
{
label : 'First Name',
name: 'FirstName',
width: 140,
editable: true // must set editable to true if you want to make the field editable
},
{
label: 'Last Name',
name: 'LastName',
width: 100,
editable: true
},
{
label: 'City',
name: 'City',
width: 120,
editable: true
}
],
sortname: 'EmployeeID',
loadonce: true,
width: 780,
height: 200,
rowNum: 150,
pager: "#jqGridPager"
});
});
</script>
</body>
</html>
data
"records":"10",
"page":1,
"total":1,
"rows":[
{"EmployeeID":"1","FirstName":"Nancy","LastName":"Davolio","City":"Seattle"},
{"EmployeeID":"3","FirstName":"Janet","LastName":"Leverling","City":"Tacoma"},
{"EmployeeID":"4","FirstName":"Margaret","LastName":"Peacock","City":"Kirkland"},
{"EmployeeID":"5","FirstName":"Steven","LastName":"Buchanan","City":"Redmond"},
{"EmployeeID":"7","FirstName":"Robert","LastName":"King","City":"London"},
{"EmployeeID":"8","FirstName":"Laura","LastName":"Callahan","City":"London"},
{"EmployeeID":"9","FirstName":"Anne","LastName":"Dodsworth","City":"London"},
{"EmployeeID":"11","FirstName":"","LastName":"","City":"Seattle"},
{"EmployeeID":"12","FirstName":"asdsad","LastName":"last name","City":"Seattle"},
{"EmployeeID":"13","FirstName":"","LastName":"","City":"Seattle"}
]
}