LingerUI中3级联动的数据库.docx

资源描述

ligerui中3级联动的数据库例子分类： ASP.NETAJAX2011-09-29 22:092158人阅读评论(7)收藏举报在线测试例子: 效果截图: 后台数据库是sql2k,一共一张表,3级联动是通过匹配code来搞前台代码: [html] view plaincopyprint? 1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="combobox.aspx.cs" Inherits="bobox" %> 2. 3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4. 5. <html xmlns="http://www.w3.org/1999/xhtml" > 6. <head runat="server"> 7. <title></title> 8. <link href="../lib/ligerUI/skins/aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> 9. <script src="../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> 10. <script src="../lib/ligerUI/js/ligerui.min.js" type="text/javascript"></script> 11. <script src="../lib/json2.js" type="text/javascript"></script> 12. 13. <style type="text/css"> 14. body{padding:10px} 15. .fl{float:left} 16. </style> 17. 18. <script type="text/javascript"> 19. var cmb1,cmb2,cmb3; 20. $(function () { 21. cmb1=$("#cmb1").ligerComboBox({data: null, isMultiSelect: false,onSelected: function (newvalue){setdata(cmb2,"/service/DataHandler.ashx?View=expcity&stateid="+newvalue);}}); 22. cmb2=$("#cmb2").ligerComboBox({data: null, isMultiSelect: false,onSelected: function (newvalue){setdata(cmb3,"/service/DataHandler.ashx?View=expsubcity&cityid="+newvalue);}}); 23. cmb3=$("#cmb3").ligerComboBox({data: null, isMultiSelect: false }); 24. 25. setdata(cmb1,"/service/DataHandler.ashx?View=expstate"); //页面加载时，先加载cmb1的值 26. }); 27. 28. function setdata(obj,url) 29. { 30. $.getJSON(url+"&r="+Math.round(Math.random() * 1000000).toString(), 31. function(json) { 32. obj.setData(json); //把json塞到下拉框里面去 33. $("#txtjson").val(JSON2.stringify(json)); //把json转换为字符串，塞到textarea里，用到了json2.js 34. } 35. ); 36. } 37. 38. function getid() 39. { 40. $.ligerDialog.success( $("#cmb1_val").val()+"_"+$("#cmb2_val").val()+"_"+$("#cmb3_val").val()+"<br/><br/>"+ 41. $("#cmb1").val()+"_"+$("#cmb2").val()+"_"+$("#cmb3").val() 42. ); //下拉框取后台id的用法，每个ligerui的下拉框会创建一个id_val的hidden用来存放id 43. } 44. </script> 45. </head> 46. <body> 47. <form id="form1" runat="server"> 48. <div style="display:inline-block;"> 49. <div class="fl">区域选择:</div> 50. <div class="fl"><input id="cmb1" /></div> 51. <div class="fl"><input id="cmb2" /></div> 52. <div class="fl"><input id="cmb3" /></div> 53. <div class="fl" style="padding-left:20px"><input type="button" class="l-button" value="获取ID" style="width:100px" onclick="getid();" /></div> 54. </div> 55. <div style="padding-top:100px"> 56. json监视:<br/> 57. <textarea id="txtjson" cols="20" rows="10" style="width:400px;height:200px;"></textarea> 58. </div> 59. </form> 60. </body> 61. </html> <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="combobox.aspx.cs" Inherits="bobox" %> <!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 runat="server"> <title></title> <link href="../lib/ligerUI/skins/aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> <script src="../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="../lib/ligerUI/js/ligerui.min.js" type="text/javascript"></script> <script src="../lib/json2.js" type="text/javascript"></script> <style type="text/css"> body{padding:10px} .fl{float:left} </style> <script type="text/javascript"> var cmb1,cmb2,cmb3; $(function () { cmb1=$("#cmb1").ligerComboBox({data: null, isMultiSelect: false,onSelected: function (newvalue){setdata(cmb2,"/service/DataHandler.ashx?View=expcity&stateid="+newvalue);}}); cmb2=$("#cmb2").ligerComboBox({data: null, isMultiSelect: false,onSelected: function (newvalue){setdata(cmb3,"/service/DataHandler.ashx?View=expsubcity&cityid="+newvalue);}}); cmb3=$("#cmb3").ligerComboBox({data: null, isMultiSelect: false }); setdata(cmb1,"/service/DataHandler.ashx?View=expstate"); //页面加载时，先加载cmb1的值 }); function setdata(obj,url) { $.getJSON(url+"&r="+Math.round(Math.random() * 1000000).toString(), function(json) { obj.setData(json); //把json塞到下拉框里面去 $("#txtjson").val(JSON2.stringify(json)); //把json转换为字符串，塞到textarea里，用到了json2.js } ); } function getid() { $.ligerDialog.success( $("#cmb1_val").val()+"_"+$("#cmb2_val").val()+"_"+$("#cmb3_val").val()+"<br/><br/>"+ $("#cmb1").val()+"_"+$("#cmb2").val()+"_"+$("#cmb3").val() ); //下拉框取后台id的用法，每个ligerui的下拉框会创建一个id_val的hidden用来存放id } </script> </head> <body> <form id="form1" runat="server"> <div style="display:inline-block;"> <div class="fl">区域选择:</div> <div class="fl"><input id="cmb1" /></div> <div class="fl"><input id="cmb2" /></div> <div class="fl"><input id="cmb3" /></div> <div class="fl" style="padding-left:20px"><input type="button" class="l-button" value="获取ID" style="width:100px" onclick="getid();" /></div> </div> <div style="padding-top:100px"> json监视:<br/> <textarea id="txtjson" cols="20" rows="10" style="width:400px;height:200px;"></textarea> </div> </form> </body> </html> 后台引用ashx里的代码: [csharp] view plaincopyprint? 1. using System; 2. using System.Collections; 3. using System.Data; 4. using System.Linq; 5. using System.Web; 6. using System.Web.Services; 7. using System.Web.Services.Protocols; 8. using Newtonsoft.Json; 9. using Newtonsoft.Json.Converters; 10. using System.Data.Sql; 11. using System.Data.SqlClient; 12. using System.Configuration; 13. 14. namespace test.service 15. { 16. /// <summary> 17. /// $codebehindclassname$ 的摘要说明 18. /// </summary> 19. [WebService(Namespace = "http://tempuri.org/")] 20. [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 21. 22. public class DataHandler : IHttpHandler 23. { 24. HttpContext Context; 25. string json = ""; 26. 27. public void ProcessRequest(HttpContext context) 28. { 29. Context = context; 30. context.Response.ContentType = "text/plain"; 31. 32. LoadDataToJSON(); 33. context.Response.Write(json); 34. context.Response.End(); 35. } 36. 37. string GetQueryString(string name) 38. { 39. return Context.Request.Params[name]; 40. } 41. 42. string View 43. { 44. get { return Context.Request.QueryString["View"]; } 45. } 46. 47. void LoadDataToJSON() 48. { 49. switch (View) //这里么写写sql语句，或者调存储过程 50. { 51. case "expstate": 52. GetNormalData("select id=min(code),text=state from city(nolock) group by state order by min(code)"); 53. break; 54. case "expcity": 55. GetNormalData("select id=code,text=city from city(nolock) where left(code,2)='"+ 56. GetQueryString("stateid").Substring(0,2)+ 57. "' and right(code,2)='00' and right(code,4)<>'0000'"); 58. break; 59. case "expsubcity": 60. GetNormalData("select id=code,text=city from city(nolock) where left(code,4)='" + 61. GetQueryString("cityid").Substring(0,4) +"' and right(code,2)<>'00'"); break; 62. } 63. } 64. 65. void GetNormalData(string SQL) //SQL查询，返回json字符串，这个方法是普通的datatable转json 66. { 67. SqlConnection Conn = new SqlConnection(ConfigurationManager.ConnectionStrings["Conn"].ToString()); 68. SqlDataAdapter DA = new SqlDataAdapter(SQL, Conn); 69. Conn.Open(); 70. DataSet DS = new DataSet(); 71. DA.Fill(DS, "c0"); 72. Conn.Close(); 73. string rs = JsonConvert.SerializeObject(DS.Tables["c0"], new DataTableConverter()); 74. json = rs; 75. } using System; using System.Collections; using System.Data; using System.Linq; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using Newtonsoft.Json; using Newtonsoft.Json.Converters; using System.Data.Sql; using System.Data.SqlClient; using System.Configuration; namespace test.service { /// <summary> /// $codebehindclassname$ 的摘要说明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class DataHandler : IHttpHandler { HttpContext Context; string json = ""; public void ProcessRequest(HttpContext context) { Context = context; context.Response.ContentType = "text/plain"; LoadDataToJSON(); context.Response.Write(json); context.Response.End(); } string GetQueryString(string name) { return Context.Request.Params[name]; } string View { get { return Context.Request.QueryString["View"]; } } void LoadDataToJSON() { switch (View) //这里么写写sql语句，或者调存储过程 { case "expstate": GetNormalData("select id=min(code),text=state from city(nolock) group by state order by min(code)"); break; case "expcity": GetNormalData("select id=code,text=city from city(nolock) where left(code,2)='"+ GetQueryString("stateid").Substring(0,2)+ "' and right(code,2)='00' and right(code,4)<>'0000'"); break; case "expsubcity": GetNormalData("select id=code,text=city from city(nolock) where left(code,4)='" + GetQueryString("cityid").Substring(0,4) +"' and right(code,2)<>'00'"); break; } } void GetNormalData(string SQL) //SQL查询，返回json字符串，这个方法是普通的datatable转json { SqlConnection Conn = new SqlConnection(ConfigurationManager.ConnectionStrings["Conn"].ToString()); SqlDataAdapter DA = new SqlDataAdapter(SQL, Conn); Conn.Open(); DataSet DS = new DataSet(); DA.Fill(DS, "c0"); Conn.Close(); string rs = JsonConvert.SerializeObject(DS.Tables["c0"], new DataTableConverter()); json = rs; } 代码应该贴全了，我还添加了一些注释，如果有疑问，留言吧，有在线测试例子哦，我测试了IE8,FF,chrome，都兼容 ligerui中的tree的异步动态加载数据库例子在线测试: 截图: 源码:页面右键就在里面，这里我也贴出来 [html] view plaincopyprint? 1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2. <html xmlns="http://www.w3.org/1999/xhtml" > 3. <head> 4. <title>tree</title> 5. <link href="../lib/ligerUI/skins/aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> 6. <script src="../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> 7. <script src="../lib/ligerUI/js/ligerui.min.js" type="text/javascript"></script> 8. 9. <script type="text/javascript"> 10. var manager = null; 11. $(function () 12. { 13. $("#tree1").ligerTree( 14. { 15. checkbox:false, 16. nodeWidth : 250, 17. onSelect: onSelect 18. }); 19. manager = $("#tree1").ligerGetTreeManager(); 20. }); 21. 22. function onSelect(note) //这里的异步加载逻辑取决于你的数据库设计，把选中节点的id传回去，传回子节点json然后加载 23. { 24. if (note.data.id=="0") 25. { 26. if (note.data.children && note.data.children.length == 0) 27. manager.loadData(note.target, "/service/DataHandler.ashx?View=expstate"); //加载省和直辖市 28. } 29. else 30. { 31. if (note.data.children==undefined) 32. { 33. if (note.data.id.toString().substr(2,2)=="00") 34. { 35. manager.loadData(note.target, "/service/DataHandler.ashx?View=expcity&stateid="+ note.data.id); //加载城市 36. } 37. else 38. { 39. if (note.data.id.toString().substr(4,2)=="00") 40. manager.loadData(note.target, "/service/DataHandler.ashx?View=expsubcity&cityid="+ note.data.id); //加载区县 41. } 42. } 43. } 44. } 45. 46. </script> 47. </head> 48. 49. <body> 50. <div style="width:400px; height:300px;border:solid 1px blue; margin-top:50px; margin-left:50px; overflow:auto"> 51. <ul id="tree1" > 52. <li isexpand="false" id="0"><span>我们都有一个家，名字叫中国</span><ul></ul></li> 53. </ul> 54. </div> 55. <div style="display:none"> 56. </div> 57. </body> 58. </html> <!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> <title>tree</title> <link href="../lib/ligerUI/skins/aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" /> <script src="../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="../lib/ligerUI/js/ligerui.min.js" type="text/javascript"></script> <script type="text/javascript"> var manager = null; $(function () { $("#tree1").ligerTree( { checkbox:false, nodeWidth : 250, onSelect: onSelect }); manager = $("#tree1").ligerGetTreeManager(); }); function onSelect(note) //这里的异步加载逻辑取决于你的数据库设计，把选中节点的id传回去，传回子节点json然后加载 { if (note.data.id=="0") { if (note.data.children && note.data.children.length == 0) manager.loadData(note.target, "/service/DataHandler.ashx?View=expstate"); //加载省和直辖市 } else { if (note.data.children==undefined) { if (note.data.id.toString().substr(2,2)=="00") { manager.loadData(note.target, "/service/DataHandler.ashx?View=expcity&stateid="+ note.data.id); //加载城市 } else { if (note.data.id.toString().substr(4,2)=="00") manager.loadData(note.target, "/service/DataHandler.ashx?View=expsubcity&cityid="+ note.data.id); //加载区县 } } } } <

展开阅读全文