"Tree-shaped structure" ztree

The tree structure has many forms and the realization way, the ztree can be said to be a kind of relatively concise and beautiful and realizes relatively simple. Ztree is a versatile "tree plugin" that relies on jquery. Its greatest advantage is the flexibility of configuration, as long as the ID and PID value of the same can form a simple parent-child structure. Plus free open source, more and more people use Ztree.

I. Overview

1. Realization of Ideas

Suppose there are two tables: A and B, and if B.id=a.pid, A and B will make up a tree structure.

(ID and PID are just two representations, and the database is not necessarily the two fields.) In fact, a table can also be fully formed tree structure, but this is a bit messy ... ）

2.

Second, the Code implementation

1. Add a ztree reference to the HTML page

<script src= ". /.. /scripts/ztree3.5/js/jquery.ztree.all-3.5.js "></script><script src=". /.. /scripts/ztree3.5/js/jquery.ztree.core-3.5.js "></script><script src=". /.. /scripts/ztree3.5/js/jquery.ztree.excheck-3.5.js "></script><link href=". /.. /scripts/ztree3.5/css/ztreestyle/ztreestyle.css "rel=" stylesheet "/>

Define Ztree

@*ztree tree-shaped structure *@<div data-options= "region: ' West ', split:true" style= "width:200px;height:400px" >        <ul id= " Tree "class=" Ztree "style=" width:160px; height:500px; Overflow:auto; " ></ul></div>

2. In order to facilitate the operation of Ztree, specially built a JS file to achieve its operation

var tree = {/** * all initialized operations */pfunction: {ztree: ', setting: {callback: { Onclick:ztreeonclick}, check: {enable:false, CHKBO                    XType: {"Y": "", "N": "}}, Data: {key: {                     Name: "Judgeitemname"}, Simpledata: {enable:true,                IdKey: "Judgeid", PIdKey: "Judgepid", Rootpid: "0" }}},//Load Resource loadtree:function () {$.post ("/judgeitem/getalljudgeitem", Nu            ll, function (judgeinfo) {$.fn.ztree.init ($ ("#tree"), tree.pFunction.setting, Judgeinfo);        }); The function Ztreeonclick (E, Treeid, TreeNode) {$ (' #dg ') is triggered when Ztree is clicked on}};//. DataGrid ({url: '/JUDGEITEM/GETJUDG Ebyjudgeid?judgeid= ' + Treenode.judgeid});}    Load ztree$ (). Ready (function () {tree.pFunction.loadTree (); });

3. In the controller, just query all the scoring items, because in Ztree's data, we have the ID and the PID and controller passed it to its associated

#region get all scoring items Wang Jingna 2015-6-15 18:13:19public actionresult Getalljudgeitem () {    ilist<judgeitemviewmodel> Judgelist = Judgeitemservice.queryalljudgeitem ();    Defines a new object that gets the data queried to    var ltdate = judgelist.select (p = =            new            {                P.judgeid,                p.judgepid,                p. Judgeitemname,                p.judgeitemcontent,                p.requirement,                p.score            }        ). ToList ();    Return Json (Ltdate, jsonrequestbehavior.allowget);} #endregion

Tree structure Let our data display more layered sense, ztree is only one of its implementation, and we use only a very simple part of ztree function, looking forward to do more quality interface effect.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

"Tree-shaped structure" ztree