JQGrid的用法解析(列编辑,添加行,删除行)

什么是JQGrid

JQGrid 是一个基于jQuery的表格插件，可以方便的进行添加、编辑、删除等操作。使用JQGrid可以让开发者更加轻松的操纵HTML表格。

JQGrid的使用步骤

第一步: 引入JQGrid插件文件

必须在页面中引入JQGrid的JS和CSS文件。可以从JQGrid官网下载最新版本的JQGrid，或者使用CDN方式引入。

<!-- 引入jquery文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 引入JQGrid插件文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/free-jqgrid/4.15.6/css/ui.jqgrid.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/free-jqgrid/4.15.6/jquery.jqGrid.min.js"></script>

第二步: 添加HTML结构

在HTML页面中添加一个表格的DIV容器和一个分页DIV容器。

<div id="gridContainer"></div>
<div id="pagerContainer"></div>

第三步: 设置JQGrid的参数

$("#gridContainer").jqGrid({
    url:"data.json", // 数据URL
    editurl:"edit.php", // 编辑URL
    datatype: "json", // 数据类型
    colModel: [
        {name:'id', index:'id', align:'center', hidden:true},
        {name:'name', index:'name', align:'center', width:150, editable:true},
        {name:'age', index:'age', align:'center', width:100, editable:true},
        {name:'email', index:'email', align:'center', width:200, editable:true}
    ],
    rowNum:10, // 初始显示行数
    rowList:[10,20,30], // 每页显示行数
    pager: '#pagerContainer', // 分页DIV容器
    sortname: 'id', // 排序字段
    sortorder: "desc", // 排序方式
    viewrecords: true, // 是否显示总记录数
    caption: "用户列表" // 表格标题
});

以上是JQGrid最基本的使用方法，我们可以根据需求进行更多的设置，比如设置列的排序、搜索、导出等。

JQGrid的列编辑

JQGrid可以直接在表格中进行列编辑操作，只需要将colModel中editable属性设置为true即可。在编辑完成后，JQGrid会自动将数据发送到服务器保存。

$("#gridContainer").jqGrid({
    url:"data.json",
    editurl:"edit.php",
    datatype: "json",
    colModel: [
        {name:'id', index:'id', align:'center', hidden:true},
        {name:'name', index:'name', align:'center', width:150, editable:true},
        {name:'age', index:'age', align:'center', width:100, editable:true},
        {name:'email', index:'email', align:'center', width:200, editable:true}
    ],
    rowNum:10,
    rowList:[10,20,30],
    pager: '#pagerContainer',
    sortname: 'id',
    sortorder: "desc",
    viewrecords: true,
    caption: "用户列表"
});

JQGrid的添加行

JQGrid可以直接在表格中添加一行数据，只需要使用addRowData方法。该方法的参数是一个对象，表示要添加的行数据。如果不仅需要添加行数据，还需要将数据发送到服务器保存，则需要使用editurl参数指定保存数据的URL。

$("#gridContainer").jqGrid({
    url:"data.json",
    editurl:"edit.php",
    datatype: "json",
    colModel: [
        {name:'id', index:'id', align:'center', hidden:true},
        {name:'name', index:'name', align:'center', width:150, editable:true},
        {name:'age', index:'age', align:'center', width:100, editable:true},
        {name:'email', index:'email', align:'center', width:200, editable:true}
    ],
    rowNum:10,
    rowList:[10,20,30],
    pager: '#pagerContainer',
    sortname: 'id',
    sortorder: "desc",
    viewrecords: true,
    caption: "用户列表"
});

$("#addButton").click(function(){
    var rowdata = {
        id: "1001",
        name: "张三",
        age: "20",
        email: "[e-mail]"
    };
    $("#gridContainer").jqGrid('addRowData', "1001", rowdata);
});

以上代码中，我们先在页面中添加一个按钮，当该按钮被点击时，就会调用addRowData方法添加一行数据到表格。

JQGrid的删除行

JQGrid可以直接在表格中删除一行数据，只需要使用delRowData方法。该方法的参数是一个字符串，表示要删除的行的ID。如果不仅需要删除行数据，还需要将数据发送到服务器保存，则需要使用editurl参数指定保存数据的URL。

$("#gridContainer").jqGrid({
    url:"data.json",
    editurl:"edit.php",
    datatype: "json",
    colModel: [
        {name:'id', index:'id', align:'center', hidden:true},
        {name:'name', index:'name', align:'center', width:150, editable:true},
        {name:'age', index:'age', align:'center', width:100, editable:true},
        {name:'email', index:'email', align:'center', width:200, editable:true}
    ],
    rowNum:10,
    rowList:[10,20,30],
    pager: '#pagerContainer',
    sortname: 'id',
    sortorder: "desc",
    viewrecords: true,
    caption: "用户列表"
});

$("#deleteButton").click(function(){
    var rowid = $("#gridContainer").jqGrid('getGridParam', 'selrow');
    if(rowid == null){
        alert("请选择要删除的行！");
        return;
    }
    $("#gridContainer").jqGrid('delRowData', rowid);
});

以上代码中，我们先在页面中添加一个按钮，当该按钮被点击时，就会调用delRowData方法删除被选中的行。如果没有选中任何行，则会弹出提示框。