ASP.NET jqGrid的自定义操作

在ASP.NET中使用jqGrid时，可以通过自定义操作来实现一些特定的功能。以下是一些常见的自定义操作及其实现方法：

1. 自定义按钮

可以在jqGrid的导航栏中添加自定义按钮，例如“导出CSV”或“删除行”。

<script type="text/javascript">
    $(document).ready(function () {
        $("#grid").jqGrid({
            // 其他配置项
            toolbar: [
                {
                    name: "customButton",
                    label: "导出CSV",
                    onClickButton: function () {
                        exportToCSV();
                    }
                }
            ],
            // 其他配置项
        });

        function exportToCSV() {
            var grid = $("#grid");
            var csvContent = grid.jqGrid('getGridParam', 'data');
            var csvRows = [];

            for (var i = 0; i < csvContent.length; i++) {
                var rowData = csvContent[i];
                var row = [];
                for (var key in rowData) {
                    row.push(rowData[key]);
                }
                csvRows.push(row.join(','));
            }

            var csvFile = "data.csv";
            var blob = new Blob([csvRows], { type: 'text/csv;charset=utf-8;' });
            if (navigator.msSaveBlob) { // IE 10+
                navigator.msSaveBlob(blob, csvFile);
            } else {
                var link = document.createElement("a");
                if (link.download !== undefined) {
                    var url = URL.createObjectURL(blob);
                    link.setAttribute("href", url);
                    link.setAttribute("download", csvFile);
                    link.style.visibility = 'hidden';
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                }
            }
        }
    });
</script>

2. 自定义排序

可以自定义jqGrid的排序逻辑。

<script type="text/javascript">
    $(document).ready(function () {
        $("#grid").jqGrid({
            // 其他配置项
            sortname: "customSortColumn",
            loadComplete: function (data) {
                var grid = $("#grid");
                for (var i = 0; i < data.records.length; i++) {
                    data.records[i].customSortColumn = customSortFunction(data.records[i].customSortColumn);
                }
                grid.trigger("reloadGrid");
            }
        });

        function customSortFunction(value) {
            // 自定义排序逻辑
            return value.toLowerCase();
        }
    });
</script>

3. 自定义编辑

可以自定义jqGrid的编辑行为。

<script type="text/javascript">
    $(document).ready(function () {
        $("#grid").jqGrid({
            // 其他配置项
            editurl: "server.php",
            ondblClickRow: function (rowid) {
                $(this).jqGrid('editRow', rowid, { keys: true, oneditfunc: customEditFunction });
            }
        });

        function customEditFunction(rowid) {
            // 自定义编辑逻辑
            alert("Editing row " + rowid);
        }
    });
</script>

4. 自定义加载数据

可以自定义jqGrid的加载数据行为。

<script type="text/javascript">
    $(document).ready(function () {
        $("#grid").jqGrid({
            // 其他配置项
            loadComplete: function (data) {
                var grid = $("#grid");
                for (var i = 0; i < data.records.length; i++) {
                    data.records[i].customColumn = customDataFunction(data.records[i]);
                }
                grid.trigger("reloadGrid");
            }
        });

        function customDataFunction(record) {
            // 自定义数据函数
            return record.id + " - " + record.name;
        }
    });
</script>

通过这些自定义操作，可以实现更灵活和强大的功能，满足特定业务需求。