edit database rows σε grid

Σε αυτή την περιοχή μπορείτε να βρείτε ή να αναζητήσετε πληροφορίες σχετικές με την PHP

Συντονιστές: WebDev Moderators, Super-Moderators, PHP Moderators

Απάντηση
Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

edit database rows σε grid

Δημοσίευση από dionisis71 » 01 Αύγ 2013 11:47

καλημέρα,

Κάνω τα πρώτα βήματα στην php και ψάχνω να δω με ποιον τρόπο μπορώ να έχω τα αποτελέσματα ενός query σε ένα <table> όπου θα μπορώ να κάνω insert και update.

Αυτήν την στιγμή παίρνω τα αποτελέσματα ενός query και τα βάζω σε ένα <table>. Σε ενα column θέλω βάλω ένα edit και όταν κάνω κλικ να με αφήνει να την διορθώνω χωρίς να με πηγαίνει σε μία edit.php για τον σκοπό αυτό. Θέλω δηλαδή να γίνετε edit row στην ίδια σελίδα.

Υπάρχουν έτοιμα controls που μπορώ να χρησιμοποιήσω όπως το gridview στην Asp.net ή πρέπει να φτιάξω τα δικά μου;

Ευχαριστώ

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

edit database rows σε grid

Δημοσίευση από alou » 01 Αύγ 2013 12:52

Καλώστον. Θα υποθέσω ότι μιλάς για τις τιμές στο Αστόρια.

Για να το κάνεις έτσι όπως περιγράφεις, θα χρειαστεί να χρησιμοποιήσεις κάτι τύπου edit in place.
Ρίξε μια ματιά εδώ
www.freestuff.gr/forums/viewtopic.php?p=588014#588014
και ίσως εδώ μετά
http://www.freestuff.gr/forums/viewtopic.php?t=65660
και επανέρχεσαι με απορίες.

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

edit database rows σε grid

Δημοσίευση από dionisis71 » 03 Αύγ 2013 09:24

alou έγραψε:Καλώστον. Θα υποθέσω ότι μιλάς για τις τιμές στο Αστόρια.
Καλημέρα..

όχι δεν αναφέρομαι στο Astoria..

&#8230;αυτόν τον καιρό έχω δει λίγο joomla και μπήκα στον πειρασμό να δω πως φτιάχνονται τα modules και τα components. Από ότι είδα χρησιμοποιεί αρκετά MVC το οποίο θα μου ‘πεφτε λίγο βαρύ για πρώτη εμπειρία με php. Για αυτό είπα να προσπαθήσω να φτιάξω κάτι «απλό» και σκέφτηκα λοιπόν το εν λόγω lab.
(ποτέ δεν πίστευα ότι θα υπήρχε κίνητρο για να γράψω σε php.. κι όμως..)

Να περάσω στο φουαγιέ..;

Όπως είπα και ποιό πάνω θέλω σε ένα html table να φέρω τις εγγραφές από έναν πίνακα όπου και θα μπορώ να κάνω edit in place (μαθαίνω, έτσι..; ). Σε πρώτη φάση - και στο έως τώρα διάβασμα που έριξα στα topic που με προέτρεψες - προχωράω όσο ποιό απλά γίνεται και στην συνέχεια θα κάνω και το query μου.

what I’ve done so far..

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http&#58;//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html xmlns='http&#58;//www.w3.org/1999/xhtml' xml&#58;lang='en'>

<head> 
        <style type="text/css"> 
                .hide .text &#123; border&#58; 0; &#125; 
                .hide .actions &#123; display&#58; none; &#125; 
                .edit &#123; cursor&#58; pointer; &#125; 
        </style> 
        <!--<link rel='stylesheet' type='text/css' href='dist/css/bootstrap.min.css'/>-->
        <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js"></script> 
        <script type="text/javascript"> 
                $&#40;document&#41;.ready&#40;function&#40;&#41; &#123; 
//                        $&#40;'fieldset'&#41;.addClass&#40;'hide'&#41;.find&#40;'input'&#41;.prop&#40;'readonly', true&#41;; 
                        $&#40;'tr'&#41;.addClass&#40;'hide'&#41;.find&#40;'input'&#41;.prop&#40;'readonly', true&#41;; 
                        
                        $&#40;'.edit'&#41;.click&#40;function&#40;&#41; &#123; 
                                $&#40;this&#41;.closest&#40;'.hide'&#41;.removeClass&#40;'hide'&#41;.find&#40;'&#91;readonly&#93;'&#41;.prop&#40;'readonly', false&#41;; 
                        &#125;&#41;; 

                        $&#40;'.cancel'&#41;.click&#40;function&#40;&#41; &#123; 
                                $&#40;this&#41;.closest&#40;'tr'&#41;.addClass&#40;'hide'&#41;.find&#40;'.text'&#41;.prop&#40;'readonly', true&#41;; 
                                
                        &#125;&#41;; 
                &#125;&#41;; 
        </script> 
</head> 
    
<body> 
    <header class='page-header'>
        <h1>reading table</h1>
    </header> 
    
    <fieldset style="border&#58;0px;"> 

                <table class='table table-striped'> 
                    <thead>
                    <tr>
                        <th></th>
                        <th>first name</th>
                        <th>last name</th>
                        <th></th>
                    </tr>
                        
                   </thead>
                    <tbody>
                        <tr> 
                                <td><input class="text" type="text" name="id" id="id" value="1" /></td>                          
                                <td><input class="text" type="text" name="fname" id="fname" value="Ονομα1" /></td> 
                                <td><input class="text" type="text" name="lname" id="lname" value="Επώνυμο1" /></td> 
                                <td><input type="button" name="edit" id="edit" class="edit" value="edit" />
                                    <input type="button" disabled="1" name="cancel" id="cancel" class="cancel" value="Cancel" />
                                    <input type="submit" disabled="1" name="save" id="save" value="Save" />
                                </td> 
                        </tr> 
                        <tr> 
                                <td><input class="text" type="text" name="id" id="id" value="2" /></td>                          
                                <td><input class="text" type="text" name="fname" id="fname" value="Ονομα2" /></td> 
                                <td><input class="text" type="text" name="lname" id="lname" value="Επώνυμο2" /></td> 
                                <td><input type="button" name="edit" id="edit" class="edit" value="edit" />
                                    <input type="button" disabled="1" name="cancel" id="cancel" class="cancel" value="Cancel" />
                                    <input type="submit" disabled="1" name="save" id="save" value="Save" />
                                </td> 
                        </tr> 
                        
                    </tbody>
                </table> 

        </fieldset> 
</body> 
    
    
   
</html>
α) πώς γίνεται να κάνω πάντα edit σε ένα και μόνο row; Αυτήν την στιγμή όπως είναι όταν πατάω edit, με αφήνει να διορθώσω το row αλλά, εάν πατήσω edit και στο άλλο row θα έχω ανοιχτά 2 προς διόρθωση.. Πρέπει να μένει μόνο ένα ανοιχτό προς διόρθωση..

β) πως θα γίνει όταν κάνω κλικ στο edit να γίνονται enable τα save και cancel

Ευχαριστώ

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

edit database rows σε grid

Δημοσίευση από dionisis71 » 03 Αύγ 2013 10:02

dionisis71 έγραψε:
α) πώς γίνεται να κάνω πάντα edit σε ένα και μόνο row; Αυτήν την στιγμή όπως είναι όταν πατάω edit, με αφήνει να διορθώσω το row αλλά, εάν πατήσω edit και στο άλλο row θα έχω ανοιχτά 2 προς διόρθωση.. Πρέπει να μένει μόνο ένα ανοιχτό προς διόρθωση..

Ευχαριστώ
το α το βρηκα..

όταν καλείται η ('.edit').click(function() και πριν εκτελεστει ο κώδικας για να κάνει editable το row φωνάζω την $('.cancel').click();

Κώδικας: Επιλογή όλων

<script type="text/javascript"> 
                $&#40;document&#41;.ready&#40;function&#40;&#41; &#123; 
//                        $&#40;'fieldset'&#41;.addClass&#40;'hide'&#41;.find&#40;'input'&#41;.prop&#40;'readonly', true&#41;; 
                        $&#40;'tr'&#41;.addClass&#40;'hide'&#41;.find&#40;'input'&#41;.prop&#40;'readonly', true&#41;; 
                        
                        $&#40;'.edit'&#41;.click&#40;function&#40;&#41; &#123; 
                                $&#40;'.cancel'&#41;.click&#40;&#41;;
                                $&#40;this&#41;.closest&#40;'.hide'&#41;.removeClass&#40;'hide'&#41;.find&#40;'&#91;readonly&#93;'&#41;.prop&#40;'readonly', false&#41;; 
                        &#125;&#41;; 

                        $&#40;'.cancel'&#41;.click&#40;function&#40;&#41; &#123; 
                                $&#40;this&#41;.closest&#40;'tr'&#41;.addClass&#40;'hide'&#41;.find&#40;'.text'&#41;.prop&#40;'readonly', true&#41;; 
                                
                        &#125;&#41;; 
                &#125;&#41;; 
 </script>

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

edit database rows σε grid

Δημοσίευση από dionisis71 » 03 Αύγ 2013 11:43

dionisis71 έγραψε:
β) πως θα γίνει όταν κάνω κλικ στο edit να γίνονται enable τα save και cancel
δεν μπορώ να βρω πως, στο onclick edit button, θα γίνεται disabled=false το cancel btn.

Κώδικας: Επιλογή όλων

        <script type="text/javascript"> 
                $&#40;document&#41;.ready&#40;function&#40;&#41; &#123; 
                        $&#40;'tr'&#41;.addClass&#40;'hide'&#41;.find&#40;'input'&#41;.prop&#40;'readonly', true&#41;; 
                        
                        $&#40;'.edit'&#41;.click&#40;function&#40;&#41; &#123; 
                                $&#40;'.cancel'&#41;.click&#40;&#41;;
                                $&#40;this&#41;.closest&#40;"#cancel"&#41;.prop&#40;'disabled',false&#41;; //αυτό δεν δουλεύει και σωστά δεν δουλεύει αφού το this αναφέρεται στο edit και όχι στο cancel
                                $&#40;this&#41;.closest&#40;'.hide'&#41;.removeClass&#40;'hide'&#41;.find&#40;'&#91;readonly&#93;'&#41;.prop&#40;'readonly', false&#41;; 
                        &#125;&#41;; 

                        $&#40;'.cancel'&#41;.click&#40;function&#40;&#41; &#123; 
                                $&#40;this&#41;.closest&#40;"#cancel"&#41;.prop&#40;'disabled',true&#41;; // αυτό ξέρω ότι δουλεύει
                                $&#40;this&#41;.closest&#40;'tr'&#41;.addClass&#40;'hide'&#41;.find&#40;'.text'&#41;.prop&#40;'readonly', true&#41;; 
                        &#125;&#41;; 
                        
                &#125;&#41;; 
        </script>

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

edit database rows σε grid

Δημοσίευση από alou » 03 Αύγ 2013 12:56

Είναι λάθος / απαγορεύεται να υπάρχει 2+ φορές το ίδιο id σε ένα document. Είναι το ... id του! (πολύ πιθανό να μη λειτουργεί η js function για αυτό το λόγο, δεν το έψαξα).
$(this).closest("#cancel").prop('disabled',false); //αυτό δεν δουλεύει και σωστά δεν δουλεύει αφού το this αναφέρεται στο edit και όχι στο cancel
ναι το this αναφέρεται στο .edit αλλά γίνεται dom traversing και πας - στη συγκεκριμένη περίπτωση - στο κοντινότερο γονικό στοιχείο με id cancel. Ότι πεις μετά, αφορά πλέον αυτό. Το λάθος είναι μάλλον ότι δεν ψάχνεις γονικό στοιχείο αλλά sibling ή next.

Αν μάθεις τον τρόπο που χρησιμοποιείς το dom στην js, θα σκεφτείς και πιο πρακτικούς τρόπους (που τελικά είναι και πιο σωστοί) για να δομήσεις την html σου.

Οπότε κάνε ένα update στην html σου, να τα βάλουμε σε ένα fiddle να τα δοκιμάσουμε.

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

edit database rows σε grid

Δημοσίευση από dionisis71 » 03 Αύγ 2013 13:11

alou έγραψε:Είναι λάθος / απαγορεύεται να υπάρχει 2+ φορές το ίδιο id σε ένα document. Είναι το ... id του! (πολύ πιθανό να μη λειτουργεί η js function για αυτό το λόγο, δεν το έψαξα).
α... καλά.. έκανα copy το tr και ξέχασα να αλλάξω τα id. Εκτός από τα id πρέπει να αλλάξω και τα names..(υποθέτω πως ναι); Τι είναι το fiddle;

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http&#58;//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html xmlns='http&#58;//www.w3.org/1999/xhtml' xml&#58;lang='en'>

<head> 
        <style type="text/css"> 
                .hide .text &#123; border&#58; 0; &#125; 
                .hide .actions &#123; display&#58; none; &#125; 
                .edit &#123; cursor&#58; pointer; &#125; 
        </style> 
        <link rel='stylesheet' type='text/css' href='dist/css/bootstrap.min.css'/>
        <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js"></script> 
        <script type="text/javascript"> 
                $&#40;document&#41;.ready&#40;function&#40;&#41; &#123; 
                                               
                        $&#40;'tr'&#41;.addClass&#40;'hide'&#41;.find&#40;'input'&#41;.prop&#40;'readonly', true&#41;; 
                        
                        $&#40;'.edit'&#41;.click&#40;function&#40;&#41; &#123; 
                                $&#40;'.cancel'&#41;.click&#40;&#41;;
                                fname=
                                $&#40;this&#41;.closest&#40;"#cancel"&#41;.prop&#40;'disabled',false&#41;; //αυτό δεν δουλεύει και σωστά δεν δουλεύει αφού το this αναφέρεται στο edit και όχι στο cancel
                                $&#40;this&#41;.closest&#40;'.hide'&#41;.removeClass&#40;'hide'&#41;.find&#40;'&#91;readonly&#93;'&#41;.prop&#40;'readonly', false&#41;; 
                        &#125;&#41;; 

                        $&#40;'.cancel'&#41;.click&#40;function&#40;&#41; &#123; 
                                $&#40;this&#41;.closest&#40;"#cancel"&#41;.prop&#40;'disabled',true&#41;; // αυτό ξέρω ότι δουλεύει
                                $&#40;this&#41;.closest&#40;'tr'&#41;.addClass&#40;'hide'&#41;.find&#40;'.text'&#41;.prop&#40;'readonly', true&#41;; 
                        &#125;&#41;; 
                        
                &#125;&#41;; 
        </script> 
</head> 
    
<body> 
    <header class='page-header'>
        <h1>reading table</h1>
    </header> 
    
    <fieldset style="border&#58;0px;"> 

                <table class='table table-striped'> 
                    <thead>
                    <tr>
                        <th></th>
                        <th>first name</th>
                        <th>last name</th>
                        <th></th>
                    </tr>
                        
                   </thead>
                    <tbody>
                        <tr> 
                                <td><input class="text" type="text" name="id1" id="id1" value="1" /></td>                          
                                <td><input class="text" type="text" name="fname1" id="fname1" value="Ονομα1" /></td> 
                                <td><input class="text" type="text" name="lname1" id="lname1" value="Επώνυμο1" /></td> 
                                <td><input type="button" name="edit1" id="edit1" class="edit" value="edit" />
                                    <input type="button" disabled="1" name="cancel1" id="cancel1" class="cancel" value="Cancel" />
                                    <input type="submit" disabled="1" name="save1" id="save1" value="Save" />
                                </td> 
                        </tr> 
                        <tr> 
                                <td><input class="text" type="text" name="id2" id="id2" value="2" /></td>                          
                                <td><input class="text" type="text" name="fname2" id="fname2" value="Ονομα2" /></td> 
                                <td><input class="text" type="text" name="lname2" id="lname2" value="Επώνυμο2" /></td> 
                                <td><input type="button" name="edit2" id="edit2" class="edit" value="edit" />
                                    <input type="button" disabled="1" name="cancel2" id="cancel2" class="cancel" value="Cancel" />
                                    <input type="submit" disabled="1" name="save2" id="save2" value="Save" />
                                </td> 
                        </tr> 
                        
                    </tbody>
                </table> 

        </fieldset> 
</body> 
    
    
   
</html>

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

edit database rows σε grid

Δημοσίευση από alou » 03 Αύγ 2013 13:46

dionisis71 έγραψε: α... καλά.. έκανα copy το tr και ξέχασα να αλλάξω τα id. Εκτός από τα id πρέπει να αλλάξω και τα names..(υποθέτω πως ναι); Τι είναι το fiddle;
Δες και θα καταλάβεις. Έβαλα και το bootstrap css αλλά έκανα remark τη γραμμή που έβαζες .hide στα tr

http://jsfiddle.net/suZX7/1/

Επόμενο βήμα να κάνεις το save function. Σκέψου τι validation θες να κάνεις και αφού το περάσει, είτε κάνεις απλά post σε ένα php (ή και στο ίδιο) αρχείο και παίρνεις τα στοιχεία και τα περνάς στη βάση (ή ότι άλλο) ή βλέπεις τις λύσεις ajax. Θα βρείς αρκετά παραδείγματα εδω μέσα.

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

edit database rows σε grid

Δημοσίευση από dionisis71 » 03 Αύγ 2013 13:52

ναι το θυμήθηκα το fiddle..

ενυπωσιάστηκα που το είδα να παίζει! θα διαβάσω το κώδικα και θα επανέλθω..

σε ευχαριστώ πολύ

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

edit database rows σε grid

Δημοσίευση από alou » 03 Αύγ 2013 13:56

dionisis71 έγραψε:
σε ευχαριστώ πολύ
Άστα ευχαριστώ... τα δωμάτια στη Νάουσα είναι?
:P j/k

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

edit database rows σε grid

Δημοσίευση από dionisis71 » 03 Αύγ 2013 14:05

alou έγραψε:
dionisis71 έγραψε:
σε ευχαριστώ πολύ
Άστα ευχαριστώ... τα δωμάτια στη Νάουσα είναι?
:P j/k
ναι ενός οικογενειακού φίλου του πεθερού .... έχεις καμιά σχέση με παρο-ναουσα..;

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

edit database rows σε grid

Δημοσίευση από alou » 03 Αύγ 2013 14:11

Τουριστική. Πλάκα έκανα ;)

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

edit database rows σε grid

Δημοσίευση από dionisis71 » 05 Αύγ 2013 11:09

Καλημέρα,

διαβάζω τον users πίνακα του Joomla και φέρνω τις εγγραφές στο html table.

Κώδικας: Επιλογή όλων

<fieldset style='border&#58;0px;'>

                <table class='table table-striped'>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>name</th>
                        <th>username</th>
                        <th>email</th>
                        <th></th>
                    </tr>
               </thead>
                <tbody>
                <?php
                 include&#40;'db.php'&#41;;
                 $query = 'SELECT * FROM devj31_users';
                 if &#40;$result = $mysqli->query&#40;$query&#41;&#41;
                    while &#40;$row = $result->fetch_row&#40;&#41;&#41;
                    &#123;
                    $id=$row&#91;0&#93;;
                    $name=$row&#91;1&#93;;
                    $username=$row&#91;2&#93;;
                    $email=$row&#91;3&#93;;
                    ?>
                      <tr id="<?php echo $id; ?>" >
                        <td><label class="text" id="id_<?php echo $id; ?>"><?php echo $id; ?></label></td>                          
                        <td><input class="text" id="name_<?php echo $id; ?>" value="<?php echo $name; ?>" /></td>
                        <td><input class="text" id="username_<?php echo $id; ?>" value="<?php echo $username; ?>" /></td>
                        <td><input class="text" id="email_<?php echo $id; ?>" value="<?php echo $email; ?>" /></td>
                        <td><input type="button" id="edit_<?php echo $id; ?>" class="edit" value="edit" />
                            <input type="button" disabled="1" id="cancel_<?php echo $id; ?>" class="cancel" value="Cancel" />
                            <input type="submit" disabled="1" id="save_<?php echo $id; ?>" value="Save" class="save"/>
                        </td>
                      </tr>
                    
                    <?php
                    &#125;
                    ?>
                    </tbody>

                </table>
        </fieldset> 
Tα buttons δουλεύουν μια χαρά και θέλω να κάνω τα εξής. Όταν ο χρήστης πατήσει edit και αλλάξει τα data κάποιων πεδίων, θέλω να μπορεί με το cancel να φέρνει τα προηγούμενα. Θα χρειαστώ 4 public variables όπου και θα κρατώ τις τιμές πριν την αλλαγή και με το cancel θα τις ξαναφέρνει.

Αυτό που δεν μπορώ να καταλάβω είναι γιατί όταν πατάω το edit button και εκτελείται ο κώδικας στην $('.edit').click(function() συνεχίζει να εκτελείται και στην $('.cancel').click(function(). Κάνω κλικ στο edit button και παίρνω και τo alert που έχω στo cancel button..(!)

Κώδικας: Επιλογή όλων

        <script type="text/javascript"> 
               $&#40;document&#41;.ready&#40;function&#40;&#41; &#123; 
                                
                        $id=0;        
                        $name='';
                        $username='';
                        $email='';
                        
                        $&#40;'tr'&#41;.addClass&#40;'hide'&#41;.find&#40;'input'&#41;.prop&#40;'readonly', true&#41;;                      
                
                        $&#40;'.edit'&#41;.click&#40;function&#40;&#41; &#123;
                                $id=$&#40;this&#41;.closest&#40;'tr'&#41;&#91;0&#93;.id;
                                $name=document.getElementById&#40;'name_' + $id&#41;.getAttribute&#40;"value"&#41;;
                                $username=document.getElementById&#40;'username_' + $id&#41;.getAttribute&#40;"value"&#41;;
                                $email=document.getElementById&#40;'email_' + $id&#41;.getAttribute&#40;"value"&#41;;
                                                                
                                $&#40;'.cancel'&#41;.click&#40;&#41;;
                                $&#40;this&#41;.closest&#40;'.hide'&#41;.removeClass&#40;'hide'&#41;.find&#40;'&#91;readonly&#93;'&#41;.prop&#40;'readonly', false&#41;;
                                $&#40;this&#41;.prop&#40;'disabled',true&#41;.next&#40;'.cancel'&#41;.prop&#40;'disabled',false&#41;
                                .next&#40;'.save'&#41;.prop&#40;'disabled',false&#41;; 
                        &#125;&#41;;

                        $&#40;'.cancel'&#41;.click&#40;function&#40;&#41; &#123;
                                //$&#40;'#name_' + $id&#41;.value&#40;$name&#41;;
                                //document.getElementById&#40;'username_' + $id&#41;.value='56';
                                alert&#40;$name&#41;;
                                $&#40;this&#41;.closest&#40;'tr'&#41;.addClass&#40;'hide'&#41;.find&#40;'.text'&#41;.prop&#40;'readonly', true&#41;;
                                $&#40;this&#41;.prop&#40;'disabled',true&#41;.next&#40;'.save'&#41;.prop&#40;'disabled',true&#41;.end&#40;&#41;
                                .prev&#40;'.edit'&#41;.prop&#40;'disabled',false&#41;; 
                        &#125;&#41;; 
                 &#125;&#41;; 
        </script> 

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

edit database rows σε grid

Δημοσίευση από alou » 05 Αύγ 2013 13:40

Αφού έχεις ένα ξεκάρφωτο $('.cancel').click(); μέσα στο .edit function, και το κάνεις trigger.

Γιατί μπλέκεις jquery με απλή js και κάνεις δυσανάγνωστο τον κώδικα και τη ζωή σου δύσκολη?

Αυτό:
$name=document.getElementById('name_' + $id).getAttribute("value");

αφού έχεις χρησιμοποιήσει jquery θα το κάνεις:
$name=$('input#name_' + $id).val();

Επίσης, γενικά για οποιοδήποτε function που εκτελείται από event, καλό θα είναι να συνηθίσεις την .on

$(element).on('event', function() { }

καθώς αυτό έχει αντικαταστήσει και τις μεθόδους .live που αφορά στοιχεία που δημιουργήθηκαν μετά το dom ready και .delegate αν θυμάμαι καλά.

Άβαταρ μέλους
dionisis71
Δημοσιεύσεις: 237
Εγγραφή: 04 Μάιος 2009 22:15
Επικοινωνία:

edit database rows σε grid

Δημοσίευση από dionisis71 » 30 Μαρ 2014 18:43

μου πήρε περίπου 8 μήνες για να διορθώσω αυτά που μου είπες... :lol:

αν φυσικά έχεις χρόνο θα ήθελα να συνεχίσω το lab..

o κώδικας διορθωμένος.. τον παραθέτω όλο σε περίπτωση που μπορεί να ακολουθήσει και κάποιος άλλος..

Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http&#58;//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html xmlns='http&#58;//www.w3.org/1999/xhtml' xml&#58;lang='en'>

<head> 
        <style type="text/css"> 
                .hide .text &#123; border&#58; 0; &#125;
                .hide .actions &#123; display&#58; none; &#125;
                .edit &#123; cursor&#58; pointer; &#125; 
        </style> 
        <link rel='stylesheet' type='text/css' href='dist/css/mycss.css'/>
        <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js"></script> 
        <script type="text/javascript"> 
               $&#40;document&#41;.ready&#40;function&#40;&#41; &#123; 
                                
                        $id=0;        
                        $name='';
                        $username='';
                        $email='';
                        
                        $&#40;'tr'&#41;.addClass&#40;'hide'&#41;.find&#40;'input'&#41;.prop&#40;'readonly', true&#41;;                      
                
                        $&#40;'input.edit'&#41;.on&#40;"click",function&#40;&#41; &#123;

                                //κλεινει το προηγούμενο tr σε περίπτωση που πατήθηκε edit και δεν έκανε save ή cancel.

                                if&#40;$id!=$&#40;this&#41;.closest&#40;'tr'&#41;&#91;0&#93;.id&#41; &#123;
                                    $&#40;'.edit'&#41;.prop&#40;'disabled',false&#41;.next&#40;'.cancel'&#41;.prop&#40;'disabled',true&#41;
                                            .next&#40;'.save'&#41;.prop&#40;'disabled',true&#41;;
                                    $&#40;'tr'&#41;.closest&#40;'tr'&#41;.addClass&#40;'hide'&#41;.find&#40;'.text'&#41;.prop&#40;'readonly', true&#41;;
                                &#125;
                                $id=$&#40;this&#41;.closest&#40;'tr'&#41;&#91;0&#93;.id;
                                $name=$&#40;'input#name_' + $id&#41;.val&#40;&#41;; 
                                $username=$&#40;'input#username_' + $id&#41;.val&#40;&#41;; 
                                $email=$&#40;'input#email_' + $id&#41;.val&#40;&#41;; 
                                
                                $&#40;this&#41;.closest&#40;'.hide'&#41;.removeClass&#40;'hide'&#41;.find&#40;'&#91;readonly&#93;'&#41;.prop&#40;'readonly', false&#41;;
                                $&#40;this&#41;.prop&#40;'disabled',true&#41;.next&#40;'.cancel'&#41;.prop&#40;'disabled',false&#41;
                                .next&#40;'.save'&#41;.prop&#40;'disabled',false&#41;; 
                        &#125;&#41;;

                        $&#40;"input.cancel"&#41;.on&#40;"click",function&#40;&#41; &#123;
                                $&#40;this&#41;.closest&#40;'tr'&#41;.addClass&#40;'hide'&#41;.find&#40;'.text'&#41;.prop&#40;'readonly', true&#41;;
                                $&#40;this&#41;.prop&#40;'disabled',true&#41;.next&#40;'.save'&#41;.prop&#40;'disabled',true&#41;.end&#40;&#41;
                                .prev&#40;'.edit'&#41;.prop&#40;'disabled',false&#41;; 
                        &#125;&#41;;
                         
                       $&#40;"input.save"&#41;.on&#40;"click",function&#40;&#41; &#123;
                            $&#40;this&#41;.closest&#40;'tr'&#41;.addClass&#40;'hide'&#41;.find&#40;'.text'&#41;.prop&#40;'readonly', true&#41;;
                            $&#40;this&#41;.prop&#40;'disabled',true&#41;.prev&#40;'.cancel'&#41;.prop&#40;'disabled',true&#41;
                                .prev&#40;'.edit'&#41;.prop&#40;'disabled',false&#41;;
                            &#125;
                        &#41;;
                 &#125;&#41;; 
        </script> 
</head> 
    
<body> 
    <header class='page-header'>
        <h1>reading table</h1>
    </header> 

    <fieldset style='border&#58;0px;'>

                <table class='table table-striped'>
                <thead>
                    <tr>
                        <th>#</th>
                        <th>name</th>
                        <th>username</th>
                        <th>email</th>
                        <th></th>
                    </tr>
               </thead>
                <tbody>
                <?php
                 include&#40;'db.php'&#41;;
                 $query = 'SELECT * FROM users';
                 if &#40;$result = $mysqli->query&#40;$query&#41;&#41;
                    while &#40;$row = $result->fetch_row&#40;&#41;&#41;
                    &#123;
                    $id=$row&#91;0&#93;;
                    $name=$row&#91;1&#93;;
                    $username=$row&#91;2&#93;;
                    $email=$row&#91;3&#93;;
                    ?>
                      <tr id="<?php echo $id; ?>" >
                        <td><label class="text" id="id_<?php echo $id; ?>"><?php echo $id; ?></label></td>                          
                        <td><input class="text" id="name_<?php echo $id; ?>" value="<?php echo $name; ?>" style="background&#58; transparent"/></td>
                        <td><input class="text" id="username_<?php echo $id; ?>" value="<?php echo $username; ?>" style="background&#58; transparent"/></td>
                        <td><input class="text" id="email_<?php echo $id; ?>" value="<?php echo $email; ?>" style="background&#58; transparent"/></td>
                        <td><input type="button" id="edit_<?php echo $id; ?>" class="edit" value="edit" />
                            <input type="button" id="cancel_<?php echo $id; ?>" class="cancel" value="cancel" disabled="1"  />
                            <input type="submit" id="save_<?php echo $id; ?>" class="save" value="save" disabled="1" />
                        </td>
                      </tr>
                    
                    <?php
                    &#125;
                    ?>
                    </tbody>

                </table>
        </fieldset> 
</body>   
</html>

το κομμάτι που θέλω να αναπτύξω είναι το update στον πίνακα μου. Με ποιον τρόπο θα μπορούσα να κάνω update στην βάση το tr που θα διορθώσω?

Απάντηση

Επιστροφή στο “PHP Προγραμματισμός”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης