jqgrid maskerbewerking

I am using a jqgrid where I'd like to use inline editing and mask the entry such that the user is prompted to enter hh:mm where hh = hours and mm = minutes. I'm using the digitalBush masked jQuery plugin. The issue is that when I call it from initData, it overwrites the current data in that field. I noticed that this behavior is different when you use a modal form to do the editing. Does anyone have a solution for this issue? I'll call the mask from any event, and I'm happy to use any available plugin. As far as I can tell, the jqgrid formatter does not provide a custom mask that guides the user entry in the format in which I need it. Also happy to be wrong about that (with a snippet of code to support it of course).

Thanks so much in advance.

Update: I managed to cobble together a demo of the problem I'm having. S-O obviously strips out the html that I wanted to wrap this in so that it could be plugged in and run as-is, so you'll need to wrap this in some html to see it work. Thanks again for the assistance. Here's the code:

    <title>Mask Problem</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.2.0/css/ui.jqgrid.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.maskedinput-1.3.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.2.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.2.0/js/jquery.jqGrid.src.js"></script>
    <script type="text/javascript">
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;

</script>
<script type="text/javascript">

    $(function() {
        var lastSel = -1;
        var mydata = [
            { HoursWorked: "0:00" },
            ];
        $.mask.definitions['5'] = '[0-5]';
        $.mask.definitions['2'] = '[0-2]';
        var $grid = $("#MyGrid");
        $grid.jqGrid({
            datatype: "local",
            data: mydata,
            height: 'auto',
            width: 700,
            colNames: ["Hours Worked"],
            colModel: [
                    { name: "HoursWorked", index: "HoursWorked", width: 85, editable: true, edittype: "text", editoptions: { size: 20, maxlength: 30,
                        dataInit: function (elem) {
                            $(elem).mask("29:59");
                        }
                    },
                        align: "center", editrules: { custom: true, custom_func: validHourEntry }
                    }
                  ],
            multiselect: false,
            caption: "My sample grid with Mask",
            rowNum: 10,
            cellEdit: true,
            rowList: [5, 10, 20],
            pager: '#MyGridpager',
            gridview: true,
            beforeSelectRow: function (rowid) {
                if (rowid !== lastSel) {
                    $(this).jqGrid('restoreRow', lastSel);
                    lastSel = rowid;
                }
                return true;
            },
            cellsubmit: "clientArray"
        }).jqgrid("navGrid", "#MyGrid", { add: false, del: false }); ;
    });




function validHourEntry(value, colname) {
    var editSuccess = true;
    var errorMsg = "";
    if (/^([0-1][0-9]|2[0-3]:[0-5][0-9])$/.test(value)) {
        return [true, ""];
    } else {
        return [false, "is wrong time.
Please enter the time in the form hh:mm"]; } } </script>
3

1 antwoord

Je hebt geen enkele code gepost, dus ik heb geprobeerd om digitalBush gemaskeerde jQuery-plug-in om zelf uren te bewerken. Het lijkt goed werk en ik heb ontvangen

enter image description here

in inline bewerken of

enter image description here

in het bewerken van formulieren.

Ik heb dit op de volgende manier geïmplementeerd. Allereerst heb ik twee maskers gedefinieerd: een om cijfers van 0-2 in te voeren en het volgende masker om cijfers van 0-5 in te voeren:

$.mask.definitions['2']='[0-2]';
$.mask.definitions['5']='[0-5]';

en gebruikte de volgende definitie van 'tijd' kolom in het rooster:

{name: 'time', index: 'time', width: 70, editable: true,
    editoptions: {dataInit: function (elem) { $(elem).mask("29:59"); }},
    editrules: {time: true}}

Ik heb tijdvalidering toegevoegd met betrekking tot bewerkingsregels: {time: true} om te voorkomen dat de tijd wordt ingevoerd zoals 27:20 . Stel dat het standaard tijdwaarderingsscherm geen perfecte foutwaarschuwing is

enter image description here

we kunnen de resultaten verbeteren met behulp van aangepaste validatie:

{name: 'time', index: 'time', width: 70, editable: true,
    editoptions: {dataInit: function (elem) { $(elem).mask("29:59"); }},
    editrules: {custom: true, custom_func: function (value) {
        if (/^([0-1][0-9]|2[0-3]:[0-5][0-9])$/.test(value)) {
            return [true, ""];
        } else {
            return [false, "is wrong time.
Please enter the time in the form hh:mm"]; } }}}

waardoor de validatiefout wordt gewijzigd in het volgende

enter image description here

Ik weet zeker dat je de zichtbaarheid kunt verbeteren met een andere aanpassing van de maskerplug-in en validatie. Op wat voor manier dan ook laten mijn experimenten zien dat men mask plugin in jqGrid met succes kan gebruiken.

U kunt de demo hier bekijken.

UPDATED: Sorry Ron, for writing of that, but the code which you posted is really good example how one should not write the program and how one should not use jqGrid. At the beginning I don't wanted to write any comments, but later I do decided to describe you what is wrong in the code and explain how one should modify the code.

Het eerste probleem in uw code is dat u objectklasse SampleJSObject hebt gebruikt in plaats van direct gebruik van functies. Uit de syntaxis hoe de constructor en de methoden van een object moeten worden gedefinieerd, is de code correct, maar ...

  • Which sense hast to make some general global settings inside of the object constructor. Yo used $.mask.definitions['5'] = '[0-5]'; for example. Every create of the instance of SampleJSObject the global settings will be set or overwritten. It looks like side effects.
  • You defined function SampleJSObject on the top level of your code and not inside of $(document).ready where you use it, so you defined global class.
  • Inside of $(document).ready you defined uninitialized variable lastSel and try to initialize it inside of function SampleJSObject defined in another scope. So the variable lastSel stay uninitialized in $(document).ready, but you set another global variable lastSel inside of the constructor.
  • The methods like minutesToHours has nothing to do with your class SampleJSObject. Why the function or calculateHoursAndMinutes should be member of the class? It's error in design in my opinion.
  • The method init set only the jqgridParms property. You can do it in the same way in the constructor, but in both cases it is not clear for me why one need and method which defines so specific parameters like you do. I don't think that you will be create more then one instance of such specific class. Why one need have such class where you will have to overwrite almost any method to create the second instance of the class?
  • In the list of parameters of jqGrid you use datatype: "local", but not use gridview: true and data parameter which allows to create the data together with grid. It improve the performance of grid in many times especially for grids with the large number of rows. The usage of addRowData in loadGrid in an example of the most slow method. Moreover in the case the rowNum: 10 will be ignored and no local paging will be done.
  • the method calculateTotal demonstrate probably the most slowest implementation of the virtual WeekTotal column. The most effective implementation of the feature would be the usage of custom formatter for the WeekTotal column

    { name: "WeekTotal", index: "WeekTotal", width: 55, align: "center" , formatter: function (cellvalue, options, rowObject) { /* here you can access the other columns of the same row just as rowObject.SundayMinutes and return from the function the calculatedWeekTotalvalue as string of HTML fragment */ }}

  • If you nee to use many columns with the same properties you can define the column template (see here):

    var myTimeTemplate = {width: 85, editable: true, edittype: "text", editoptions: { size: 20, maxlength: 30, dataInit: function (elem) { $(elem).mask("29:59"); }}

    and then reduce the definition of the column SundayMinutes for example to

    {name: "SundayMinutes", template: myTimeTemplate }

7
toegevoegd
@Ron: Kunt u zeggen hoeveel geld ik nu in mijn zak heb? Dat kan je niet? Precies op dezelfde manier kan niemand u helpen de fout in uw code te vinden als u de code niet toont. Je kunt de broncode van mijn demo bekijken en vergelijken met de manier hoe je het gebruikt. Heeft u bijvoorbeeld een validatieregel opgenomen?
toegevoegd de auteur Oleg, de bron
@rubdottocom: Graag gedaan! Overigens heeft u recht om ongeveer 30 nuttige antwoorden/vraag per dag te plaatsen (zie hier ). Stemmen helpt andere bezoekers van de pagina en helpt bij het vinden van de pagina tijdens het zoeken op de stackoverloop.
toegevoegd de auteur Oleg, de bron
@Ron: Graag gedaan! Ik ben blij dat het probleem aan het einde is opgelost. Gefeliciteerd!
toegevoegd de auteur Oleg, de bron
@Ron: Sorry, maar in mijn vorige opmerking de link naar de nieuwe demo was beschadigd. De demo is een eenvoudige wijziging van de jeugddemonstratie. Nu naar je laatste commentaar. Ik veronderstel nu dat alle u problemen door misverstand komen wat gemaskeerde plugin doen. De waarde "0:00" die u gebruikt klopt komt overeen met het masker. Het moet "00:00" zijn. Het moet exact 4 karakters bevatten. De tijd "6:25" moet worden ingevoerd als "06:25".
toegevoegd de auteur Oleg, de bron
@Ron: u heeft de code van timeEntryFormat niet gepost en u hebt ongedefinieerde zelf in de code gebruikt. Kunt u uitleggen wat precies het probleem is in [de demo] die bestaat uit uw code na het verwijderen van niet-gedefinieerde variabelen of functies?
toegevoegd de auteur Oleg, de bron
@Ron: Sorry, ik wilde je niet beledigen. Ik wilde je alleen de plaatsen van de code wijzen die niet goed zijn. Als u een vraag stelt, moet u niet aan uw bestaande code denken. Het zou goed zijn voor anderen die uw vraag zullen lezen om de code te vereenvoudigen, zodat uw echte probleem dat u heeft duidelijk zichtbaar zal zijn. U kunt bijvoorbeeld testen of het probleem bestaat uit één gemaskeerde invoer en de code met één masker per dag van de week verkleinen. De missie van stackoverflow is om goede vragen en oplossingen te delen. Denk alsjeblieft ook na over de waarde van je vraag voor latere bezoekers.
toegevoegd de auteur Oleg, de bron
@Ron: ik heb mijn antwoord bijgewerkt met een paar opmerkingen over je code. De code zelf die ik niet heb getest.
toegevoegd de auteur Oleg, de bron
@Ron: eerst als je commentaar op mijn antwoord schrijft, hoef je @my niet te schrijven. De tekst wordt verwijderd om de beperkte plaats voor de opmerking op te slaan. Over uw probleem begrijp ik nog steeds niet volledig wat u bedoelt. In de tekst van uw vraag schreef u: "Het probleem is dat wanneer ik het vanuit initData oproept, het de huidige gegevens in dat veld overschrijft." In mijn demo zullen de eerste gegevens van de cel niet veranderd door plugin. Het enige dat ik kan zien is dat op de foutmelding het masker te zien is. Is het wat je bedoelt of heb je een ander probleem? Een screenshort met het probleem kan nuttig zijn
toegevoegd de auteur Oleg, de bron
@ Oleg, wat een geweldig antwoord, bedankt voor je inzet werkt als een bedel :)
toegevoegd de auteur rubdottocom, de bron
Bedankt Oleg. Wat je niet begrijpt, is dat ik aan een project werk en jqGrid heb geïmplementeerd op de specifieke manier waarop ik werd gevraagd om het te doen - dit is de eerste keer dat ik jQuery gebruik, laat staan ​​een plug-in. Ik heb deze democode samengesteld om een ​​bepaald probleem weer te geven en, ja, in mijn haast om een ​​voorbeeld te maken van het probleem dat ik ondervind, heb ik de code niet zo goed opgeruimd als ik had moeten doen. In uw opmerkingen wordt het probleem echter niet behandeld en ik zou geen trainer worden die de toon gebruikt die u gebruikt. Ik heb gemerkt dat je houding vernederend en beslist niet helpt
toegevoegd de auteur Ron, de bron
Ik heb een demo toegevoegd die het probleem weergeeft. Als u op Zondag tab/klikt en vervolgens uit het veld typt, wordt het item het masker in plaats van de oorspronkelijke waarde. En je hebt gelijk - ik was twee verschillende problemen aan het mixen. Ik vermoed dat het repareren van deze oplossing de andere zal herstellen.
toegevoegd de auteur Ron, de bron
Dank je. Ik probeer alleen vragen van waarde te stellen, en ik neem aan dat als er geen waarde is, er geen antwoord is. Tegelijkertijd moeten die mensen die vragen beantwoorden, bedenken dat ze niet de enige scheidsrechter zijn voor alle geschreven codes. In mijn geval heb ik een zeer strikte richtlijn die ik MOET volgen als ik een salaris wil blijven ontvangen. Ik heb niet de ervaring om deze aanpak te verdedigen, alles wat ik weet is dat ik het moet gebruiken. Dus, ik waardeer je feedback en zal deze zeer goed overwegen als ik in de positie ben om te doen wat ik wil, maar nu moet ik het oorspronkelijke probleem oplossen.
toegevoegd de auteur Ron, de bron
En, ik zou moeten toevoegen, het oorspronkelijke probleem is dit: als je in het invoerveld klikt (nu nog slechts één), zal de waarde onmiddellijk veranderen in de maskertekens. Als u uit het veld typt, krijgt u een melding dat uw invoer ongeldig is, dan krijgt u de oorspronkelijke waarde. Mijn gewenste gedrag is dat de waarde niet verandert als ik niets sluit.
toegevoegd de auteur Ron, de bron
Ik heb het codevoorbeeld bijgewerkt om uw opmerkingen toe te voegen.
toegevoegd de auteur Ron, de bron
Ik heb de code gerepareerd. Het probleem is dat wanneer u op het enterable-veld (0: 0) klikt, dit verandert in de standaardmaskerwaarde (onderstrepingstekens). Als u uit het veld typt of uit het veld klikt, wordt de invoer als onjuist beschouwd door de validatie. In mijn demo, wanneer ik dubbelklik op het veld om het te bewerken, blijft de oorspronkelijke waarde staan ​​tot ik iets heb ingetoetst. Als ik een backspace toets, zie ik het masker en verandert het veld in blanco totdat ik op een andere rij klik. Daarna keert het terug naar de oorspronkelijke rij. Ik vermoed dat dat je voorSelectRow-functie is. Ik heb dat gedrag nodig, maar wanneer de persoon de cel verlaat.
toegevoegd de auteur Ron, de bron
Ik moet ook vermelden dat ik je tag (@ Oleg) bij elke opmerking, maar stackoverflow lijkt het te verwijderen wanneer ik het opsla.
toegevoegd de auteur Ron, de bron
het probleem met veel nieuwe dingen doen, is dat je dezelfde stomme fouten kunt maken .... Na dat alles. Bedankt voor uw hulp en nogmaals bedankt voor al uw opmerkingen.
toegevoegd de auteur Ron, de bron
Voor alle anderen - er zijn veel reacties, maar als je nieuw bent bij jqgrid en jQuery (zoals ik - nieuw voor alle client-kanten), lees dan @ Oleg's opmerkingen over mijn code. Ik ben veel aan het leren.
toegevoegd de auteur Ron, de bron
Mijn commentaar is dat in uw demo uw invoer wordt gewist als deze niet compleet is. Dat is in wezen het probleem dat ik ook heb - ik wil dat het wordt gevangen in de validatie, maar dat doet het niet. Herhaal, spring in het veld, voer "20" in (zonder aanhalingstekens natuurlijk) en tab uit het veld. Dus, om je analogie te vergroten, vraag ik je om het geld in je eigen zak te tellen.
toegevoegd de auteur Ron, de bron
wanneer u in uw voorbeeld het veld verlaat zonder een volledige invoer in te vullen (dwz voer 20 in en de minuten blanco laten), wordt het tekstveld leeg weergegeven. In mijn code laat het de rest van het masker achter zodat het 20: __ is. Wanneer ik door het veld schuif, wordt het masker ingesteld en verlaten als : . Dat is het probleem dat ik moet oplossen. Ik denk dat je het oplost door de rijgegevens opnieuw in te stellen. Ik moet de celwaarde opnieuw instellen als er geen gegevens zijn ingevoerd.
toegevoegd de auteur Ron, de bron