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>

通過這些自定義操作，可以實現更靈活和強大的功能，滿足特定業務需求。