ASP.NET jqGrid的排序和分页

在ASP.NET中使用jqGrid进行排序和分页，你需要遵循以下步骤：

引入必要的库文件首先，确保在你的项目中引入了jqGrid的JavaScript和CSS文件。你可以从官方网站下载这些文件，或者使用CDN链接。例如：

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.15.6/jquery.jqgrid.min.js"></script>

创建一个HTML表格在你的ASP.NET页面中创建一个HTML表格，用于承载jqGrid数据。例如：

<table id="grid"></table>

初始化jqGrid 在JavaScript代码中，初始化jqGrid并设置相关参数。例如：

$(document).ready(function () {
    $("#grid").jqGrid({
        url: 'YourDataUrl', // 替换为你的数据源URL
        datatype: 'json',
        mtype: 'GET',
        colModel: [
            { label: 'ID', name: 'Id', key: true, width: 75 },
            { label: '名称', name: 'Name', width: 100 },
            { label: '年龄', name: 'Age', width: 80 }
        ],
        rowNum: 10, // 每页显示的记录数
        rowList: [10, 20, 30], // 可选：设置每页显示的记录数范围
        pager: '#pager', // 分页器的ID
        sortname: 'Id', // 默认排序列
        viewrecords: true, // 显示总记录数
        sortorder: "asc" // 默认排序顺序（升序）
    });
});

创建分页器在你的ASP.NET页面中创建一个分页器控件。例如：

<div id="pager"></div>

处理排序和分页事件为了处理排序和分页事件，你需要使用jqGrid的onSelectRow和navGrid方法。例如：

$(document).ready(function () {
    $("#grid").jqGrid({
        // ... 其他参数 ...
        onSelectRow: function (rowid) {
            // 当选中某一行时，你可以在这里处理相关操作
            console.log("选中的行ID: " + rowid);
        },
        navGrid: '#pager', // 初始化分页器
        // ... 其他参数 ...
    });

    // 配置分页器按钮
    $("#pager").jqGrid('navGrid', '#pager', {
        edit: false, // 是否允许编辑
        add: false, // 是否允许添加
        del: false, // 是否允许删除
        search: true, // 是否允许搜索
        refresh: true, // 是否允许刷新
        view: false, // 是否允许查看
        position: "left", // 分页器按钮的位置
        cloneToTop: true, // 是否将分页器克隆到顶部
        addfunc: function () {
            // 添加新行的操作
            console.log("添加新行");
        },
        delfunc: function () {
            // 删除行的操作
            console.log("删除行");
        }
    });
});

现在，你已经成功地在ASP.NET中使用了jqGrid进行排序和分页。当然，你可以根据需要对这些功能进行进一步的定制。更多关于jqGrid的信息和示例，请参考官方文档：https://www.trirand.com/blog/

最新问答

相关标签