JQGrid子网格和父网格中的单元格编辑
Cell Editing in Sub grid and Parent grid of JQGrid
我在我的网格中有四个层次的向下钻取，其中，我想在所有四个层次中进行单元格编辑。我使用Grid作为子网格。
我的问题是，当我选择任何子网格内的任何单元格(级别2,3,4)。相同的单元格在所有级别中被选中。
。如果我在第4层选择金额。上面的列单元格也被选中了。
以下是我的工作代码与JSON数据重新产生的场景。
请帮助。
提前感谢。
jQuery(document).ready(function()
{
var lastSelAsset;
var lastSel;
var transDate;
var rowDataTest="";
var detailLevelLastSel;
var thirdLevelLastSel;
var levelTwoTableId;
var levelFourSecurityNum;
var levelThreePager;
var transactionData = [ {id:"1",invdate:"2007-10-01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}];
var transactionDataSecondLevel = [
{id:"20",invdate:"2007-10-02",name:"test2",note:"note2",amount1:"300.00",tax1:"20.00",total1:"320.00"},
{id:"21",invdate:"2007-09-01",name:"test3",note:"note3",amount1:"400.00",tax1:"30.00",total1:"430.00"},
{id:"22",invdate:"2007-10-04",name:"test",note:"note",amount1:"200.00",tax1:"10.00",total1:"210.00"},
{id:"23",invdate:"2007-10-05",name:"test2",note:"note2",amount1:"300.00",tax1:"20.00",total1:"320.00"},
{id:"24",invdate:"2007-09-06",name:"test3",note:"note3",amount1:"400.00",tax1:"30.00",total1:"430.00"}];
var transactionDataThirdLevel = [
{id:"25",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"26",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"27",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"28",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"29",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"30",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"31",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"32",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"33",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"34",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"35",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"36",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"37",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"38",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"39",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"40",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"41",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"42",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"43",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"44",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"45",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"46",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"47",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"48",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"49",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"50",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"51",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"52",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"53",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"54",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}];
var transactionDataFourthLevel = [
{id:"55",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"56",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"57",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"58",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"59",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
$("#tList").jqGrid({
data: transactionData,//Level 1
width: 1160,
multiselect: false,
height:275,
datatype: "local",
colNames : [ 'Inv No', 'Date',
'Client', 'Amount', 'Tax',
'Total', 'Notes' ],
colModel : [ {
name : 'id',
index : 'id',
width : 60,
sorttype : "int"
}, {
name : 'invdate',
index : 'invdate',
width : 90,
sorttype : "date"
}, {
name : 'name',
index : 'name',
width : 100
}, {
name : 'amount',
index : 'amount',
width : 80,
align : "right",
sorttype : "float",
editable : true
}, {
name : 'tax',
index : 'tax',
width : 80,
align : "right",
sorttype : "float",
editable : true
}, {
name : 'total',
index : 'total',
width : 80,
align : "right",
sorttype : "float",
editable : true
}, {
name : 'note',
index : 'note',
width : 150,
sortable : false
} ],
gridComplete: function(){
$("#tList").setGridWidth($(window).width()-50);
},
cellEdit: true,
cellsubmit: 'clientArray',
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+"_per";
//alert(subgrid_table_id +" -- Second level");
levelTwoTableId = subgrid_table_id;
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
jQuery("#"+subgrid_table_id).jqGrid({
data: transactionDataSecondLevel,//Level 2
datatype: "local",
autowidth : true,
multiselect: false,
colNames : [ 'Inv No', 'Date',
'Client', 'Amount1', 'Tax1',
'Total1', 'Notes' ],
colModel : [ {
name : 'id',
index : 'id',
width : 60,
sorttype : "int"
}, {
name : 'invdate',
index : 'invdate',
width : 90,
sorttype : "date"
}, {
name : 'name',
index : 'name',
width : 100
}, {
name : 'amount1',
index : 'amount1',
width : 80,
align : "right",
sorttype : "float",
editable : true
}, {
name : 'tax1',
index : 'tax1',
width : 80,
align : "right",
sorttype : "float",
editable : true
}, {
name : 'total1',
index : 'total1',
width : 80,
align : "right",
sorttype : "float",
editable : true
}, {
name : 'note',
index : 'note',
width : 150,
sortable : false
} ],
rowNum:-1,
sortname: 'num',
sortorder: "asc", height: '100%',
gridComplete: function(){
$("#"+levelTwoTableId).setGridWidth($(window).width()-50);
},
cellEdit: true,
cellsubmit: 'clientArray',
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+"_asd";
//alert(subgrid_table_id +" -- Third level");
pager_id = "h_"+subgrid_table_id;
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
jQuery("#"+subgrid_table_id).jqGrid({
data: transactionDataThirdLevel,//Level 3
datatype: "local",
height:"auto",
multiselect: false,
colNames : [ 'Inv No', 'Date',
'Client', 'Amount', 'Tax',
'Total', 'Notes' ],
colModel : [ {
name : 'id',
index : 'id',
width : 60,
sorttype : "int"
}, {
name : 'invdate',
index : 'invdate',
width : 90,
sorttype : "date"
}, {
name : 'name',
index : 'name',
width : 100
}, {
name : 'amount',
index : 'amount',
width : 80,
align : "right",
sorttype : "float",
editable : true
}, {
name : 'tax',
index : 'tax',
width : 80,
align : "right",
sorttype : "float",
editable : true
}, {
name : 'total',
index : 'total',
width : 80,
align : "right",
sorttype : "float",
editable : true
}, {
name : 'note',
index : 'note',
width : 150,
sortable : false
} ],
sortname: 'num',
sortorder: "asc",
gridComplete: function(){
},
cellEdit: true,
cellsubmit: 'clientArray',
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id_fourth, pager_id;
subgrid_table_id_fourth = subgrid_id+"_xcv";
//alert(subgrid_table_id_fourth +" -- Fouth level");
$("#"+subgrid_id).html("<table id='"+subgrid_table_id_fourth+"' class='scroll'></table>");
jQuery("#"+subgrid_table_id_fourth).jqGrid({
data: transactionDataFourthLevel,//Level 4
datatype: "local",
multiselect: false,
colNames : [ 'Inv No', 'Date',
'Client', 'Amount1', 'Tax1',
'Total1', 'Notes' ],
colModel : [ {
name : 'id',
index : 'id',
width : 60,
sorttype : "int"
}, {
name : 'invdate',
index : 'invdate',
width : 90,
sorttype : "date"
}, {
name : 'name',
index : 'name',
width : 100
}, {
name : 'amount',
index : 'amount',
width : 80,
align : "right",
sorttype : "float",
editable : true
}, {
name : 'tax',
index : 'tax',
width : 80,
align : "right",
sorttype : "float",
editable : true
}, {
name : 'total',
index : 'total',
width : 80,
align : "right",
sorttype : "float",
editable : true
}, {
name : 'note',
index : 'note',
width : 150,
sortable : false
} ],
rowNum:-1,
sortname: 'num',
sortorder: "asc", height: '100%',
gridComplete: function(){
},
cellEdit: true,
cellsubmit: 'clientArray',
rowNum : -1,
sortname : 'Sr. No.',
viewrecords : true,
sortorder : "desc",
caption : "",
forceFit : false
});//Level 4 close
},
sortname : 'Sr. No.',
viewrecords : true,
sortorder : "desc",
caption : "",
forceFit : false
});//Level 3 close
},
rowNum : -1,
sortname : 'Sr. No.',
viewrecords : true,
sortorder : "desc",
caption : "",
forceFit : false
});//Level 2 close
},
sortname : 'Sr. No.',
viewrecords : true,
sortorder : "desc",
caption : ""
});
});//Document ready close
我将此问题解释为jqGrid中的错误。所以给你加1。
为了修复这个bug，我建议在grid.base.js的第2276行做一个小的改变。问题是click将被触发两次——一次用于内部网格(下一关的网格)，第二次用于网格。我认为内部网格的点击应该在外部网格中被忽略。
要做到这一点，我最初认为建议修改grid.base.js的2279行或jquery.jqGrid.src.js的2279行(在jqGrid 4.2.0中)从
if($(ptr).length === 0 || ptr[0].className.indexOf( 'ui-state-disabled' ) > -1 ) {
if($(ptr).length === 0 || ptr[0].className.indexOf( 'ui-state-disabled' ) > -1 || ts.rows.namedItem(ptr[0].id) === null) {
修改后在IE、Firefox和Opera中问题将得到解决。这个问题在webkit浏览器Google Chrome和Safari中仍然存在。我想是浏览器的bug。
所以我决定使用
if($(ptr).length === 0 || ptr[0].className.indexOf( 'ui-state-disabled' ) > -1 || $(td,ts).closest("table.ui-jqgrid-btable")[0].id !== ts.id) {
作为bug修复。从演示中可以看出，这个问题将通过更改得到解决。
相关文章：
- ExtJS网格单元格编辑器，防止焦点松动问题
- ExtJ将工具提示添加到网格单元格文本中
- 编辑后更改切片网格单元格数据
- 剑道网格单元格 :如何自动修剪文本以避免换行
- jQuery 单击事件在包含在光滑网格单元格中时不会为锚点触发
- 咏叹调网格单元格标签在 SVG 矩形内始终为空白
- Kendo UI网格单元格中的工具栏菜单，菜单是从哪个行单击的
- 使用HTML按钮更改ng网格单元格值
- Kendo UI网格-单元格上的标题属性
- 显示网格单元格中的窗口?EXTjs
- 清除activateextjs4上的可编辑网格单元格
- kendou网格单元格修剪数据值
- 剑道-在选择网格单元格时更新另一个网格(mvvm)
- 剑道网格如何以编程方式聚焦网格单元格和块选择文本
- 移除网格单元格之间的空间
- 在js/html/css中创建一个可点击的网格单元格
- ExtJs 6.0:使用组合框编辑网格单元格-不同步id值
- 当改变剑道网格单元格值并恢复到保存前的原始值时显示脏标志
- 如何为动态变化的数据更改ag网格单元格的颜色
- 禁用具有给定类的网格单元格的干净方法
