মাল্টিলেভেল ড্রপডাউন তালিকা কীভাবে তৈরি করা যায় এবং সার্ভার থেকে আসা ডেটার সাথে আবদ্ধ

15

আমি কৌণিক খুব নতুন। আমি কৌনিক সম্পর্কে কিছু কাজ পেয়েছি।

Jsonবিশ্রাম এপি কল করে সার্ভার থেকে আগত ডেটাগুলির জন্য আমাকে নেস্টেড ড্রপডাউন তালিকা বাঁধতে হবে ।

ডেটাতে একটি বৈশিষ্ট্য রয়েছে LgLevel, গ্রুপের শ্রেণিবিন্যাসের স্তর নির্দিষ্ট করে। মূল থাকবে level=0অবিলম্বে Child=1, Grandchild=2তাই এবং। Childএবং ক্ষেত্রটি Grandchildরয়েছে ParentLocationGroupযা কোন পিতামাতার মেনুতে, চাইল্ড মেনুতে থাকবে তা দেখায়।

এটি আমার jsonতথ্য। আমার কাছে প্রচুর ডেটা রয়েছে তবে সব দেখাচ্ছে না।

{
"ArrayOfLocationGroup": {
  "LocationGroup": [
     {
        "Id": "628",
        "Name": "TEST1",
        "GroupId": {
           "_xmlns": "http://www.air-watch.com/servicemodel/resources"
        },
        "ParentLocationGroup": {
           "_uuid": "bdce4396-9c60-4831-90f2-6f793becb362",
           "__text": "570"
        },
        "LgLevel": {
           "_xmlns": "http://www.air-watch.com/servicemodel/resources",
           "__text": "0"
        }
     },
     {
        "Id": "630",
        "Name": "TEST2",
        "GroupId": {
           "_xmlns": "http://www.air-watch.com/servicemodel/resources",
           "__text": "PAM-TEST"
        },
        "ParentLocationGroup": {
           "_uuid": "894055b6-b132-4dc2-a12a-971ecc0c7224",
           "__text": "628"
        },
        "LgLevel": {
           "_xmlns": "http://www.air-watch.com/servicemodel/resources",
           "__text": "1"
        }
     },
     {
        "Id": "631",
        "Name": "TEST3",
        "GroupId": {
           "_xmlns": "http://www.air-watch.com/servicemodel/resources",
           "__text": "PAA-TEST"
        },
        "ParentLocationGroup": {
           "_uuid": "894055b6-b132-4dc2-a12a-971ecc0c7224",
           "__text": "628"
        },
        "LgLevel": {
           "_xmlns": "http://www.air-watch.com/servicemodel/resources",
           "__text": "1"
        }
     },
     {
        "Id": "697",
        "Name": {
           "_xmlns": "http://www.air-watch.com/servicemodel/resources",
           "__text": "TEST4"
        },
        "GroupId": {
           "_xmlns": "http://www.air-watch.com/servicemodel/resources",
           "__text": "PAE-TEST"
        },
        "ParentLocationGroup": {
           "_uuid": "894055b6-b132-4dc2-a12a-971ecc0c7224",
           "__text": "628"
        },
        "LgLevel": {
           "_xmlns": "http://www.air-watch.com/servicemodel/resources",
           "__text": "1"
        }
     },
     {
        "Id": "700",
        "Name": "TEST5",
        "GroupId": {
           "_xmlns": "http://www.air-watch.com/servicemodel/resources",
           "__text": "cuba"
        },
        "ParentLocationGroup": {
           "_uuid": "704af4cf-9feb-4f1b-aa00-d1c7926f7901",
           "__text": "694"
        },
        "LgLevel": {
           "_xmlns": "http://www.air-watch.com/servicemodel/resources",
           "__text": "2"
        }
     },
     {
        "Id": "706",
        "Name": "TEST5",
        "GroupId": {
           "_xmlns": "http://www.air-watch.com/servicemodel/resources",
           "__text": "VOIP-Test"
        },
        "ParentLocationGroup": {
           "_uuid": "894055b6-b132-4dc2-a12a-971ecc0c7224",
           "__text": "628"
        },
        "LgLevel": {
           "_xmlns": "http://www.air-watch.com/servicemodel/resources",
           "__text": "1"
        }
     },
     {
        "Id": "718",
        "Name": "TEST7",
        "GroupId": {
           "_xmlns": "http://www.air-watch.com/servicemodel/resources"
        },
        "ParentLocationGroup": {
           "_uuid": "894055b6-b132-4dc2-a12a-971ecc0c7224",
           "__text": "628"
        },
        "LgLevel": {
           "_xmlns": "http://www.air-watch.com/servicemodel/resources",
           "__text": "1"
        }
     },
     {
        "Id": "719",
        "Name": "TEST8",
        "GroupId": {
           "_xmlns": "http://www.air-watch.com/servicemodel/resources",
           "__text": "MEM_RS"
        },
        "ParentLocationGroup": {
           "_uuid": "52073e2b-48b5-41a9-9c2b-d793835cf285",
           "__text": "718"
        },
        "LgLevel": {
           "_xmlns": "http://www.air-watch.com/servicemodel/resources",
           "__text": "2"
        }
     },
     {
        "Id": "752",
        "Name": "TEST9",
        "GroupId": {
           "_xmlns": "http://www.air-watch.com/servicemodel/resources",
           "__text": "ELDIT"
        },
        "ParentLocationGroup": {
           "_uuid": "894055b6-b132-4dc2-a12a-971ecc0c7224",
           "__text": "628"
        },
        "LgLevel": {
           "_xmlns": "http://www.air-watch.com/servicemodel/resources",
           "__text": "1"
        }
     },
     {
        "Id": "753",
        "Name": "TEST10",
        "GroupId": {
           "_xmlns": "http://www.air-watch.com/servicemodel/resources",
           "__text": "GXYA"
        },
        "ParentLocationGroup": {
           "_uuid": "52073e2b-48b5-41a9-9c2b-d793835cf285",
           "__text": "718"
        },
        "LgLevel": {
           "_xmlns": "http://www.air-watch.com/servicemodel/resources",
           "__text": "2"
        }
     },
     {
        "Id": "760",
        "Name": "TEST11",
        "GroupId": {
           "_xmlns": "http://www.air-watch.com/servicemodel/resources",
           "__text": "STAGE2"
        },
        "ParentLocationGroup": {
           "_uuid": "894055b6-b132-4dc2-a12a-971ecc0c7224",
           "__text": "628"
        },
        "LgLevel": {
           "_xmlns": "http://www.air-watch.com/servicemodel/resources",
           "__text": "1"
        }
     },
     {
        "Id": "761",
        "Name": "TEST12",
        "GroupId": {
           "_xmlns": "http://www.air-watch.com/servicemodel/resources",
           "__text": "INIT"
        },
        "ParentLocationGroup": {
           "_uuid": "894055b6-b132-4dc2-a12a-971ecc0c7224",
           "__text": "628"
        },
        "LgLevel": {
           "_xmlns": "http://www.air-watch.com/servicemodel/resources",
           "__text": "1"
        }
     },
     {
        "Id": "762",
        "Name": "TEST13",
        "GroupId": {
           "_xmlns": "http://www.air-watch.com/servicemodel/resources",
           "__text": "USIT"
        },
        "ParentLocationGroup": {
           "_uuid": "894055b6-b132-4dc2-a12a-971ecc0c7224",
           "__text": "628"
        },
        "LgLevel": {
           "_xmlns": "http://www.air-watch.com/servicemodel/resources",
           "__text": "1"
        }
     }
  ],
  "_xmlns:xsd": "http://www.w3.org/2001/XMLSchema"
}
}

আমি এটি বিকাশের জন্য চেষ্টা করেছি তবে আমি ফাইল এবং পৃথক ফাইলে bootstrapস্থির ডেটা সহ সমস্ত উদাহরণ পেয়েছি যা আমার কাছে জটিল ছিল complicatedhtmlCSS

আমি এটি গতিশীলভাবে ব্যবহার করে করতে চাই TypeScript। আমি কীভাবে এটিতে কাজ শুরু করতে পারি।

html  angular  typescript 
— অরবিন্দ চৌরাসিয়া
সূত্র
প্রথমত, ডেটা ফর্ম্যাটটি হয় XMLএবং না JSON। আপনি যা চেষ্টা করেছেন তাও যুক্ত করতে পারেন? হতে পারে আরও বিশদে আপনি যে পদ্ধতির গ্রহণ করেছেন
— vatz88
@ ভ্যাটজ ৮৮ - হ্যাঁ পোস্টম্যান থেকে এটি কেবলমাত্র এসএমএল আটকানো হয়েছে। আমি htmlকোড চেষ্টা করেছি যা স্থির নেস্টেড তালিকা রয়েছে। আমি এটি সম্পাদনা করার চেষ্টা করব এবং Jsonডেটা পোস্ট করব । আমি যা চেষ্টা করেছি তুমি তেমন করবে না :)
— অরবিন্দ চৌরাসিয়া
আপনি এতক্ষণ কী কোড করেছেন তা চিন্তা করার দরকার নেই। পদ্ধতিটি হ'ল - হার্ডডকোড ডেটা টিএস ফাইলে, এইচটিএমএলে ডেটা অনুসারে বাইন্ডিংগুলি বানাতে হয় যেগুলি আপনাকে ড্রপডাউন রেন্ডার করতে হয়। সেই যুক্তিটি সঠিক হয়ে গেলে, ডায়নামিকভাবে ডেটা পাওয়ার বিষয়ে কাজ করুন, এবং তারপরে বাঁধার সাথে কৌতুকটি যাদু করুন।
— vatz88
@ vatz88 - আমার স্থিতিশীল কোড htmlফাইল ছিল । এটি শুরু করার আমার ধারণা আছে। আপনি আমাকে সাহায্য করতে পারেন।
— অরবিন্দ চৌরাসিয়া
@ অরবিন্দচৌড়সিয়া এলজিভেল ১-এর অনেক শিশু রয়েছে, এলজিভেল 2 এর কোন নাতি কোন সন্তানের অন্তর্গত তা কীভাবে সনাক্ত করব?
— সতীশ পাই

উত্তর:

4

এটি কোডেড একটি নমুনা যা আপনার জাসন ডেটা থেকে নেস্টেড স্তরের ডেটা অনুসারে আপনার প্রয়োজন। এখন আপনি মডেলের ডেটা ব্যবহার করে ডিওমে ফর্ম্যাটযুক্ত জসন ডেটা লুপ করতে পারেন । আমি আশা করি এটি আপনাকে মাল্টি-লেভেল ড্রপ-ডাউন তৈরি করতে সহায়তা করবে

groupBy(xs, key) {
   return xs.reduce(function (rv, x) {
     (rv[x[key]] = rv[x[key]] || []).push(x);
    return rv;
   }, {});
 }

var model;

getData() {
 var   sampleData = {
  "ArrayOfLocationGroup": {
    "LocationGroup": [
      ...
      ...//Server response data
      ],
    "_xmlns:xsd": "http://www.w3.org/2001/XMLSchema"
  }
 }    

var list = this.sampleData["ArrayOfLocationGroup"]["LocationGroup"];
var formattedList = [];

list.forEach(element => {

  var obj = {  //Make sure your server response data to like this structure
    "Id": element.Id,
    "Name": element.Name,
    "GroupId": element.GroupId.__text,
    "ParentLocationGroup": element.ParentLocationGroup.__text,
    "LgLevel": element.LgLevel.__text,
    "Child" : []
  }
  formattedList.push(obj);
});

var groupDataList = this.groupBy(formattedList, "LgLevel");

var parents = groupDataList[0];
var child = groupDataList[1];
var childOfChild = groupDataList[2];

child.forEach(c => {
  c.Child = childOfChild.filter(x => x.ParentLocationGroup == c.Id);
})

parents.forEach(p => {
  p.Child = child.filter(x => x.ParentLocationGroup == p.Id);
})

this.model = parents;
}

এইচটিএমএল ফাইল

    <ul class="nav site-nav">
     <li class=flyout>
      <a href=#>Dropdown</a>
      <!-- Flyout -->
      <ul class="flyout-content nav stacked">
        <li *ngFor="let parent of model" [class.flyout-alt]="parent.Child.length > 0"><a href=#>{{parent.Name}}</a>
          <ul *ngIf="parent.Child.length > 0" class="flyout-content nav stacked">
            <li *ngFor="let c of parent.Child" [class.flyout-alt]="c.Child.length > 0"><a href=#>{{c.Name}}</a>
              <ul *ngIf="c.Child.length > 0" class="flyout-content nav stacked">
                <li *ngFor="let cc of c.Child" [class.flyout-alt]="cc.Child.length > 0"><a href=#>{{cc.Name}}</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>

আপনার সার্ভারের প্রতিক্রিয়া ডেটা অনুযায়ী মডেল ডেটা সংগঠিত করে। রেসপন্স JSON ফর্ম্যাটে পরিবর্তিত ( __text করার #text )

 var obj = {
    "Id": element.Id,
    "Name": element.Name && element.Name.#text ? element.Name.#text : element.Name,
    "GroupId": element.GroupId && element.GroupId.#text ? element.GroupId.#text : element.GroupId,
    "ParentLocationGroup": element.ParentLocationGroup && element.ParentLocationGroup.#text ? element.ParentLocationGroup.#text : element.ParentLocationGroup,
    "LgLevel": element.LgLevel && element.LgLevel.#text ? element.LgLevel.#text : element.LgLevel,
    "Child" : []
  }
— ইয়াসির
সূত্র
আপনি html ফাইল পাশাপাশি পোস্ট করতে পারেন।
— অরবিন্দ চৌরাসিয়া
@ অরবিন্দচৌড়সিয়া আপনার কি নির্বাচিত ট্যাগ ড্রপডাউন বা কেবল ড্রপডাউন ( লিঙ্ক ) দরকার?
— ইয়াসির
এটি আমার উপরের লিঙ্কটি থেকে ডলর বিকল্পটিতে প্রদর্শিত হচ্ছে এমনটি দরকার।
— অরবিন্দ চৌরাসিয়া
@ অরবিন্দচৌড়সিয়া আমি এইচটিএমএল সহ পোস্ট আপডেট করেছি
— ইয়াসির
আমি আপনার কোড সাথে সামান্য বিভ্রান্ত। আপনি getDataকোথাও ব্যবহার করছেন না। আপনি দয়া করে আপনার কোডটি পরীক্ষা করতে পারেন এবং খোলার এবং ক্লোজিংগুলি যুক্ত করতে পারেন add
— অরবিন্দ চৌরাসিয়া
4

দেখে মনে হচ্ছে আপনার ইতিমধ্যে অন্য উত্তর রয়েছে যা আপনার প্রয়োজনীয়তা মেটাচ্ছে। তবে এই সমাধানটি আমাকে সামনে আসতে কিছুটা সময় নিয়েছিল। সুতরাং যাইহোক এটি পোস্ট করার সিদ্ধান্ত নিয়েছে।

নীচের কোড স্নিপেটটি পিতা-সন্তানের শ্রেণিবদ্ধ ডেটার কাঠামোর মতো গাছ তৈরিতে ব্যবহৃত হয়:

  processData(data) {
    let locationData = data.ArrayOfLocationGroup.LocationGroup;
    let level0 = [];
    let tempMap = {};
    for (let i = 0; i < locationData.length; i++) {
      let currItem = this.getDataObject(locationData[i]);
      if (tempMap[currItem.id] == undefined) {
        tempMap[currItem.id] = currItem;
        if (tempMap[currItem.parentLocationGroup] == undefined) {
          tempMap[currItem.parentLocationGroup] = { children: [] };
        }
        tempMap[currItem.parentLocationGroup].children.push(currItem);
      } else {
        if (tempMap[currItem.id]) {
          currItem.children = tempMap[currItem.id].children;
        }
        tempMap[currItem.id] = currItem;
        if (tempMap[currItem.parentLocationGroup] == undefined) {
          tempMap[currItem.parentLocationGroup] = { children: [] };
        }
        tempMap[currItem.parentLocationGroup].children.push(currItem);
      }
      if (currItem.lgLevel == "0") {
        if (level0.indexOf(currItem) == -1) {
          level0.push(currItem);
        }
      }
    }
    this.levelData = level0;
  }

একত্রিত ডেটা এমন কোনও dropdownউপাদানকে ইনপুট হিসাবে দেওয়া হয় যা এটি একটি বহুস্তরের ড্রপডাউন মেনু হিসাবে রেন্ডার করে।

এই সমাধানটি শিশুদের যে কোনও স্তরের জন্য অনুমিতভাবে কাজ করবে। dropdownকম্পোনেন্ট উপায় ডেটা আপনার প্রয়োজনীয়তা হিসাবে পেশ করা হয় পরিবর্তন করতে পরিবর্তন করা যায়।

আমি নেন htmlএবং cssএখান থেকে বহুস্তরীয় ড্রপডাউন মেনু জন্য:
https://phppot.com/css/multilevel-dropdown-menu-with-pure-css/
: কোড যখন এই উত্তর থেকে বাহিরে ক্লিক মেনু ড্রপডাউন বন্ধ করতে
HTTPS: //stackoverflow.com/a/59234391/9262488

আশা করি আপনি এটি দরকারী পাবেন।

— NiK648
সূত্র
আমি আপনার কোড পরীক্ষা করেছি। ইহা কাজ করছে. উত্তর পোস্ট করার জন্য আপনাকে ধন্যবাদ। আপনি কীভাবে আমার ডেটা পাচ্ছেন তা আমাকে বলতে পারেন? http অনুরোধের জন্য (mocky.io)।
— অরবিন্দ চৌরাসিয়া
মকি হ'ল মক রেস্ট এপি তৈরির জন্য একটি অনলাইন সরঞ্জাম। আপনার পোস্ট করা ডেটা আমি নিয়েছি এবং এটি মকি ব্যবহার করে বিশ্রাম এপি তৈরি করতে ব্যবহার করেছি।
— NiK648
1

কেন একটি গাছের উপাদান তৈরি করে এবং এর সাথে ইনপুটগুলি পুনরাবৃত্তভাবে বেঁধে রাখবে না?

প্রস্তাবিত সমাধানটি হ'ল

  • গভীরতা-অজ্ঞানজনিত - এটি আপনার ডেটা গাছের কয়েকটি স্তরের জন্য কাজ করবে (এমনকি এটি যদি অ্যাড-হক পরিবর্তন করে)
  • বেশ দক্ষ - এটি আপনার ডেটা একত্রিত করে O(n)।

প্রথমে ডেটা মডেলটি ডিজাইন করুন - এটি একটি বৃক্ষ নোড কাঠামো হতে হবে:

export interface GroupId { /* appropriate members... */ }

export interface ParentLocationGroup { /* other members... */ __text: string; }

export interface LgLevel { /* other members... */ __text: string; }

export interface DataModel {
  Id: string,
  Name: string,
  GroupId: GroupId,
  ParentLocationGroup: ParentLocationGroup,
  LgLevel: LgLevel,
  children: DataModel[]
}

তারপরে শীর্ষ-স্তরের উপাদানগুলিতে আপনার ডেটা একত্রিত করুন (বা আরও ভাল - আপনার ডেটা পরিষেবাতে; আপনার এত সহজেই বিমূর্ত করতে সক্ষম হওয়া উচিত):

// dropdown.component.ts

@Component({
  selector: 'app-dropdown',
  template: `
    <ul class="nav site-nav">
      <li class=flyout>
        <a href=#>Dropdown</a>
        <app-dynamic-flyout [data]="data"></app-dynamic-flyout>
      </li>
    </ul>
  `
})
export class DropdownComponent {

  data: DataModel[];

  constructor(dataService: YourDataService){

    let data;
    dataService.getYourData()
      .pipe(map(d => d.ArrayOfLocationGroup.LocationGroup)))
      // Make sure every item has the `children` array property initialized
      // since it does not come with your data
      .subscribe(d => data = d.map(i => ({...i, children: []})));

    // Create a lookup map for building the data tree
    let idMap = data.reduce((acc, curr) => ({...acc, [curr.Id]: curr}), {});
    this.data = data.reduce(
      (acc, curr) => curr.LgLevel.__text == 0 || !curr.ParentLocationGroup
        // Either the level is 0 or there is no parent group
        // (the logic is unclear here - even some of your lvl 0 nodes have a `ParentGroup`)
        // -> we assume this is a top-level node and put it to the accumulator
        ? [...acc, curr]
        // Otherwise push this node to an appropriate `children` array
        // and return the current accumulator
        : idMap[curr.ParentLocationGroup.__text].children.push(curr) && acc, 
      []
    );
  }
}

এবং পুনরাবৃত্ত গতিশীল ফ্লাইআউট উপাদান তৈরি করুন:

// dynamic-flyout.component.ts

@Component({
  selector: 'app-dynamic-flyout',
  template: `
    <ul *ngIf="!!data.length" class="flyout-content nav stacked">
      <li *ngFor="let item of data" [class.flyout-alt]="!!item.children.length">
        <a href=#>{{item.Name}}</a>
        <app-dynamic-flyout [data]="item.children"></app-dynamic-flyout>
      </li>
    </ul>
  `
})
export class DynamicFlyoutComponent {
  @Input() data: DataModel[];
}

সমাধানটি পরীক্ষা করা হয়নি তবে এটি আপনাকে সঠিক দিকে নির্দেশ করবে ...

আশা করছি এটা কিছুটা সাহায্য করবে :-)

— Heehaaw
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.