1

这是 extjs 4 代码： 

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

For the first and second question you have to change your PHP-Code:

1) The problem is that "mysql_fetch_object" returns an object with string properties and ExtJs expects a boolean value at attribute "checked".

2)When a node is a leaf then add the attribute "checked"

  <?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) Add listener for check change after tree panel 

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 回答