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; } |