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