Monday, August 4, 2014

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.

0 comments:

Post a Comment