我是jqGrid的新手。我正在加载本地文件(我将csv文件解析为json,然后将数组传输到jqGrid)。通过jqGrid生成的表应该允许用户修改,添加和删除网格中的数据。我尝试使用各种答案解决我的问题,如:
Adding new row to jqGrid using modal form on client only
在那里,我找到了Oleg为4.7 version of jqGrid制作的例子,并为我的目的复制了相同的代码。结果是我能删除我在网格初始化后添加的行,但我无法删除从阵列加载的任何其他行。
另一件有趣的事情是我能够修改从数组加载的行,我唯一不能对网格做的就是删除从数组加载的行。我很感激任何建议。
以下是jqGrid代码的一部分:
var delSettings = {
onclickSubmit: function () {
var $this = $(this), p = $this.jqGrid("getGridParam"), newPage = p.page;
if (p.lastpage > 1) {// on the multipage grid reload the grid
if (p.reccount === 1 && newPage === p.lastpage) {
// if after deliting there are no rows on the current page
// which is the last page of the grid
newPage--; // go to the previous page
}
// reload grid to make the row from the next page visable.
setTimeout(function () {
$this.trigger("reloadGrid", [{page: newPage}]);
}, 50);
}
return true;
}
};
$("#jqGrid").jqGrid({
datatype: "local",
data: results.data,
editurl: "clientArray",
colModel: [
{
label: 'Id',
name: 'Id',
width: 60,
editable: true,
key: true,
sorttype: 'number'
},
{
label: 'Company',
name: 'Company',
width: 90,
editoptions: {size: 40},
editable: true,
sorttype: 'string'
},
{
label: 'Address',
name: 'Address',
width: 100,
editoptions: {size: 40},
editable: true
},
{
label: 'City',
name: 'City',
width: 80,
editoptions: {size: 40},
editable: true
}
],
height: '100%',
viewrecords: true,
caption: "Baza klientów Klimatest",
pager: "#jqGridPager",
sortable: true,
ignoreCase: true,
cmTemplate: {editable: true, searchoptions: {clearSearch: true }},
rowNum: 5,
rowList: [5, 10, 20],
});
// toolbar searching
$('#jqGrid').jqGrid('filterToolbar', { defaultSearch: 'cn'});
$('#jqGrid').jqGrid('navGrid',"#jqGridPager",
{ edit: true, add: true, del: true, search: true, refresh: true, view: true},
// options for the Edit Dialog
{
editCaption: "The Edit Dialog",
recreateForm: true,
closeAfterEdit: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Add Dialog
{
closeAfterAdd: true,
recreateForm: true,
errorTextFormat: function (data) {
return 'Error: ' + data.responseText
}
},
// options for the Delete Dialog
delSettings,
// options for the Search Dialog
{
},
// options for the View Dialog
{
});
// add first custom button
$('#jqGrid').navButtonAdd('#jqGridPager',
{
buttonicon: "ui-icon-calculator",
title: "Column chooser",
caption: "Columns",
position: "last",
onClickButton: function() {
// call the column chooser method
jQuery("#jqGrid").jqGrid('columnChooser');
}
});
修改 数据源是通过Papaparse.js插件(对象数组)解析的CSV文件的结果,如下所示:
Id: "100,1"
Address: "Strefowa 8"
Company: "DSSE Sp. z o.o."
City: "Warsaw"
我像Oleg建议的那样编辑了代码,我仍然只能删除通过jqGrid接口添加的记录。
我不知道它是否有帮助,但当我点击删除图标并确认我要删除所选行时,该行不再突出显示,但仍然可见。感谢您的反馈。
答案 0 :(得分:1)
// options for the View Dialog
块附近的代码中有明显错误。视频选项应包含在 删除和搜索选项之后<(参见the documentation)。因此,您当前的代码不会使用delSettings
选项。
我建议您在下一个问题中另外包含测试数据,因为某些问题仅存在于某些特定格式的输入数据中。
更新:问题出在您使用的数据中。您使用的Id
的值包含逗号(&#34; 100,1&#34;)。 jqGrid不允许这样做。首先,HTML中的id不应该使用CSS中具有特殊含义的字符。第二个问题:delGridRow
方法在分隔符中使用逗号一次删除多行。因此,id="100,1"
的使用将会尝试删除两行:一行id = 100,第二行id = 1。顺便说一句,我现在正在GitHub的my fork开发jqGrid。我在ids中使用了特殊字符修复了许多限制。所以你将能够使用id =&#34; 100,1&#34;如果你要使用我的fork中的jqGrid,请成功删除行。
如果您需要构建包含多个数字的ID,我建议您使用下划线:Id: "100_1"
而不是Id: "100,1"
。