大佬教程收集整理的这篇文章主要介绍了jquery – 如何在jqGrid中选择数据行，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
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,{ name: 'CUSTOMER_ID',{ name: 'TRANSPORT_TYPE',width: 40,{ name: 'CLEARANCE_TYPE',{ name: 'IMPORT_EXPORT',width: 30,editable: false,edittype: 'checkBox',editoptions: { value: "True:false" },formatter: "checkBox",formatoptions: { disabled: false },hidden: true
},{ name: 'WAYBILL_NO',{ name: 'WAYBILL_OFFICE',{ name: 'MANIFEST',width: 200,{ name: 'STORE_BILL',{ name: 'DIRECT_NO',{ name: 'STORE_DATE',{ name: 'INOUT_DATE',{ name: 'sourcE_COUNTRY',{ name: 'sourcE_CITY',width: 80,{ name: 'DESTinATION_COUNTRY',{ name: 'IN_CUSTOMS',{ name: 'OUT_CUSTOMS',{ name: 'INSURER_ID',{ name: 'INSURANCE_NO',{ name: 'CLEARANCE_PERSON',{ name: 'PROXY_NO',{ name: 'FACTOR_NO',{ name: 'SHIP_NAME',{ name: 'TRAVEL_NO',{ name: 'INDENT_NO',{ name: 'COOTAG_NO',{ name: 'PERMIT_NO',{ name: 'CLEARANCE_NO',{ name: 'CARNETIR_NO',{ name: 'PURCHASE_TYPE',{ name: 'all_VALUE',{ name: 'FREIGHT_STATUS',{ name: 'COPY_ORIGINAL',{ name: 'REMARK',{ 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 },height: 200,'ا',' ',colmodel: [
{ name: 'requEST_ID',{ name: 'ITEM_NO',{ name: 'GOODS_DESCRIPTION',{ name: 'QUANTITY',{ name: 'PACKING_TYPE',{ name: 'GROSS_WEIGHT',{ name: 'TARE_WEIGHT',{ name: 'MEASUREMENT_TYPE',{ name: 'GOODS_PRICE',{ name: 'GOODS_CURRENCY',{ name: 'GOODS_CURRENCY_RATE',{ name: 'FREIGHT_PRICE',{ name: 'FREIGHT_CURRENCY',{ name: 'FREIGHT_CURRENCY_RATE',{ name: 'INSURANCE_PRICE',{ name: 'INSURANCE_CURRENCY',{ name: 'INSURANCE_CURRENCY_RATE',{ name: 'TARIFF_NO',{ name: 'CUSTOM_PRICE',{ name: 'WARRANTY_PRICE',{ name: 'VEHICLE_TYPE',{ name: 'VEHICLE_NO',{ name: 'WAREHOUSE_ID',hidden: true }
],rowNum: 20,rowList: [20,40,60],pager: '#pagerItem',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','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,width: 460 })
.navButtonAdd("#pager",{
caption: "",buttonicon: "ui-icon-plus",onClickButton: function () {
// alert("Adding Row");
$("#POPUP1").dialog({ width: 730 });
},position: "first"
})
.navButtonAdd("#pager",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值但之后返回正确的数据
谢谢大家
你总是从beforeSELEctRow回调中返回true.因此,如果用户单击“详细信息”按钮,则不希望阻止行选择.在这种情况下,我建议你最好使用onCellSelect回调.顺便说一下,回调有iCol(被点击的单元格的索引)作为附加参数.它将进一步简化您的代码.
下一句话.您在所有列中使用sortable：true,但sortable属性的默认值已经为true(请参阅the documentation).另外我建议你在jqGrid的定义中使用column templates.例如,在第一个网格的定义中,您使用多次相同的属性来定义带有复选框的隐藏列.此外,还有许多列的宽度为100,所有列都有空列标题”.因此,您可以将第一个网格定义为
var grid = $('#list'),hiddencheckBoxTemplate = { width: 30,hidden: true
};
grid.jqGrid({
colmodel: [
{ name: 'requEST_ID',width: 50 },width: 60 },{ name: 'CUSTOMER_ID' },width: 40 },template: hiddencheckBoxTemplate },{ name: 'WAYBILL_OFFICE' },cmTemplate: { width: 100,label: '' },... other option. No colNames are needed because of usage label
});
在这种方式中,您可以减少代码并使其更易于管理(易于维护).由于colmodel中的usage label属性,因此不应包含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).在开始时,您可以使用数据类型创建第二个网格：’local’.它将阻止从服务器加载数据.您可以将第二个网格放置在创建网格后直接隐藏的div中,并在需要时显示div.如果第二个网格需要填充信息,您可以使用setGridParam将数据类型更改为’json'(参见the answer),设置其他参数,如postData的requestId,然后调用.trigger(‘reloadGrid’,[{page：1}]) .这种方式将更有效地发挥作用.
以上是大佬教程为你收集整理的jquery – 如何在jqGrid中选择数据行全部内容，希望文章能够帮你解决jquery – 如何在jqGrid中选择数据行所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。