【发布时间】：2015-09-02 12:28:06
【问题描述】：
我正在使用带有内联编辑的 JqGrid，我不使用导航、寻呼机或页脚。我想在底部添加空行以添加。我的意思是在添加新行后编辑现有行后，空行将始终存在。
我在 loadComplete 事件中添加了行，但我不再在开头添加空行了。
jQuery("#tableContents").jqGrid({
postData: { orderId: '139358' },
mtype: "POST",
url: "test.asmx/GetContents",
datatype: "json",
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: { repeatitems: true, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" },
colNames: ['Master Content ID', 'Description Of Goods', 'No Of Items', 'Total Value for Customs', 'Weight', 'Track No'],
colModel: [
{
name: 'master_content_id', index: 'master_content_id', width: 60, hidden: true, editable: true, editrules: { edithidden: false }
},
{
name: 'content', index: 'content', width: 60, sorttype: "string", editable: true, edittype: "text",
editrules: {
required: true
}
},
{
name: 'piecesInt', index: 'piecesInt', width: 90, align: "right", sorttype: "int", editable: true,
editrules: {
number: true,
required: true
}
},
{
name: 'value', index: 'value', width: 100, align: "right", sorttype: "float", editable: true,
editrules: {
required: true
}
},
{
name: 'weight', index: 'weight', width: 80, align: "right", sorttype: "float", editable: true,
editrules: {
required: true
}
},
{
name: 'track_no', index: 'track_no', width: 80, align: "right", sorttype: "string", editable: true
},
],
rowNum: 10,
rowList: [10, 20, 30],
//pager: jQuery('#pager1'),
sortorder: "desc",
viewrecords: true,
regional: 'tr',
height : '100%',
caption: "Manipulating Array Data",
editurl: 'test.asmx/EditContent',
loadonce: true,
sortable: true,
//footerrow: true,
onSelectRow: function (rowid) {
var $self = $(this),
// savedRows array is not empty if some row is in inline editing mode
savedRows = $self.jqGrid("getGridParam", "savedRow");
if (savedRows.length > 0) {
$self.jqGrid("restoreRow", savedRows[0].id);
}
$self.jqGrid("editRow", rowid, {
keys: true,
extraparam: { orderId: '139358', staffId : '111' },
aftersavefunc: function (rowid) {
alert("Saved");
}
});
},
loadComplete: function () {
var $self = $(this)
$self.jqGrid('addRowData', undefined, {});
}
});
我们怎样才能做到这一点？
【问题讨论】：
-
你写了“底部的空行”。还不够清楚，因为 jqGrid 的其他选项不清楚。例如，您使用
height: "auto"还是使用固定高度？为什么你想要空行？为什么不使用页脚？只需尝试使用footerrow: true。此外，您发布的代码添加了空行总是。因此，在按任何列进行每次排序后，您将多出一行。是你需要的吗？ -
我使用 height: auto ，我不在表格底部使用页脚或寻呼机。我希望底部有一个空行，以便用户可以使用该空行添加新记录。我使用内联编辑，所以当我添加 "footerrow: true" 时，我无法使用内联编辑来编辑该页脚行。我希望那个空行不被排序。
-
我还是不明白你使用的场景。要添加新行并开始内联编辑，您可以使用
addRow。如果您希望将行添加到网格底部，可以使用position: "last"选项。我不明白的问题是何时何地（在哪个回调内部以及在何种条件下）应该在您的场景中调用addRow。我想您尝试实现某种输入表单，并且希望用户添加新行。可能您需要禁止编辑以前添加的行以进行其他限制。 -
在我的网格中我没有添加删除或保存按钮，我没有分页或页脚，只有标题和行。我的情况就是这样，假设行中没有记录，应该有一个空行，以便用户可以添加他的第一行。
-
他将单击空行以激活内联编辑，输入值，然后按 Enter 保存行。行被保存，并且在之前保存的行下再次出现一个空行，以便他可以添加他的第二条记录。然后他再次选择空行以激活内联编辑，他填充值并再次输入。保存第二条记录，并在底部再次添加一个新的空行。这样继续下去。