分享

Jqgrid行内编辑实现插入行、删除行

 quasiceo 2017-07-18

Jqgrid行内编辑实现插入行、删除行

ni00wa
ni00wa 发布于 2015-07-01 11:04:23 浏览:8086 类型:原创 - 随笔 分类:类库框架 - Jqgrid 二维码: 作者原创 版权保护
JqGrid 是一个用来显示网格数据的jQuery插件,功能强大,通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信。可以jqueryUI 组合使用更换主题。
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>

本文目的是介绍如何实现表格行内编辑、行内插入行、删除行的功能。见效果图:
Jqgrid行内编辑实现插入行、删除行

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

html代码:

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约