2017-06-06 14 views
-1

私はしたいと思ってクリックして拡大/折りたたむ(下の写真を参照)。htmlをクリックして拡大してください

人がPLUS(+)記号をクリックすると、それは拡大し、記号はマイナス記号( - )に変わり、マイナス記号をクリックするとそれが崩壊してプラス記号に変わります。ここで

イメージは、私はあなたがツリービューを探していると思う、 enter image description here

+3

初心者かどうか、あなたが何を試して、あなたが立ち往生したかを示す必要があります。誰かが私のために仕事をすることで私を助けません!どのように機能すると思いますか?ある人がクリックしてからもう一度クリックすると、それが閉じます。コンテンツはクリックで追加されているのですか、それとも最初から既に存在していますか?まず最初に作業してください。 – javaBean007

+0

@ javaBean007私は完全なコードを書く人を求めていません。私はちょうどそれが呼び出された名前をしたいと私は自分の上でそれについて学習を開始することができます! – Maz341

答えて

0

をプラグインこの使用してjQueryのを実現することができれば、私はあなたが探しているものの素敵な実装で、このjsfiddleを見つけました。

var data = [{ 
 
    "id": "1", 
 
    "name": "Corporate Headquarters", 
 
    "budget": "1230000", 
 
    "location": "Las Vegas", 
 
     "children": [{ 
 
     "id": "2", 
 
     "name": "Finance Division", 
 
     "budget": "423000", 
 
     "location": "San Antonio", 
 
      "children": [{ 
 
      "id": "3", 
 
      "name": "Accounting Department", 
 
      "budget": "113000", 
 
      "location": "San Antonio" 
 
     }, { 
 
      "id": "4", 
 
      "name": "Investment Department", 
 
      "budget": "310000", 
 
      "location": "San Antonio", 
 
      children: [{ 
 
       "id": "5", 
 
       "name": "Banking Office", 
 
       "budget": "240000", 
 
       "location": "San Antonio" 
 
      }, { 
 
       "id": "6", 
 
       "name": "Bonds Office", 
 
       "budget": "70000", 
 
       "location": "San Antonio" 
 
      }, ] 
 
     }] 
 
    }, { 
 
     "id": "7", 
 
     "name": "Operations Division", 
 
     "budget": "600000", 
 
     "location": "Miami", 
 
      "children": [{ 
 
      "id": "8", 
 
      "name": "Manufacturing Department", 
 
      "budget": "300000", 
 
      "location": "Miami" 
 
     }, { 
 
      "id": "9", 
 
      "name": "Public Relations Department", 
 
      "budget": "200000", 
 
      "location": "Miami" 
 
     }, { 
 
      "id": "10", 
 
      "name": "Sales Department", 
 
      "budget": "100000", 
 
      "location": "Miami" 
 
     }] 
 
    }, { 
 
     "id": "11", 
 
     "name": "Research Division", 
 
     "budget": "200000", 
 
     "location": "Boston" 
 
    }] 
 
}]; 
 

 
var source = { 
 
    dataType: "json", 
 
    dataFields: [{ 
 
     name: "name", 
 
     type: "string" 
 
    }, { 
 
     name: "budget", 
 
     type: "number" 
 
    }, { 
 
     name: "id", 
 
     type: "number" 
 
    }, { 
 
     name: "children", 
 
     type: "array" 
 
    }, { 
 
     name: "location", 
 
     type: "string" 
 
    }], 
 
    hierarchy: { 
 
     root: "children" 
 
    }, 
 
    localData: data, 
 
    id: "id" 
 
}; 
 

 
var dataAdapter = new $.jqx.dataAdapter(source, { 
 
    loadComplete: function() { 
 

 
    } 
 
}); 
 
// create jqxTreeGrid. 
 
$("#treeGrid").jqxTreeGrid({ 
 
    source: dataAdapter, 
 
    altRows: true, 
 
    width: 680, 
 
    theme:'energyblue', 
 
    checkboxes: true, 
 
    ready: function() { 
 
     $("#treeGrid").jqxTreeGrid('expandRow', '1'); 
 
     $("#treeGrid").jqxTreeGrid('expandRow', '2'); 
 
    }, 
 
    columns: [{ 
 
     text: "Name", 
 
     align: "center", 
 
     dataField: "name", 
 
     width: 300 
 
    }, { 
 
     text: "Budget", 
 
     cellsAlign: "center", 
 
     align: "center", 
 
     dataField: "budget", 
 
     cellsFormat: "c2", 
 
     width: 250 
 
    }, { 
 
     text: "Location", 
 
     dataField: "location", 
 
     cellsAlign: "center", 
 
     align: "center" 
 
    }] 
 
}); 
 
$("#jqxbutton").jqxButton({ 
 
    theme: 'energyblue', 
 
    height: 30 
 
}); 
 
$('#jqxbutton').click(function() { 
 
    $("#treeGrid").jqxTreeGrid('checkRow',2); 
 
});
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet"/> 
 
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script> 
 

 
<div id="treeGrid"></div> 
 
<input type="button" style="margin: 20px;" id="jqxbutton" value="Check a row" />

0

あなたのイメージは、あなたがJSONツリーのような何かをしたいと言います。

これは、複数のJqueryプラグインを使用して行うことができます。ここに1つのgithubのリンクは、Z-Tree