jquery - jqgrid远程数据+卡住列+内联操作按钮=操作按钮无响应？

Question

我可以让我的代码在 3 个功能中的任意 2 个中工作(“远程数据”、“卡住列”和“内联操作按钮”)。但是，当同时使用这 3 个功能时，当我单击按钮时，操作按钮没有响应。

我尝试了所有组合:

1. 远程数据 + 内联操作按钮 = 确定
2. 本地数据 + 卡住列 + 内联操作按钮 = 确定
3. 远程数据 + 卡住列 + 内联操作按钮 = 不行

下面是我的代码:

<script type="text/ecmascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/ecmascript" src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/jquery.jqgrid.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.1.1/plugins/jquery.contextmenu.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.4/css/ui.jqgrid.min.css">

    $(document).ready(function () {
        var lastSel;
        $("#jqGrid").jqGrid({
            url: "/WEB/fundingMasterList.action",
            datatype: "json",
            colModel: [
                { label: "Actions", name: "actions", width: 55, align: 'center', sortable: false, frozen:true, formatter: "actions", formatoptions: {
                        keys: false,
                        delbutton: false,
                        onEdit: function(id) {
                            alert("onEdit called!");
                        }
                    },
                    classes:'frozen'
                },
                { name: "itemId", label: "Item", frozen:true, hidden:true, key:true },
                { name: "funding.division", label: "Div", frozen:true, editable:"hidden", width:80, classes:'frozen'},
                { name: "funding.ro2", label: "SE", frozen:true, editable:true, width:80, classes:'frozen' },
                { name: "funding.ro1", label: "E or RM", frozen:true, editable:true, width:80, classes:'frozen' },
                { name: "id.typeOfFunding", label: "Type", frozen:true, editable:"hidden", width:50, classes:'frozen' },
                { name: "id.recordId", label: "Funding<br/>Ref. No.", frozen:true, editable:"hidden", width:120, classes:'frozen' },
                { name: "id.fiscalYear", label: "Year of<br/>Funding", frozen:true, editable:"hidden", width:80, classes:'frozen' },
                { name: "funding.client", label: "Client", width:100, editable:"hidden" },
                { name: "funding.typeOfClient", label: "Client Nature", editable:"hidden" }
            ],
            onSelectRow: function(id){
                if(id && id!==lastSel){ 
                    $('#jqGrid').jqGrid('restoreRow',lastSel); 
                    lastSel=id; 
                }
            },
            cmTemplate: { title: false },
            loadonce: true,
            viewrecords: true,
            rowNum: 50,
            gridview:true,
            shrinkToFit: false, // must be set with frozen columns, otherwise columns will be shrank to fit the grid width
            autowidth: true, 
            height: 610,
            footerrow : true,
            rownumbers:true,
            pgbuttons : true,
            pginput : true,
            viewsortcols: [true, 'vertical', true],
            emptyrecords: "No records to display",
            pager: "#pager"
        });
        $("#jqGrid").jqGrid("setFrozenColumns");
    });

谢谢

Answer 1

感谢您的错误报告。我 promise the corresponding fix到 GitHub。问题是缺少将 click 事件绑定(bind)到卡住列的 div 中的 formatter: "action" 按钮。

我不建议你使用

autowidth: true

如果使用卡住列，特别是对于使用如此多卡住列的网格。卡住的 div 无法滚动。因此网格的宽度必须大于所有卡住列的总宽度。

演示 https://jsfiddle.net/La3cxu2e/2/直接从 GitHub 加载所有 jqGrid 文件。