ZTree in sharepoint

ZTree In SharePoint – CheckBox Operation Demo

Hello everybody, i wrote this article to support document system. it very useful, i can apply it for document properties. Example: when you create document then select the Department from tree. you can apply this article.

Download Project at here

Go to page http://www.ztree.me/v3/main.php then And download Ztree or download at here

Open WebSite then choose ZTree_v3

I will demo example with checkbox Operation

Now we will apply it to SharePoint, Open visual studio and new empty project

Add new Visual Web Part

Now we Add map Layouts folder

Add new folder ZTree

Add new folder js in Ztree folder

Add new existing items to js folder in project zTree_v3

Add new folder css in Ztree folder then add new existing items to css file in project zTree_v3

Add new folder img in Ztree folder then add new existing items to images file in project zTree_v3

Add new folder diy in img folder then add new existing items to images file in project zTree_v3

After add resource finished, the structure look like

Copy Html to user control

<h1>Checkbox Operation</h1>

<h6>[ File Path: excheck/checkbox.html ]</h6>

<div class="content_wrap">

       <div class="zTreeDemoBackground left"><ul id="treeDemo" class="ztree"></ul> </div>

       <div class="right">

              <ul class="info">

                     <li class="title"><h2>1, Explanation of setting</h2>

                           <ul class="list">

                           <li class="highlight_red">Must set setting.check attributes, see the API documentation for more related contents.</li>

                           <li><p>Linkage relationship between parent and child nodes:<br/>

                                         check: <input type="checkbox" id="py" class="checkbox first" checked /><span>affect the parent</span>

                                         <input type="checkbox" id="sy" class="checkbox first" checked /><span>affect the child</span><br/>

                                         uncheck: <input type="checkbox" id="pn" class="checkbox first" checked /><span>affect the parent</span>

                                         <input type="checkbox" id="sn" class="checkbox first" checked /><span>affect the child</span><br/>

                                         <ul id="code" class="log" style="height:20px;"></ul></p>

                           </li>

                           </ul>

                     </li>

                     <li class="title"><h2>2, Explanation of treeNode</h2>

                           <ul class="list">

                           <li class="highlight_red">1), If you need to initialize the node is checked, please set treeNode.checked attribute. See the API documentation for more related contents.</li>

                           <li class="highlight_red">2), If you need to initialize the node's checkbox is disabled, please set treeNode.chkDisabled attribute. See the API documentation for more related contents and 'chkDisabled Demo'.</li>

                           <li class="highlight_red">3), If you need to initialize the node don't show checkbox, please set treeNode.nocheck attribute. See the API documentation for more related contents and 'nocheck Demo'.</li>

                           <li class="highlight_red">4), If you need to change 'checked' to other attribute, please set setting.data.key.checked attribute. See the API documentation for more related contents.</li>

                           <li>5), By the way, please see the API documentation for 'treeNode.checkedOld / getCheckStatus / check_Child_State / check_Focus'.</li>

                           </ul>

                     </li>

              </ul>

       </div>

</div>

Continue copy JS and css link and update path to js and css look like

Open and find ./img and replace to ../img

Deploy then add web part look like

The next article, I will guide step by step apply from database to ZTree.

My GOD will bless to all of you. Thanks.