2009-10-09 10 views
5

मेरे पास डेटा की एक तालिका है जो जावास्क्रिप्ट के साथ गतिशील रूप से उत्पन्न होती है। प्रत्येक कुछ मिनट पृष्ठ अजाक्स अनुरोध को फायर करके, सर्वर से डेटा वापस प्राप्त करके और तालिका में डेटा को प्रतिस्थापित करके डेटा को रीफ्रेश करता है। यह सुंदर मानक है, और तालिका इस तरह लग रही समाप्त होता है:।आईई एक स्टाइलशीट परिवर्तन होने तक गतिशील सामग्री को अनुचित रूप से प्रस्तुत करता है

यह सिर्फ ठीक काम करता है अगर मैं तालिका खाली करने और धीरे-धीरे पंक्तियों में जोड़ डेटा उत्पन्न हालांकि, इस तालिका संभावित कर सकते हैं हजारों पंक्तियां हैं, और यह तालिका को उत्पन्न करने के लिए संभावित रूप से इतनी देर लग सकती है कि ब्राउज़र उपयोगकर्ता को "यह स्क्रिप्ट निष्पादित करने में बहुत अधिक समय ले रहा है" त्रुटियों को उत्पन्न करता है। तो मैंने टेबल पीढ़ी को टुकड़ों में तोड़कर और setInterval का उपयोग करके एक समय में थोड़ा सा करके इसे ठीक कर दिया।

यह ठीक काम करता है, लेकिन क्योंकि तालिका पूरी तरह से उत्पन्न होने में थोड़ी देर लग सकती है, इसलिए मैंने चालाक होने और कुछ छद्म-डबल-बफरिंग करने की कोशिश की। मेरे पास एक दूसरी तालिका है जिसमें display इसे छिपाने के लिए none पर सेट है, और जब मैं तालिका को पुन: उत्पन्न करता हूं तो मैं एक समय में छिपी हुई तालिका में पंक्तियों को जोड़ता हूं। इस प्रकार मौजूदा डेटा तब तक उपयोगकर्ता के लिए दृश्यमान होता है जब तक कि तालिका पुन: पीढ़ी पूरी नहीं हो जाती है, उस बिंदु पर हम इसे एक बार में अपनी नई सामग्री के साथ बदल देते हैं।

मैं कोड

$("#loading_area tbody").children().appendTo($("#unplanned tbody").empty()); 

की निम्न पंक्ति के साथ अपने प्रतिस्थापन कर रहा हूँ यह फ़ायरफ़ॉक्स, सफ़ारी, और गूगल क्रोम पर ठीक काम करता है। लेकिन IE पर, मैं निम्नलिखित मिल: -

ये पंक्तियां वास्तव में खाली नहीं कर रहे हैं सामग्री वहाँ अगर मैं क्षैतिज पर्याप्त स्क्रॉल है:

ऐसा लगता है कि पहले कॉलम 55,000 पिक्सल चौड़ा है! और यहां वास्तव में अजीब हिस्सा है: जैसे ही मैं तालिका की शैली के बारे में कुछ भी बदलता हूं, सामग्री ठीक से प्रदर्शित होती है। इसलिए यदि मैं फ़ॉन्ट रंग को हरे रंग में बदलता हूं, तो IE तुरंत टेबल को फिर से प्रस्तुत करेगा।

लेकिन मैं सीधे परिवर्तन नहीं कर सकता। तो अगर मैं

$("#unplanned").css("color", "green"); 

तो यह ठीक से पुनः प्रस्तुत नहीं करता है; रंग बदलता है, लेकिन पहला कॉलम 55,000 पिक्सेल चौड़ा रहता है। लेकिन अगर मैं सीधे स्टाइलशीट

document.styleSheets[1].rules[3].style.color = "green"; 

पर परिवर्तन करता है तो यह तालिका को सही ढंग से प्रस्तुत करता है।

तो मैं इस एक यादृच्छिक शैली परिवर्तन करने, हर बार जब मैं तालिका बिछाने समाप्त कर रहा हूँ 1px और 0px के बीच विस्तृत/संक्षिप्त करें बटन के मार्जिन टॉगल करके द्वारा फिक्सिंग समाप्त हो गया है, और इस काम किया।

मेरी समस्या यह है कि जब मैं पृष्ठ मुद्रित करने का प्रयास करता हूं, तो पंक्तियां खाली दिखती हैं, क्योंकि पेज सामग्री को प्रिंटर को अनुचित रूप से प्रस्तुत किया जाता है।

तो मैं और अधिक चालबाजी करने की कोशिश कर रहा हूं, संभवत: बस उस तालिका को प्रदर्शित करने और अपने id एस को स्वैप करने या जो कुछ भी काम करने के लिए इसे प्राप्त कर रहा है। मेरा सवाल है, यहाँ क्या चल रहा है?यह आईई में एक बग की तरह लगता है; मैं आईई 8 का उपयोग कर रहा हूं लेकिन यह वही बात आईई 6 और आईई 7 पर होती है। मैं भविष्य में इस गड्ढे में गिरने से बचना चाहता हूं, लेकिन मुझे यकीन नहीं है कि इसका क्या कारण है, इसलिए मुझे सच में यकीन नहीं है कि मुझे क्या टालना चाहिए। कोई भी प्रकाश जो इस पर बह सकता है, उसकी बहुत सराहना की जाएगी।

संपादित करें: कौन सी तालिका प्रदर्शित की जाती है स्वैपिंग को स्टाइलशीट हैक की आवश्यकता के बिना ब्राउज़र में प्रतिपादन समस्या दूर हो जाती है, लेकिन प्रिंटिंग के साथ समस्या अभी भी वहां है। वास्तव में, प्रिंटिंग समस्या तब भी होती है जब तालिका सीधे शो/छुपा या तत्व आंदोलन चालबाजी के साथ उत्पन्न होती है। इसलिए मैं निश्चित रूप से उलझन में हूं और यह सुनिश्चित नहीं करता कि मैं इस समस्या को दूर करने के लिए क्या कर सकता हूं। अगर मैं इसे समझ नहीं पा रहा हूं तो मुझे प्रिंटिंग के लिए एक अलग, स्थैतिक पृष्ठ बनाना पड़ सकता है।

+2

मुझे यकीन है कि आपको इस पर एक जवाब मिलेगा - मुझे एक साल पहले कुछ हद तक समानता का सामना करना पड़ा। कभी नहीं पता चला कि क्या हो रहा था। मैं फिर से उपकरण का उपयोग करना चाहता था जो मैं पूरी तरह से stinkin 'आईई – Matt

उत्तर

3

एक टेस्ट केस के बिना निश्चित रूप से कह सकते हैं नहीं है, लेकिन सामान्य रूप में:

  • सुनिश्चित करें कि आप table-layout: fixed उपयोग कर रहे हैं। आईई auto कॉलम चौड़ाई अनुमान लगाने में बुरा है, खासकर जब कॉलस्पन्स शामिल होते हैं। जब कई पंक्तियां होती हैं तो चौड़ाई अनुमान लगाने में भी धीमी होती है। एक निश्चित तालिका लेआउट के साथ प्रत्येक कॉलम के लिए स्पष्ट आकार सेट करके इसे IE के हाथों से बाहर निकालें।

  • बड़ी तालिकाओं में पंक्तियों को जोड़ने से बचें। जब आप कहते हैं कि children().appendTo() jQuery अभी भी एक बार में प्रत्येक संलग्न कर रहा है, जो वास्तव में बहुत धीमा हो जाता है। टेबल मैनिप्लेशंस को तेज़ करने के लिए आप सबसे अच्छी चीज कर सकते हैं, तालिका के मूल तत्व पर innerHTML का उपयोग करके पूरे लॉट को एक साथ सेट करना है। निश्चित रूप से HTML स्ट्रिंग तैयार करना परेशान हो सकता है यदि आप डेटा (विशेषता मान और सामग्री) डालना चाहते हैं, क्योंकि इसे HTML-escaped होना चाहिए। एक कार्यवाही सभी पंक्तियों को प्लेसहोल्डर मूल्यों के साथ एक साथ लिखना है, और उसके बाद टेक्स्ट नोड्स पर .data सेटिंग के माध्यम से वास्तविक डेटा में एक दूसरे पास भरना है। जब तक आप लाइव का उपयोग नहीं कर लेते हैं, तब तक आपको इस बटन में उन बटनों पर किसी भी ईवेंट हैंडलर को फिर से संलग्न करने की आवश्यकता होगी।

  • मुझे लगता है कि आंतरिक HTML के साथ पंक्तियों को लिखकर आप इसे समय-समय पर आंशिक अद्यतनों से छुटकारा पाने के लिए पर्याप्त गति देने में सक्षम होना चाहिए (जो कि संभावित संभावित दौड़ की स्थिति में प्रतीत होता है)। बेशक डीओएम-आधारित विकल्प केवल उन पंक्तियों को अपडेट करना होगा जो बदले गए हैं। जब आप निश्चित लेआउट का उपयोग कर रहे हैं, चूंकि चौड़ाई सामग्री पर निर्भर नहीं होती है, तो आप एक-दूसरे के बाद अपनी तालिका को कई तालिकाओं में विभाजित कर सकते हैं।वे देखेंगे कि वे एक टेबल हैं, लेकिन आप प्रत्येक तालिका को अलग से सौदा कर सकते हैं, या तो अपने आंतरिक HTML को एक बार में लिख सकते हैं, या डोम प्रदर्शन मौत के बिना अपनी पंक्तियों को जोड़ सकते हैं, आपको एक ही टेबल में हजारों पंक्तियां मिलती हैं।

+0

'टेबल-लेआउट' को 'निश्चित' पर सेट करने से समस्या दूर हो गई। आपके पास मेरा अनन्त कृतज्ञता है, और अगली बार जब मैं ऐसा कुछ कर रहा हूं, तो मैं आपकी दूसरी सलाह को ध्यान में रखूंगा। –

1

आपके पास अपनी प्राथमिक तालिका में केवल दो tbody तत्व हो सकते हैं। एक को प्रदर्शित करने के लिए इस्तेमाल किया जाएगा, और दूसरे को बफरिंग के लिए इस्तेमाल किया जाएगा। इस तरह आप अन्य tbody को जोड़ना छोड़ सकते हैं और बफर से इसे प्रदर्शित करने के लिए बस display.none हटा दें। मेरा अनुमान है कि यह थोड़ा तेज़ हो सकता है और शायद आईई में गड़बड़ी को हल कर सकता है।

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

आम तौर पर, टेबल आधुनिक ब्राउज़र में भी सबसे विचित्र तत्व हैं। उनके साथ उन्नत कुछ भी करने से आम तौर पर इन छोटे सिरदर्द होते हैं, बहुत अच्छी किस्मत।

+0

के अच्छे कारण कर रहा था अच्छा सुझाव है, लेकिन क्या यह दो' तत्व 'तत्वों के लिए कानूनी भी है? मैं इस सुझाव को देखकर आश्चर्यचकित था। और एक पंक्ति को पूर्ण छिपाने के लिए स्थिति क्यों स्थापित करेगा? ऐसा लगता है कि मेरे लिए काम नहीं कर रहा है। (मैं इस तरह की चीजों में डीलिंग शुरू करने से पहले एचटीएमएल/सीएसएस/जावास्क्रिप्ट के बारे में अपने ज्ञान पर विचार करता था!) ​​ –

+3

"टेबल पंक्तियों को टेबल हेड, टेबल पैर और एक या अधिक टेबल बॉडी सेक्शन में समूहीकृत किया जा सकता है" - http://www.w3.org/TR/html4/struct/tables.html#h-11.2.3 – robertc

+1

'tbody' एक सुंदर बेकार तत्व होगा यदि आपके पास केवल एक हो। इसका बिंदु एक टेबल में पंक्तियों को समूहीकृत कर रहा है। 'स्थिति: पूर्ण' के रूप में, आप 'प्रदर्शन: छुपा' और ऋणात्मक 'जेड-इंडेक्स' के साथ संयोजन में इसका उपयोग करते हैं, यदि 'प्रदर्शन का उपयोग करते हैं: कोई भी' समस्या उत्पन्न नहीं करता है। मैं विवरण पर अस्पष्ट हूं, लेकिन मुझे यकीन है कि मेरे पास ऐसी स्थिति एक बार से अधिक है। – slikts

1

क्या आपके पास टेबल पर चौड़ाई सेट है? यह मेरे लिए होता है कि यदि आप छुपाते समय तालिका उत्पन्न कर रहे हैं तो यह वर्तमान ब्राउज़र विंडो चौड़ाई जैसी चीज़ों को उठा नहीं सकता है, जो आमतौर पर तालिका की चौड़ाई निर्धारित करने के लिए उपयोग किया जाता है, इसलिए यह अधिकतम तक वापस आ जाता है।

+0

हाँ, चौड़ाई 100% –

+1

पर सेट की गई है, इसलिए यदि आप व्यूपोर्ट आकार पर निर्भर कुछ की बजाय इसे विशिष्ट पिक्सल पर सेट करते हैं, तो क्या आपको अभी भी समस्या है? – robertc

+0

मुझे पता लगाने का मौका नहीं मिला, क्योंकि उपरोक्त बिबिन की उत्कृष्ट सलाह ने समस्या को दूर कर दिया। लेकिन सामग्री को गतिशील होने के बाद भी मैं एक निश्चित = पिक्सेल चौड़ाई नहीं चाहूंगा और इसे विभिन्न स्क्रीन आकारों पर देखा जाना चाहिए और वहां बहुत सारे डेटा हैं इसलिए मुझे स्क्रीन की पूरी चौड़ाई की ज़रूरत है। यद्यपि अगर मैं इस तरह कुछ ऐसा करता हूं, तो मैं यह देखने के लिए कि क्या वह कुछ भी बदलता है - सुझाव के लिए धन्यवाद, मैं एक निश्चित पिक्सेल चौड़ाई निर्धारित करने का प्रयास करूंगा। –

संबंधित मुद्दे