Ztreedeptselect based on jquery and Ztree's departmental selection plugin

Plugin Introduction

First, let's look at the plugin's function demo (effect):

After the plugin is ready. The front desk only needs to write HTML:

<type= "Text"  class= "Deptname"/>

Then render the plug-in in JavaScript (the code uses jquery notation):

$ (". Deptname"). Ztreedeptselect ();

The plugin is rendered complete.

This plugin has been posted to GitHub, source address: Https://github.com/harveyhang/ztreeDeptSelect

Need a friend, please download the source code directly from GitHub.

Background request data is done using ASP. NET Framework4.0. Plug-ins will continue to be perfected in the first time to share code to GitHub, hope that the park friends support ~

Use the detailed

1. Modify the code to obtain the department data source, that is, reorganize the DEPTDIALOGDATAHANDLER.ASHX code. In the source code,. Ashx is just an example of static data, which is assumed to be the data returned by the query result;

Typically, departmental data comes from a database, so change the code to get Department data based on the actual project.

2. The departmental tree relies on ztree (a departmental tree plugin), and the plugin relies on jquery. So make sure that you have jquery and Ztree files in your project. For details, refer to the Index.html file under the Demo folder and

The deptdialog.html file under the SRC folder.

3. The plug-in now provides three ways to use: Simple call, set default value, set parameters, three methods of use are described in demo\index.html.

Sources of departmental data

Load the department tree's foreground code:

$ (document). Ready (function () {            varZnodes; //assign root data to Znodes.$.ajax ({URL:' Deptdialogdatahandler.ashx ', type:' Post ', DataType:' JSON ', Async:false, data: {' Ajaxmethod ': ' Getrootdata '}, Success:function(data) {Znodes=data;            }            }); //Tree Setting            varsetting ={async: {enable:true, URL:"Deptdialogdatahandler.ashx", Autoparam: ["id"],//Parameters of the parent node attribute that's automatically committed when the asynchronous load is loadedOtherparam: ["Ajaxmethod", ' Asynccurrentnodechildren '),//Ajax Request ParametersType: ' Post ', DataType:' JSON '}, view: {showicon:true, Dblclickexpand:false}, ShowLine:true,//show Ztree Connect LineData: {//Using PId to identify the relationship between father and sonSimpledata: {enable:true}}, callback: {//callback function.Ondblclick:ztreeondblclick, asyncsuccess:ztreeonasyncsuccess}            }; //init ztree.$.fn.ztree.init ($ ("#treeDemo"), setting, znodes); });

Background code for the handler file:

<%@ WebHandler language="C #"class="Deptdialogdatahandler"%>usingSystem;usingsystem.web;usingNewtonsoft.json;/// <summary>///Ajax Data Handler.///Author:Https://github.com/harveyhang///tips:modify code to apply your own .../// </summary> Public classDeptdialogdatahandler:ihttphandler { Public voidProcessRequest (HttpContext context) {//static data for Test,this is the depts data ...        varDepts =New[]{             New{DeptID =0, Deptname ="All depts", Parentdeptid =-1 },            New{DeptID =1, Deptname ="Technology Dept", Parentdeptid =0 },            New{DeptID =2, Deptname ="Software Dept", Parentdeptid =1 },            New{DeptID =3, Deptname ="Hardware Dept", Parentdeptid =1 },            New{DeptID =4, Deptname ="Human Resource Dept", Parentdeptid =0 }         }; //convert data type to Ztree//... convert process is omitted        /** * Data convert instruction: * The previous Code section has three common properties:deptid,deptname , Parentdeptid, * which was converted to these properties Under:id, name, PId * if departmen         T node has child,set Isparent=true;else,set isparent=false; **/        varZtreedepts =New[] {             New{id =0, name ="All depts", PId =-1, isparent=true },            New{id =1, name ="Technology Dept", pId =0, isparent=true },            New{id =2, name ="Software Dept", pId =1, isparent=false },            New{id =3, name ="Hardware Dept", pId =1, isparent=false },            New{id =4, name ="Human Resource Dept", pId =0, isparent=false }         }; Try        {            stringAjaxmethod = context. request["Ajaxmethod"]. ToString ();//Get Ajax MethodSystem.Reflection.MethodInfo method = This. GetType ().            GetMethod (Ajaxmethod); if(Method! =NULL) method. Invoke ( This,New Object[] {context});//Execute Method        }        Catch(Exception) {Throw; }        finally{context.        Response.End (); }    }     /// <summary>    ///Async Load Children/// </summary>    /// <param name= "context" ></param>     Public voidAsynccurrentnodechildren (HttpContext context) {Try        {            intID =int. Parse (context. request.params["ID"]); varChildrendata =New[] {                 New{id =1, name ="Technology Dept", pId =0, isparent=true },                New{id =4, name ="Human Resource Dept", pId =0, isparent=false }             }; Switch(ID) {//Suppose the data was getted                 Case 0:                     Break;  Case 1: Childrendata=New[] {                         New{id =2, name ="Software Dept", pId =1, isparent=false },                        New{id =3, name ="Hardware Dept", pId =1, isparent=false }                    };  Break;  Case 2:                 Case 3:                 Case 4: Childrendata=NULL;  Break; } context.        Response.Write (Jsonconvert.serializeobject (Childrendata)); }        Catch(Exception) {Throw; }    }        /// <summary>    ///Root Data/// </summary>    /// <param name= "context" ></param>     Public voidGetrootdata (HttpContext context) {Try        {            //Suppose the data was getted            varRoot =New{id =0, name ="All depts", PId =-1, isparent =true }; Context.        Response.Write (Jsonconvert.serializeobject (root)); }        Catch(Exception) {Throw; }    }     Public BOOLisreusable {Get        {            return false; }    }}

View Code

This section can be changed to another Web language, such as Php,java. Because the plug-in is common in the foreground, background data can be customized according to the actual needs.

Summarize

There is currently an unresolved bug in this plugin: "The Department window does not eject when using Google Chrome." Because Chrome has blocked JS's ShowModalDialog method.

Major browsers such as IE or Firefox have not yet found bugs. Of course, the broad masses of friends are welcome to criticize.

Due to the project on GitHub, the code comments are all written in my "handwritten" English. My English level, this crappy English,, but also hope you forgive ~

If you feel that the English description on GitHub is not clear, or you have any suggestions for this plugin, welcome message to communicate with ~

At last

I hope this article will be of help to you.

Ztreedeptselect based on jquery and Ztree's departmental selection plugin