php - extjs 4 使用 PHP 和 MySQL 在树面板中添加复选框

Question

这是 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)我想在树中添加复选框，并且我在SQL中添加了false as checked，成为所有具有复选框的树，不幸的是复选框无法取消选中或选中，有什么方法可以正确地在树面板中添加复选框吗？
2)我只想要有复选框的文件，文件夹不需要复选框
3)当复选框被选中或取消选中时，弹出一个消息框，并写上ID和复选框状态

Answer 1

对于第一个和第二个问题，您必须更改您的 PHP 代码:

1) 问题是“mysql_fetch_object”返回一个具有string 属性的对象，而ExtJs 期望在属性“checked”处有一个 bool 值。

2)当一个节点是叶节点时添加属性“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) 在树面板后添加监听器以检查变化

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
        });    
})