jqgrid单击行时如何展开/折叠子网格
我需要单击一行,如果jqgrid单击行时如何展开/折叠子网格,jqgrid,toggle,subgrid,Jqgrid,Toggle,Subgrid,我需要单击一行,如果 子栅格将折叠,然后展开 子网格将展开,然后将其折叠 我发现问题是,但是@Oleg Sugestion在我的项目中不起作用。我已经调试过了,发现“onsetrow”将执行两次。比如说, onSelectRow: function (row_id) { alert("hello"); }, 它将得到两个警报。所以,如果我写这封信: onSelectRow: function (row_id) { $("#gr
onSelectRow: function (row_id) {
alert("hello");
},
它将得到两个警报。所以,如果我写这封信:
onSelectRow: function (row_id) {
$("#grd").toggleSubGridRow(row_id);
},
它会扩展和崩溃(实际上,我看不到这个过程,我是通过调试找到的)。
这是我的代码,请忽略其中的中文
jQuery("#grd").jqGrid({
url:'__APP__/Spot_sales/get_sale_order_masters',
mtype: 'post',
datatype: "json",
colNames:['id','uid','日期','销售单号','客户名称','应收金额','实收金额','状态'],
colModel:[
{name:'id',index:'id', hidden:true},
{name:'uid',index:'uid', hidden:true},
{name:'order_date',index:'order_date', width:100, align:'center'},
{name:'orderNo',index:'orderNo', width:100, align:'center'},
{name:'customer',index:'customer', width:100, align:'center'},
{name:'sum_money',index:'sum_money', width:100, align:'center'},
{name:'receive_money',index:'receive_money', width:100, align:'center'},
{name:'status',index:'status', width:100, align:'center'}
],
sortname: 'order_date',
sortorder: "desc",
viewrecords: true,
pager:'#pager',
rowNum:10,
autowidth: true,
height:'auto',
multiselect: false,
onSelectRow: function (row_id) {
$("#grd").toggleSubGridRow(row_id);
},
subGrid : true,
subGridOptions: { "plusicon" : "ui-icon-triangle-1-e",
"minusicon" :"ui-icon-triangle-1-s",
"openicon" : "ui-icon-arrowreturn-1-e",
"reloadOnExpand" : true,
"selectOnExpand" : true },
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id;
subgrid_table_id = subgrid_id+"_t";
jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
jQuery("#"+subgrid_table_id).jqGrid({
url:'__APP__/Spot_sales/get_sale_order_details?so_id='+$("#grd").getRowData(row_id)['id'],
mtype: 'get',
data:{},
datatype: "json",
colNames: ['id','so_id','产品编号','数量','单位','单价'],
colModel: [
{name:"id",index:"id",hidden:true},
{name:"so_id",index:"so_id",hidden:true},
{name:"productNo",index:"productNo",width:100},
{name:"quantity",index:"quantity",width:100,align:"right"},
{name:"unit",index:"unit",width:80,align:"right"},
{name:"price",index:"price",width:100,align:"right"}
],
rownumbers: true,
height: '100%',
sortname: 'id',
sortorder: "asc"
});
}
}).navGrid("#pager",{edit:false,add:false,del:false,refresh:false,search:false});
jQuery(#grd”).jqGrid({
url:“\uuuuuuuuuuuuuuuuuuuuuuuuu应用程序/现场销售/获取销售订单\uuuuu主控程序”,
mtype:“post”,
数据类型:“json”,
colNames:['id','uid','日期','销售单号','客户名称','应收金额','实收金额','状态'],
colModel:[
{name:'id',index:'id',hidden:true},
{name:'uid',index:'uid',hidden:true},
{名称:'order_date',索引:'order_date',宽度:100,对齐:'center'},
{名称:'orderNo',索引:'orderNo',宽度:100,对齐:'center'},
{名称:'customer',索引:'customer',宽度:100,对齐:'center'},
{名称:'sum_-money',索引:'sum_-money',宽度:100,对齐:'center'},
{名称:'receive_-money',索引:'receive_-money',宽度:100,对齐:'center'},
{名称:'status',索引:'status',宽度:100,对齐:'center'}
],
sortname:“订单日期”,
巫师:“描述”,
viewrecords:是的,
寻呼机:“#寻呼机”,
rowNum:10,
自动宽度:正确,
高度:'自动',
多选:错,
OnSetRow:功能(行id){
$(“#grd”)。切换子网格行(行id);
},
子网格:对,
子网格选项:{“plusicon”:“ui-icon-triangle-1-e”,
“小图标”:“ui-icon-triangle-1-s”,
“openicon”:“ui-icon-arrowreturn-1-e”,
“reloadOnExpand”:正确,
“selectOnExpand”:true},
subGridRowExpanded:函数(subgrid\u id,row\u id){
var子网格\u表\u id;
子网格\表\ id=子网格\ id+“\ t”;
jQuery(“#”+子网格id).html(”;
jQuery(“#”+子网格_表_id).jqGrid({
url:“应用程序/现货销售/获取销售订单详细信息”?so_id='+$(“#grd”).getRowData(row_id)['id'],
mtype:'获取',
数据:{},
数据类型:“json”,
colNames:['id','so_id','产品编号','数量','单位','单价'],
colModel:[
{name:“id”,index:“id”,hidden:true},
{name:“so_id”,index:“so_id”,hidden:true},
{名称:“productNo”,索引:“productNo”,宽度:100},
{名称:“数量”,索引:“数量”,宽度:100,对齐:“右”},
{名称:“单位”,索引:“单位”,宽度:80,对齐:“右”},
{名称:“价格”,索引:“价格”,宽度:100,对齐:“右”}
],
行数:对,
高度:“100%”,
sortname:'id',
分拣员:“asc”
});
}
}).navGrid(“#pager”,{edit:false,add:false,del:false,refresh:false,search:false});
一个选项是在行单击事件上展开子网格
$(document).on("click", "#grd tr.jqgrow", function (e) {
var id = jQuery('#grd').jqGrid('getGridParam', 'selrow');
if (id != null) {
jQuery('#grd').expandSubGridRow(id);
}
});
你在你选择的行上做
点击
还是双击
?你在测试中使用的是哪种web浏览器?@Oleg我的浏览器是IE和Firefox。我还有这个测试代码$(“#btn_add1”).button()。点击(函数(){jQuery('#grd')。切换子网格行('1');)它工作正常!尝试使用切换子网格行
,我只在双击时看到一些问题。在我的测试中,只有在双击时才会执行两次onsemeow
。仅使用expandSubGridRow
,用户只需单击“-”即可折叠子网格图标,但在选择或双击时没有问题。@Oleg我在第二个演示中尝试了你的expandSubGridRow
建议,效果很好。你的第一个演示正是我想要的,但在我的项目中有问题。ps:my jqGrid vesion是4.5.2