Working with Ztree.js on a tree

Source: Internet
Author: User
Tags button type

1: Referencing Ztree.js and CSS files

2: Front Code:

<pre name= "Code" class= "JavaScript" ><script type= "Text/javascript" > var znodes;            $ (document). Ready (function () {//Get the App drop-down list value appchages ();            Getcodebyid (-1,-1, ');            Increase parent node addparentid ();        Form form submission SubmitForm ();        }); Gets the value of the app drop-down list function Appchages () {$ ("#apps"). Change (function () {$ ("#txtParentNodeName                "). HTML (" ");                Emptytext ();                    if ($ (this). val () = = "") {znodes = "";                Bindnodes ();                } else {Search ();        }            });                The//form form submits function SubmitForm () {$ (document). On ("Submit", "#editForm", function () {                if ($ ("#editForm"). Valid ()) {postdata ();            } return false;        });      }//Data submission function PostData () {      if (!            Checkappkey ()) return; $.post ("@Url. Action (" Edit ")", $ ("#editForm"). Serialize (), function (data) {if (data).                    IsError = = False) {Search ();                    Emptytext ();                    $ ("#divEdit"). CSS ("display", "none"); Alert ("Operation succeeded!                "); } else {alert ("The operation failed!                ");        }}, "JSON");            }//Add, edit, delete node method function Operationtree (ID, PID, name, Prname, action) {emptytext (); PID = PID = = null?            0:pid; if (Action! = "Del") {if (!            Checkappkey ()) return;                } if (action = = "Add") {$ ("#divEdit"). CSS ("Display", "");                $ ("#ParentId"). Val (id);                $ ("#AppKey"). Val ($ ("#apps"). Val ());            $ ("#txtParentNodeName"). HTML (name + "/add");            } else if (action = = "edit") {Getcodebyid (ID, PID, name); } else {                $ ("#divEdit"). CSS ("display", "none");            Delete (ID, PID, name, $ ("#apps"). Val ());        } return; }//Increase parent node function Addparentid () {$ ("#addParent"). Click (function () {if (!                Checkappkey ()) return;                $ ("#divEdit"). CSS ("Display", "");                Emptytext ();                $ ("#ParentId"). Val (0);                $ ("#AppKey"). Val ($ ("#apps"). Val ());            $ ("#txtParentNodeName"). HTML ("Add parent node");        });            }//Delete node function delete (ID, PID, name,appkey) {var conit; if (PID = = 0) {conit = confirm ("OK to delete \" "+ name +" \ "and its submenus);}            else {conit = confirm ("OK to delete \" "+ name +" \ "?");}                if (conit) {var postdata = {id:id, pid:pid, Appkey:appkey}; $.post (' @Url. Action ("Delete", "Privilege") ', PostData, function (data) {if (datA! = null) {Search (); if (data. IsError = = True) {alert ("Delete failed!                        "); } else {alert ("Delete succeeded!                        ");            }}}, "JSON");        } return false;  The value of the code value and Description field is queried through the primary parent ID and child ID function Getcodebyid (ID, PID, name) {var postdata = {id:id, pid:            PID};                $.post (' @Url. Action ("Index", "Privilege") ', PostData, function (data) {$ (' #paging '). HTML (data);                    if (name = "") {$ ("#txtParentNodeName"). HTML (name + "/update");                $ ("#divEdit"). CSS ("Display", "");        }            });            }//Initialize load data function Search () {var datalist = {}; DataList.            AppKey = $ ("#apps"). Val ();            DATALIST.R = Math.random (); $.get (' @Url. Action ("Search", "Privilege") ', DataList,function (data) {znodes = eval (data);            Bindnodes ();        }, "JSON");            }//checks whether to select the Apply drop-down list function Checkappkey () {var key = $ ("#apps"). Val ();                if (key = = NULL | | key = = "") {alert ("Please select Application");            return false;        } return true;            }//empties the text box value function Emptytext () {$ ("#Id"). Val ("");            $ ("#ParentId"). Val ("");            $ ("#AppKey"). Val ("");            $ ("#Name"). Val ("");            $ ("#Code"). Val ("");            $ ("#Description"). Val ("");        $ ("#txtParentNodeName"). HTML ("");            }//Reset the text box function Resettext () {$ ("#Name"). Val ("");            $ ("#Code"). Val ("");        $ ("#Description"). Val ("");                } function Bindnodes () {if (Znodes.length > 0) {$ ("#zanwushuju"). Hide ();            $.fn.ztree.init ($ ("#treeDemo"), setting, znodes); } else {$ ("#zanwuShuju "). Show ();            $.fn.ztree.init ($ ("#treeDemo"), setting, NULL); }} function Setfontcss (Treeid, TreeNode) {return treenode.status = = "0"?        {color: "Gray", "text-decoration": "Line-through"}: {}; } var setting = {view: {addhoverdom:addhoverdom, Removehoverdom:remove                Hoverdom, Autocancelselected:false, Showicon:false, Nameishtml:true, FONTCSS:SETFONTCSS}, Edit: {enable:true, showremovebtn:                    False, Showrenamebtn:false}, data: {simpledata: {        Enable:true}}, callback: {}};        var newcount = 1;            function Addhoverdom (Treeid, TreeNode) {var sobj = $ ("#" + Treenode.tid + "_span"); if (Treenode.edItnameflag | |            $ ("#addBtn_" + treenode.id). length > 0) return; var addstr = "<span class= ' btncj addcj ' id= ' addbtn_" + treenode.id + "' title= ' Add ' onfocus= ' This.blur (); ' ></span> ' + ' <span class= ' btncj editcj ' id= ' editbtn_ ' + treenode.id + ' ' title= ' edit ' onfocus= ' t His.blur (); ' ></span> "+" <span class= ' btncj editdele ' id= ' Editbtn_delet "+ treenode.id +" ' title= ' delete ' Onfo Cus= ' This.blur (); '            ></span> ";            Sobj.after (ADDSTR);            var parentnodename = "";            Add event var addbtn = $ ("#addBtn_" + treenode.id); if (ADDBTN) addbtn.bind ("Click", Function () {Operationtree (treenode.id, Treenode.pid, t                    Reenode.name, Parentnodename, "add");                return false;            });            Edit Event var editbtn = $ ("#editBtn_" + treenode.id); if (EDITBTN) editbtn.bind ("Click", Function () {                   var ztree = $.fn.ztree.getztreeobj ("Treedemo");                    if (TreeNode) {operationtree (treenode.id, Treenode.pid, Treenode.name, Parentnodename, "edit");                    } else {alert ("The leaf node is locked and cannot be added to the child node");                } return false;            });            Delete event var delbtn = $ ("#editBtn_delet" + treenode.id); if (DELBTN) delbtn.bind ("Click", Function () {var ztree = $.fn.ztree.getztreeobj ("Treede                    Mo ");                    if (TreeNode) {operationtree (treenode.id, Treenode.pid, Treenode.name, Parentnodename, "Del");                    } else {alert ("leaf node is locked");                } return false;        });        };            function Removehoverdom (Treeid, TreeNode) {$ ("#addBtn_" + treenode.id). Unbind (). Remove (); $ ("#editBtn_" + TReenode.id). Unbind (). Remove ();        $ (' #editBtn_delet ' + treenode.id). Unbind (). Remove ();    }; </script>


        <div  style= "padding-left:0" >                            @Html. DropDownList ("Apps", Viewbag.applications as SelectList, new {@ class = "Form-control Input-sm"})                        </div>          <div class= "Panel-tool" >                    <button id= "Addparent" Type= "button" class= "btn btn-primary Btn-radius" > Increase parent node </button>                </div>           <div class= " Panel-body ">                    <p id=" Zanwushuju "class=" Text-center "> No data </p>                    <div class=" Ztreedemobackground ">                        <ul id=" Treedemo "class=" Ztree "></ul>                    </div>                </div >

Background code:

      <summary>///Initialize View///</summary>//<returns></returns> P Ublic actionresult Index (int? id, int? pid) {if (Request.isajaxrequest ()) {I F (ID. HasValue && PID. HasValue) {var model = _privilegebo.getprivilege (ID). Value, PID.                    Value);                Return Partialview ("_privilegetreemanager", model);            }} initprivilegepagedata ();        return View ();        }///<summary>//Initialize page data///</summary> private void Initprivilegepagedata () {using (var client = new Serviceproxy<iapplicationservice> ()) {var appli cations = client.                Channel.getapplicationlistbyapptype (apptype. Management application); Viewbag.applications = applications.            Applicationlist.toselectlist ("AppName", "AppKey", "Please select");        }        }<summary>////Use key to get permission list///</summary>//<param name= "AppKey" >app key value &L            t;/param>//<returns> results </returns> public Jsonresult Search (string appKey) { if (string.            Isnullorwhitespace (AppKey)) return Json (null, jsonrequestbehavior.allowget);            var list = _privilegebo.getprivilegelist (AppKey);            if (null = = list) return Json (null, jsonrequestbehavior.allowget); var nodeList = list. Select (model = new Ztreenode () {id = model. Id, pId = model. ParentID, name = model. Name, open = true, status = Model. Status}).            ToList ();        Return Json (NodeList, jsonrequestbehavior.allowget); }///<summary>//Add or update entities///</summary>//<param name= "model" > Entity Data </ Param>//<returns> whether to update or add success </returns>        Public Jsonresult Edit (Msprivilege model) {var result = new Result {IsError = true}; try {if (model. Id = = 0 | | Model.                Id = =-1) {_privilegebo.insert (model); } else {var modelold = _privilegebo.getprivilege (model. Id, model.                    ParentID);                    Updatemodel (Modelold);                _privilegebo.update (Modelold); } result.            IsError = false; } catch (Exception ex) {result. ErrMsg = ex.            Message;        } return Json (result); }///<summary>///By conditional deletion of data///</summary>//<param name= "id" > Node id</pa        ram>//<param name= "pid" > Parent node id</param>//<param name= "Appkey" >appkey</param> <returns>json data, delete success </returns>       Public Jsonresult Delete (int? id, int? pid, string appkey) {var result = new Result {IsError =            True}; if (!id. HasValue | | !pid.            HasValue) return Json (result); var flag = _privilegebo.delete (ID. Value, PID.            Value, Appkey); Result.            IsError =!flag;        return Json (Result); }

_privilegetreemanager.cshtml page Code:

<form id= "EditForm" class= "form-horizontal" role= "form" > <div id= "divedit" class= "col-lg-4" > <div class= "Panel Panel-default" > <div class= "panel-heading" > <span class= "pull-right" &G t;</span> 




Working with Ztree.js on a tree

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.