ZtreeDeptSelect is based on jquery and ztree Department selection plug-in, ztreeselectnode

ZtreeDeptSelect is based on jquery and ztree Department selection plug-in, ztreeselectnode
Plugin Introduction

First, let's take a look at the plug-in function demonstration (effect ):

After the plug-in is ready. The front end only needs to write html:

<input type="text" class="deptName" />

Then render the plug-in javascript (the code is written in jQuery ):

$(".deptName").ztreeDeptSelect();

The rendering is complete.

 

This plug-in has been released to github, Source Code address: https://github.com/harveyhang/ztreeDeptSelect

If you need a friend, please download the source code directly from github.

The background request data is completed using ASP. NET Based on. NET Framework4.0. The plug-in will be constantly improved. The Code will be shared to github for the first time. Hope you can support it ~

Usage Details

1. modify the code to obtain the Department data source, that is, re-organize the code of DeptDialogDataHandler. ashx. In the source code,. ashx is just an example of static data. It is assumed that the data returned from the query results is;

Generally, the Department data comes from the database. Therefore, modify the code for obtaining the Department data based on the actual project.

2. The Department tree depends on zTree (a department tree plug-in) and jQuery. Therefore, make sure that there are jquery and zTree files in the project. For details, refer to the index.html file and

The deptdialog.html file under the SRC folder.

3. Currently, the plug-in provides three usage methods: simple call, default value setting, and parameter setting. The three usage methods are described in demo \ index.html.

Department Data Source

Load the front-end code of the Department tree:

$(document).ready(function () {            var zNodes;            //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            var setting = {                async: {                    enable: true,                     url: "DeptDialogDataHandler.ashx",                    autoParam: ["id"], // Parameters of the parent node attribute that is automatically committed when the asynchronous load is loaded                    otherParam: ["ajaxMethod", 'AsyncCurrentNodeChildren'], //ajax request parameters                    type: 'post',                    dataType: 'json'                },                view: {                    showIcon: true,                    dblClickExpand: false                },                showLine: true, // show ztree connect line                data: {  //Using pId to identify the relationship between father and son                     simpleData: {                        enable: true                    }                },                callback: { //callback function.                    onDblClick: zTreeOnDblClick,                    asyncSuccess: zTreeOnAsyncSuccess                }            };            //init ztree.            $.fn.zTree.init($("#treeDemo"), setting, zNodes);        });

Background code of the handler file:

<% @ WebHandler Language = "C #" Class = "DeptDialogDataHandler" %> using System; using System. web; using Newtonsoft. json; // <summary> // Ajax Data Handler. /// Author: https://github.com/harveyhang/// Tips: Modify code to apply your own business... /// </summary> public class DeptDialogDataHandler: IHttpHandler {public void ProcessRequest (HttpContext context) {// static data for test, this is the depts data... var depts = new [] {new {deptId = 0, deptName = "All Depts", parentDeptId =-1}, new {deptId = 1, deptName = "Technology Dept ", parentDeptId = 0}, new {deptId = 2, deptName = "Software Dep T ", 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 department node has child, set isParent = true; else, set isParent = false; **/var zTreeDepts = 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 De Pt ", pId = 0, isParent = false }}; try {string ajaxMethod = context. request ["ajaxMethod"]. toString (); // get ajax method System. 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 void AsyncCurrentNodeChildren (HttpContext context) {try {int id = int. parse (context. request. params ["id"]); var childrenData = 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 void GetRootData (HttpContext context) {try {// suppose the data was getted var root = new {id = 0, name = "All Depts", pId =-1, isParent = true}; context. response. write (JsonConvert. serializeObject (root);} catch (Exception) {throw ;}} public bool IsReusable {get {return false ;}}}View Code

This part can be changed to other web languages, such as php and java. Because the plug-ins are common in the foreground, the background data can be customized according to actual needs.

Summary

Currently, this plug-in still has an unfixed bug: "When Google Chrome is used, the Department window cannot pop up ". Chrome has blocked the js showModalDialog method.

No bugs have been found in mainstream browsers such as IE or Firefox. Of course, you are welcome to correct your criticism.

Because it is a github project, the code comments are all "handwritten" in English. I have a moderate level of English. I hope you will forgive me for this poor English ~

If you think the English description on github is unclear or you have any suggestions for this plug-in, please leave a message to us ~

Finally,

I hope this article will help you.