- 需引入
<link rel="stylesheet" href="${path}/style/bootstrap/jqgrid/css/css/hot-sneaks/jquery-ui-1.8.16.custom.css">
<link rel="stylesheet" href="${path}/style/bootstrap/jqgrid/boot/css/trirand/ui.jqgrid-bootstrap.css">
<script src="${path}/style/bootstrap/jqgrid/js/i18n/grid.locale-cn.js"></script>
<script src="${path}/style/bootstrap/jqgrid/boot/js/trirand/jquery.jqGrid.min.js"></script>
<script src="${path}/style/bootstrap/js/ajaxfileupload.js"></script>
- 一个例子
<script>
$(function (){
pageInit();
})
function pageInit() {
$("#videoTable").jqGrid({
url: "${path}/emp/fenye", //page,rows //返回数据:total总页数 records总条数 page当前页 row数据
editurl: "${path}/emp/edit",
datatype: "json",
cellEdit:true,
rowNum: 2,
rowList: [2, 10, 20, 30],
pager: '#videoPage',
styleUI: "Bootstrap",
autowidth: true,
reloadAfterSubmit: true,
height: "auto",
viewrecords: true, //是否显示总条数
colNames: ['ID', '员工名', '工资', '年龄', '部门'],
colModel: [
{
name: 'id', index: 'id', width: 55},
{
name: 'empname', editable: true, index: 'invdate', width: 90},
{
name: 'salary', editable: true, index: 'invdate', width: 90},
{
name: 'age', editable: false, index: 'name asc, invdate', width: 100, align: "center"
},
{
name: 'deptname',editable: true, index: 'amount', width: 80, align: "right"
}
]
});
//编辑工具栏
//编辑工具栏
$("#videoTable").jqGrid('navGrid', '#videoPage',
{
edit: true, add: true, del: true, addtext: "添加"},
{
closeAfterEdit: true,
reloadAfterSubmit: false,
afterSubmit: function (data