| 类别: | 技术记, Javascript/Jscript(client-side) |
|---|---|
| 标签: | shawl.qiu, javascript, select, js, menu, nav, XSelect |
| 摘要: | .. |
| 正文: |
无限级菜单结构 与 列表框无限级联动, 类 XSelect by shawl.qiu压缩包包含:XSelect v1.0, XMenu v1.3, Select v1.3.1, Menu v1.0.1 (带X的是单表, 不带X的是多表.) 说明: 继上一篇文章: 无限级菜单结构 与 Javascript 实现算法, 类 XMenu by shawl.qiu http://blog.csdn.net/btbtd/archive/2007/11/06/1868738.aspx 之后, 俺当然得写一个配套的东西, 就是嘛, 列表框联动. 不过有一点需要强调一下, XMenu 1.0 没什么实用价值, 不过鄙人已经升级到 XMenu 1.3, 基本上可以应付所有应用. 表结构到上面的文章去看一下... 至于外部表关联类别表的字段嘛, 使用 CTreeNode, 然后再在后台适当处理一下, 可以提高N大的效率问题... 嗯, 看来还得啰嗦一下... 以前也写过一个无限级列表框联动的类: 无限级菜单结构 与 Javascript 实现算法, 类 XMenu by shawl.qiu javascript 表单列表框联动类 v1.3 (支持无限级联动) http://blog.csdn.net/btbtd/archive/2007/05/30/1630687.aspx 但那是多表联动, 处理一些东西会非常非常麻烦, 因此, 你现在如果在使用多表分类, 我建议你使用一表分类... 不过一表分类相对于多表分类处理起来非常方便, 但是前提是, 你必须有一点算法基本, 要不然效率反而会受影响... 那就这样吧, 废话就少说了... 上篇文章的 CSharp GetString 函数有一点小错误, 顺带修整一下: public static string GetString(DataTable Dt, string sCol, string sRow, string sNull) { // shawl.qiu code StringBuilder Sb = new StringBuilder(); int Len = Dt.Rows.Count; if(Len==0) return ""; int SubLen = Dt.Rows[0].ItemArray.Length; string TempString = ""; for(int i=0; i<Len; i++) { for(int j=0; j<SubLen; j++) { TempString = Dt.Rows[i].ItemArray[j].ToString(); if(TempString=="") { Sb.Append(sNull); } else { Sb.Append(TempString); } if(j<SubLen-1) { Sb.Append(sCol); } } // end for(int j=0; j<SubLen; j++) if(i<Len-1) { Sb.Append(sRow); } } // end for(int i=0; i<Len; i++) return Sb.ToString(); } // end public static string GetString(DataTable Dt, string sCol, string sRow, string sNull) 目录: 1. 二级分数调用(XSelect(2_level).htm) 2. 三级分类调用(XSelect(3_level).htm) 3. XSelect.js shawl.qiu 2007-11-10 http://blog.csdn.net/btbtd 下载: http://download.csdn.net/source/281952 http://dl2.csdn.net/down4/20071110/10132117376.7z 内容: 1. 二级分数调用(XSelect(2_level).htm) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>shawl.qiu template</title> <style type="text/css"> /* <![CDATA[ */ /* ]]> */ </style> <script type="text/javascript"> /*<![CDATA[*/ if (navigator.appName=="Microsoft Internet Explorer") { //最大化窗口 self.moveTo(-5,-5) self.resizeTo(screen.availWidth +8,screen.availHeight+8) //这个脚本定义的宽度其实比原窗口还要大那么一点. } /*]]*/ </script> </head> <body> <select id="Cat"></select> <script type="text/javascript" src="XSelect.js"></script> <script type="text/javascript"> /*<![CDATA[*/ var CatString = "1## 首页##0##00010000##@68##源码##0##00680000##@7##管理##0##00070000##@6##退出 ##7##00070006##@5##登陆##7##00070005##@72##归档##68##00680072##@71##搜索 ##68##00680071##@70##标签##68##00680070##@69##回复##68##00680069"; var XSelectInstance = new XSelect(); var StartDt = new Date(); var Au = XSelectInstance.Get.Au(); document.title = Au.Subject + " " + Au.Version; XSelectInstance.Go(fXSelectIniter); XSelectInstance = null; defaultStatus = new Date()-StartDt; function fXSelectIniter(Param) { Param.Fields.Id = 0; Param.Fields.Text = 1; Param.Fields.Parent = 2; Param.Fields.Value = 3; Param.Element = "Cat"; Param.String = CatString; Param.Level = 2; Param.TopLevelDefaultValue = "0"; Param.TabText = "-"; Param.TabLen = 8; Param.Query = {}; Param.Query.Id = "ctreenode"; Param.Parent.Show = true; Param.Parent.Link.Impelement = true; Param.Parent.Link.Prefix = "?ctreenode="; Param.Parent.Link.Suffix = ""; Param.Parent.Link.Field = 3; Param.FixMemoryLeak = true; } // end function fXSelectIniter(Param) /*]]*/ </script> </body> </html> 2. 三级分类调用(XSelect(3_level).htm) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>shawl.qiu template</title> <style type="text/css"> /* <![CDATA[ */ /* ]]> */ </style> <script type="text/javascript"> /*<![CDATA[*/ if (navigator.appName=="Microsoft Internet Explorer") { //最大化窗口 self.moveTo(-5,-5) self.resizeTo(screen.availWidth +8,screen.availHeight+8) //这个脚本定义的宽度其实比原窗口还要大那么一点. } /*]]*/ </script> </head> <body> <select id="Cat"></select> <script type="text/javascript" src="XSelect.js"></script> <script type="text/javascript"> /*<![CDATA[*/ var CatString = "1##JScript##0##000100000000##@5##JavaScript##0##000500000000##@7##VBScript##0##000700000000##@15##ActionScript##0##001500000000##@12##CSharp .Net##0##001200000000##@11##JScript .Net##0##001100000000##@17##PHP##0##001700000000##@10##Sql##0##001000000000##@13##xhtml##0##001300000000##@14##xml##0##001400000000##@9##CSS##0##000900000000##@18##C ++##0##001800000000##@16##Utility##0##001600000000##@20##Algorithm##0##002000000000##@21##Layout##0##002100000000##@8## 测试类##0##000800000000##@22##函数库##1##000100220000##@23##类库 ##1##000100230000##@26##prototype库##1##000100260000##@74##范例 ##1##000100740000##@33##模板库##1##000100330000##@25##杂类 ##1##000100250000##@31##函数收藏##1##000100310000##@29##函数库 ##5##000500290000##@28##类库##5##000500280000##@53##枚举 ##5##000500530000##@24##小工具##5##000500240000##@69##范例 ##5##000500690000##@57##模板库##5##000500570000##@55##收藏 ##5##000500550000##@35##函数库##7##000700350000##@27##类库 ##7##000700270000##@30##导航##9##000900300000##@78##范例 ##9##000900780000##@34##模板库##9##000900340000##@58##其他 ##9##000900580000##@32##Access##10##001000320000##@47##TSql##10##001000470000##@50## 数据表模板##10##001000500000##@79##参考##10##001000790000##@36##函数库 ##11##001100360000##@37##类库##11##001100370000##@39##函数库 ##12##001200390000##@76##函数库(控制台)##12##001200760000##@45##函数收藏 ##12##001200450000##@44##控件库##12##001200440000##@40##static 库 ##12##001200400000##@38##类库##12##001200380000##@46##名称空间 ##12##001200460000##@54##开发小工具##12##001200540000##@75##范例 ##12##001200750000##@52##其他##12##001200520000##@42##模板库 ##12##001200420000##@41##普通应用##13##001300410000##@56##模板库 ##13##001300560000##@43##模板库##14##001400430000##@48##函数库 ##15##001500480000##@49##类库##15##001500490000##@72##正则库 ##16##001600720000##@61##原始数据 ##16##001600610000##@60##Search And Replace##16##001600600000##@59##System##16##001600590000##@73##Data Structure##16##001600730000##@51##Server##16##001600510000##@62## 函数库##17##001700620000##@63##类库##17##001700630000##@64##模板库 ##17##001700640000##@66##函数库##18##001800660000##@67##类库 ##18##001800670000##@65##范例##18##001800650000##@68##模板库 ##18##001800680000##@70##算法模型##20##002000700000##@71##运算符及例子 ##20##002000710000##@77##其他 ##20##002000770000##@81##List##21##002100810000##@85##Footer##21##002100850000##@84##Header##21##002100840000##@83##SideBar##21##002100830000##@82##Page##21##002100820000##@80##Edit##21##002100800000##@186## 数据操作##22##000100220186##@190##文件##22##000100220190##@172##测试 ##22##000100220172##@187##数据操作 ##23##000100230187##@165##DOM##29##000500290165##@183##事件 ##29##000500290183##@182##时间日期##29##000500290182##@195##属性扩展 ##29##000500290195##@189##统计##32##001000320189##@175##基本操作 ##32##001000320175##@168##VBA##32##001000320168##@171##参考 ##32##001000320171##@192##文件函数##35##000700350192##@181##日期时间 ##39##001200390181##@191##文件操作##39##001200390191##@178##路径 ##39##001200390178##@188##数据操作##39##001200390188##@196##字符串 ##39##001200390196##@162##aspx 页模板##42##001200420162##@160##asax 页模板 ##42##001200420160##@169##XML##42##001200420169##@184##数据绑定 ##42##001200420184##@161##ascx 页模板 ##42##001200420161##@166##Html Templates##42##001200420166##@174##函数库 ##47##001000470174##@180##其他##47##001000470180##@170##版权写法 ##56##001300560170##@173##范例模板##65##001800650173##@179##普通正则 ##72##001600720179##@176##脚本##75##001200750176##@177##控件 ##75##001200750177##@185##数据绑定##75##001200750185##@193##页面 ##75##001200750193##@194##值转换 ##75##001200750194##@163##Category##80##002100800163##@167##Post and Edit##80##002100800167##@164##Display##82##002100820164"; var XSelectInstance = new XSelect(); var StartDt = new Date(); var Au = XSelectInstance.Get.Au(); document.title = Au.Subject + " " + Au.Version; XSelectInstance.Go(fXSelectIniter); XSelectInstance = null; defaultStatus = new Date()-StartDt; function fXSelectIniter(Param) { Param.Fields.Id = 0; Param.Fields.Text = 1; Param.Fields.Parent = 2; Param.Fields.Value = 3; Param.Element = "Cat"; Param.String = CatString; Param.Level = 3; Param.TopLevelDefaultValue = "0"; Param.TabText = "-"; Param.TabLen = 8; Param.Query = {}; Param.Query.Id = "ctreenode"; Param.Parent.Show = true; Param.Parent.Link.Impelement = true; Param.Parent.Link.Prefix = "?ctreenode="; Param.Parent.Link.Suffix = ""; Param.Parent.Link.Field = 3; Param.FixMemoryLeak = true; } // end function fXSelectIniter(Param) /*]]*/ </script> </body> </html> 3. XSelect.js // shawl.qiu JavaScript Document /*-----------------------------------------------------------------------------------*\ * shawl.qiu Javascript XSelect class v1.0 \*-----------------------------------------------------------------------------------*/ //---------------------------------begin class XSelect()-------------------------------// function XSelect() { // shawl.qiu code //------------------------------------begin initer //if(fIsFunc(fIniter)) fIniter(Param); //------------------------------------end initer //------------------------------------begin public variable //------------------------------------end public variable //------------------------------------begin private variable //---------------begin about var Au = {}; Au.Subject = "shawl.qiu Javascript XSelect class"; Au.Version = "v1.0"; Au.Name = "shawl.qiu"; Au.Email = "shawl.qiu@gmail.com"; Au.Blog = "http://blog.csdn.net/btbtd/"; Au.CreatedDate = "2007-11-9 v1.0"; Au.Update = {}; Au.Update["1"] = ""; //---------------end about var This = this; var Param = {}; Param.Fields = {}; Param.Fields.Id = 0; Param.Fields.Text = 1; Param.Fields.Parent = 2; Param.Fields.Value = 3; Param.Element = "Cat"; Param.String = ""; Param.Level = 3; Param.TopLevelDefaultValue = "0"; Param.TabText = "-"; Param.TabLen = 8; Param.Query = {}; Param.Query.Id = "ctreenode"; Param.Parent = {}; Param.Parent.Show = false; Param.Parent.IdPostfix = "ParentNode"; Param.Parent.Link = {} Param.Parent.Link.Impelement = false; Param.Parent.Link.Prefix = ""; Param.Parent.Link.Suffix = ""; Param.Parent.Link.Field = 3; Param.FixMemoryLeak = false; var PVar = {}; PVar.QueryString = ""; PVar.Array = []; PVar.ItemCount = 0; PVar.ArrayLen = 0; //------------------------------------end private variable //------------------------------------begin public method //-------------------Begin this.Get this.Get = {}; this.Get.Au = fGetAu; //-------------------End this.Get //-------------------Begin this.Set this.Set = {}; //-------------------End this.Set this.Go = fGo; //------------------------------------end public method //------------------------------------begin initer //if(fIsFunc(fIniter)) fIniter(Param); //------------------------------------end initer //------------------------------------begin private method function fGo(fIniter) { if(fIsFunc(fIniter)) fIniter(Param); if(fIsFunc(fIniter)) fIniter(Param); Param.Element = fSetObject(Param.Element, "菜单主域不能为空!"); Param.Element.innerHTML = ""; if(fIsEmpty(Param.String)) { fFatalError("菜单字串不能为空!"); } PVar.Array = fMakeTable(Param.String); PVar.ArrayLen = PVar.Array.length; if(PVar.ArrayLen===0) return; //alert(PVar.Array) PVar.QueryString = fQueryString(Param.Query.Id, true); Param.Element.options.length = 0; Param.Element.onchange = function() { var Opt = this[this.selectedIndex]; if(Param.Parent.Show) { var TempId = Param.Element.id+Param.Parent.IdPostfix; var TempEle = document.getElementById(TempId); if(TempEle==null) { TempEle = $("div"); TempEle.id = TempId; Param.Element.parentNode.insertBefore(TempEle, Param.Element); } TempEle.innerHTML = ""; var TempObj = Opt.ParentNode; if(typeof(TempObj)!="undefined"&&TempObj.constructor==Array) { var TempAr = []; var PArLen = PVar.Array.length; for(var i=0, j=TempObj.length; i<j; i++) { for(var I=0; I<PArLen; I++) { if(PVar.Array[I][Param.Fields.Id]==TempObj[i]) { if(Param.Parent.Link.Impelement) { TempAr.push("<a href='"); TempAr.push(Param.Parent.Link.Prefix); TempAr.push(PVar.Array[I][Param.Parent.Link.Field]); TempAr.push(Param.Parent.Link.Suffix); TempAr.push("'>"); } TempAr.push(PVar.Array[I][Param.Fields.Text]); if(Param.Parent.Link.Impelement) { TempAr.push("</a>"); } if(i<j-1) { TempAr.push(" -> "); } } } } // end for(var i=0, j=TempObj.length; i<j; i++) TempEle.innerHTML = TempAr.join(""); } // end if(typeof(this[this.selectedIndex].ParentNode)!="undefined") } // end if(Param.Parent.Show) //alert(Opt.ParentNode) return false; }; // end Param.Element.onchange fMakeDropDownList(PVar.Array, Param, PVar, "0", 0, []); if(fTrim(PVar.QueryString)!="") { for(var i=0; i<PVar.ArrayLen; i++) { if(Param.Element.options[i].value==PVar.QueryString) { //document.write(PVar.QueryString); Param.Element.selectedIndex = i; Param.Element.onchange(); break; } } } if((fCkBrs()===1||fCkBrs()===2)&&Param.FixMemoryLeak) { //onunload = function(){fFixMl();}; fPlusEvent(window, "onunload", fFixMl); } } // end function fGo function fGetAu(){ return Au; } //------------------------------------end private method } // shawl.qiu code //---------------------------------end class XSelect()---------------------------------// function fMakeDropDownList(oAr, Param, PVar, sCat, iLevel, ParentAr) { var iNextLevel = iLevel+1; var Len = oAr.length; for(var i=0; i<Len; i++) { if(oAr[i][Param.Fields.Parent]==sCat) { //document.write("<br/>"+oAr[i][Param.Fields.Parent]); fAddOption ( Param.Element , fStringSpace(Param.TabText, Param.TabLen*iLevel)+oAr[i][Param.Fields.Text] , oAr[i][Param.Fields.Value] , false , false , PVar.ItemCount ); var TempAr = ParentAr.slice(); if(iLevel<Param.Level) { TempAr.push(oAr[i][Param.Fields.Id]) Param.Element.options[PVar.ItemCount].ParentNode = TempAr.slice(); } PVar.ItemCount++; arguments.callee(oAr, Param, PVar, oAr[i][Param.Fields.Id], iNextLevel, TempAr.slice()); } // end if(oAr[i][Param.Fields.Parent]==sCat) } // end for(var i=0; i<Len; i++) } // end function fMakeDropDownList(oAr, Param, PVar, sCat, iLevel) function fAddOption(sle, text, value, defaultSelected, selected, iIndex) { if(!defaultSelected) defaultSelected = false; if(!selected) selected = false; if(!iIndex) iIndex = sle.options.length; sle.options[iIndex] = new Option(text, value, defaultSelected, selected); } // end function fAddOption(sle, text, value, defaultSelected, selected, iIndex) function fStringSpace(sStr, iTime) { // shawl.qiu code, return string var iLen=arguments.length; if(iLen===0) { sStr=' ' iTime=2; } else if(iLen===1) { iTime=2; return new Array(iTime+1).join(sStr); } else if(iLen===2) { if(iTime===0) return ""; return new Array(iTime+1).join(sStr); } else return sStr; } // end function fStringSpace function fMakeTable(Source, sColDelimiter, sRowDelimiter) {// shawl.qiu code, return array if(Source.constructor==String) Source = [Source]; if(!sColDelimiter) sColDelimiter = "##"; if(!sRowDelimiter) sRowDelimiter = "##@"; var Ar = Source[0].split(sRowDelimiter); var Len = Ar.length; for(var i=0; i<Len; i++) { Ar[i] = Ar[i].split(sColDelimiter); } // end for(var i=0; i<Len; i++) if(Len>2) { if(Ar[0].length!==Ar[Len-1].length) Ar.pop(); } return Ar; } // end function fMakeTable(Source, sColDelimiter, sRowDelimiter) function fMakeTable(Source, sColDelimiter, sRowDelimiter) {// shawl.qiu code, return array if(Source.constructor==String) Source = [Source]; if(!sColDelimiter) sColDelimiter = "##"; if(!sRowDelimiter) sRowDelimiter = "##@"; var Ar = Source[0].split(sRowDelimiter); var Len = Ar.length; for(var i=0; i<Len; i++) { Ar[i] = Ar[i].split(sColDelimiter); } // end for(var i=0; i<Len; i++) if(Len>2) { if(Ar[0].length!==Ar[Len-1].length) Ar.pop(); } return Ar; } // end function fMakeTable(Source, sColDelimiter, sRowDelimiter) function fIsFunc(Func) { // shawl.qiu code, return Boolean if(Func) if(Func.constructor==Function) return true; return false; } // end function fIsFunc(Func) function fIsEmpty(Source) {// shawl.qiu code, return string var bStr = false; if(Source.constructor==String) Source = [Source], bStr = true; return /^\s*$/.test(Source[0]); } // end function fIsEmpty(Source) function fSetObject(Obj, sMsg) {// shawl.qiu code, return Element if(!sMsg) sMsg = "无法获得对象!"; switch(Obj.constructor) { case String: Obj = document.getElementById(Obj); break; case Array: Obj = Obj[0]; break; } if(Obj==null) throw new Error(sMsg); return Obj; } // end function fSetObject(OldObj, NewObj, sMsg) function fFatalError(sMsg) { // shawl.qiu code, void return if(!sMsg) sMsg = "an fatal error occurring, program abort now!" throw new Error(sMsg); } // end function fFatalError(sMsg) function fPlusEvent(Obj, sEvtName, Func) {// shawl.qiu code, void return if(document.addEventListener) { sEvtName = sEvtName.replace(/^on/i, ""); Obj.addEventListener(sEvtName, Func, false); } else if(document.attachEvent) { if(Obj[sEvtName]==null) { Obj[sEvtName] = Func; } else { Obj.attachEvent(sEvtName, Func); } } } // end function fPlusEvent function fTrim(Source) {// shawl.qiu code, return string var bStr = false; if(Source.constructor==String) Source = [Source], bStr = true; Source[0] = Source[0].replace(/^\s+|\s+$/g,''); if(bStr) return Source[0]; } // end function fTrim(Source) function fFixMl(oEle) { // shawl.qiu code, void return if(!oEle)oEle=document.body; var atr=oEle.attributes; if(atr) for(var i=0, j=atr.length; i<j; i++) if(typeof oEle[atr[i].name]=='function')oEle[atr[i].name]=null; if(oEle.childNodes) for(var i=0, j=oEle.childNodes.length; i<j; i++) arguments.callee(oEle.childNodes[i]); } // end function fFixMl(oEle) function fQueryString(sKey, bDecode, sLocationSearch, bDebug) { // shawl.qiu code, return string var Debug = bDebug; if(!sLocationSearch) sLocationSearch = location.search; if(!sKey) return sLocationSearch; var sTemp = sLocationSearch.replace(/^\?/,""); if(Debug) alert(sTemp); if(sTemp==""&&bDebug) throw new Error("页面 sLocationSearch 没有查询参数!"); var Ar = sTemp.split("&"); var sFinal = ""; var iArLen = Ar.length; var iArCount = 0; while(iArCount++<iArLen) { if(Debug) { alert("Ar[iArCount-1].toLowerCase(): "+Ar[iArCount-1].toLowerCase()); alert("sKey.toLowerCase()+'=': "+sKey.toLowerCase()); } var arQsByPart = Ar[iArCount-1].split("="); if(arQsByPart[0].toLowerCase()==sKey.toLowerCase()) { if(arQsByPart.length==1) continue; sFinal = arQsByPart[1]; if(bDecode) sFinal = decodeURI(sFinal); break; } } // end while(iArCount++iArLen) if(sFinal==""&&bDebug) throw new Error("没有键为 "+sKey+" 的查询参数!"); return sFinal; } // end function fQueryString function $(sTag){return document.createElement(sTag);} function _(sText){return document.createTextNode(sText);} function fCkBrs() {// shawl.qiu script, return integer switch (navigator.appName) { case 'Opera': return 2; case 'Netscape': return 3; default: return 1; } } // end function fCkBrs // var XSelectInstance = new XSelect(); // // var Au = XSelectInstance.Get.Au(); // document.title = Au.Subject + " " + Au.Version; // // XSelectInstance.Go(fXSelectIniter); // XSelectInstance = null; // function fXSelectIniter(Param) // { // // } // end function fXSelectIniter(Param) |
| 文章相关信息: | |
|---|---|
| 主题: | 无限级菜单结构 与 列表框无限级联动, 类 XSelect by shawl.qiu |
| 发表者: | shawl.qiu |
| 电子邮件: | shawl.qiu@gmail.com |
| QQ: | 908202921 |
| MSN: | btbtd@msn.com |
| Homepage: | http://www.btbtd.org/ |
| Blog: | http://blog.csdn.net/btbtd/ |
| 发表日期: | 2007-11-21 20:59:22 |
| 更新日期: | 2007-11-21 20:59:22 |
| 来源引用: | shawl.qiu CSharp DotNet 个人资料管理系统 |
| 引用本页: | http://gi.2288.org/mod/article/display/Default.aspx?aid=18090 |