2015-12-01 9 views
7

अपनी निश्चित डेटा तालिका को परिभाषित करते समय, आप पंक्तिहेइट संपत्ति का उपयोग करके अपनी पंक्ति ऊंचाई निर्दिष्ट करते हैं। लेकिन cell की सामग्री बहुत बड़ी है, तो एक स्थिर मान (उदाहरण के लिए, 50 पिक्सेल ऊंचा) सेट करके, यह काट दिया जाता है क्योंकि ऊंचाई स्पष्ट रूप से सेट होती है। मुझे लगता है कि rowHeightGetter कॉलबैक फ़ंक्शन है लेकिन उस फ़ंक्शन के तर्कों में कोई प्रासंगिकता नहीं दिखती है (शायद यह पंक्ति हो सकती है? किस तरह की समझ है लेकिन विशेष कॉलम के डेटा के बारे में कुछ नहीं है या cell)।प्रतिक्रिया फिक्स्डडाटाटेबल उत्तरदायी पंक्ति/सेल आकार

तो मैं उत्सुक हूं, क्या इसे बनाने का कोई तरीका है ताकि cell (यहां तक ​​कि कुछ हद तक) उस डेटा के प्रति उत्तरदायी है?

var Table = FixedDataTable.Table, 
    Column = FixedDataTable.Column, 
    Cell = FixedDataTable.Cell; 

var rows = [ 
    ['a1', 'b1', 'c1'], 
    ['a2', 'b2', 'c2'], 
    ['a3', 'b3', 'c3'], 
    // .... and more 
]; 

ReactDOM.render(
    <Table 
    rowHeight={50} 
    rowsCount={rows.length} 
    width={500} 
    height={500} 
    headerHeight={50}> 
    <Column 
     header={<Cell>Col 1</Cell>} 
     cell={<Cell>Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content Column 1 static content </Cell>} 
     width={200} 
    /> 
    <Column 
     header={<Cell>Col 3</Cell>} 
     cell={({rowIndex, ...props}) => (
     <Cell {...props}> 
      Data for column 3: {rows[rowIndex][2]} 
     </Cell> 
    )} 
     width={200} 
    /> 
    </Table>, 
    document.getElementById('CustomDataTable1') 
); 

यह एक सरल उदाहरण है, लेकिन यदि/जब आप इसे चलाने के लिए, आप देखेंगे कि पहले कॉलम के कक्ष की सामग्री को काट हो जाता है और आप को देखने के लिए और क्या के भीतर निहित है की अनुमति नहीं है।

मैं थोड़ी देर के लिए इस मुद्दे पर दीवार के खिलाफ अपना सिर मार रहा हूं और मुझे कुछ भी नहीं मिला है जो मेरी मदद करेगा। मुझे लगता है कि मुझे कुछ और उपयोग करने की ज़रूरत है। क्या कोई भी सुझाव या सलाह दे सकता है?

thnx, क्रिस्टोफ

उत्तर

4

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

इसलिए, यदि आपको वास्तव में अनंत स्क्रॉलिंग की आवश्यकता है, तो आपको यह समझने की ज़रूरत है कि प्रत्येक पंक्ति कितनी बड़ी है, केवल इंडेक्स से। मुझे लगता है कि आप पंक्ति को एक ऑफस्क्रीन सादे HTML तालिका में, मैन्युअल रूप से, और यह मापने के लिए कि यह कितना अधिक है (और परिणाम कैशिंग), या शायद एक सरल एल्गोरिदम का उपयोग करके इस विधि को कार्यान्वित कर सकता है (उदाहरण के लिए एक समझदार आवश्यक ऊंचाई आधारित सामग्री पर)। पूर्व दृष्टिकोण विशेष रूप से अच्छा प्रदर्शन करने की संभावना नहीं है, हालांकि मैंने कोशिश नहीं की है।

यदि आपको अनंत स्क्रॉलिंग की आवश्यकता नहीं है, तो निश्चित डेटा तालिका ड्रॉप करें और केवल एक सादा HTML < तालिका> प्रस्तुत करें, जो आपकी सामग्री-आधारित पंक्ति ऊंचाइयों को ठीक करेगी (उचित सीएसएस का उपयोग करके इसे बाहर रखने के लिए उपयुक्त सीएसएस का उपयोग करके)।

अंतिम विकल्प एक शानदार स्व-समायोजन अनंत स्क्रॉलिंग तालिका घटक को कार्यान्वित करना है जो इसे प्रत्येक पंक्ति की ऊंचाई के आधार पर स्वचालित रूप से अपनी स्क्रॉल स्थिति को स्वतः समायोजित करता है। गुड लक (मुझे लगता है कि यह संभव है!)

0

इस link में लेखक React.getDOMNode के माध्यम से पंक्ति की ऊँचाई जाँच का सुझाव()। OuterHeight componentDidMount घटना पर। हो सकता है कि आप इस जानकारी को पंक्ति ऊंचाई के साथ समायोजित करने के लिए पंक्ति हाइट गेटर कॉलबैक के साथ जोड़ सकें।

पंक्ति हाइट गेटर कॉलबैक here का उपयोग करने का एक उदाहरण है।

+0

यह सुनिश्चित करने के लिए कि आप एक अच्छा जवाब दे रहे हैं, बस कुछ बुनियादी कदम प्रदान करें। –

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