Question

有谁知道如何在Xpages中构建dojox树网格。我试图根据http://xcellerant.net的信息提供网格。我创建了从数据库视图加载数据的xAgent，但是当我加载测试页面时出现错误。

以下是从视图

加载数据的xAgent代码

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

    <xp:this.afterRenderResponse><![CDATA[#{javascript:// Read view data and write out the JSON data for the categorized grid
// Each view entry is written out at the top level, but each category has a children property that is an array of IDs of child entries to indent.
// There can be any number of categorization levels -- just add 'children' properties to child entries.
// NOTE: It needs the newlines after each line between the write() statements or the browser doesn't see the output as JSON

var externalContext = facesContext.getExternalContext();
var writer = facesContext.getResponseWriter();
var response = externalContext.getResponse();

response.setContentType('application/json');
response.setHeader('Cache-Control', 'no-cache');

writer.write("{\n");
writer.write("identifier: 'id',\n");
writer.write("label: 'name', \n");
writer.write("items: [\n");

var categoryItem = "";
var childItems = "";

// Walk the view and build the JSON data
var vw:NotesView = database.getView('Vrakkoder');
var nav:NotesViewNavigator = vw.createViewNav();
var ve:NotesViewEntry = nav.getFirst();

while (ve != null) {
    var cv = ve.getColumnValues();

    // When a categorized entry is reached:
    // (a) write out the previous category and children
    // (b) set up the new category element  
    if (ve.isCategory()) {
        // Write out the previous category and child entries        
        if (categoryItem != "") {
            // Trim the trailing comma and space off the category item. 
            // (The child items still need to end with a comma before the next category item starts.)
            categoryItem = categoryItem.substring(0, categoryItem.length - 2);
            writer.write("\n" + categoryItem + "] }, \n" + childItems);
        }   

        // Start building the new category and child entries
        categoryItem = "  {id:'" + cv[0] + "', type: 'vrakgruppe', vrakgruppe:'" + cv[0] + "', children:[";
        childItems = "";

    } else {
        // This isn't a category, so simultaneously build the children property and the child entries, until the next category is reached.
        categoryItem += "{_reference:'" + ve.getUniversalID() + "'}, ";
        childItems += "{id:'" + ve.getUniversalID() + "', vrakode:'" + cv[1] + "', vrak_aarsak_kode:'" + cv[2] + "'}, "

    }   

    // Get the next entry and recycle the current one
    var tmpentry = nav.getNext();
    ve.recycle();
    ve = tmpentry;
}


// Write out the last category and children, without the trailing commas
categoryItem = categoryItem.substring(0, categoryItem.length - 2);
childItems = childItems.substring(0, childItems.length - 2);
writer.write("\n" + categoryItem + "] }, \n" + childItems);

// Close the JSON string
writer.write("]}");
writer.endDocument();}]]></xp:this.afterRenderResponse>
</xp:view>

以下是在xpage

中生成树网格的代码

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xe="http://www.ibm.com/xsp/coreex" dojoParseOnLoad="true"
    dojoTheme="true">

    <xp:this.resources>
        <xp:dojoModule name="dojox.grid.TreeGrid"></xp:dojoModule>
        <xp:dojoModule name="dijit.tree.ForestStoreModel"></xp:dojoModule>
        <xp:dojoModule name="dojo.data.ItemFileWriteStore"></xp:dojoModule>

        <xp:styleSheet
            href="/.ibmxspres/dojoroot/dojox/grid/resources/Grid.css">
        </xp:styleSheet>
        <xp:styleSheet
            href="/.ibmxspres/dojoroot/dijit/themes/tundra/tundra.css">
        </xp:styleSheet>
        <xp:styleSheet
            href="/.ibmxspres/dojoroot/dojox/grid/resources/tundraGrid.css">
        </xp:styleSheet>
    </xp:this.resources>


    <div id="treeGrid"></div>

    <xp:eventHandler event="onClientLoad" submit="false">
        <xp:this.script><![CDATA[var layout = [
  { name: "Vrakgruppe", field: "vrakgruppe"},
  { name: "Vrakkode", field: "vrakkode"},
  { name: "Vrak aarsak kode", field: "Vrak_aarsak_kode"}
];

var jsonStore = new dojo.data.ItemFileWriteStore({ url: "TreeGrid_DataStore.xsp"});

var treeModel = new dijit.tree.ForestStoreModel({
  store: jsonStore,
  query: {type: 'vrakgruppe'},
  rootId: 'groupRoot',
  rootLabel: 'Group',
  childrenAttrs: ['children']
});

var grid = new dojox.grid.TreeGrid({
  treeModel: treeModel,
  structure: layout
}, 'treeGrid');

grid.startup();

dojo.connect(window, "onresize", grid, "resize");]]></xp:this.script>
    </xp:eventHandler></xp:view>

有人能帮助我吗？我被卡住了。

Answer 1

您非常接近您的解决方案。您要添加的唯一内容是rendered="false"到您的XAgent“TreeGrid_DataStore.xsp”

enter image description here

如果没有此参数，您的XAgent不仅会提供网格数据，还会提供一些额外的标题信息。在浏览器中打开XAgent时可以看到区别 - 有和没有rendered="false"

在XPages中的Dojox树网格

1 个答案: