¿Cómo disparar loadComplete después de agregar una nueva fila en jqgrid?

Tengo un formateador personalizado que se activa dentro de loadComplete de jqgrid. Necesita el mismo formateador personalizado para trabajar cuando una fila se agrega dinámicamente también. Así que estaba pensando en llamar a loadComplete () como cualquier función normal. El formateador personalizado funciona bien cuando se carga la grilla, pero no tiene efecto cuando se agrega una fila más tarde.

agregar fila dinámicamente

function addRow(cfgid,cfgname,hostname,osname,cfgDesc,productId,cfgType,updateDate,emailAddress,absolutePath,fileName,productVersion,converted) { var myrow = {cfgId:cfgid, '':'', cfgName:cfgname, hostname:hostname, osname:osname, cfgDesc:cfgDesc, productId:productId,hostname:hostname,cfgType:cfgType,updateDate:updateDate,emailAddress:emailAddress,absolutePath:absolutePath,fileName:fileName,productVersion:productVersion,converted:converted}; $("#list1").addRowData(cfgid, myrow,"first"); //$("#list1").loadComplete(); does not work $("#list1").trigger("reloadGrid"); $("#list1").sortGrid('updateDate', true, 'desc'); } 

JqGrid

 function drawDynamicGrid(xml) { var emptyMsgDiv = $('
No configurations loaded
'); var xmlObject=StringtoXML(xml); var getColumnIndexByName = function (grid, columnName) { var cm = grid.jqGrid('getGridParam', 'colModel'), i = 0, l = cm.length; for (; i < l; i += 1) { if (cm[i].name === columnName) { return i; // return the index } } return -1; }, grid = jQuery("#list1"), convertIcon = '', iconAlert = ''; grid.jqGrid({ datastr : xml, datatype: 'xmlstring', colNames:['cfgId','Name', 'Host','Operating System', 'Description','Product', 'Type', 'Last Updated Time','Last Updated By','','','',''], colModel:[ {name:'cfgId',index:'cfgId', width:90, align:"left", hidden:true}, {name:'cfgName',index:'cfgName', width:80, align:"left", formatter: 'showlink', formatoptions: {baseLinkUrl: '#'} }, {name:'hostname',index:'hostname', width:70, align:"left"}, {name:'osname',index:'osname', width:90, align:"left"}, {name:'cfgDesc',index:'cfgDesc', width:80, align:"left"}, {name:'productId',index:'productId', width:40, align:"left"}, {name:'cfgType',index:'cfgType', width:50, align:"left"}, {name:'updateDate',index:'updateDate',sorttype:'Date', width:120, align:"left"}, {name:'emailAddress',index:'emailAddress', width:120, align:"left"}, {name:'absolutePath',index:'absolutePath', width:90, align:"left", hidden:true}, {name:'fileName',index:'fileName', width:10, align:"left", hidden:true}, {name:'productVersion',index:'productVersion', width:10, align:"left", hidden:true}, {name:'converted',index:'converted', width:10, align:"left", hidden:true} ], pager : '#gridpager', rowNum:10, rowList:[10,50,100], scrollOffset:0, height: 'auto', emptyrecords: 'No configurations loaded', autowidth:true, viewrecords:true, gridview: true, multiselect: true, xmlReader: { root : "list", row: "Response", id: "cfgId", userdata: "userdata", repeatitems: false }, loadComplete: function () { var count = grid.jqGrid('getGridParam'); var ts = grid[0]; if (ts.p.reccount === 0) { grid.hide(); emptyMsgDiv.show(); } else { grid.show(); emptyMsgDiv.hide(); } //for showlink and icon alert having date difference more than 90 days var iRow, row, trClasses, $cell, icfgName = getColumnIndexByName(grid, 'cfgName'), iupdateDate = getColumnIndexByName(grid, 'updateDate'), iconverted = getColumnIndexByName(grid, 'converted'), mygrid = grid[0], rows = mygrid.rows, cRows = rows.length, myLink = function (e) { var $td = $(e.target).closest('td'), text = $td.text(), $tr = $td.closest('tr'), rowid = $tr[0].id; goToViewAllPage(rowid); }; for (iRow = 0; iRow 0) { // the row is a standard row (only if subGrid:true are used) var cellvalue1,firstDate,secondDate; $cell = $(row.cells[icfgName]); cellvalue1=$(row.cells[iupdateDate]).text(); firstDate = new Date(); //console.info(cellvalue1+", "+cellvalue1.length); //var cellvalue1="08-18-2011 11:49:01"; var convertedText=$(row.cells[iconverted]).text(); if(cellvalue1.length>25) { secondDate=new Date(); //secondDate = secondDate.substring(0, secondDate.length-3); if(diffOf2Dates(firstDate,secondDate,true)>=expireCondition) { $cell.prepend(iconAlert); } $cell.click(myLink); } else { if(cellvalue1.length!=1) { secondDate = cellvalue1.substring(0, cellvalue1.length-6); if(diffOf2Dates(firstDate,secondDate,false)>=expireCondition) { $cell.prepend(iconAlert); } $cell.click(myLink); } //I want to add this Icon when a new row is added using addRowData if(convertedText=="yes"&&supportEng)$cell.prepend(convertIcon); } } } } }); grid.jqGrid('navGrid','#gridpager',{edit:false,add:false,del:false}); var myGrid = $("#list1"); $("#cb_"+myGrid[0].id).hide(); // place div with empty message insde of bdiv emptyMsgDiv.insertAfter(grid.parent()); $("#list1").trigger("reloadGrid"); $("#list1").sortGrid('updateDate', true, 'desc'); $("#list1").setGridParam({rowNum:10}); }

Actualizar

Respuesta del servidor

   1223 ld fhdf Production 4.xml ../../../xmlrepository/121/4_ver3.xml mk@aol.com 121 abc-dev-01.24hourfit.com 2012-12-07 12:15:48.0 IST 2012-12-07 12:15:48.0 IST 1 3 Linux 1.0 HotFix5 yes   1224 DD dfsd Production 2.xml ../../../xmlrepository/121/2_ver1.xml mk@aol.com 121 vkeh-jam 2012-12-07 12:21:31.0 IST 2012-12-07 12:21:31.0 IST 1 3 HP-UX 5.0 no   

Función goToViewAllPage

 function goToViewAllPage(rowid) { var pageLoadContent='
Please Wait
Loading
'; //rowid=rowid.substring(4, rowid.length); $("#nextPageLoading").pageLoad({content:pageLoadContent}); $("#nextPageLoading").css({"cursor":"wait"}); $("#pageLoadingBackground").css({"cursor":"wait"}); var rowData = jQuery("#list1").getRowData(rowid); configid = rowData['cfgId']; configname=rowData['cfgName']; configdesc=rowData['cfgDesc']; configenv=rowData['cfgType']; filename=rowData['fileName']; updatedate=rowData['updateDate']; absolutepath=rowData['absolutePath']; productname=rowData['productId']; productversion=rowData['productVersion']; converted=rowData['converted']; //emailid=rowData['emailAddress']; emailid=logid; var form_ref=document.createElement("form"); form_ref.id="viewform"; form_ref.name="viewform"; form_ref.action=redirectMainUrl+"showResult.action"; form_ref.method="post"; form_ref.target="_self"; document.body.appendChild(form_ref); var cfgstField = document.createElement("input"); cfgstField.name="sessiontoken"; cfgstField.type="hidden"; cfgstField.value=sessiontoken; form_ref.appendChild(cfgstField); var cfgidField = document.createElement("input"); cfgidField.name="cfgid"; cfgidField.type="hidden"; cfgidField.value=configid; form_ref.appendChild(cfgidField); var cfgnameField = document.createElement("input"); cfgnameField.name="cfgname"; cfgnameField.type="hidden"; cfgnameField.value=configname; form_ref.appendChild(cfgnameField); var cfgdescField = document.createElement("input"); cfgdescField.name="cfgdesc"; cfgdescField.type="hidden"; cfgdescField.value=configdesc; form_ref.appendChild(cfgdescField); var cfgenvField = document.createElement("input"); cfgenvField.name="cfgenv"; cfgenvField.type="hidden"; cfgenvField.value=configenv; form_ref.appendChild(cfgenvField); var cfgfileField = document.createElement("input"); cfgfileField.name="cfgfile"; cfgfileField.type="hidden"; cfgfileField.value=filename; form_ref.appendChild(cfgfileField); var cfgabsField = document.createElement("input"); cfgabsField.name="absFileName"; cfgabsField.type="hidden"; cfgabsField.value=absolutepath; form_ref.appendChild(cfgabsField); var cfgdateField = document.createElement("input"); cfgdateField.name="updatedDate"; cfgdateField.type="hidden"; cfgdateField.value=updatedate; form_ref.appendChild(cfgdateField); var cfgproductField = document.createElement("input"); cfgproductField.name="productname"; cfgproductField.type="hidden"; cfgproductField.value=productname; form_ref.appendChild(cfgproductField); var cfgproductVersionField = document.createElement("input"); cfgproductVersionField.name="productversion"; cfgproductVersionField.type="hidden"; cfgproductVersionField.value=productversion; form_ref.appendChild(cfgproductVersionField); var projectIdField = document.createElement("input"); projectIdField.name="projectid"; projectIdField.type="hidden"; projectIdField.value=$("#projectId").val(); form_ref.appendChild(projectIdField); var cfgprevPageField = document.createElement("input"); cfgprevPageField.name="backpage"; cfgprevPageField.type="hidden"; cfgprevPageField.value=$("#backPage").val(); form_ref.appendChild(cfgprevPageField); var hiddenEmailField = document.createElement("input"); hiddenEmailField.setAttribute("type", "hidden"); hiddenEmailField.setAttribute("name", "emailaddress"); //hiddenEmailField.setAttribute("value", document.getElementById("usernamespan").innerHTML); hiddenEmailField.setAttribute("value", emailid); form_ref.appendChild(hiddenEmailField); var hiddenEmailField = document.createElement("input"); hiddenEmailField.setAttribute("type", "hidden"); hiddenEmailField.setAttribute("name", "fullemailid"); hiddenEmailField.setAttribute("value", fullEmailId); form_ref.appendChild(hiddenEmailField); var hiddenConvertedField = document.createElement("input"); hiddenConvertedField.setAttribute("type", "hidden"); hiddenConvertedField.setAttribute("name", "converted"); hiddenConvertedField.setAttribute("value", converted); form_ref.appendChild(hiddenConvertedField); setTimeout(function(){ form_ref.submit(); }, 10); }

Le sugiero que elimine el código actual de loadComplete a formateador personalizado. Uso de formateadores personalizados, cellattr o rowattr en combinación con gridview: true es la forma más efectiva de llenar la grilla. Vea la respuesta para más detalles.

Puede cambiar la definición de la columna ‘cfgName’ por la siguiente:

 {name: 'cfgName', width: 80, classes: "myLink", formatter: function (cellValue, options, rowObject) { var converted = rowObject.converted === undefined ? $(rowObject).find(">converted").text(): rowObject.converted, updateDate = rowObject.updateDate === undefined ? $(rowObject).find(">updateDate").text(): rowObject.updateDate; return (isAlertedDate(updateDate) ? iconAlert: "") + (converted === "yes" ? convertIcon : "") + "" + cellValue + ""; }, cellattr: function () { return " title=\"Click here to go to ViewAllPage\""; }} 

Puede utilizar su función diffOf2Dates actual dentro de la implementación de isAlertedDate . Además, sugiero que no uses enlaces ( ) para hacer que el código sea más fácil. En lugar de eso uso classes: "myLink" y classes: "myLink" el siguiente CSS

 .myLink { text-decoration: underline; cursor: pointer; } 

La grilla resultante se verá exactamente como antes:

enter image description here

Para ejecutar algún código JavaScript al hacer clic en el enlace (e incluso al hacer clic en la celda con el enlace), se puede utilizar beforeSelectRow o onCellSelect callback . Por ejemplo

 beforeSelectRow: function (rowid, e) { var iCol = $.jgrid.getCellIndex($(e.target).closest("td")[0]); if (this.p.colModel[iCol].name === 'cfgName') { //alert("GO!!!"); goToViewAllPage(rowid); return false; } } 

Puedes ver a qué me refiero en la demostración .