1

これはextjs4コードです： 

checktree.js

Ext.require([
    'Ext.tree.*',
    'Ext.data.*',
    'Ext.window.MessageBox'
]);

Ext.onReady(function() {
    var store = Ext.create('Ext.data.TreeStore', {
        proxy: {
            type: 'ajax',
            url: 'tree.php',
     node:'id' // send the parent id through GET (default 0)
        }
    });

    var tree = Ext.create('Ext.tree.Panel', {
        store: store,
        rootVisible: false,
        useArrows: true,
        frame: true,
        title: 'Check Tree',
        renderTo: 'tree-div',
        width: 289,
        height: 220,
        dockedItems: [{
            xtype: 'toolbar',
            items: {
                text: 'Get checked nodes',
                handler: function(){
                    var records = tree.getView().getChecked(),
                        names = [];

                    Ext.Array.each(records, function(rec){
                        names.push(rec.get('text'));
                    });

                    Ext.MessageBox.show({
                        title: 'Selected Nodes',
                        msg: names.join('<br />'),
                        icon: Ext.MessageBox.INFO
                    });
                }
            }
        }]
    }); 
});

これはtree.phpコードです：

<?php
mysql_connect("localhost", "root", "") or die("Could not connect");
mysql_select_db("tree") or die("Could not select database");
$parent_id = $_GET['node'];
$query = "SELECT id, text, leaf,false as checked FROM mytree WHERE parent_id='".$parent_id."' ORDER BY text ASC";
$rs = mysql_query($query);
$arr = array();
while($obj = mysql_fetch_object($rs)) {
 $arr[] = $obj;
}
echo json_encode($arr);
?>

MySqlデータベース：

CREATE DATABASE `tree`;

DROP TABLE IF EXISTS `mytree`;
CREATE TABLE `mytree` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'node_id',
  `text` varchar(20) NOT NULL COMMENT 'node_name',
  `parent_id` int(11) NOT NULL,
  `leaf` varchar(5) NOT NULL COMMENT 'true/false',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=95 DEFAULT CHARSET=latin1;

INSERT INTO `mytree` VALUES (36,'Folder 1',0,'false'),
(38,'Folder 2',0,'false'),(42,'Text 1',36,'true'),
(43,'Text 3',36,'true'),(44,'Text 2',36,'true'),
(52,'Text 6',38,'true'),(57,'Text 5',38,'true'),
(58,'Text 4',38,'true'),(73,'Subfolder 1',36,'false'),
(74,'Text 7',73,'true'),(75,'Text 10',73,'true'),
(76,'Text 9',73,'true');

質問

1）ツリー内にチェックボックスを追加したいのですがfalse as checked、SQLにを追加しました。すべてのツリーにチェックボックスが表示されます。残念ながら、チェックボックスをオフまたはチェックできません。ツリーパネルにチェックボックスを正しく追加する方法？
2）チェックボックス、フォルダ不要のチェックボックスが付いたファイルが必要です
3）チェックボックスがオンまたはオフの場合、メッセージボックスをポップアップし、IDとチェックボックスのステータスを書き込みます

4

1 に答える 1

1

最初と2番目の質問では、PHPコードを変更する必要があります。

1）問題は、「mysql_fetch_object」が文字列プロパティを持つオブジェクトを返し、ExtJsが属性「checked」にブール値を期待することです。

2）ノードがリーフの場合、「チェック済み」属性を追加します

  <?php
    mysql_connect("localhost", "root", "brandt") or die("Could not connect");
    mysql_select_db("tree") or die("Could not select database");
    $parent_id = $_GET['node'];
    // 1) Remove false as checked
    $query = "SELECT id, text, leaf FROM mytree WHERE parent_id='".$parent_id."' ORDER BY text ASC";
    $rs = mysql_query($query);
    $arr = array();
    while($obj = mysql_fetch_object($rs)) {

      // 2) If no leaf then destroy the attribute
      if($obj->leaf != "false"){
         // 1) set checked attribute with an boolean value 
         $obj->checked = false;       
      }
     $arr[] = $obj;
    }
    echo json_encode($arr);
    ?>

3）ツリーパネルの後にチェック変更用のリスナーを追加します

tree.on('checkchange', function(node){
        var data = node.data;
        Ext.MessageBox.show({
        title: 'Changed checkbox status',
        msg: 'ID: ' + data.id + ' <br /> Checkbox status: ' + data.checked,
        icon: Ext.MessageBox.INFO
        });    
})
于 2013-02-10T12:35:22.940 に答える