लीड की सूची देखें (ठंडे संपर्क)

चूंकि हम पहले ही शुरू कर चुके हैं, मैं अंत में एक गुप्त परियोजना के बारे में बात कर सकता हूं जो मैं पिछले दो वर्षों से काम कर रहा हूं। टीमवर्क सीआरएम की दिलचस्प विशेषताओं में से एक सूची दृश्य है।

यह एक शक्तिशाली घटक है जो अनुप्रयोग में सात बार होता है। वास्तव में, स्टेरॉयड पर एक तालिका। मैं बहुत कुछ बता सकता था, लेकिन मैं आपको बोर नहीं करना चाहता। मैं इस पर ध्यान केंद्रित करूँगा कि हमने इस लचीलेपन को सीएसएस (ग्रिड) की कुछ लाइनों के साथ कैसे लागू किया। अर्थात्, हम भारी डेटा टेबल कैसे बिछाते हैं, हम कॉलम आकार का समर्थन कैसे करते हैं, और बहुत कुछ।

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

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

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

न्यूनतम स्क्रीन चौड़ाई पर, स्तंभ लंबवत रूप से स्टैक्ड होते हैं, संपूर्ण स्क्रीन चौड़ाई पर कब्जा कर लेते हैं।


एक संकीर्ण स्क्रीन पर सूची क्या दिखती है

लचीले तालिकाओं को करना आसान नहीं है। आप कई मौजूदा टेम्प्लेट में से चुन सकते हैं। इस बारे में सोचें कि उपयोगकर्ता किस जानकारी की तलाश कर रहे हैं और बुद्धिमानी से चुनें।

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

मान लें कि हमारे पास कई कॉलम हैं (बाद में हम देखेंगे कि उपयोगकर्ता उन्हें कैसे अनुकूलित कर सकते हैं)। सबसे पहले, तालिका को स्क्रीन की चौड़ाई कम से कम भरना चाहिए। दूसरे, कॉलम की चौड़ाई उनकी सामग्री और मूल्यों के प्रकार द्वारा निर्धारित की जानी चाहिए। उदाहरण के लिए, छोटे / लंबे पाठ, दिनांक, संख्या, URL, आदि एक तिथि वाले कॉलम में लंबे पाठ के स्तंभों की तुलना में कम जगह होनी चाहिए।

कॉलम में न्यूनतम चौड़ाई होनी चाहिए। परिणाम अक्सर एक तालिका होती है जो लंबवत और क्षैतिज रूप से दोनों को स्क्रॉल करती है।


लेआउट खिड़की की चौड़ाई पर कैसे निर्भर करता है। चिकोटी GIF के लिए क्षमा करें, मैं आपको कुछ इंटरैक्टिव उदाहरण बाद में दूंगा।

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

खैर पहले से ही सीएसएस ग्रिड दिखाओ

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

सबसे पहले, display:grid लागू करें display:grid तालिका को ग्रिड में बदलने के लिए display:grid से <table> तक। यह कुछ भी नहीं तोड़ देगा: यदि ब्राउज़र ग्रिड का समर्थन नहीं करता है, तो यह display:table का उपयोग करेगा display:table । बाल तत्व <thead> और <tbody> जाल तत्व बन जाते हैं। हमें <thead> , <tbody> या यहां तक ​​कि <tr> बारे में सोचने की आवश्यकता नहीं है। हम इस ग्रिड पर हमारे <th> और <td> को display:grid को लागू करके रखना चाहते display:grid उनमें से प्रत्येक को display:grid (यानी, ग्रिड के अंदर ग्रिड), लेकिन यह आदर्श नहीं है। प्रत्येक <tr> ग्रिड दूसरों से स्वतंत्र होगा, और यह अच्छा नहीं है (आप बाद में देखेंगे कि फ्लेक्सबॉक्स के साथ भी यही समस्या है)।

वर्कअराउंड display:contents पर <thead> , <tbody> और <tr> । यह मूल रूप से उन्हें ग्रिड लेआउट से निकालता है, जिससे बाल तत्व ( <th> और <td> ) को आगे बढ़ाया जाता है।

फिर हम ग्रिड तत्वों को नियंत्रित करने के लिए जादू नियम grid-template-columns का उपयोग करते हैं। हाँ, सीएसएस की सिर्फ एक पंक्ति। उदाहरण के लिए, यदि हमारे पास कोई दिनांक स्तंभ और URL स्तंभ है, तो यह कुछ इस तरह दिखाई देगा:

 grid-template-columns: minmax(150px, 1.33fr) minmax(150px, 2.33fr); 

हम सभी स्तंभों के लिए समान न्यूनतम आकार का उपयोग करते हैं, लेकिन अधिकतम मान ( fr ) स्तंभ के डेटा प्रकार द्वारा निर्धारित किया जाता है। मैंने auto और max-content की कोशिश max-content , लेकिन हम एक बेहतर विकल्प के साथ आए। यहां एक सरलीकृत उदाहरण है: कोड के साथ एक इंटरैक्टिव तालिका । विंडो का आकार बदलने का प्रयास करें।

ग्रिड के साथ कॉलम की चौड़ाई बदलना

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

उदाहरण के लिए, एक उपयोगकर्ता "जन्म तिथि" नामक संपर्कों के लिए एक कस्टम फ़ील्ड (दिनांक) बना सकता है, जिसे प्रत्येक संपर्क के लिए सिस्टम में ट्रैक किया जाएगा।

कस्टम फ़ील्ड बनाते समय, "दिनांक" प्रकार का चयन किया जाता है, सिस्टम इस फ़ील्ड को इस प्रकार को ध्यान में रखते हुए संसाधित करेगा। सबसे पहले, मैं बताऊंगा कि चौड़ाई कैसे बदलती है।

1. जब उपयोगकर्ता कर्सर को स्तंभ के शीर्ष पर ले जाता है, तो दाईं ओर एक आकार का मार्कर प्रदर्शित होता है। हम रीसाइज़ स्लाइडर पर mousedown ईवेंट सुनते हैं।
   
2. जब उपयोगकर्ता स्लाइडर पर क्लिक करता है, तो हम mousemove और mousedown घटनाओं ( window ) को सुनने के लिए कुछ और तरीकों को बांधते window । इस स्तर पर, हम सजावट के लिए कुछ कक्षाएं भी जोड़ते हैं।
   
3. जब उपयोगकर्ता माउस को स्थानांतरित करता है, तो हम कर्सर स्थिति, टेबल स्क्रॉल स्थिति और सेट न्यूनतम को ध्यान में रखते हुए नई कॉलम चौड़ाई की गणना करते हैं। फिर हम <table> ( style विशेषता के माध्यम से) के लिए grid-template-columns नियम को फिर से सेट करते हैं, इस बार एक पिक्सेल के साथ अधिकतम मूल्य ( fr ) की जगह। उदाहरण के लिए, grid-template-columns: minmax(150px, 1.33fr) 296px; । यह संभव एनीमेशन का उपयोग करने के लिए requestAnimationFrame का उपयोग करके किया जाता है।
   
4. जब mouseup आता है, हम ईवेंट श्रोताओं को रद्द कर देते हैं और कक्षाएं हटा देते हैं।

इस सरलीकृत उदाहरण पर प्रयास करें।

उल्लेखनीय रूप से, यह DOM में केवल एक तत्व को अपडेट करने के लिए पर्याप्त है, और प्रत्येक सेल को नहीं।

हम हमेशा टच इनपुट के आधार पर एक यूआई विकसित करते हैं, लेकिन इस मामले में इसका समर्थन नहीं करना सामान्य है। यह बहुत सटीक कार्रवाई है। यहां तक ​​कि अगर मैं टचस्क्रीन पर कॉलम का आकार बदलना चाहता था, तो मैं शायद एक और बातचीत की उम्मीद कर सकता हूं, उदाहरण के लिए, मल्टी-टच जेस्चर के माध्यम से।

निश्चित चौड़ाई के कॉलम

आपने देखा होगा कि आप किसी चीज़ के बारे में चुप थे। वास्तव में, न केवल एक कॉलम की चौड़ाई, बल्कि सभी कॉलम बदलते हैं। शायद आपने इसे नोटिस भी नहीं किया है, क्योंकि यह कैसे काम करना चाहिए।

प्रारंभ में, मैंने सोचा था कि उपयोगकर्ता इसे पसंद करेंगे: जब वे स्तंभों को फैलाते या निचोड़ते हैं, तो अन्य भी समायोजित हो जाते हैं। यदि कॉलम स्क्रीन की चौड़ाई को अच्छी तरह से भर देते हैं, और आप उनमें से एक को संकीर्ण करते हैं, तो अन्य का विस्तार हो सकता है यदि ऐसी सामग्री है जो एक पंक्ति में फिट नहीं होती है। इस उदाहरण पर प्रयास करें।

लेकिन थोड़ा उपयोगकर्ता परीक्षण के बाद, यह पता चला कि लोगों के लिए यह एक अप्रत्याशित व्यवहार है। उपयोगकर्ता को नियंत्रण का एक निश्चित नुकसान महसूस होता है जब उसके कार्यों से अप्रत्याशित दुष्प्रभाव होते हैं।

हमें यह अनुमान नहीं लगाना चाहिए कि किन स्तंभों पर बातचीत हुई और कौन सी नहीं हुई। एक कॉलम का आकार बदलते समय, उपयोगकर्ता पहले ही एक अंतर्निहित निर्णय ले सकता है कि बाकी की चौड़ाई एकदम सही है।

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


कॉलम की चौड़ाई को बदलने से पहले और उसके दौरान। फिर से, मुझे क्षमा करें GIF GIF थोड़ा सा है

जब भी किसी कॉलम का आकार बदला जाता है या उसे ठीक किया जाता है, तो हम उपयोगकर्ता की पसंद को बनाए रखने के लिए एक पिक्सेल मान के साथ कॉलम आइडेंटिफ़ायर से मेल खाता एक स्वतंत्र लोकलस्टोरेज रिकॉर्ड बनाते हैं।

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

संभवतः, किसी भी मामले में अनुकूली विकल्प उपयोगकर्ता के इरादों के अनुरूप नहीं होगा। हम यह नहीं मान सकते हैं कि उसके लिए सबसे महत्वपूर्ण बात यह है कि सभी स्तंभों को छोटा कर दिया जाए ताकि वे सभी स्क्रीन पर बने रहें। यदि किसी व्यक्ति ने कॉलम की चौड़ाई बदल दी है, तो वह इस कॉलम में एक निश्चित मात्रा में सामग्री देखना चाहता है। यदि हमारे पास एक अनुकूली ब्लॉक है, और फिर यह एक छोटी खिड़की में है, तो हम व्यक्ति की पसंद को अनदेखा करते हैं। उसी सामग्री को देखने के लिए उसे फिर से कॉलम की चौड़ाई बदलनी होगी। यह संभावना नहीं है कि उपयोगकर्ता सोचता है: "हम्म, मैं चाहता हूं कि यह कॉलम 20% खिड़की पर कब्जा कर ले, भले ही मैं इसे छोड़ दूं।" हालाँकि, मैं सीमा रेखा की स्थिति में बहुत गहराई से आता हूं: वास्तव में, उपयोगकर्ता शायद ही कभी खिड़कियों का आकार बदलते हैं।

स्तंभों को ले जाना और हटाना

प्रदर्शित कॉलम को अनुकूलित करने के लिए इंटरफ़ेस

कल्पना कीजिए कि इस इंटरफ़ेस के माध्यम से एक उपयोगकर्ता ने कॉलम का एक सेट बदल दिया है। यदि पहले से चयनित स्तंभों में से कोई भी नहीं बदला गया है, तो वे डेटा प्रकार के आधार पर डिफ़ॉल्ट मान grid-template-column का उपयोग करके प्रदर्शित किए जाएंगे। उदाहरण के लिए, minmax(150px, 3.33fr) ।

यदि किसी स्तंभ की चौड़ाई स्थानीयस्टोरेज में तय की गई है, तो हम सभी चयनित स्तंभों की चौड़ाई को ठीक करते हैं और स्थानीय मान में इन मानों को संग्रहीत भी करते हैं।

समय के साथ, अधिक से अधिक कॉलम एक निश्चित चौड़ाई रखते हैं। उपयोगकर्ताओं के लिए, उत्तरदायी डिज़ाइन पर लौटने का एकमात्र तरीका कॉलम रीसेट करना है।

हम स्थानीय प्रविष्टियों में स्तंभ पहचानकर्ताओं की एक सरणी को भी संग्रहीत करते हैं, जो चौड़ाई प्रविष्टियों से अलग है।

"आपने {{LibraryName}} का उपयोग क्यों नहीं किया?"

जावास्क्रिप्ट पुस्तकालय के साथ, समाधान भारी, चिकोटी होगा, अन्तरक्रियाशीलता प्रदान नहीं करेगा, और यहां तक ​​कि <तालिका> का भी समर्थन नहीं कर सकता है। मैं भी ऐसा कुछ नहीं लिखना चाहता था। मैंने सोचा: "एक बेहतर तरीका होना चाहिए।"

"आपने फ्लेक्सबॉक्स का उपयोग क्यों नहीं किया?"

प्रत्येक पंक्ति का मूल्यांकन / एक दूसरे से स्वतंत्र रूप से प्रदर्शित किया जाएगा। सामग्री की अलग-अलग मात्रा के कारण स्तंभ को स्तंभ के साथ संरेखित नहीं किया जा सकता है।

मैं अंदर के लंबवत समूहीकृत सेल वाले कॉलम के लिए <div> के स्विच कर सकता हूं। लेकिन ऐसा नहीं करना चाहता था। मैं <तालिका> का उपयोग करना चाहता था। इसके अलावा, हम आसानी से अन्य समस्याओं का सामना कर सकते हैं: उदाहरण के लिए, स्तंभों के बीच की ऊंचाई में कोशिकाओं का बेमेल।

"आपने सिर्फ <colgroup> उपयोग क्यों नहीं किया?"

वास्तव में, <colgroup> एक सुविधाजनक पुराना तत्व है। <Col> का उपयोग करते हुए स्तंभों को परिभाषित करने के बाद, किसी एक पर लागू शैलियों को उस कॉलम की सभी कोशिकाओं पर प्रभावी रूप से लागू किया जाएगा।

लेकिन यह एक समाधान भी सीमित हो गया। हमने कोशिश की, लेकिन बहुत जल्दी इसे मना कर दिया। इतनी तेजी से कि मुझे ठीक से याद नहीं है कि समस्याएं क्या थीं। मुझे लगभग यकीन है कि अनुकूलन क्षमता के वांछित स्तर को प्राप्त करना असंभव था और यह फ्लेक्सबॉक्स और ग्रिड के साथ काम नहीं करता था।

"आपने टेबल-लेआउट का उपयोग क्यों नहीं किया: निश्चित?"

मैं table-layout: fixed को लागू कर सकता था table-layout: fixed <table> पर table-layout: fixed नियम और प्रतिशत के रूप में कॉलम की चौड़ाई निर्धारित की। लेकिन उदाहरणों को देखते हुए और इस नियम के साथ खेलते हुए, मुझे यह आभास हुआ कि यह केवल 100% चौड़ी टेबल पर काम करता है। इसके अलावा, एक कॉलम का आकार बदलने से कुल 100% चौड़ाई तक पहुंचने के लिए अन्य कॉलम का आकार बदल जाता है।

"लेकिन आप साधारण तालिकाओं के साथ मिल सकता है!"

हां, बॉक्स के बाहर टेबल कई स्मार्ट चीजों में सक्षम हैं, लेकिन वे प्रभावी रूप से उस सब का समर्थन नहीं कर सकते हैं जिसे मैं लागू करना चाहता था। सहमत नहीं हैं? ठीक है जादूगर, मुझे सिखाओ।

प्रदर्शन के साथ बहुत दूर मत जाओ: सामग्री

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

हमें एक अजीब display: contents मिला display: contents फ़ायरफ़ॉक्स में देशी ड्रैग और ड्रॉप के साथ display: contents बग ।

सौभाग्य से, जल्द ही एक सबग्रिड फ़ंक्शन जारी किया जाएगा जो बाल तत्वों को ग्रिड में सही ढंग से एकीकृत करने की अनुमति देगा। हमारे आवेदन में, हम केवल मार्कअप को सरल बनाना चाहते हैं, लेकिन सबनेट जंगली बहुआयामी ग्रिड ऑर्गीज के लिए दरवाजे खोलेंगे। "क्यों प्रदर्शन: सामग्री सीएसएस ग्रिड लेआउट नहीं है" देखें ।

मुझे लगता है कि मैं कुछ भूल गया

ऐसा लगता है कि कॉलमों का आकार बदलने के दौरान टेक्स्ट ओवरफ्लो की समस्या थी, लेकिन मुझे ठीक से याद नहीं है।

नीचे स्क्रॉल करते समय टेबल हेडर को बचाने के लिए, हम position: sticky उपयोग position: sticky । यह एक शानदार वृद्धि है और यह पुराने ब्राउज़रों में बहुत अच्छी तरह से नीचा दिखाती है। हालांकि, IE11 उपयोगकर्ताओं के लिए हमारे पास बैकअप जावास्क्रिप्ट है। वास्तव में, मैं position: sticky की सिफारिश नहीं करूंगा position: sticky क्षैतिज स्क्रॉलिंग के साथ कठिनाइयों के कारण position: sticky ।

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

जल्द ही हम सूची दृश्य में बल्क संपादन को लागू करने जा रहे हैं, साथ ही सीएसवी को कस्टम दृश्य भी निर्यात करेंगे।

वैसे भी, पढ़ने के लिए धन्यवाद।