Publish a jquery-based unlimited drop-down control

 

The result is as follows: After selecting the option (you can initialize the option) (you can always choose the last option), the reason for the initialization is that the effect of the jautocombox2 plug-in is always biased, therefore, this script is compiled. Overwrite most of the logic Version 0.9.0 Date: 2011-8-22 Original Author zlddian Modified by ayun00 Email: ayun00@sina.com Free replication and use are allowed. do not modify the above information. Mail me a copy if any modification is made. You are also welcome to propose amendments. Data format var DATA = [{"ID": 25, "text": "Huaian branch", "children": [{"ID": 26, "text ": "Office (Administrative Personnel Training)", "children": [{"ID": 28, "text": "Office (Administrative Personnel Training 333)", "children ": [{"ID": 30, "text": "Office (Administrative Personnel Training 333)"}]}, {"ID": 29, "text ": "Office (Administrative Personnel Training 2)"}] },{ "ID": 52, "text ": "R & D department", "children": [{"ID": 54, "text": "R & D department 2222"}] },{ "ID": 53, "text ": "Finance Department"}]; ID: Fill in the select Value Text: Fill in the select text Children: Data of the next level Main Function Comboboxgetvalue gets the selec value or text of the specified level, and the level is left blank to take the last level of select Comboboxgetallpath obtains the selec value or text string from the first select to the last select. Call Method $ ("# Div_unlimitedselect"). unlimitedselect ({ Cssclass: "autocombobox ", Nulldispaly: True, Data: data, Firstvalue: [true, "= select =", "= select ="], Defaultvalue: 29 }); }); Function getval (){ VaR A = $ ("# div_autocombobox"). comboboxgetvalue (null, "value", errorfn ); Alert (); } Function getalltext (){ VaR A = $ ("# div_autocombobox"). comboboxgetallpath ("text ","-"); Alert (); } Function errorfn (){ Alert ("error "); } /* The reason for writing this script comes from the use of the jautocombox2 plug-in // rewrite most of the logic version 0.9.0date: 2011-8-22 Original Author zlddianmodified by ayun00email: The ayun00@sina.com allows free replication, free use, please do not modify the above information. If you have modified the information, please mail me a copy. You are also welcome to submit your suggestion to modify the data format var DATA = [{"ID": 25, "text ": "Huai 'an branch", "children": [{"ID": 26, "text": "Office (Administrative Personnel Training)", "children": [{"ID ": 28, "text": "Office (Administrative Personnel Training 333)", "children": [{"ID": 30, "text": "Office (Administrative Personnel Training 333) "}]}, {" ID ": 29," text ": "Office (Administrative Personnel Training 2)"}] },{ "ID": 52, "text": "R & D department", "children": [{"ID": 54, "text": "R & D department 2222"}] },{ "ID": 53, "text": "Finance Department"}]; ID: Fill in valuetext of select: fill in select textchildren: the next level of data main function comboboxgetvalue to get the specified level of selec value or text, the level left blank is the last level of selectcomboboxgetallpath to get the selec value from the first select to the last select or the text string calling method $ ("# div_unlimitedselect "). unlimitedselect ({cssclass: "autocombobox", nulldispaly: True, da Ta: data, firstvalue: [true, "= select =", "= select ="], defaultvalue: 29 });}); function getval () {var A =$ ("# div_autocombobox "). comboboxgetvalue (null, "value", errorfn); alert (a);} function getalltext () {var A =$ ("# div_autocombobox "). comboboxgetallpath ("text", "-"); alert (a);} function errorfn () {alert ("error");} */(function () {$. extend ($. FN, {// start // initialize unlimitedselect: function (OP) {op = $. Extend ({URL: false, // address for obtaining data remote: false, // whether to perform remote request type: "Post ", // Request Remote Data in get/post quest: "Q", // Request Parameter Name Data: True, // data (JSON format) this parameter takes effect only when the URL parameter is set to false. Otherwise, iswebservice: false is obtained from the remote URL first. // whether the data comes from the Web Service (implemented in the next version) cssclass: false, // The class style firstvalue used in the drop-down box: [true, "0", "select"], // whether to automatically create the first value. This value is usually optional, unlimited idprefix: "unlimited_select_id", // automatically generate the default ID prefix defaultvalue: false in the drop-down box, // if this value is not Fal Se will set the default value based on this value and recursively set up all the drop-down box defaults nulldispaly: True, // whether to display all sub-levels (the sub-level of the first drop-down value) // onchange: NULL in the next version, // The Event onchangeresult: NULL triggered when the drop-down box is changed // The text and value with the returntype value. If not empty, the current type is returned }, OP); var c = this; if (op. remote) {// obtain data remotely C. remoteajax (C, op, 1, "", op. defaultvalue);} else {If (op. defaultvalue) {// obtain the default value level. If the default value is C. path = C. getpath (op. data, [], op. defaultvalue, 0); If (! C. issearc) {C. path = [] ;}} C. createoption (C, 1, op, op. data, true) ;}}, // o Current unlimitedselect object // index current level // op parameter // data current level data // whether to fill createoption for the first time: function (O, index, op, Data, isfirst) {If (data. length> 0) {var $ select; If (O. find ("#" + OP. idprefix + index ). length> 0) {// query whether the current recursive drop-down box exists. If so, delete $ select = O. find ("#" + OP. idprefix + index); $ select. get (0 ). options. length = 0;} e LSE {$ select = $ ('<select id = "' + OP. idprefix + index + '"Index ="' + index + '"/>'); // create a drop-down box o. append ($ select) ;}// append the custom drop-down box style if (op.css class) {export select.addclass(op.css class);} var ComboBox = This; var tempoption = ''; If (op. firstvalue [0]) {tempoption + = "<option value = '" + OP. firstvalue [1] + "'>" + OP. firstvalue [2] + "</option>"} $. each (data, function (I, item) {If (O. path [index-1] = = Item. ID & isfirst) {tempoption + = "<option value = '" + item. ID + "'selected = 'selected'>" + item. text + "</option>"} else {tempoption + = "<option value = '" + item. ID + "'>" + item. text + "</option>" }}); $ select. empty (). append (tempoption); // bind the onchange event in the drop-down box to start $ select. change (function () {// bind the onchange event if ($. isfunction (op. onchange) {// transmits the full path var RB to the Custom Event Based on onchangeresult; If (op. oncha Ngeresult) {RB = O. comboboxgetallpath (op. onchangeresult);} op. onchange (RB);} // nextindex = index + 1; // when creating the following drop-down box, you must clear all the following drop-down boxes var J = nextindex; while (true) {// find the $ select = O. find ("#" + OP. idprefix + J); if ($ select. length> 0) $ select. remove (); else {break;} J ++;} // callback recursive var val = $ (this ). val (); If (op. remote) {ComboBox. remoteajax (O, op, nextindex, Val, op. defaultvalue);} else {// Traverse the current item. If there is a subitem, create $. each (data, function (I, item) {If (item. id = Val) {If (item. children) {ComboBox. createoption (O, nextindex, op, item. children); // call back the Add = true; return false ;}}}}); // bind the onchange event in the drop-down box to the end of the onchange event. // if the default value exists, and create the next drop-down box if (ComboBox. path. length> = index & isfirst) {ComboBox. createoption_notfirst (O, index + 1, ComboBox. path [index-1], op, data); // ComboBox. Createoption (O, index + 1, op, Data. children, false) ;}}, createoption_notfirst: function (O, index, Val, op, data) {var ComboBox = This; $. each (data, function (I, item) {If (item. id = Val) {If (item. children) {ComboBox. createoption (O, index, op, item. children, true); // find the default callback method return false;}/* If (item. children) {ComboBox. createoption_notfirst (O, index, Val, op, item. children );}*/}); },/* Request the full path value_text_rec value or text splitstr connector errfn error callback function */comboboxgetallpath: function (value_text_rec, splitstr, errfn) {var S = This. find ("select"); If (value_text_rec) {} else {value_text_rec = "value";} If (splitstr) {} else {splitstr = "";} try {Switch (value_text_rec) {Case "value": var RTN; For (VAR I = 0; I <S. length; I ++) {If (! RTN) {RTN = S. eq (I ). val ();} else {RTN + = splitstr + S. eq (I ). val () ;}return RTN case "text": var RTN; For (VAR I = 0; I <S. length; I ++) {If (! RTN) {RTN = S. eq (I ). find ('option: selected '). text ();} else {RTN + = splitstr + S. eq (I ). find ('option: selected '). text () ;}}return RTN }}catch (ERR) {If (errfn) {errfn (ERR) ;}return "";}}, /* The returned level value returns the value of the last drop-down box by default but does not meet the conditions. A custom error message is displayed. */comboboxgetvalue: function (atleast, value_text_rec, errfn) {var S = This. find ("select"); If (atleast) | (atleast = 0) {If (S. length-1> = atleast) {If (Value_text_rec) {Switch (value_text_rec) {Case "value": Return S. eq (atleast ). val (); Case "text": Return S. eq (atleast ). find ('option: selected '). text (); Case "REC": Return S. eq (atleast) ;}} else {return S. eq (atleast ). val () ;}} else {If (errfn) {errfn () ;}return "" ;}} else {If (value_text_rec) {Switch (value_text_rec) {Case "value": Return S. eq (S. length-1 ). val (); Case "text": Return S. E Q (S. length-1 ). find ('option: selected '). text (); Case "REC": Return S. eq (S. length-1) ;}} else {return S. eq (S. length-1 ). val () ;}},/* C Current object op parameter index current level rid request value defaultvalue default value */remoteajax: function (C, op, index, RID, defaultvalue) {$. ajax ({type: op. type, URL: op. URL, data: "defaultvalue =" + defaultvalue + "&" + OP. quest + "=" + RID, success: function (MSG) {op. data = eval (MSG ); // Obtain the default level if (op. defaultvalue) {// obtain the default value level. If the default value is C. path = C. getpath (op. data, [], op. defaultvalue, 0);} If (! C. issearc) {C. path = [];} C. createoption (C, index, op, op. data) ;}, error: function () {alert ("not connection server") ;}}, issearc: false, // data traversal data // The array returned by org // The ID to be searched // The getpath: function (data, org, ID, Levle) {var DDD = this; if (typeof Levle = "undefined") {Levle = 0;} var curlevele = Levle; $. each (data, function (I, V) {If (! Ddd. issearc) {console. log ("search item:" + ID + "Current Value" + v. ID + ", current depth:" + curlevele + ", current arr:" + Org. join (','); If (v. id = ID) {org [curlevele] = ID; DDD. issearc = true; // clear a value greater than the current path // console. log ("length" + Org. length + ", current depth:" + curlevele); If (curlevele <Org. length) {Org. splice (curlevele + 1, org. length-curlevele);} return false;} // recursive else if (v. children) {org [curlevele] = v. ID; org = DDD. getpath (v. children, org, ID, curlevele + 1) ;}} else {return false ;}); return org ;}, // current level path: [], returntype: ["value", "text"] // end}) ;}( jquery ); The C # code is generated in JSON format in this example. Using system; using system. collections. generic; using system. data; using system. text; namespace common {// <summary> /// unlimitedselect helper class /// </Summary> public class unlimitedselect {// <summary> // Ajax of autocombobox returns JSON data /// </Summary> /// <Param name = "dataset"> </param> /// <Param name = "textcolumnname"> </param> /// <Param name = "idcolumnname"> </param> // <Param name = "pidcolumnname"> </param>/ // <Param name = "openfirst"> </param> // <returns> </returns> Public static string datasettotree (Dataset dataset, string textcolumnname, string idcolumnname, string pidcolumnname, bool openfirst) {return datatabletotree (Dataset. tables [0], 0, textcolumnname, idcolumnname, pidcolumnname, openfirst);} public static string datasettotree (Dataset dataset, int ID, string textcolumnname, string idcolumnna Me, string pidcolumnname, bool openfirst) {return datatabletotree (Dataset. tables [0], ID, textcolumnname, idcolumnname, pidcolumnname, openfirst);} public static string datatabletotree (datatable, string textcolumnname, string idcolumnname, string pidcolumnname, bool openfirst) {return tojson (datatable, 0, textcolumnname, idcolumnname, pidcolumnname, openfirst);} public static string d Atatabletotree (datatable, int ID, string textcolumnname, string idcolumnname, string pidcolumnname, bool openfirst) {return tojson (datatable, ID, textcolumnname, idcolumnname, pidcolumnname, openfirst );} private Static list <string> getconfig () {list <string> List = new list <string> (); list. add ("\" ID \ ""); list. add ("\" text \ ""); list. add ("\" iconcls \ ""); list. add ("\" state \ ""); return list;} Private Static string getjson (datatable, int ID, string textcolumnname, string idcolumnname, string pidcolumnname, bool openfirst) {datarow [] rowarray = datatable. select (pidcolumnname + "=" + id. tostring (); If (rowarray. length = 0) {return string. empty;} stringbuilder builder = new stringbuilder (); List <string> Config = getconfig (); int num = 0; foreach (datarow row in rowarray) {Builder. append ("{"); For (INT I = 0; I <2; I ++) {if (I! = 0) {builder. append (",");} switch (I) {Case 0: builder. append (config [I]); break; Case 1: builder. append (config [I]); break;} if (I = 0) {builder. append (":");} else {builder. append (": \" ");} switch (I) {Case 0: builder. append (row [idcolumnname]. tostring (); break; Case 1: builder. append (row [textcolumnname]. tostring (); break;} if (I! = 0) {builder. append ("\" ") ;}} string STR =" "; string JSON = getjson (datatable, convert. toint32 (row [idcolumnname]), textcolumnname, idcolumnname, pidcolumnname, false); STR = (STR + ", \" Children \ ": [") + JSON + "]"; if (STR! = ", \" Children \ ": []") {builder. append (STR); If (! Openfirst) {builder. append (", \" state \ ": \" Closed \ "") ;}} builder. append ("},"); num ++;} If (builder. tostring () = "") {return "";} return builder. tostring (). substring (0, builder. tostring (). length-1);} Private Static string tojson (datatable, int ID, string textcolumnname, string idcolumnname, string pidcolumnname, bool openfirst) {string STR = getjson (datatable, ID, textcolumnname, Idcolumnname, pidcolumnname, openfirst); If (STR! = "") {STR = "," + STR;} return ("[{\" ID \ ": 0, \" text \ ": \" full \", \ "iconcls \": \ "icon-OK \"} "+ STR +"] ") ;}}