Merhabalar,

Jquery Mobile ile tree mantığında çalışan sayfa şeklinde dallanan bir dinamik yapı kurmak istiyorum.

Yani ilk sayfam bir listview oradaki elemanım 'ana root' oluyor ve tıklanıldığında onun altındaki elemanları bulup yeni bir safya açılacak orda da bir onlar listview ile listelenilecek ordan bir tanesine tıklanıldığında yine aynı işlemler yeni bir sayfa ve orda da bir listview bu son node kadar gidecek.

yapmış olduğum kod aşağıdadır.

<html> <head> <title>Dynamic Listview</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<!--JQM 1.1.0 version-->
<link rel="stylesheet" href="css/jquery-mobile-min.css"/>
<link rel="stylesheet" href="css/style.css" />
<!--JQuery 1.6.4 version-->    
<script type="text/javascript" src="js/jquery-min.js"></script>    
<script type="text/javascript" src="js/jquery-mobile-min.js"></script>
<meta charset="utf-8" />
<script>
/***********************GET_DATA*********************************/
var allNodes = [];

var node = [];
node[0] = "";                   //PARENTID
node[1] = "50000057";           //CHILDID
node[2] = "İnsan Kaynakları";   //TEXT
allNodes[0] = node;

var node = [];
node[0] = "50000057";                    
node[1] = "50000057_50000104";           
node[2] = "Access Mgmt Sr Sec Lead";     
allNodes[1] = node;

var node = [];
node[0] = "50000057_50000104";                   
node[1] = "450133";                      
node[2] = "b3";  
allNodes[2] = node;

var node = [];
node[0] = "450133";                  
node[1] = "30000008";                        
node[2] = "Rıfkı tttt";  
allNodes[3] = node;

var node = [];
node[0] = "50000057";                    
node[1] = "50000057_50000098";                       
node[2] = "Acc&Ops Asst Spec";   
allNodes[4] = node;

var node = [];
node[0] = "50000057_50000098";                   
node[1] = "450150";                      
node[2] = "b8";  
allNodes[5] = node

var node = [];
node[0] = "450150";                  
node[1] = "30000009";                        
node[2] = "Mehmet tttt";     
allNodes[6] = node;

var node = [];
node[0] = "50000057";                    
node[1] = "50000057_50000108";                       
node[2] = "IK GMY";  
allNodes[7] = node;

var node = [];
node[0] = "50000057_50000108";                   
node[1] = "50000107";                        
node[2] = "IK GMY";  
allNodes[8] = node;

var node = [];
node[0] = "50000107";                    
node[1] = "50000006";                        
node[2] = "TOPRAK DURUSU";   
allNodes[9] = node;

var node = [];
node[0] = "50000057";                    
node[1] = "50000057_50000110";                       
node[2] = "Yönetim Asistanı";    
allNodes[10] = node;

var node = [];
node[0] = "50000057_50000110";                   
node[1] = "50000128";                        
node[2] = "Yönetim Asistanı";    
allNodes[11] = node;

var node = [];
node[0] = "50000128";                    
node[1] = "10001901";                        
node[2] = "TAGOH RUGDH";     
allNodes[12] = node;

var node = [];
node[0] = "50000057";                    
node[1] = "50000076";                        
node[2] = "TURNOVER DENEME ELLEME SİLME!!!!!!";  
allNodes[13] = node;

/**********************GET_ROOT**********************************/
var root = [];

function getRootNode() {  
    allNodes.forEach(function(node) {
        if(node[0] == "")
        { 
            root = node; 
        } 
    });     
}

/**********************GET_CHILDS**********************************/
var childNodes = [];

function getNodeChild(child_id) {
    var counter = 0;

    allNodes.forEach(function(node) {
        if(node[0] == child_id) {
            childNodes[counter++] = node;  
        } 
    });

    /*childNodes.forEach(function(node) {
        alert(node[2]);
    });*/
    return childNodes;
}

/************************CREATE_LIST********************************/  
var pageCounter = 0;

function createListView(childNodesArr) {    
    childNodesArr.forEach(function(node) {  
        $('#result-listview').append(
          '<li>'  +
            '<a href="" onclick="changePage(id_' + node[1] + ');">' +
                '<h3>' + node[2] + '</h3>' +
            '</a>' +
          '</li>'
        );

        content =   '<div data-role="page" id="id_' + node[1] + '" data-url="id_' + node[1] + '">' +
                        '<div data-role="header">' +
                        '<a href="#" data-rel="back" data-icon="back">Geri</a>' +
                          '<h1>' + node[2] + '</h1>' +
                        '</div>' +
                        '<div data-role="content">' +
                        '</div>' +
                    '</div>';

        $('body').append(content).trigger('create'); 
        $(pageCounter).page(); 
        pageCounter++;
    });
    $('#result-listview').listview('refresh');
  }

function changePage(id) {
   var childId = $(id).attr('id').substr(3);    
   getNodeChild(childId);
   $(id).append('<ul id="result-listview-'+childId+'" class="listview" data-role="listview" data-theme="a"></ul>');

   childNodes.forEach(function(node) {
        $('#result-listview-'+childId).append(
          '<li>'  +
            '<a href="" onclick="changePage(id_' + node[1] + ');">' +
                '<h3>' + node[2] + '</h3>' +
            '</a>' +
          '</li>'
        ); 
    }); 
    $.mobile.changePage($(id), {transition : "slide"});
}

function rootDisplay(){
    getRootNode(); 
    var rootArr = [];
    rootArr[0] = root;
    createListView(rootArr);
}

jQuery(document).ready(function(){
    rootDisplay();
});
</script>

alt text

soruldu: 06 Ağu '13, 01:24

omrfrkklk's gravatar image

omrfrkklk
275136
cevap kabul oranı: 13%

değiştirildi: 07 Ağu '13, 09:43

%C3%B6zcanacar's gravatar image

özcanacar ♦♦
17.2k59183183

Soruyu sormamışsınız! Probleminiz nedir?

(06 Ağu '13, 03:18) Oğuz Çelikdemir O%C4%9Fuz%20%C3%87elikdemir's gravatar image

Koddan anladığım kadarıyla Organizasyon Grafiği oluşturmaya çalışıyorsun. Bunun için iki tane örnek var, incelemeni tavsiye ederim. https://github.com/caprica/jquery-orgchart ve https://github.com/wesnolte/jOrgChart

(06 Ağu '13, 03:20) Oğuz Çelikdemir O%C4%9Fuz%20%C3%87elikdemir's gravatar image

Cevabın için teşekkür ederim. Bunun gibi bir tree değilde navigation controller şekilde dallanacak.

(06 Ağu '13, 03:30) omrfrkklk omrfrkklk's gravatar image

İlk linkte bahsettiğin türden bir örnek mevcut. Node' lara tıklanınca bağlı node'lar açılıyor. Buna baktınmı?

(06 Ağu '13, 05:52) Oğuz Çelikdemir O%C4%9Fuz%20%C3%87elikdemir's gravatar image

Sanırım aradığını buldum. Bir incele bakalım, belki işine yarar! http://blog.cloudfour.com/simpleslideview/

(06 Ağu '13, 15:17) Oğuz Çelikdemir O%C4%9Fuz%20%C3%87elikdemir's gravatar image
Bu soruya ilk cevap veren sen ol!
toggle preview

Bu soruyu takip et

E-Posta üzerinden:

Üyelik girişi yaptıktan sonra abonelik işlemlerini yapabilirsiniz

RSS üzerinden:

Cevaplar

Cevaplar ve Yorumlar

Yazı Formatlama

  • *italic* ya da _italic_
  • **bold** ya da __bold__
  • link:[text](http://url.com/ "başlık")
  • resim?![alt text](/path/img.jpg "başlık")
  • liste: 1. Foo 2. Bar
  • temel HTML etiketleri de kullanılabilir

Bu sorunun etiketleri:

×6

Soruldu: 06 Ağu '13, 01:24

Görüntüleme: 584 kez

Son güncelleme: 07 Ağu '13, 09:43

powered by BitNami OSQA