如何在jqGrid中选择数据行
我是jqGrid的首发，我在页面中有2个jqGrid，在Grid1中我有inCustom和OutCustom我希望用户点击Grid get Data inCustom和outCustom in write this code
var grid = $('#list');
grid.jqGrid({
url: 'jQGridHandler.ashx',
postData: { ActionPage: 'ClearanceRequest', Action: 'Fill' },
ajaxGridOptions: { cache: false },
loadonce: true,
direction: "rtl",
datatype: 'json',
height: 600,
width: 1000,
colNames: ['', '', '', ' ', '', '', '', '', '',
'', '', ' ', '', '', '', '', '', '',
'', ' ', '', '', '', '',
'', '', '', '', '', '', ' ',
'', '', '', '', '', ''],
colModel: [
{ name: 'REQUEST_ID', width: 100, sortable: true, hidden: true },
{ name: 'REQUEST_DATE', width: 50, sortable: true },
{ name: 'REQUEST_NO', width: 60, sortable: true },
{ name: 'CUSTOMER_ID', width: 100, sortable: true },
{ name: 'TRANSPORT_TYPE', width: 40, sortable: true },
{ name: 'CLEARANCE_TYPE', width: 50, sortable: true },
{ name: 'IMPORT_EXPORT', width: 30, sortable: true, editable: false,
edittype: 'checkbox', editoptions: { value: "True:False" },
formatter: "checkbox", formatoptions: { disabled: false }, hidden: true
},
{ name: 'WAYBILL_NO', width: 50, sortable: true },
{ name: 'WAYBILL_OFFICE', width: 100, sortable: true },
{ name: 'MANIFEST', width: 200, sortable: true, hidden: true },
{ name: 'STORE_BILL', width: 100, sortable: true, hidden: true },
{ name: 'DIRECT_NO', width: 100, sortable: true, hidden: true },
{ name: 'STORE_DATE', width: 100, sortable: true, hidden: true },
{ name: 'INOUT_DATE', width: 50, sortable: true, hidden: true },
{ name: 'SOURCE_COUNTRY', width: 30, sortable: true, hidden: true },
{ name: 'SOURCE_CITY', width: 80, sortable: true, hidden: true },
{ name: 'DESTINATION_COUNTRY', width: 100, sortable: true, hidden: true },
{ name: 'IN_CUSTOMS', width: 200, sortable: true, hidden: true },
{ name: 'OUT_CUSTOMS', width: 100, sortable: true, hidden: true },
{ name: 'INSURER_ID', width: 100, sortable: true, hidden: true },
{ name: 'INSURANCE_NO', width: 100, sortable: true, hidden: true },
{ name: 'CLEARANCE_PERSON', width: 50, sortable: true, hidden: true },
{ name: 'PROXY_NO', width: 30, sortable: true, hidden: true },
{ name: 'FACTOR_NO', width: 80, sortable: true, hidden: true },
{ name: 'SHIP_NAME', width: 100, sortable: true, hidden: true },
{ name: 'TRAVEL_NO', width: 200, sortable: true, hidden: true },
{ name: 'INDENT_NO', width: 100, sortable: true, hidden: true },
{ name: 'COOTAG_NO', width: 100, sortable: true, hidden: true },
{ name: 'PERMIT_NO', width: 100, sortable: true, hidden: true },
{ name: 'CLEARANCE_NO', width: 50, sortable: true, hidden: true },
{ name: 'CARNETIR_NO', width: 30, sortable: true, hidden: true },
{ name: 'PURCHASE_TYPE', width: 80, sortable: true, hidden: true },
{ name: 'ALL_VALUE', width: 100, sortable: true, hidden: true },
{ name: 'FREIGHT_STATUS', width: 30, sortable: true, editable: false,
edittype: 'checkbox', editoptions: { value: "True:False" },
formatter: "checkbox", formatoptions: { disabled: false }, hidden: true
},
{ name: 'COPY_ORIGINAL', width: 30, sortable: true, editable: false,
edittype: 'checkbox', editoptions: { value: "True:False" },
formatter: "checkbox", formatoptions: { disabled: false }, hidden: true
},
{ name: 'REMARK', width: 100, sortable: true, hidden: true },
{ name: 'details', width: 20, sortable: false, search: false,
formatter: function () {
return "<span class='ui-icon ui-icon-document'></span>";
}
}
],
gridview: true,
rowNum: 30,
rowList: [30, 60, 90],
pager: '#pager',
sortname: 'WorkOrderNo',
viewrecords: true,
sortorder: 'ASC',
rownumbers: true,
beforeSelectRow: function (rowid, e) {
var iCol = $.jgrid.getCellIndex(e.target);
// alert(rowid);
console.log(rowid);
//listItem
console.log($.jgrid.getCellIndex(e.target));
if ($.jgrid.getCellIndex(e.target) == 37) {
$("#listItem").jqGrid("GridUnload");
var gridItem = $('#listItem');
gridItem.jqGrid({
url: 'jQGridHandler.ashx',
postData: { ActionPage: 'ClearanceItems', Action: 'Fill', requestId: rowid },
ajaxGridOptions: { cache: false },
loadonce: true,
direction: "rtl",
datatype: 'json',
height: 200,
colNames: ['', '', '', '', ' ', ' ', '',
'', '', 'ا', ' ', '', ' ',
'', '', ' ', ' ',
'', '', '', ' ', ' ', ' ', ' ', ''],
colModel: [
{ name: 'REQUEST_ID', width: 100, sortable: true },
{ name: 'ITEM_NO', width: 200, sortable: true },
{ name: 'GOODS_DESCRIPTION', width: 100, sortable: true },
{ name: 'QUANTITY', width: 100, sortable: true },
{ name: 'PACKING_TYPE', width: 100, sortable: true },
{ name: 'GROSS_WEIGHT', width: 50, sortable: true },
{ name: 'TARE_WEIGHT', width: 30, sortable: true },
{ name: 'MEASUREMENT_TYPE', width: 80, sortable: true, hidden: true },
{ name: 'GOODS_PRICE', width: 100, sortable: true, hidden: true },
{ name: 'GOODS_CURRENCY', width: 200, sortable: true, hidden: true },
{ name: 'GOODS_CURRENCY_RATE', width: 100, sortable: true, hidden: true },
{ name: 'FREIGHT_PRICE', width: 100, sortable: true, hidden: true },
{ name: 'FREIGHT_CURRENCY', width: 100, sortable: true, hidden: true },
{ name: 'FREIGHT_CURRENCY_RATE', width: 50, sortable: true, hidden: true },
{ name: 'INSURANCE_PRICE', width: 30, sortable: true, hidden: true },
{ name: 'INSURANCE_CURRENCY', width: 80, sortable: true, hidden: true },
{ name: 'INSURANCE_CURRENCY_RATE', width: 100, sortable: true, hidden: true },
{ name: 'TARIFF_NO', width: 200, sortable: true, hidden: true },
{ name: 'CUSTOM_PRICE', width: 100, sortable: true, hidden: true },
{ name: 'WARRANTY_PRICE', width: 100, sortable: true, hidden: true },
{ name: 'INOUT_DATE', width: 100, sortable: true, hidden: true },
{ name: 'VEHICLE_TYPE', width: 50, sortable: true, hidden: true },
{ name: 'VEHICLE_NO', width: 30, sortable: true, hidden: true },
{ name: 'WAREHOUSE_ID', width: 80, sortable: true, hidden: true },
{ name: 'REMARK', width: 80, sortable: true, hidden: true }
],
gridview: true,
rowNum: 20,
rowList: [20, 40, 60],
pager: '#pagerItem',
viewrecords: true,
sortorder: 'ASC',
rownumbers: true
});
gridItem.jqGrid('navGrid', '#pagerItem', { add: true, edit: true, del: true },
{}, {}, {}, { multipleSearch: true, overlay: false, width: 460 });
var myGrid = grid;
var selRowId = myGrid.jqGrid('getGridParam', 'selrow');
celValue = myGrid.jqGrid('getCell', selRowId, 'IN_CUSTOMS');
celValue2 = myGrid.jqGrid('getCell', selRowId, 'OUT_CUSTOMS');
console.log(celValue);
console.log(celValue2);
alert(celValue);
alert(celValue2);
$("#POPUP2").dialog({ width: 780 });
}
return true;
}
});
grid.jqGrid('navGrid', '#pager', { add: false, edit: false, del: true },
{}, {}, {}, { multipleSearch: true, overlay: false, width: 460 })
.navButtonAdd("#pager", {
caption: "",
buttonicon: "ui-icon-plus",
onClickButton: function () {
// alert("Adding Row");
$("#POPUP1").dialog({ width: 730 });
},
position: "first"
})
.navButtonAdd("#pager", {
caption: "",
buttonicon: "ui-icon ui-icon-pencil",
onClickButton: function () {
},
position: "first"
})
.navButtonAdd("#pager", {
caption: "",
buttonicon: "ui-icon ui-icon-trash",
onClickButton: function () {
},
position: "first"
});
首次点击detils按钮获取false值但之后返回正确的数据
感谢所有
1 个答案:
答案 0 :(得分：5)
首先，我回答你的主要问题。问题是您在selrow回调中获得beforeSelectRow参数（所选行的ID）。首次单击“详细信息”按钮时，不会选择任何行。因此myGrid.jqGrid('getGridParam', 'selrow')将返回null，您将无法使用getCell从id {null的行的'IN_CUSTOMS'和'OUT_CUSTOMS'列获取值。< / p>
您始终会从beforeSelectRow回调中返回true。因此，如果用户单击“详细信息”按钮，则不希望阻止行选择。在这种情况下，我建议您最好使用onCellSelect回调。顺便说一句，回调函数iCol（单击的单元格的索引）作为附加参数。它将进一步简化您的代码。
下一个评论。您在所有列中使用sortable: true，但sortable属性的默认值已为true（请参阅the documentation）。另外我建议你在jqGrid的定义中使用column templates。例如，在第一个网格的定义中，您使用多次相同的属性来定义带有复选框的隐藏列。此外，还有许多列width: 100，所有列都有空列标题''。因此，您可以将第一个网格定义为
var grid = $('#list'),
hiddenCheckboxTemplate = { width: 30, editable: false,
edittype: 'checkbox', editoptions: { value: "True:False" },
formatter: "checkbox", formatoptions: { disabled: false }, hidden: true
};
grid.jqGrid({
colModel: [
{ name: 'REQUEST_ID', hidden: true },
{ name: 'REQUEST_DATE', width: 50 },
{ name: 'REQUEST_NO', width: 60 },
{ name: 'CUSTOMER_ID' },
{ name: 'TRANSPORT_TYPE', width: 40 },
{ name: 'CLEARANCE_TYPE', width: 50 },
{ name: 'IMPORT_EXPORT', template: hiddenCheckboxTemplate },
{ name: 'WAYBILL_NO', width: 50 },
{ name: 'WAYBILL_OFFICE' },
{ name: 'MANIFEST', width: 200, hidden: true },
{ name: 'STORE_BILL', hidden: true },
{ name: 'DIRECT_NO', hidden: true },
{ name: 'STORE_DATE', hidden: true },
{ name: 'INOUT_DATE', width: 50, hidden: true },
{ name: 'SOURCE_COUNTRY', width: 30, hidden: true },
{ name: 'SOURCE_CITY', width: 80, hidden: true },
{ name: 'DESTINATION_COUNTRY', hidden: true },
{ name: 'IN_CUSTOMS', width: 200, hidden: true },
{ name: 'OUT_CUSTOMS', hidden: true },
{ name: 'INSURER_ID', hidden: true },
{ name: 'INSURANCE_NO', hidden: true },
{ name: 'CLEARANCE_PERSON', width: 50, hidden: true },
{ name: 'PROXY_NO', width: 30, hidden: true },
{ name: 'FACTOR_NO', width: 80, hidden: true },
{ name: 'SHIP_NAME', hidden: true },
{ name: 'TRAVEL_NO', width: 200, hidden: true },
{ name: 'INDENT_NO', hidden: true },
{ name: 'COOTAG_NO', hidden: true },
{ name: 'PERMIT_NO', hidden: true },
{ name: 'CLEARANCE_NO', width: 50, hidden: true },
{ name: 'CARNETIR_NO', width: 30, hidden: true },
{ name: 'PURCHASE_TYPE', width: 80, hidden: true },
{ name: 'ALL_VALUE', hidden: true },
{ name: 'FREIGHT_STATUS', template: hiddenCheckboxTemplate },
{ name: 'COPY_ORIGINAL', template: hiddenCheckboxTemplate },
{ name: 'REMARK', hidden: true },
{ name: 'details', width: 20, sortable: false, search: false,
formatter: function () {
return "<span class='ui-icon ui-icon-document'></span>";
}
}
],
cmTemplate: { width: 100, label: '' },
... other option. No colNames are needed because of usage label
});
以减少代码并使其更易于管理（易于维护）的方式。由于label中的使用colModel属性，因此应包含colNames选项。
同样，您也可以减少定义第二个网格的代码。
另一个评论。代码if ($.jgrid.getCellIndex(e.target) == 37) {难以理解和维护。如果您要在网格中包含其他列，或者您甚至更改了某个选项的值（例如rownumbers），则应更改常量37。你想要做的只是测试用户是否点击了“详细信息”列。我建议你更好地使用列名。例如
var colModel = $(this).jqGrid('getGridParam', 'colModel'),
cm = colModel[iCol]; // iCol is defined before as $.jgrid.getCellIndex(e.target)
if (cm && cm.name === 'details') {
....
}
最后一句话。您使用GridUnload然后重新创建第二个网格，并附上详细信息。使用.trigger('reloadGrid', [{page: 1}])会更有效（参见here）。在开始时，您可以使用datatype: 'local'创建第二个网格。它将阻止从服务器加载数据。您可以将第二个网格放置在创建网格后直接隐藏的div中，并在需要时显示div。如果第二个网格需要填充信息，您可以使用setGridParam将datatype更改为“json”（请参阅the answer），设置其他参数，例如requestId postData然后调用.trigger('reloadGrid', [{page: 1}])。这种方式将更有效。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？