1. 云图网首页
  2. 技术专区

关于 jquery:jqGrid addRowData 不适用于网格作为子网格

• 技术专区

jqGrid addRowData doesn’t work with grid as subgrid

我想在 jqGrid 中使用网格作为子网格，因为我读到”简单子网格”不允许单元格编辑。

我正在成功地用 dataType 函数填充主网格，我正在尝试对子网格执行相同的操作，但子网格显示没有数据，我不知道为什么，因为我已调试并且我从正确捕获数据Web 服务，但是当我浏览数据时，对子网格执行 addRowData 似乎没有效果。

我正在使用 ASP.Net 2.0 Web 服务和 JSON，这是客户端代码，知道吗：-S？谢谢:-)

编辑：

我加了一个：

1
2
3
4
5
6
7
8
function ReceivedClientData(data) {
    var thegrid = $("#" + gridId);
    if ($(thegrid).length == 0) alert(‘NOT EXISTS’);

    thegrid.clearGridData();
    for (var i = 0; i < data.length; i++)
        thegrid.addRowData(i + 1, data[i]);  
}

我收到一个不存在的子网格，我不知道是否是检查选择器是否存在的最佳方法，但这意味着我找不到由 jqgrid 创建的”动态”我捕获了ajax回发？如何填充子网格？

编辑 2：

我认为我的子网格 ID 有误，现在我将 grid_id 保存在一个变量中

1
2
subGridRowExpanded: function(subgrid_id, row_id) {
            subGridID = subgrid_id;

并在回调时使用它，但是当我尝试添加行数据时，我从 jqgrid.js 接收到 p.rownumbers 为空。 :-S 有什么建议吗？

1
2
3
4
5
6
7
8
9
function ReceivedClientDataForSubGrid(data) {
    var thegrid = $("#" + subGridID);

    if ($(thegrid).length == 0) alert(‘NOT EXISTS’);

    thegrid.clearGridData();
    for (var i = 0; i < data.length; i++)
        thegrid.addRowData(i + 1, data[i]);
}

将”编辑 3″移动到答案以将问题标记为已回答

我解决了，我访问的 ID 不正确，正确的 ID 是 var thegrid = $(“#” subGridID “_t”);

完整的客户端代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
var gridId ="table";
$(function() {
    $("#"+gridId).jqGrid({
        datatype: function(pdata) { getData(pdata); },
        height: 250,
        colNames: [‘Nombre Objetivo’, ‘Tipo Objetivo’, ‘Objetivo Tipo 1’, ‘Objetivo Tipo 2’, ‘Objetivo Tipo 3’, ‘Autoevaluacion’, ‘Resultado Final’, ‘Actions’],
        colModel: [
                        { name: ‘ObjetivoNombre’, width: 200, sortable: false },
                        { name: ‘TipoObjetivo’, width: 200, sortable: false, editable: true, edittype: ‘select’, editoptions: { value: { 1: ‘1’, 2: ‘2’, 3: ‘3’}} },
                        { name: ‘ObjetivoTipo1’, width: 200, sortable: false, hidden: true },
                        { name: ‘ObjetivoTipo2’, width: 200, sortable: false, hidden: true },
                        { name: ‘ObjetivoTipo3’, width: 200, sortable: false, hidden: true },
                        { name: ‘Autoevaluacion’, width: 200, sortable: false, hidden: false, editable: true },
                        { name: ‘ResultadoFinal’, width: 200, sortable: false, hidden: false, editable: true },
                        { name: ‘act’, index: ‘act’, width: 75, sortable: false }
                    ],
        cellEdit: true,
        cellsubmit: ‘clientArray’,          
        pager: ‘#pager’,
        rowNum: 10,
        rowList: [10, 20, 30],
        sortname: ‘Nombre Objetivo’,
        sortorder: ‘desc’,
        viewrecords: true,
        gridComplete: function() {
            var ids = jQuery("#table").jqGrid(‘getDataIDs’);
            var idsLength = ids.length;
            for (var i = 0; i < idsLength; i++) {
                var cl = ids[i];
                de ="<input style=’height:22px;width:20px;’ type=’button’ value=’D’ onclick="deleteRow(‘" + cl +"’);" />";
                jQuery("#table").jqGrid(‘setRowData’, ids[i], { act: de });
            }
        },
        subGrid: 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(
           {
               datatype: function(pdata) { getDataSubGrid(pdata); },
               colNames: [‘Nombre Objetivo’, ‘Tipo Objetivo’, ‘Objetivo Tipo 1’, ‘Objetivo Tipo 2’, ‘Objetivo Tipo 3’, ‘Autoevaluacion’, ‘Resultado Final’],//, ‘Actions’],
               colModel: [
                        { name: ‘ObjetivoNombre’, width: 200, sortable: false },
                        { name: ‘TipoObjetivo’, width: 200, sortable: false, editable: true, edittype: ‘select’, editoptions: { value: { 1: ‘1’, 2: ‘2’, 3: ‘3’}} },
                        { name: ‘ObjetivoTipo1’, width: 200, sortable: false, hidden: true },
                        { name: ‘ObjetivoTipo2’, width: 200, sortable: false, hidden: true },
                        { name: ‘ObjetivoTipo3’, width: 200, sortable: false, hidden: true },
                        { name: ‘Autoevaluacion’, width: 200, sortable: false, hidden: false, editable: true },
                        { name: ‘ResultadoFinal’, width: 200, sortable: false, hidden: false, editable: true }
                    ],
               height: 100,
               rowNum: 20,
               sortname: ‘num’,
               sortorder:"asc"                  
           });
        },
        caption:"jQGrid Ejemplo"
    })      
});
        //AJAX GET DATA FROM WS
    function getData(pData) {
        gridId ="table";
        $.ajax({
            type: ‘POST’,
            contentType:"application/json; charset=utf-8",
            url: ‘<%= ResolveClientUrl("~/WebService.asmx/ObtenerDatosDPO") %>’,
            data: ‘{}’,
            dataType:"json",
            success: function(data, textStatus) {
                    ReceivedClientData(JSON.parse(getMain(data)).rows);
            },
            error: function(data, textStatus) {
                alert(‘An error has occured retrieving data!’);
            }
        });
    }
    function getDataSubGrid(pData) {
        gridId ="table_t";
        $.ajax({
            type: ‘POST’,
            contentType:"application/json; charset=utf-8",
            url: ‘<%= ResolveClientUrl("~/WebService.asmx/ObtenerDatosDPOSubGrid") %>’,
            data: ‘{}’,
            dataType:"json",
            success: function(data, textStatus) {
                ReceivedClientData(JSON.parse(getMain(data)).rows);
            },
            error: function(data, textStatus) {
                alert(‘An error has occured retrieving data subgrid!’);
            }
        });
    }

    //COMMON FUNCTIONS
    function ReceivedClientData(data) {
        var thegrid = $("#"+gridId);

        thegrid.clearGridData();
        for (var i = 0; i < data.length; i++)
            thegrid.addRowData(i + 1, data[i]);
    }      
    function getMain(dObj) {
        if (dObj.hasOwnProperty(‘d’))
            return dObj.d;
        else
            return dObj;
    }

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/268744.html

赞 (0)
0
上一篇 2022年6月20日
下一篇 2022年6月20日

相关推荐

发表回复

登录后才能评论