Question

求大神给个easyui tree的例子，感谢！

如题，关于tree的实例，不需要调用后台数据，显示固定文本即可。我本来希望能是这样的：

可是我找网上的案例写下来却是这个样子，汗……不知道是js文件没引对呢还是属性设置有问题。

求大神给指点一下 tree到底是怎么用的？还有，怎样点击后右边显示相应的页面？感谢！





Answer 1

使用easyui 需要页面引用必须的js和css

  <link href="../../../Easyui/themes/default/easyui.css" rel="stylesheet" type="text/css"/>         
  <link href="../../../Easyui/themes/icon.css" rel="stylesheet" type="text/css" />
  <script src="../../../Easyui/jquery-1.7.2.min.js" type="text/javascript"></script>
  <script src="../../../Easyui/jquery.easyui.min.js" type="text/javascript"></script>
  <script src="../../../Easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

// easyui tree 一般只需要url一个属性即可显示数据，tree会自动ajax加载数据
// 至于点击树节点如何显示相应页面 ，tree 的json数据格式里面有attributes 可以自定义url
//就像下面例子中的  \"attributes\":{\"jsUrl\"……，下面的列子 是我在js里面拼接的tree json数据

/*********************************************************************************/
 /*初始化树*/
    InitTree: function () {
        /*初始化树*/
        $('#tree').tree({
            animate: true,
            //lines: true,
            checkbox: false,
            data: TableToXml.TreeData(),
            onContextMenu: function (e, node) {
                e.preventDefault(); //阻止浏览器默认右键菜单
                // select the node
                if (node.id != -1 && node.id != -2 && node.id != -3) {
                    $('#txt_xml').attr('disabled', 'true');
                    $('#btn_save').linkbutton('disable');
                    TableToXml.currtableName = node.id;
                    TableToXml.currJsUrl = node.attributes.jsUrl;
                    $('#mm').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    });
                }
            }
        });
    },
    //组合树json数据
    TreeData: function () {
        var TreeJson = '[{\"id\":-1,\"text\":\"Tables\",\"children\":[';

        TreeJson += '{\"id\":-2,\"text\":\"废水污染源核算\",\"children\":[';
        for (var j = 0; j < TableToXml.tableArray[0].length; j++) {
            TreeJson += '{\"id\":\"' + TableToXml.tableArray[0][j].split('$')[0] + '\",\"text\":\"' + TableToXml.tableArray[0][j].split('$')[1] + '\",\"attributes\":{\"jsUrl\":\"' + TableToXml.tableArray[0][j].split('$')[2] + '\"}}';
            if (j < TableToXml.tableArray[0].length - 1)
                TreeJson += ',';
        }
        TreeJson += ']},';


        TreeJson += '{\"id\":-3,\"text\":\"废气污染源核算\",\"state\": \"closed\",\"children\":[';
        for (var j = 0; j < TableToXml.tableArray[1].length; j++) {
            TreeJson += '{\"id\":\"' + TableToXml.tableArray[1][j].split('$')[0] + '\",\"text\":\"' + TableToXml.tableArray[1][j].split('$')[1] + '\",\"attributes\":{\"jsUrl\":\"' + TableToXml.tableArray[1][j].split('$')[2] + '\"}}';
            if (j < TableToXml.tableArray[1].length - 1)
                TreeJson += ',';
        }
        TreeJson += ']}]}]';
        TreeJson = eval("(" + TreeJson + ")");
        return TreeJson;
    },

另附API里tree

$('#tt').tree({  
    url: ...,//tree会自动ajax后台获取json格式数据(需要自己后台拼接)  
    loadFilter: function(data){  
        if (data.d){  
            return data.d;  
        } else {  
            return data;  
        }  
    }  
});
多看看api吧……