باستخدام HTML لتقديم البيانات المزدوجة

Question

لدي سؤال حول كيفية تقديم بعض البيانات المنظمة باستخدام HTML.

لدي بعض البيانات التي تشبه الشجرة، والتي قد تقدمها عادة باستخدام الأقسام والأقراض القصيرية (أي <h1>, <h2>, وما إلى ذلك) و / أو استخدام قوائم متداخلة (أي قوائم تحتوي عناصرها على قوائم من العناصر الفرعية).

مثال على هذه البيانات هي قائمة مهام، لها مهام تتضمن المهام الفرعية والمهام الفرعية الفرعية.

تحتوي كل من هذه البيانات أيضا على خصائص مرتبطة، على سبيل المثال:

• bool completed;
• DateTime completionDate;
• Priority priority;

سؤالي هو، ماذا تقترح طريقة جيدة لتقديم هذه البيانات في صفحة واحدة، باستخدام HTML؟

---

فكرتي الأولى هي تقديمها كجدول:

• أحد أعمدة الجدول يظهر المهمة أو المهمة الفرعية
• تظهر الأعمدة الأخرى في كل صف قيم الخصائص (مثل "مكتمل"، وما إلى ذلك) المرتبطة بهذه المهمة

مشكلتي في هذا هو أن إظهار جميع المهام والمهام الفرعية في عمود جدول واحد ستفقد معلومات حول كيفية تداخل المهام: على سبيل المثال، لن تظهر أن الصف الثاني هو في الواقع علامة فرعية للصف الأول. هل يمكنك اقتراح طريقة للعمل في هذه المشكلة؟ فكرت في تزيين العناصر ذات عدد متغير من شيفرون مثل ">" لإظهار مدى تعثني كل عنصر بعمق، على سبيل المثال:

TASK                    COMPLETED

Some major task            No
> A subtask                Yes
> Another subtask          Yes
> > A sub-subtask          Yes
Next major task            No

بعض المشاكل مع ذلك هي:

• قد تبدو قبيحة، وأنا لست متأكدا من أنها مفهومة بشكل حدسي وقابل للقراءة كما يمكن أن يكون. قد بعض زخرفة أخرى، أو ببساطة بطول المسافة البادئة المسافة البعدية متغيرة الطول، تكون أفضل؟
• لا أرى طريقة أنيقة لترميعها باستخدام HTML + CSS؛ على سبيل المثال، هل تقوم بإدراج زخرفة باستخدام HTML أو إدراجها باستخدام CSS؛ وإذا كنت تستخدم CSS، فهل سيكون بإضافة شيء مثل class="level1" عبر class="level6" لإظهار مستوى التعشيش؟

---

سيكون الطريق الثاني هو تقديمه كنص يتدفق رأسيا، على سبيل المثال ...

<h1>Some major task</h1>
<p>Completed: no.</p>
<h2>A subtask</h2>
...etc...

... ما الذي سأفعله كذلك، لكنني أريد أيضا عرضا يتيح للقارئ مسح عمود قيم الخاصية، وهو أسهل عند محاذاة قيم الخاصية في عمود بدلا من interspersed مع النص الآخر.

---

هذا أكثر عن تصميم UI من الترميز، ولكن ... أنا بالتأكيد ليس أول شخص يريد عرض هذا النوع من البيانات، لكنني لا أتذكر بعد أن رأيت أي أمثلة، لذلك أود أن أسألك.

Answer 1

يسمى مكون UI الذي تريده هو يسمى TREETABLE (أو جدول الأشجار). هناك مختلف التطبيقات منه في جافا سكريبت / أتش تي أم أل. هنا واحد التي تستخدم جافا سكريبت. هنا واحدة أخرى هذا HTML / CSS نقي (ولكن لا ينهار / توسيع)

Answer 2

أنت تتحدث عن التعشيش في هيكل التسلسل الهرمي ل HTML. بطبيعتها للغاية، لا بد أنك حقا للقيام بأي عمل خاص على الإطلاق.

قائمة بسيطة، متكررة هي كل ما تحتاجه، دون أي اعتبارات خاصة للعمق أو أي شيء. يمكنك حتى إضافة وظيفة توسيع الطيام إلى أي مستوى إذا كنت تريد دون عمل إضافي كبير.

<ul>
  <li>
    <div class="task-group">
      <span class="task-title">Task 1</span>
      <span class="task-status">Complete</span>
      <ul>
        <li>
          <div class="task-group">
            <span class="task-title">Task 1a</span>
            <span class="task-status">Complete</span>
          </div>
        <li>
          <div class="task-group">
            <span class="task-title">Task 1b</span>
            <span class="task-status">Incomplete</span>
          </div>
        </li>
      </ul>
    </div>
  </li>
</ul>

ثم أنت فقط أسلوب مجموعة مهمة للحصول على هامش نسبي إلى والده بحيث يصبح التعشيش متكررا. إعداد رصاصات خيالية (أو لا) للمهام مع liأسلوب، وتخصيص وضع task-status فئة لجعلها توضع بالطريقة التي تريدها.

يمكنك أيضا الحصول على الأسكال الفرعية المنخفضة لترث حجم النص الأصغر بشكل متكرر عن طريق تعيين حجم النص النسبي في CSS. شيء مثل .75em, ، بحيث يكون كل مستوى ثلاثة أرباع أصغر من المستوى السابق.

شيء من هذا القبيل:

.task-group {
   font-size: .75em;
   margin-left: 1em;
}
.task-title {
   text-decoration: underline;
   float: left;
}
.task-status {
   float: right;
}

Answer 3

ul، ol و li جيدة لهذا الغرض. هيكلة ذلك كما json. هو أفضل. يمكنك تقديم HTML من JSON بأي طريقة ترغب فيها.

Answer 4

السؤال ليس له أي إجابة صحيحة أو خاطئة. ولكن سأجيب على هذا السؤال ضمن سؤال.

إذا كنت تستخدم CSS، فهل تكون عن طريق إضافة شيء مثل الفصل = "المستوى 1" من خلال الفصل = "المستوى 6" لإظهار مستوى التعشيش؟

لا، ستستخدم المحدد المناسب في CSS.

li {
  // level one style
}

li li 
{
  // level two style
} 

etc.