Today we will talk about how to use and modify styles in ztree checkbox.
The official example is relatively simple:
But it is comprehensive. To use checkbox, you must:
1. Description of setting configuration:
Setting. check. chkboxType = {"Y": "ps", "N": "ps "};
When using checkbox, you must set attributes in setting. check. For details, see the relevant content in the API documentation.
Parent-child relationship:
When selected: associate parent-child Association
Uncheck: associate parent with child
2. Description of treeNode node data
1) If you want to initialize the default node, set the treeNode. checked attribute. For details, see the relevant content in the API documentation.
2) If a node disables checkbox, set the treeNode. chkDisabled attribute. For details, see the relevant content in the API documentation and the 'chkdisabled demo'
3) If a node does not display the checkbox, set the treeNode. nocheck attribute. For details, see the relevant content in the API documentation and 'nocheckdemo'
4) If you change the checked attribute, refer to the detailed description of setting. data. key. checked in the API documentation.
5) For more information, see the detailed description of treeNode. checkedOld/getCheckStatus/check_Child_State/check_Focus in the API documentation.
Initialize ztree:
| The code is as follows: |
Copy code |
Var setting = {
Check :{
Enable: true
// ChkboxType: {"Y": "", "N ":""}
},
Data :{
SimpleData :{
Enable: true
}
}
};
Function createTree (){
Var zNodes;
$. Ajax ({
Url: 'handler. ashx? Action = GetModule ', // url action is the method name
Data: {id: "11 "},
Type: 'post ',
DataType: "text", // it can be text. If text is used, the returned result is a string. If json format is required, it is set to json
ContentType: "application/json; charset = utf-8 ",
Success: function (data ){
ZNodes = data;
$. Fn. zTree. init ($ ("# treeDemo"), setting, eval ('+ zNodes + ')'));
},
Error: function (msg ){
Alert ("failed ");
}
});
}
Function Add (){
}
Function AddChild (){
}
Function Update (){
}
Function Delete (){
}
Function DeleteAll (){
}
$ (Document). ready (function (){
CreateTree ();
$ ("# Btn_GetCheckedAll"). click (GetCheckedAll );
$ ("# Btn_CheckAllNodes"). click (CheckAllNodes );
$ ("# Btn_CancelAllNodes"). click (CancelAllNodes );
$ ("# Btn_AssignCheck"). click (AssignCheck );
$ ("# Btn_Disabled1"). click (Disabled1 );
$ ("# Btn_Disabled2"). click (Disabled2 );
$ ("# Btn_Add"). click (Add );
$ ("# Btn_AddChild"). click (AddChild );
$ ("# Btn_Update"). click (Update );
$ ("# Btn_Delete"). click (Delete );
$ ("# Btn_DeleteAll"). click (DeleteAll );
// $. Fn. zTree. init ($ ("# treeDemo"), setting, zNodes );
}); |
Checkbox event:
| The code is as follows: |
Copy code |
// Obtain the values of all selected nodes
Function GetCheckedAll (){
Var treeObj = $. fn. zTree. getZTreeObj ("treeDemo ");
Var nodes = treeObj. getCheckedNodes (true );
Var msg = "name -- id -- pid \ n ";
For (var I = 0; I <nodes. length; I ++ ){
Msg + = nodes [I]. name + "--" + nodes [I]. id + "--" + nodes [I]. pId + "\ n ";
}
$ ("# Msg"). val ();
$ ("# Msg"). val (msg );
}
// Select All
Function CheckAllNodes (){
Var treeObj = $. fn. zTree. getZTreeObj ("treeDemo ");
TreeObj. checkAllNodes (true );
}
// Cancel all
Function CancelAllNodes (){
Var treeObj = $. fn. zTree. getZTreeObj ("treeDemo ");
TreeObj. checkAllNodes (false );
}
// Select the specified node
Function AssignCheck (){
Var treeObj = $. fn. zTree. getZTreeObj ("treeDemo ");
// Var nodes = treeObj. getNodes ();
TreeObj. checkNode (treeObj. getNodeByParam ("id", "000100010002", null), true, true );
TreeObj. checkNode (treeObj. getNodeByParam ("id", "0001000100010001000100010001", null), true, true );
}
// Disable or unban selected nodes
Function Disabled1 (){
Var treeObj = $. fn. zTree. getZTreeObj ("treeDemo ");
Var nodes = treeObj. getCheckedNodes ();
For (var I = 0; I <nodes. length; I ++ ){
TreeObj. setChkDisabled (nodes [I], true );
}
}
Function Disabled2 (){
Var treeObj = $. fn. zTree. getZTreeObj ("treeDemo ");
Var nodes = treeObj. getCheckedNodes ();
For (var I = 0; I <nodes. length; I ++ ){
TreeObj. setChkDisabled (nodes [I], false );
}
}
|
Of course, the checkbox style may be ugly. What should we do if we want to add our own options? Remove the checkbox! Then add custom functions to each node for processing:
We need to download several zTree js files when using ztree, we can implement in jquery. ztree. Core-3.5.js.
In jquery. ztree. Core-3.5.js there is a _ setting initialization code, Display attribute initialization and event initialization, etc., as shown below:
This is the click event in the drop-down list. Let's write our own event.
See the following code:
| The code is as follows: |
Copy code |
Var value = ""; // example of the value displayed in the text box: Zhang San, Li Si, Wang Wu
Var pIndex = ""; // select the id example: 1, 2, 3
Var selectCount = false; // indicates whether to clear the comma for the first selection.
Function OnListClick (event, treeId, treeNode, clickFlag ){
If (treeNode. isParent ){
Return;
}
Value + = "," + treeNode. name;
PIndex + = "," + treeNode. id;
If (selectCount = false) {// clear the first comma here
Value = value. substr (1, value. length );
PIndex = pIndex. substr (1, pIndex. length );
SelectCount = true;
}
Var valueObj = "";
Var pIndexObj = "";
If (treeId = "personTree1 "){
$ ("# Div1personTree1" ).css ("display", "none ");
$ ("# TxtChargePerson"). attr ("value", treeNode. name );
$ ("# TxtHiddenPerson"). attr ("value", treeNode. id );
} Else if (treeId = "personTree2 "){
ValueObj = $ ("# txtChargePersonS ");
PIndexObj = $ ("# txtHiddenSPerson ");
ValueObj. attr ("value", value); // specifies the value to splice when multiple values are selected.
PIndexObj. attr ("value", pIndex); // id of the concatenation when multiple parameters are selected
} Else if (treeId = "personTree3 "){
$ ("# Div3personTree3" ).css ("display", "none ");
$ ("# TxtChargePersonItem"). attr ("value", treeNode. name );
$ ("# TxtHiddenCPerson"). attr ("value", treeNode. id );
} Else if (treeId = "personTree4 "){
ValueObj = $ ("# txtExaminePerson ");
PIndexObj = $ ("# txtHiddenEPerson ");
ValueObj. attr ("value", value );
PIndexObj. attr ("value", pIndex );
} Else if (treeId = "personTree5 "){
ValueObj = $ ("# txtDesignPerson ");
PIndexObj = $ ("# txtHiddenDPerson ");
ValueObj. attr ("value", value );
PIndexObj. attr ("value", pIndex );
}
} |
