jquery Easyui Tree Shape

/*html

<tr>

<TD width= "align=" "right" ><div class= "DivSty2" ><label> please choose the direction of employment:</label></div>< /TD>

<td>

<select id= "txtjobdirection" class= "Easyui-combotree" multiple style= "width:200px;" ></select>

</td>

</tr>

<tr>

<TD align= "right" ><label > Please select a region:</label></td>

<TD >

<div class= "DivSty5" >

<label> province <select id= "txtprovince" class= "Easyui-combobox" name= "txtprovince" style= "width:200px;"

Editable= "false" data-options= "Valuefield: ' id ', TextField: ' Text '" ></select></label>

<label> City <select id= "txtcity" class= "Easyui-combotree" multiple style= "width:200px;"

></select></label>

</div>

</td>

</tr>

*/

/**

* Determine non-null

* @param val

* @returns {Boolean}

*/

Function IsEmpty (val) {

val = Val.trim ();

if (val = = null)

return true;

if (val = = Undefined | | val = = ' undefined ')

return true;

if (val = = "")

return true;

if (Val.length = = 0)

return true;

if (!/[^ (^\s*) | ( \s*$)]/.test (val))

return true;

return false;

};

Function Isnotempty (val) {

Return!isempty (Val);

};

/**

* Practitioners to pull down the selection

*/

function Queryjobdirection () {

$.get ("Queryjobdirection.action", function (obj) {

var catn = obj.data.length;

var data = [{"id": "root", "text": "All", "checked": true,children:[]}];

for (Var i=0;i<catn;i++) {

var childsn = obj.data[i].childs.length;

var res ={"id": "", "text": obj.data[i].childs[0].catalogname,children:[]};

for (j=0;j<childsn;j++) {

var children = {"id": obj.data[i].childs[j].id, "text": Obj.data[i].childs[j].name};

Res.children.push (children);

}

Data[0].children.push (RES);

}

$ ("#txtjobDirection"). Combotree ("LoadData", data);

});

}

/**

* Save Pull Options

*/

Function Province () {

$.get ("Queryrootarea.action", function (obj) {

var catn = obj.data.length;

var data = [];

for (Var i=0;i<catn;i++) {

var res ={"id": obj.data[i].id, "text": Obj.data[i].name};

Data.push (RES);

}

$ ("#txtProvince"). ComboBox ("LoadData", data);

});

}

/**

* Click Save Event

*/

function Eventprovince () {

$ ("#txtProvince"). ComboBox ({

Onselect:function (param) {

var parentid =$ ("#txtProvince"). ComboBox ("GetValue");

$.post ("Querychildarea.action", {"Parent":p arentid},function (obj) {

var catn = obj.data.length;

var data = [];

for (Var i=0;i<catn;i++) {

var res ={"id": obj.data[i].id, "text": obj.data[i].name,children:[]};

Data.push (RES);

}

$ ("#txtCity"). Combotree ("LoadData", data);

});

}

});

}

/**

* Click City Event

*/

function eventcity () {

$ (' #txtCity '). Combotree ({

Onselect:function (node) {

if (Node.children.length = = 0) {

$.post ("Querychildarea.action", {"Parent": node.id},function (obj) {

var catn = obj.data.length;

var data = [];

for (Var i=0;i<catn;i++) {

var res ={"id": obj.data[i].id, "text": Obj.data[i].name};

Data.push (RES);

}

$ (' #txtCity '). Combotree ("Tree"). Tree (' append ', {parent:node.target,data:data});

});

}

}

});

}

/**

* Delete an array of subscripts

*/

Array.prototype.baoremove = function (dx) {

if (IsNaN (dx) | | Dx>this.length) {return false;}

This.splice (dx,1);

}

/**

* Add values from the array

*/

Array.prototype.insert = function (index, item) {

This.splice (index, 0, item);

};

/**

* Push button Event

*/

function eventbtn () {

$ ("#btnPush"). Click (function () {

var jobdirections = $ (' #txtjobDirection '). Combotree (' getValues ');

if (Jobdirections.length = = 0) {

$.messager.alert ("Prompt", "Please choose the direction of the profession!! "," info ");

Return

}else{

if (jobdirections[0] = = "root") {

Jobdirections = ["root"];

}else{

for (var key in jobdirections) {

if (jobdirections[key] = = "") {

Jobdirections.baoremove (key);

}

}

}

}

Jobdirections = json.stringify (jobdirections)

var province = $ (' #txtProvince '). ComboBox (' GetValue ');

if (IsEmpty (province)) {

$.messager.alert ("Hint", "Please select area!! "," info ");

Return

}

var citys = $ (' #txtCity '). Combotree (' getValues ');

if (Citys.length = = 0) {

Citys = [Province];

}else{

Citys.insert (0,province);

}

Citys = Json.stringify (citys);

var inforate = $ ("input[name= ' rdoinforate ']:checked"). Val ();

var identifion = $ ("input[name= ' rdoidentifion ']:checked"). Val ();

var business = $ ("input[name= ' rdobusiness ']:checked"). Val ();

var specialist = $ ("input[name= ' rdospecialist ']:checked"). Val ();

var Content = $.trim ($ ("#txtContent"). Val ());

var data ={

Content:content,

Jobdirection:jobdirections,

Area:citys,

Inforate:inforate,

Identifionauth:identifion,

Businessauth:business,

Specialistauth:specialist

}

$.post ("Addmanpowerblog.action", data,function (obj) {

if (Obj.status = = 0) {

$.messager.alert ("Hint", obj.message, "info");

$ ("#txtContent"). Val ("");

} else {

$.messager.alert ("Errors", Obj.message, "error");

}

});

});

}

/**

* Trigger when clicking on the city drop-down panel display.

*/

function Showpanel () {

$ ("#txtCity"). Combotree ({

Onshowpanel:function () {

var citys = $ ("#txtCity"). Combotree ("Tree"). Tree ("Getroots");

if (Citys.length = = 0) {

$.messager.alert ("Hint", "Please select Province!!") "," info ");

}

}

});

}

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M02/72/AA/wKiom1XqtmGxHeNoAAESAY8yAOY389.jpg "style=" float: none; "title=" tree. png "alt=" wkiom1xqtmgxhenoaaesay8yaoy389.jpg "/>

650) this.width=650; "src=" http://s3.51cto.com/wyfs02/M00/72/A7/wKioL1XquIfQozMbAAGFw3ZxDaw635.jpg "style=" float: none; "title=" tree-shaped 2.png "alt=" Wkiol1xquifqozmbaagfw3zxdaw635.jpg "/>

This article from "Novice Learning" blog, declined reprint!

jquery Easyui Tree Shape