[Sommaire] [Imprimer]

   1  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
   2  
   3  <html>
   4  <head>
   5      <title>DHTML Tree samples. dhtmlXTree - Checkboxes</title>
   6  </head>
   7  <style>
   8      body {font-size:12px}
   9      .{font-family:arial;font-size:12px}
  10      h1 {cursor:hand;font-size:16px;margin-left:10px;line-height:10px}
  11      xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
  12  </style>
  13  <body>
  14      <h1>Checkboxes</h1>
  15      <link rel="STYLESHEET" type="text/css" href="../css/dhtmlXTree.css">
  16      <script  src="../js/dhtmlXCommon.js"></script>
  17      <script  src="../js/dhtmlXTree.js"></script>        
  18      
  19      <table>
  20          <tr>
  21              <td valign="top">
  22                  <div id="treeboxbox_tree" style="width:250; height:218;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div>
  23              </td>
  24              <td  style="padding-left:25" valign="top">
  25              
  26              Two state checkboxes
  27              <a href="javascript:void(0);" onclick="tree.setCheck(tree.getSelectedItemId(),true);">Check item</a><br><br>
  28              <a href="javascript:void(0);" onclick="tree.setCheck(tree.getSelectedItemId(),false);">UnCheck item</a><br><br>
  29              <a href="javascript:void(0);" onclick="tree.setSubChecked(tree.getSelectedItemId(),true);">Check branch</a><br><br>
  30              <a href="javascript:void(0);" onclick="tree.setSubChecked(tree.getSelectedItemId(),false);">UnCheck branch</a><br><br>
  31              
  32              <a href="javascript:void(0);" onclick="alert(tree.getAllChecked());">Get list of checked</a><br><br>
  33  
  34              </td>
  35          </tr>
  36          <tr>
  37              <td valign="top">
  38                  <div id="treeboxbox_tree2" style="width:250; height:218;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div>
  39              </td>
  40              <td  style="padding-left:25" valign="top">
  41              
  42                          Three state checkboxes<br>
  43                          <br>
  44                          
  45              <a href="javascript:void(0);" onclick="tree2.setCheck(tree2.getSelectedItemId(),true);">Check item</a><br><br>
  46              <a href="javascript:void(0);" onclick="tree2.setCheck(tree2.getSelectedItemId(),false);">UnCheck item</a><br><br>
  47          
  48              <a href="javascript:void(0);" onclick="alert(tree2.getAllChecked());">Get list of checked</a><br><br>
  49  
  50              </td>
  51          </tr>
  52      </table>
  53      <hr>    
  54  <XMP>
  55  <div id="treeboxbox_tree" style="width:200;height:200"></div>
  56  <script>
  57              tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
  58              tree.setImagePath("../imgs/");
  59              //enable checkboxes
  60              tree.enableCheckBoxes(1);
  61              tree.loadXML("tree.xml");
  62              
  63              ....
  64              //check item
  65              tree.setCheck(id,true);
  66              //uncheck item
  67              tree.setCheck(id,false);    
  68              //check branch
  69              tree.setSubChecked(id,true);
  70              //uncheck branch
  71              tree.setSubChecked(id,false);    
  72              //check item
  73              tree.setCheck(id,true);
  74              //return ids of checked items
  75              var list=tree.getAllChecked();    
  76  </script>
  77  </XMP>
  78      <script>
  79              tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
  80              tree.setImagePath("../imgs/");
  81              tree.enableCheckBoxes(1);
  82              
  83              tree.loadXML("tree3.xml");
  84              
  85              tree2=new dhtmlXTreeObject("treeboxbox_tree2","100%","100%",0);
  86              tree2.setImagePath("../imgs/");
  87              tree2.enableCheckBoxes(1);
  88              tree2.enableThreeStateCheckboxes(true);
  89              tree2.loadXML("tree3.xml");
  90                          
  91      </script>
  92  <br><br>
  93  
  94  </body>
  95  </html>