Wie Feuer loadComplete nach neue Zeile Hinzugefügt in jqgrid?
Habe ich eine benutzerdefinierte formatter-das Feuer im inneren loadComplete von jqgrid. Müssen die gleichen benutzerdefinierten formatter arbeiten, wenn eine Zeile wird dynamisch Hinzugefügt, auch. Also ich dachte, ich Ruf loadComplete() wie eine normale Funktion. Custom formatter funktioniert gut, wenn grid geladen wurde, aber nicht wirksam werden, wenn eine Zeile Hinzugefügt wird, später.
Zeile hinzufügen dynamisch
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 = $('<div>No configurations loaded</div>');
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 = '<span class="ui-state-default" style="border:0" id="converted"><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span></span>',
iconAlert = '<span class="ui-state-error" style="border:0" id="expired"><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span></span>';
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 < cRows; iRow += 1) {
row = rows[iRow]; //row.id is the rowid
trClasses = row.className.split(' ');
if ($.inArray('jqgrow', trClasses) > 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});
}
Update
Server-Antwort
<list>
<Response>
<cfgId>1223</cfgId>
<cfgName>ld</cfgName>
<cfgDesc>fhdf</cfgDesc>
<cfgType>Production</cfgType>
<fileName>4.xml</fileName>
<absolutePath>../../../xmlrepository/121/4_ver3.xml</absolutePath>
<emailAddress>[email protected]</emailAddress>
<projectId>121</projectId>
<hostname>abc-dev-01.24hourfit.com</hostname>
<createDate>2012-12-07 12:15:48.0 IST</createDate>
<updateDate>2012-12-07 12:15:48.0 IST</updateDate>
<state>1</state>
<productId>3</productId>
<osname>Linux</osname>
<productVersion>1.0 HotFix5</productVersion>
<converted>yes</converted>
</Response>
<Response>
<cfgId>1224</cfgId>
<cfgName>DD</cfgName>
<cfgDesc>dfsd</cfgDesc>
<cfgType>Production</cfgType>
<fileName>2.xml</fileName>
<absolutePath>../../../xmlrepository/121/2_ver1.xml</absolutePath>
<emailAddress>[email protected]</emailAddress>
<projectId>121</projectId>
<hostname>vkeh-jam</hostname>
<createDate>2012-12-07 12:21:31.0 IST</createDate>
<updateDate>2012-12-07 12:21:31.0 IST</updateDate>
<state>1</state>
<productId>3</productId>
<osname>HP-UX</osname>
<productVersion>5.0</productVersion>
<converted>no</converted>
</Response>
</list>
goToViewAllPage Funktion
function goToViewAllPage(rowid)
{
var pageLoadContent='<table id="detailTable" width="100%"><tbody><tr><td align="center">Please Wait</td></tr><tr><td align="center"><img src="/informaticaCSM/infa9/csm/view/include/images/loading.gif" alt="Loading"/></td></tr></tbody></table>';
//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);
}
- Sorry, aber was Sie derzeit tun ist nicht für einen benutzerdefinierten Formatierer anstelle von, dass Sie den Inhalt ändern einiger Zeilen im
loadComplete
. Es reduziert die Leistung der Füllung des Rasters im multiple time. Es haben Sie kleine Anzahl der Zeilen, die Sie nicht sehen, dass, aber es ist immer noch sehr uneffektiv. Könnten Sie beschreiben, was Sie tun müssen? Ich sehe, dass Sie verwendenshowlink
formatter, aber es scheint, dass Sie ändern die Ergebnisse manuell. Stattdessen können Sie verwenden echte benutzerdefinierte formatter und lösen das problem in seinem Ursprung. - Dies ist eine ähnliche Frage, die beantwortet wurde, indem Sie lange zurück. Siehe hereEs berechnet das Datum, wenn die Differenz > 90 Tage, es zeigt ein Symbol an, das war es in der vorherigen Frage beantwortet, indem Sie. Die aktuelle Frage stellt ein weiteres Symbol, wenn der Wert 1
converted
Spalte "ja", aber dies funktioniert nicht, wenn eine Zeile Hinzugefügt wird, getrennt. - Sie haben zusätzlich viele versteckte Spalten. Verwenden Sie es, Daten nur innerhalb von
loadComplete
oder Sie müssen die Daten irgendwo anders? Ich nehme an, Sie können entfernen Sie die meisten der Spalten. Wenn erforderlich, speichern Sie die Daten in JavaScript-Objekte statt. Einstellung der Daten auf der Seite (versteckte Elemente) verringern Sie die Leistung der Seite. - Ich benutze diese versteckten Daten auch außerhalb des Rasters. Die Rastergröße wird nicht gehen über 100 Zeilen.
- Ich studiere neue Sache jeden Tag zu. Ich würde jetzt nicht umsetzen die Dinge, wie mehr als ein Jahr zuvor. Könnten Sie beschreiben mehr genau das, was Art auf die änderung, die Sie tun müssen und wie die links (
<a>
Elemente) müssen aufgebaut werden. Der Teil mit änderungen der Termine habe ich nicht verstanden in Ihrem code. Wie sich die Zeile der Daten in der Antwort des Servers aussieht? - Es ist sehr wichtig zur Verringerung der Anzahl von änderungen der HTML-Seite um die Leistung zu verbessern. Siehe die Antwort für details. Es ist wichtig zu verstehen, dass das speichern von Daten, auf die Seite ist sehr langsam zum speichern der gleichen Daten direkt in JavaScript-Objekte. Also meine Haupt-Frage: was versuchen Sie zu tun? Ich werde versuchen zu erklären, was ich meine, an einem Beispiel. Der resultierende code wird einfacher und viel schneller.
- Klicken Sie auf der
cfgName
Spalte wird eine Funktion aufgerufen, die ein Formular abschickt, dass leitet die Seite auf eine andere Seite mit ein paar Parametern entnommen aus der angeklickten Zeile im raster. DiecfgName
Spalte vorangestellt werden kann mit 2 Symbole helfen Tipp1. 90 days and above
,2. Converted
So aufloadComplete
dem Netz versucht, zu überprüfen, die jede Zeile fürconverted
(aus der server-Antwort wenn "ja") ein Symbol angezeigt(2)
und berechnet die Differenz zwischentodays date
&createDate
, wenn die Differenz größer als 90 Tage voranstellen Symbol(1)
- Könnte Sie posten Beispiele für HTML-Fragmente, die die links generiert?
- innerhalb
loadComplete
es fordertgoToViewAllPage()
erzeugt eine dynamische form und übermittelt die wiederum leitet zu einer anderen Seite mit einigen grid-Parameter. Ich aktualisiert meine Frage mit dergoToViewAllPage
Funktion - HTML-Fragmente für beide, die Symbole
convertIcon = '<span class="ui-state-default" style="border:0" id="converted"><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span></span>', iconAlert = '<span class="ui-state-error" style="border:0" id="expired"><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span></span>'; grid.jqGrid({
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich schlage vor, Sie entfernen Sie den aktuellen code von
loadComplete
um einen benutzerdefinierten Formatierer. Mithilfe von benutzerdefinierten Formatierer,cellattr
oderrowattr
in Kombination mitgridview: true
ist der effektivste Weg, um das Gitter zu füllen. Sehen die Antwort für mehr details.Können Sie ändern Sie die definition des "cfgName' - Spalte, um die folgenden:
Können Sie verwenden Sie verwenden Sie Ihren aktuellen
diffOf2Dates
- Funktion in der Umsetzung vonisAlertedDate
. Außerdem schlage ich vor, nicht links (<a>
) überhaupt, um den code zu vereinfachen. Statt, dass ich dieclasses: "myLink"
und ich definierte die folgenden CSS -Das resultierende raster wird genauso Aussehen wie vorher:
Zum ausführen von JavaScript-code beim klicken auf den link (und auch beim klicken in die Zelle mit dem link) kann man verwenden
beforeSelectRow
oderonCellSelect
Rückruf. Zum BeispielKönnen Sie sehen, was ich meine, auf die demo.