ligerui中3级联动的数据库例子

在线测试例子:http://vazumi.net.s1.kingidc.net/example/combobox.aspx 效果截图: 后台数据库是sql2k,一共一张表,3级联动是通过匹配code来搞 前台代码: %@ Page Language=C# AutoEventWireup=true CodeBehind=combobox.aspx.cs Inherits=test.example.combo

在线测试例子:  http://vazumi.net.s1.kingidc.net/example/combobox.aspx

效果截图:

后台数据库是sql2k,一共一张表,3级联动是通过匹配code来搞

前台代码:

    <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>


    

区域选择:

json监视:

后台引用ashx里的代码:

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，都兼容