javascript - JQGrid的子网格和父网格中的单元格编辑-6ren

javascript - JQGrid的子网格和父网格中的单元格编辑

转载作者：行者123 更新时间：2023-11-30 18:37:23

我的网格中有四个向下钻取级别，我想在其中对所有四个级别进行单元格编辑。我使用网格作为子网格。

我的问题是，当我选择任何子网格(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。

为了修复这个错误，我建议对 from the line 2276 做一些小改动。 grid.base.js。问题是 click 将被触发两次 - 一次用于内部网格(下一级网格)，第二次用于网格。我认为来自内部网格的点击应该在外部网格中被忽略。

为此，我最初想建议修改 the line 2279 grid.base.js 或 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 中仍然存在。我认为这是浏览器中的错误。

所以我决定使用

if($(ptr).length === 0 || ptr[0].className.indexOf( 'ui-state-disabled' ) > -1 || $(td,ts).closest("table.ui-jqgrid-btable")[0].id !== ts.id) {

作为错误修复。呵呵从the demo可以看到问题将通过更改得到解决。

关于javascript - JQGrid的子网格和父网格中的单元格编辑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7860221/

文章推荐： c# - asp.net c# 中的 Formview EditItemTemplate

文章推荐： c - 与线程共享变量的最佳方式

文章推荐： c# - 通过标记为网络钓鱼的 Gmail 发送电子邮件

文章推荐： c - 从文件读取并在c中存储多个数组

html - 影响每第三个元素/格
我已经尝试在我的 CSS 中添加一个元素来删除每三个 div 的 margin-right。不过，似乎只是出于某种原因影响了第 3 次和第 7 次。需要它在第 3、6、9 等日工作... CSS .s
animation - CSS3 格 'pulse'
如何使 div/input 闪烁或“脉冲”？例如，假设表单字段输入了无效值？最佳答案使用 CSS3 类似 on this page ，您可以将脉冲效果添加到名为 error 的类中: @-webk
R 格 : Removing the wireframe mesh
我目前正在尝试构建一个简单的 wireframe来自 lattice 的情节包，但由沿 y 轴的数百个点组成。这导致绘图被线框网格淹没，您看到的只是一个黑色块。我知道我可以用 col=FALSE 完全
CSS 格[编号| ="subPane"]错误
在知道 parent>div CSS 选择器在 IE 中无法识别后，我重新编码我的 CSS 样式，例如: div#bodyMain div#paneLeft>div{/*styles here*/}
html - CSS 格 :hover exclusion
我有两个 div，一个在另一个里面。当我将鼠标悬停到最外面的那个时，我想改变它的颜色，没问题。但是，当我将鼠标悬停到内部时，我只想更改它的颜色。这可能吗？换句话说，当将鼠标悬停到内部 div 上
flutter - 格 subview 构建器，其项目的随机宽度 flutter
我需要展示这样的东西有人可以帮忙吗？我可以实现以下输出我正在使用以下代码:: GridView.builder( scrollDirection: Axis.vertical,
android - 复制键盘布局，向上插入 Bottom Sheet 格
当 Bottom Sheet 像 Android 键盘一样打开时，是否有任何方法可以手动上推布局( ScrollView 或回收器 View 或整个 Activity )？或者你可以说我想以 Bott
css - Safari 4 格 :hover Support
我有以下代码，用于使用纯 HTML 和 CSS 显示翻转。当您将鼠标悬停在文本上时，它会更改左右图像。在我测试的所有浏览器中都运行良好，Safari 4 除外。据我收集的信息，Safari 4 支持
html - 带 Bootstrap 的图像，打破列/格
我构建了某种 CMS，但在使用 TinyMCE 和 Bootstrap 时遇到了一些问题。我有一个页面，其中概述了一个 div，如果用户单击该 div，他们可以从模态中选择图像。该图像被插入到一个
CSS 格 :hover with transition only applying to one element?
出于某种原因，当我设置一个过渡时，当我的鼠标悬停在一个元素上时，背景会改变颜色，它只适用于一个元素，但它们都共享同一个类？任何帮助我的 CSS .outer_ad { position:rel
android-studio - 缺少 Android Studio 调试监 window 格
好吧，这真的很愚蠢。我不知道 Android Studio 中的调试监视框架发生了什么。我有 1.5.1 的工作室。是否有一些来自 intellij 的 secret 知识来展示它。最佳答案与以
css - 3 格 : one centered and the two others one in each side
我有这个标记: some code > 我正在尝试获取此布局: 注意:上一个和下一个按钮靠近#player 我正在尝试这样: .nextBtn{
CSS 格 :hover per menu item having Child and Sibling Selectors issue
网站:http://avuedesigns.com/index 首页有 6 个菜单项。我希望每件元素在您经过时都有自己的颜色。这是当您将鼠标悬停在 div 上时将所有内容更改为白色的行 li#hom
php - 在 Joomla 中，如何为 index.php 创建 3x3(9 格)代码？
我需要在 index.php 文件中显示它，但没有任何效果。我所有的文章都没有正确定位。我将其用作代码: 最佳答案您可以首先检查您

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - JQGrid的子网格和父网格中的单元格编辑