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 verwenden showlink 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. Die cfgName Spalte vorangestellt werden kann mit 2 Symbole helfen Tipp 1. 90 days and above, 2. Converted So auf loadComplete dem Netz versucht, zu überprüfen, die jede Zeile für converted (aus der server-Antwort wenn "ja") ein Symbol angezeigt (2) und berechnet die Differenz zwischen todays 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 fordert goToViewAllPage() erzeugt eine dynamische form und übermittelt die wiederum leitet zu einer anderen Seite mit einigen grid-Parameter. Ich aktualisiert meine Frage mit der goToViewAllPage 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({

InformationsquelleAutor abi1964 | 2012-12-07
Schreibe einen Kommentar