इनलाइन संपादन के लिए तालिका के भीतर फॉर्म फ़ील्ड को संरेखित कैसे करें?

Question

मैं वसंत, जेएसपी, जावास्क्रिप्ट, jquery का उपयोग कर एक वेबपैप विकसित कर रहा हूँ।

मैं डेटाटेबल्स का उपयोग कर एक टेबल प्रदर्शित करता हूं। जब मैं किसी तालिका पंक्ति पर क्लिक करता हूं, तो मैं चाहता हूं कि यह सभी फ़ील्ड को इनलाइन संपादन इनपुट में बदल दें, आदि का चयन करें। इसके अलावा मैं अगली पंक्ति में कुछ अतिरिक्त इनपुट फ़ील्ड और एक सेव बटन दिखाना चाहता हूं।

अब मैं ऐसा करने के कई तरीके देखता हूं। मुझे यकीन नहीं है कि कौन सा लेना है।

1. मैं चयनित पंक्ति में एक हैंडल प्राप्त कर सकता हूं और फिर टीडी पर फिर से चला सकता हूं और उन्हें इनपुट/चयन फ़ील्ड में बदल सकता हूं। फिर मैं नए फ़ील्ड और सेव बटन के लिए एक अतिरिक्त पंक्ति डाल सकता हूं। मुझे इसे एक स्वच्छ समाधान के रूप में नहीं देखा जाता है। फॉर्म के लिए बाध्यकारी स्प्रिंग मॉडल एट्रिब्यूट का उपयोग करने के बजाय मुझे मैन्युअल रूप से एक पोस्ट जारी करना होगा। (मैं अभी भी यहाँ ModelAttribute का उपयोग कर सकते हैं?)

2. मैं की तरह एक JSP फ़ाइल में लग रहा है में एक संपादन प्रपत्र बना सकते हैं:

   <form:form action="" commandName=""> <td> <input ... > </td> <td> <select ... > </td> </tr> <tr> <td> <label> <input new field> </td> <td> <button> </td> </tr>

नोट मैं एक jsp में एक शुरुआत की जरूरत नहीं है फ़ाइल के रूप में मैं तालिका में मौजूदा पंक्ति से tr का पुन: उपयोग करने की योजना बना रहा हूं। इस तरह से मैं एक साफ फॉर्म प्राप्त कर पाऊंगा और अद्यतन विधि का भी उपयोग कर सकता हूं जिसे मैंने पहले ही लिखा है जो जावा क्लास में फॉर्म को बांधता है। इसके अलावा मुझे कॉलम नामों के साथ इनपुट फ़ील्ड के संरेखण के बारे में परेशान करने की आवश्यकता नहीं है।

उत्पन्न एचटीएमएल तरह लग रहा है ...

इस दृष्टिकोण के साथ समस्या

html में प्रपत्र तत्व की नियुक्ति का कारण बनता है पूरे फार्म के एक सेल में तंग किया जा रहा है तालिका जो अच्छी नहीं लगती है और पूरे लेआउट को गड़बड़ कर देती है। क्या और कोई रास्ता है? क्या मुझे बस एक कोस्पैन रखने के साथ तालिका की सामग्री को प्रतिस्थापित करना चाहिए और फिर इस तत्व के अंदर divs डाल देना चाहिए और यह सुनिश्चित करने के लिए कि इनपुट फ़ील्ड तालिका में कॉलम नामों के साथ संरेखित हों, ठीक से सीएसएस को ट्यून करें?

वहाँ एक बेहतर समाधान आप कर सकते हैं सुझाव है? यदि प्रश्न बहुत स्पष्ट नहीं है तो मैं अधिक जानकारी भर सकता हूं।

Answer 1

यह है कि मैं क्या एक भी फार्म के साथ (के रूप में मैं जानता हूँ कि डेवलपर्स के लिए आसान समाधान प्यार सर्वर की ओर से विकास पृष्ठभूमि से आने वाले) करना होगा

1. लपेटें तालिका
पंक्ति संपादित करें पर
2. (क्लिक करने है पंक्ति) एक ajax अनुरोध है कि शुद्ध एचटीएमएल कि सटीक टीआर तरह लग रहा है देता है, साथ ही आप शामिल करना चाहते जो कुछ भी अतिरिक्त खोलें:

---

<tr><td><input type="text" name="text1" ... /></td><td>second row... </td></tr> 
<tr><td colspan="2">And hey, here is more, and the save button ... </td></tr> 

---

1. jQuery में सामग्री के साथ टीआर की जगह लिया गया (myTr.replace($(ajaxResponse))) या कुछ इसी तरह

2. अब बटन सहेजें यदि आप ajax के माध्यम से प्रस्तुत करना चाहते प्रपत्र

3. के लिए प्रस्तुत एक नियमित रूप से किया जाता है, एक बार किया , अपने एजेक्स प्रतिक्रिया में पुराना एचटीएमएल वापस करें और पुरानी ट्रॉ के साथ दो trs को प्रतिस्थापित करें (आपको केवल नए गुणों को एक विशेषता जो आप आसानी से jquery में पा सकते हैं)

4. डबल संपादन को रोकने के लिए एक वैश्विक कुंजी बंद करने की भूल नहीं है, उपयोगकर्ताओं को एक बार में एक ही पंक्ति संपादित कर सकते हैं

---

अद्यतन: बजाय सर्वर क्लाइंट पर लोड डंप करने के लिए एक दूसरे समाधान जोड़ने

सर्वर को ओवरलोड करने से बचने के लिए (हालांकि मैं इसके बारे में चिंतित नहीं होगा जब तक कि यह नियमित आदत न हो), आप अपने फॉर्म फ़ील्ड को अपने HTML के अंदर टेम्पलेट के रूप में बना सकते हैं और स्ट्रिंग प्रतिस्थापन (या jQuery टेम्पलेट्स) का उपयोग कर सकते हैं, तो चरण 2 में प्रतिक्रिया प्राप्त करने के बजाय AJAX के बजाय, आप टेम्पलेट को कॉल करते हैं, और एस को प्रतिस्थापित करते हैं विशेषताओं के साथ trings आप हर पंक्ति में बचाने के ... इस तरह:

<div id="myTemplate"> // or you can use jQuery script templates 
    <tr><td><input type="text" name="${Name}" ... /> id is ${Id}</td><td>${SecondRow}... </td></tr> 
    <tr><td colspan="2">Save button here.... and may be more text ${MoreText}</td></tr> 
</div> 

अपने कोड में प्रत्येक पंक्ति में

, पर्याप्त गुण या आईडी जोड़ने के इस तरह पता है कि आप के साथ बदलना चाहते हैं:

<tr data-itemid="34"><td ><input type="text" name="text1" id="findme" ... /></td><td data-moretext="here is more text">second column </td></tr>...etc 

तो अब अपने प्रतिस्थापन लिपि में:

$("#myTemplate").html().replace("${Name}", $(thisrow).find("#findme").attr("name")) 
    .replace("${Id}",$(thisrow).attr("data-itemid")); 

आदि ...

बेशक

जमा करने के बाद यह सर्वर के लिए एक हो गया है, लेकिन उपयोगकर्ता मामले में "रद्द" आप एक और केवल पढ़ने के लिए टेम्पलेट

वैसे हो सकता है, कि जिस तरह से मैं आमतौर पर साथ जाना है, मैं jQuery टेम्पलेट का उपयोग , और टेम्पलेट्स को संपादित और देखें, लेकिन मैं संपादन फॉर्म दोहराता हूं और मैं jQuery AJAX मैन्युअल रूप से सबमिट करता हूं ... लेकिन वह ... मेरा दोस्त, एक साधारण साफ और रखरखाव योग्य समाधान नहीं है, मुझे डर है

Answer 2

मैं एक साल पहले इस तरह की एक समस्या में रहा हूं। यह एक गन्दा समस्या है। किसी भी तरह से यदि आप पंक्ति के प्रत्येक टीडी को पार करते हैं और इसे टेक्स्ट फ़ील्ड में परिवर्तित करते हैं या आप इसके लिए एक अलग जेएसपी फ़ाइल बना सकते हैं।

लेकिन इस मामले में सबसे अच्छा इनपुट क्षेत्र में टीडी की सामग्री को बदलने और डेटा मैन्युअल रूप से पोस्ट करना है। क्योंकि इस मामले में आप tr के चारों ओर फॉर्म टैग लपेट नहीं सकते हैं। आपको प्रत्येक इनपुट फ़ील्ड के मान मैन्युअल रूप से पोस्ट करना होगा।

पीएस। सबसे अच्छा समाधान एक संपादन संवाद बनाना है।

Answer 3

एक और समाधान है, लेकिन मुझे लगता है कि आप इसे बहुत पसंद नहीं करेंगे ...आप पूरे डेटाटेबल के लिए एक ही फॉर्म का उपयोग कर सकते हैं (एक तालिका में पूरी तालिका को लपेटने की अनुमति है) वर्तमान पंक्ति के लिए इनपुट फ़ील्ड जेनरेट करें और यदि यह अपडेट किया गया है तो जावास्क्रिप्ट के साथ फॉर्म को असीमित रूप से सबमिट करें और मूल एचटीएमएल में टीडी सामग्री को पुनर्स्थापित करें, अगर आप नाम दें आपके फ़ील्ड जैसे नाम = "फ़ील्ड []" आप एक समय में कई पंक्तियां भी सबमिट कर सकते हैं (मुझे नहीं पता कि आप इसे चाहते हैं या नहीं)।

जैसे

<form action=""> 
<table> 
<tr><td><input type="hidden" name="row[]" value="1"/><input name="field[]"/></td></tr> 
<tr><td>field value for row2</td></tr> 
<tr><td><input type="hidden" name="row[]" value="3"/><input name="field[]"/></td></tr> 
</table> 
</form> 

तुम सिर्फ jQuery के साथ प्रपत्र हड़पने और XMLHttpRequest के माध्यम से इसे प्रस्तुत के रूप में मुझे लगता है तुम अगर प्रत्येक पंक्ति एक अलग फार्म (जो अवैध है) था कर सकते हैं आप एचटीएमएल कोड लिख सकते हैं, अगर आप एकाधिक पंक्तियां नहीं चाहते हैं, बस [] को हटाएं और प्रत्येक पंक्ति सबमिट करें और मान सबमिट करने पर आपको उन्हें सही ढंग से गिना जाता है, यह नहीं पता कि यह जावा में कैसे व्यवहार करेगा लेकिन PHP में मुझे निम्न प्राप्त होगा:

$_GET[row][0] = 1; 
$_GET[field][0] = 'value typed in row1'; 
$_GET[row][1] = 3; 
$_GET[field][1] = 'value typed in row3'; 

वैकल्पिक तालिका definitio n एक ही नाम होने से बचाने के लिए फिर से

<form action=""> 
<table> 
<tr><td><input name="field[1]"/></td></tr> 
<tr><td>field value for row2</td></tr> 
<tr><td><input name="field[3]"/></td></tr> 
</table> 
</form> 

केवल ऊपर के रूप में आप प्रत्येक प्रविष्टि के इस प्रकार के जवाब में नकली नाम से बचने के लिए स्पष्ट अनुक्रमित सेट, अधिमानतः एक अद्वितीय पहचानकर्ता जो मेज से पंक्ति वर्णन कर सकते हैं का उपयोग यह वही मेज है कि आप पंक्ति संख्या के बजाय वहां (जब संभव हो मैं प्राथमिक कुंजी का उपयोग कर) में संशोधन कर रहा हूं, बस उस स्थिति में जहां पर्याप्त स्पष्ट नहीं था।

Answer 4

आप की कोशिश की है:

रूप

में

1. लपेटें पूरे तालिका डेटा प्रविष्टियों के रूप में अपनी सीमाओं के साथ विकलांग आदानों सीएसएस के माध्यम से छिपा हुआ है
2. जब उपयोगकर्ता संपादित करें क्लिक करता है, आदानों सक्षम और दिखाने सीमाओं
3. आप शायद प्रत्येक क्षेत्र के लिए छिपा तत्वों की आवश्यकता होगी
4. उपयोगकर्ता फार्म, ajax के माध्यम से पोस्ट सबमिट करता है और आदानों छिपा सीमाओं
के साथ वापस आ अक्षम पर सेट जब

Answer 5

क्या contenteditable?

डेमो: http://jsfiddle.net/SO_AMK/XQekC/

jQuery:

var ctrlDown = false; 
$(document).keydown(function(e) { 
    if (e.which = "ctrlKey") { 
     ctrlDown = true; 
    } 
}).keyup(function(e) { 
    if (e.which = "ctrlKey") { 
     ctrlDown = false; 
    } 
}); 


$('#example').dataTable(); 

$("#example tr").click(function() { 
    if ($(this).hasClass("row_selected") && ctrlDown) { 
     submitRow($(this)); 
     return false; // Break out so the next if doesn't run 
    } 
    else if ($(this).hasClass("row_selected") && ctrlDown == false) { 
     return false; // Break out so the next if doesn't run 
    } 

    if ($(this).siblings(".row_selected").length && ctrlDown == false) { 
     $(this).siblings(".row_selected").each(function() { 
      submitRow($(this)); 
     }); 
    } 

    $(this).addClass("row_selected"); 
    $(this).children("td").each(function() { 
     $(this).attr("contenteditable", true); 
    }); 
}); 

function submitRow(elm) { 
    var data = []; 
    $(elm).removeClass("row_selected").children("td").each(function() { 
     data.push($(this).text()); 
    }); 
    alert(data); // This will stop the keyup from firing, but you won't (I hope) really be using alerts 
}​ 

यह सब कुछ है, लेकिन एक प्रस्तुत करने के लिए सर्वर कार्य है, यह भी पूरी तरह से इनलाइन है और कई पंक्तियों के चयन के लिए समर्थन हासिल है।

एकमात्र बग है, जब यह डेटा चेतावनी दिखाता है कि फोकस मुख्य विंडो से बंद हो जाता है तो कुंजीपटल घटना कभी नहीं होती है, क्योंकि आप शायद अलर्ट का उपयोग नहीं करेंगे, यह कोई मुद्दा नहीं होना चाहिए। इसे पहेली में ठीक करने के लिए, पंक्ति पर क्लिक करने से पहले चेतावनी बंद होने के बाद ctrl दबाएं और छोड़ दें।

Answer 6

मैं देख रहा हूँ समस्याओं

1. की जोड़ी आपका कोई। तालिका & में कॉलम के कॉलम संपादित आपको बताएंगे कि अलग हैं
2. आप पंक्ति संपादित करने के लिए तो आप एक अजाक्स कॉल करते हैं और इसे

मिल आप पूरा डेटा है, तो करना पड़ सकता है पूरा डेटा मिलने से नहीं किया जा सकता पर उसके बाद आप बिंदु 2 की जरूरत नहीं है, मान लेते हैं कि आप एक समारोह है पैरामीटर

function f(row) 
{ 
    var newRow = yourTable.insertRow(parseInt(row.rowIndex,10)+1); 
    //you can place the above or below the clicked row , or you can even make the row visible false And then show the new row 
    Var newCell = newRow.insertCell(0); 
    newCell.colspan = 6;//the count if columns in your table row 
    NewCell.innerHTML = " put your HTML content here"; 
}