jquery - jqgrid远程数据+冻结列+内联动作按钮=动作按钮无响应?
问题描述
我可以让我的代码在 3 个功能中的 2 个中工作(“远程数据”、“冻结列”和“内联操作按钮”)。但是当同时使用这 3 个功能时,当我单击按钮时,操作按钮没有响应。
我尝试了所有组合:
- 远程数据 + 内联操作按钮 = OK
- 本地数据 + 冻结列 + 内联操作按钮 = 确定
- 远程数据 + 冻结列 + 内联操作按钮 = 不正常
下面是我的代码:
<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");
});
谢谢
解决方案
感谢您的错误报告。我向 GitHub提交了相应的修复。问题是缺少将事件绑定到冻结列的 div 中click
的按钮。formatter: "action"
我不建议你使用
autowidth: true
在使用冻结列的情况下,特别是对于使用这么多冻结列的网格。冻结的 div 无法滚动。因此,网格的宽度必须大于所有冻结列的总宽度。
演示https://jsfiddle.net/La3cxu2e/2/直接从 GitHub 加载所有 jqGrid 文件。
推荐阅读
- python-sphinx - 仅在页面右侧三分之一处带有 Sphinx 和 RinohType 的代码文档
- c++ - 无法从项目目录打开 .txt 文件
- sql - 反透视取自另一个表的列
- python - 合并两个具有相同键的字典,但添加为另一个值(而不是替换)
- oracle - Oracle 19c:Oracle 错误 12514,无法连接到数据库
- html - Position Sticky 用于水平滚动的表头
- javascript - 如何通过函数中的javascript查找窗口大小(来自网站),然后根据大小隐藏/显示元素?
- c++ - SDL 未配置 OpenGL/GLX 支持
- python - Python:递归生成器
- xml - Spring项目中mybatis如何获取xml?