Create a tree (CheckBoxTree) and a dojocheckboxtree

Create a tree (CheckBoxTree) and a dojocheckboxtree

Tree structure is a common component in the interface design process. There are many methods for code implementation, but it is complicated to implement because of the parent-child relationship designed for nodes and dom node operations. The CheckBoxTree component with check boxes is provided in dojo. This function can be easily implemented by creating corresponding instances.
The html file code for the part is as follows:

<div> <div dojoType="dijit.Dialog" dojoAttachPoint="testList" title="${title}" style="width: 100px;height:200px">     <div dojoType="dijit.layout.ContentPane" region="center" style="height:180px;">    <div dojoAttachPoint="testTree" style></div>   </div> </div></div>

You need to add references to the js file that calls the tree component:

dojo.require("dojox.layout.ContentPane");dojo.require("tmpdir.CheckBoxTree");dojo.require("tmpdir.CheckBoxStoreModel");dojo.require("dojo.data.ItemFileWriteStore");

The call process is as follows:

Var data = {identifier: "id", label: "name", items: content}; // The Node id is uniquely identified, name indicates the node display field // content is a json object in the format of [id: 'id', name: 'name', items: [] var store = new dojo. data. itemFileWriteStore ({data: data}); var model = new tmpdir. checkBoxStoreModel ({store: store, childrenAttrs: ["items"], query: {id: '*'}); var tree = new tmpdir. checkBoxTree ({model: model, showRoot: false, // whether to display root node persist: false, // openOnClick: true, // whether to enable tree branchIcons: false when you click, // whether the parent node displays the image nodeIcons: false, // whether the child node displays the image autoExpand: true // whether to expand automatically after loading}, this. testTree );