The _javascript skill of searching automatic screening function based on chosen plugin for selecting tree of people

Screenshot of features to implement:

Requirements:

1, click the input box can be automatically filtered according to pinyin data, and mark the selected data, no results when prompted, the corresponding update left tree state

2, tick the tree on the right side of the tree check box to the left of the corresponding content

The plugin I used

Vue+chosen+ztree

Vue: a modular MVVM Library

Chosen: Radio list and multiple select list enhancements

Ztree: A tree plugin based on jquery

Analysis

Chosen Plug-ins already can achieve most of the results in 1, we only need to obtain data in advance, to achieve the left and right side of the one by one corresponding, and finally click Send to get the final data collection ID

Concrete implementation

HTML structure required by chosen

You only need to provide a select tag that contains data, which is hidden by default, and chosen builds a new HTML structure based on that data
<select name= "Dept style=" width:150px; "id=" Dept "Class=" Dept_select "multiple=" multiple "> 
<option value=" Department 1 "> Department 1</option>
<option Value= "Department 2" > Department 2</option>
<option value= "Department 3" > Department 3</option>
</select>
// Chosen initializes
$ (function () {
$ ('. Dept_select '). Chosen ({
no_results_text: ' No results ',
allow_single_ Deselect:true
});

This requires that most of the effect in 1 is achieved, since our data is retrieved from the background, so we need to get the Select option value from the background, which uses Vue to parse the data, and the corresponding HTML structure and JS are:

HTML structure based on Vue parsing
<select data-placeholder= "Select Sender" class= "Chosen-select Form-control" tabindex= "-1" multiple= "Multiple" >
<template v-for= ' key in Zmailtree ' >
<option v-for= ' item in key.userlist ' Value= ' {{ Item.id}} ' >{{item.name}}</option>
</template>
</select>
//vue instance
var Zmailform=new Vue ({
el: ' #zmail-form ',
ready:function () {
var that=this;
var gettoken=$.cookie (' Dcvalidate ');
$.ajax ({ 
type: ' Get ',
async:false,
URL: ' Background Data interface address ',
dataType: ' json ', 
success:function ( msg) {
that. $set (' Zmailtree ', msg);
}}
);
},
data:{
zmailtree:[]
}
);
Through Vue to get background data, the JSON data assigned to zmailtree this array, it contains a hierarchy, we do not need output hierarchy, only need to output the people on the line, but the practice of finding a person problem, data analysis, Mouse clicks on the input box appears in the Drop-down menu does not appear we have just resolved the data, we need to Vue this method Vue.nexttick, delay callback chosen initialization code:
//Delay initialization chosen
Vue.nexttick
_contains:true//start retrieving from any location
})
;

The following effects are then shown:

The next thing we do is select the person on the right, chosen provides a change method that triggers when the value of the selection changes, and in this way we can easily trigger events based on the change in the Select value

$ (' Select.chosen-select '). On (' Change ', function () {
//user changed the selection, fast processing
});

We also have to write in the Vue.nexttick.

Deferred initialization chosen
Vue.nexttick (function () {
$ (' #zmail-select '). Chosen ({
no_results_text: ' No result found ',// The prompt text that appears when a match is not found when it is retrieved
search_contains:true//starts at any location
});
$ (' #zmail-select '). On (' Change ', function () {
//the user changes the value as follows:
var treeobj = $.fn.ztree.getztreeobj (" Zmail-tree ");
Treeobj.expandall (TRUE);/expand All tree Nodes
Treeobj.checkallnodes (false);/clear all tree nodes
$ ("#zmail-select option: Selected "). each (function (i,obj) {
var node = treeobj.getnodebyparam (" id ", obj.value, null);
Treeobj.checknode (node, true, True);
});
};
The value of the input box as soon as it changes, we get the target ID of the tree, expand all the child nodes, and empty all the selected states of the tree, because there are more than one value in the input box so we have to do a loop, Use the Ztree method to Getnodebyparam (find the node based on the given parameter) and Checknode (control the selected or unchecked operation of the corresponding node)

To this select the input box value so that the right tree corresponding to the selection of the people to achieve, the following to implement check the right trees to change the data in the input box

The HTML structure of the tree, do not forget to write Ztree this class, otherwise do not display the data
<ul class= "Ztree" id= "Zmail-tree" >
</ul>
//Tree initialization code JS
//Staff tree basic settings
var zmailtreeset={
view:{
dblclickexpand:false
},
async:{
enable:true,
type: ' Get ',
URL: ' Server data address ',
},
data:{
simpledata:{
enable:true,
idkey: ' id ',
pidkey: ' ParentID '
},
key:{
Children: ' UserList '
}
},
check:{
enable: True,
chkboxtype:{' Y ': ' s ', ' N ': ' s '}}
,
callback:{
oncheck:zmailcheck
}}
;
function Zmailcheck () {///
Here processing input box data
}
//Initializing Staff tree
$.fn.ztree.init (' #zmail-tree '), Zmailtreeset);

Realization of the idea:

(1) First get the node that clicked the checkbox,

var zmaobj = $.fn.ztree.getztreeobj (Treeid);//getztreeobj plug-in method, get target ID
var zmanodes = Zmaobj.getcheckednodes (True );//getcheckednodes gets all the selected nodes, here is the collection

(2) Next clears the selected state in the select and restores it to its original state.

$ ("#zmail-select option"). each (function (j,obj) {
obj.selected= ';
});

(3) According to the number of nodes in the Select to select the corresponding option selected, the key to judge here is the data ID

for (var i = 0;i < Zmanodes.length i++) {
if (typeof (zmanodes[i].userlist) = = ' undefined ') {// If the node's UserList property is null to indicate that it is not a parent node, accesses its value, skips
//does not write judgment if it is not empty, selects directly using the ID of the selected tree's data to make its property select Change to Selected
$ ("# Zmail-select option[value= "+zmanodes[i].id+"] ") [0].selected= ' selected ';
}
}

(4) Update select option List

Update the select list out of
the loop $ ("#zmail-select"). Trigger (' chosen:updated ');

The above is a small set for you to introduce the implementation of chosen Plug-ins based on the selection of tree search automatic screening function, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!