Question

我目前正在尝试使用XML填充树形网格 - 问题是我不知道该怎么做。我觉得DHTMLx文档不够清晰，因为每个例子似乎都隐藏了相关的xml。

我已经定义了我的树状网格（遵循示例布局here）：

this.treeGrid = new dhtmlXGridObject($scope.divId);
this.treeGrid.selMultiRows = true;
this.treeGrid.imgURL = "resources/dhtmlxsuite/dhtmlxgrid/codebase/imgs/icons_greenfolders/";
this.treeGrid.setImagePath("resources/dhtmlxsuite/dhtmlxgrid/codebase/imgs/");
this.treeGrid.setHeader("Tree,Plain Text,Long Text,Color,Checkbox");
this.treeGrid.setInitWidths("150,100,100,100,100");
this.treeGrid.setColAlign("left,left,left,left,center");
this.treeGrid.setColTypes("tree,ed,txt,ch,ch");
this.treeGrid.setColSorting("str,str,str,na,str");

// Init needs to be included or the title won't appear
this.treeGrid.init();

// Needs the css included in the index.html page before it is enforced
this.treeGrid.setSkin("dhx_skyblue");
this.treeGrid.loadXML($scope.xml);

因此，从上面你可以看到我希望名为“Tree”的列成为此网格上的实际树。那么xml应该如何看待呢？是否所有列都必须包含数据，否则不会填充？我尝试了以下操作，但失败了错误Error On Load XML：

<?xml version='1.0' encoding='iso-8859-1'?>
<tree id = "Tree">
<item id = "p1" text = "parent item 1">
    <item id = "c1-0" text = "child item 1" />
    <item id = "c1-0" text = "child item 2" />
</item>
<item id="p2" text="parent item 1" />
</tree>

由于

注意：我正在使用DHTMLx专业版！

Answer 1

我不得不使用Mozilla工具从DHTMLx网站中提取xml，以确定它们如何构建树网格。这是一个如何完成的例子：

<?xml version="1.0" encoding="UTF-8"?>
<rows>
<head>
    <beforeInit>
        <call command="setSkin">
            <param>light</param>
        </call>
        <call command="setStyle">
            <param>text-align:center;</param>
        </call>
        <call command="setImagePath">
                <param>resources/dhtmlxsuite/dhtmlxGrid/codebase/imgs/</param>
        </call>
        <!-- 
        <call command="kidsXmlFile">
            <param></param>
        </call>
        -->
    </beforeInit>

    <column width="150" type="tree" align="left" color="white"
        sort="str">Tree</column>
    <column width="150" type="ed" align="left" sort="str">Cost ($)
    </column>
    <column width="150" type="txt" align="left" sort="str">Engine Size
    </column>

</head>

<!-- <userdata name="gud1"> userdata value 1 </userdata> <userdata name="gud2"> 
    userdata value 2 </userdata> -->

<row id="honda" selected="1" call="1" xmlkids="1">
    <!-- <userdata name="hondaUD"> userdata value for honda </userdata> -->
    <cell>Honda</cell>
</row>

<row id="bmw" xmlkids="1">
    <cell>BMW</cell>
    <row id="bmw1">
        <!-- <userdata name="bmwUD1"> userdata value for bmw1 1 </userdata> <userdata 
            name="bmwUD2"> userdata value for bmw1 2 </userdata> -->
        <cell>325i</cell>
        <cell>30,800</cell>
        <cell>2.5L</cell>
    </row>
    <row id="bmw2">
        <cell>M3 Coupe</cell>
        <cell>47,100</cell>
        <cell>3.2L</cell>
    </row>
</row>

<row id="vw" xmlkids="1">
    <cell>Volkswagen</cell>
    <row id="vw1">
        <cell>Colf GL 2.0</cell>
        <cell>15,580</cell>
        <cell>2.0L</cell>
    </row>
</row>

<row id="mazda" xmlkids="1">
    <cell>Mazda</cell>
    <row id="mazda1">
        <cell>MX-5 Miata</cell>
        <cell>21,868</cell>
        <cell>1.8L</cell>
    </row>
</row>

<row id="porsche" xmlkids="1">
    <cell>Porsche</cell>
    <row id="porsche1">
        <cell>Porsche 911</cell>
        <cell>128,200</cell>
        <cell>3.6L</cell>
    </row>
</row>

如果您只想要静态xml，那么上面就足够了，您可以忽略命令kidsXmlFile，因为它可以动态加载来自服务器的数据。

Answer 2

您创建的xml的结构不正确。从http://docs.dhtmlx.com/treegrid__treegrid_initialization.html中挑选出来看看这个：

    <?xml version="1.0" encoding="UTF-8"?>
<rows parent="h0"> 
    <userdata name="gud1"> 
        userdata value 1
    </userdata> 
    <row id="h523" selected="1" call="1" xmlkids="1"> 
        <userdata name="hondaUD"> 
            userdata value for honda
        </userdata> 
        <cell image="folder.gif">Honda</cell> 
        <cell>...</cell> 
        <cell>...</cell> 
    </row>
</rows>

使用XML填充DHTMLx TreeGrid

2 个答案: