1. Products
  2.   Viewer
  3.   JavaScript
  4.   jsTree
 
  

jsTree: Cruthaigh Struchtúir Chrainn Idirghníomhacha le jQuery

Cruthaigh, bainistigh agus feic struchtúir ordlathacha leis an mbreiseán crann cumhachtach seo.

Cad é API jsTree?

Cruthaíonn jsTree struchtúir chrainn idirghníomhacha ordlathacha as sonraí JSON casta, ag tabhairt bealach cumhachtach do dhearthóirí chun rudaí JSON neadaithe a fheiceáil agus a nascleanúint. Mar bhreiseán jQuery, tiontaíonn sé JSON amh ina chrainn nód a leathnaítear/a dhúnann - foirfe chun freagraí API, comhaid chumraíochta nó aon tacar sonraí ordlathach a iniúchadh.

Gnéithe lárnacha do thaifeachadh JSON:

  • Tiontú JSON go Crann: Taispeánann arrays/rudaí JSON go huathoibríoch mar nóid tuismitheora/linbh
  • Taiscéalaíocht Idirghníomhach: Leathnaigh/Dún nóid chun dul go domhain i struchtúir JSON
  • Luchtú Dinimiciúil: Luchtú mall (lazy loading) le haghaidh tacair sonraí JSON móra
  • Rindreáil Saincheaptha: Stíl nód bunaithe ar chineálacha sonraí JSON (arrays, rudaí, luachanna)
  • Cuardach & Scagadh: Aimsigh eochracha/luachanna go tapa i gcrainn JSON casta

Murab ionann agus amhairc JSON réidh, caomhnaíonn jsTree an t-ordlathas agus na caidrimh i do shonraí, rud atá idéalach chun APIanna a dífhabhtú nó scéimeanna JSON neadaithe a dhoiciméadú.

GitHub

GitHub Stats

Name:
Language:
Stars:
Forks:
License:
Repository was last updated at

Cén fáth jsTree a roghnú?

  • Réiteach Cruthaithe: 10+ bliain de fhorbairt ghníomhach
  • Éadrom: Ní theastaíonn ach jQuery mar spleáchas
  • Inrochtana: Comhlíontach le WCAG 2.0
  • Doiciméadú Cuimsitheach: Tagairt iomlán API
  • Ceadúnas MIT: Saor in aisce le haghaidh úsáide tráchtála

Suiteáil

Is féidir jsTree a shuiteáil trí bhainisteoirí pacáiste nó é a áireamh go díreach ó CDN.

Suiteáil NPM


npm install jstree

Nóta: Ná déan dearmad jQuery a áireamh roimh jsTree.

Samplaí Cóid

Déan iniúchadh ar chumais jsTree leis na samplaí seo:

jsTree

Sampla 1: Crann Bunúsach ó HTML

An bealach is simplí chun jsTree a chruthú ná liostaí HTML neadaithe a thiontú. Tá an cur chuige seo idéalach nuair a bhíonn do struchtúr crann statach nó ag prótúipeáil. Tiontaíonn an breiseán an struchtúr neadaithe UL/LI go crann idirghníomhach le feidhmiúlacht leathnaithe/dúnta. Ní theastaíonn ach JavaScript íosta don chur i bhfeidhm bhunúsach agus oibríonn sé go maith le haghaidh biachláir nascleanúna simplí nó struchtúir ábhair.

Gnéithe Taispeánta:

  • Tiontú HTML go Crann
  • Feidhmiúlacht Leathnaithe/Dúnta
  • Téama Bunúsach

Sampla 2: Luchtú Sonraí trí JSON

Le haghaidh iarratas dinimiciúla, is féidir le jsTree sonraí a luchtú ó JSON. Tá an cur chuige seo níos solúbtha agus ligfidh sé duit struchtúr an chrainn a thógáil go cláir. Tá formáid JSON simplí, agus gach nód a bhfuil airíonna cosúil le "id", "text", "children", agus "state" aige. Is féidir leat deilbhíní, stáit díchumasaithe agus tréithe eile a shonrú do gach nód freisin. Tá an modh seo úsáideach go háirithe nuair a thagann do shonraí crann ó bhunachar sonraí nó API.

Sampla 3: Boscaí Seiceála agus Tarraingt & Scaoileadh

Soláthraíonn jsTree breiseáin a leathnaíonn a fheidhmiúlacht lárnach. Cuireann an breiseán bosca seiceála boscaí roghnacha le gach nód, agus ceadaíonn an breiseán dnd oibríochtaí tarraingthe & scaoilte. Tá na gnéithe seo riachtanach chun comhéadain a thógáil cosúil le bainisteoirí comhad nó córais ceadanna ina bhfuil ar úsáideoirí roinnt míreanna a roghnú nó an t-ordlathas a atheagrú. Coinníonn na breiseáin feidhmíocht an chrainn fiú le céadta nód.

Gnéithe Casta

Tacaíonn jsTree le sreabhadh oibre gairmiúil:

  • Luchtú Mall: Luchtaigh nóid de réir mar is gá:

    Luchtú Mall

    
    $('#tree').jstree({
      'core': {
        'data': {
          'url': '/nodes/',
          'data': function (node) {
            return { 'id': node.id };
          }
        }
      }
    });
  • Láimhseáil Imeachtaí: Freagair as idirghníomhaíochtaí crann:

    Éisteoirí Imeachtaí

    
    $('#tree').on('changed.jstree', function (e, data) {
      console.log('Nóid Roghnaithe:', data.selected);
    });
  • Téamaí Saincheaptha: Saincheap stíl do chrainn:

    Téama Saincheaptha

    
    $('#tree').jstree({
      'themes': {
        'name': 'custom',
        'dots': false,
        'icons': false
      }
    });

Conclúid

Soláthraíonn jsTree réiteach láidir le haghaidh taifeachta sonraí ordlathacha. Ideálach le haghaidh:

  • Brabhsálaithe Comhad: Nascleanúint struchtúr eolaire
  • Biachláir Nascleanúna: Cruthaigh biachláir il-leibhéal
  • Comhéadain CMS: Bainistigh ordlathais ábhair
  • Uirlisí Cumraíochta: Cuir socruithe neadaithe in eagar

Lena chóras breiseán fairsing agus cothabháil ghníomhach, is é jsTree an réiteach is fearr le haghaidh struchtúir chrainn in iarratais gréasáin.

Similar Products

 Gaeilge