jqgrid的是使用与一般的js插件使用一样,引入即可。但是依赖于jqUI维护皮肤。所以在jqgrid引入之前先引入jqUI的js、css文件。、
css引入:
<link rel="stylesheet" type="text/css" href="package/jquery-ui-1.11.2/jquery-ui.min.css"/>
<link rel="stylesheet" type="text/css" href="package/jquery-ui-1.11.2/jquery-ui.theme.min.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="package/jqGrid4.7.1/css/ui.jqgrid.css"/>
js引入:
<script type="text/javascript" src="js/libs/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="package/jqGrid4.7.1/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="package/jquery-ui-1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery.jgrid.no_legacy_api//启用新的API接口用新的API接口
</script>
<script type="text/javascript" src="package/jqGrid4.7.1/js/jquery.jqGrid.min.js"></script>
本文目的是介绍如何实现表格行内编辑、行内插入行、删除行的功能。见效果图:

上图具体功能点:
1、表格行内可编辑
2、点击“加号”图标可紧接插入一行
3、点击“回收”图标可删除该行
html代码: