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

最新推荐文章于 2023-05-27 23:48:40 发布

vazumi

最新推荐文章于 2023-05-27 23:48:40 发布

阅读量7.4k

点赞数

分类专栏： AJAX ASP.NET 文章标签：数据库 json function dataset string class

本文链接：https://blog.csdn.net/vazumi/article/details/6835430

版权

ASP.NET 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

AJAX

6 篇文章 0 订阅

订阅专栏

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

效果截图:

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

前台代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="combobox.aspx.cs" Inherits="test.example.combobox" %>

<!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" οnclick="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里的代码:

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

vazumi

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
10
评论
ligerui中3级联动的数据库例子

在线测试例子: http://vazumi.net.s1.kingidc.net/example/combobox.aspx效果截图:后台数据库是sql2k,一共一张表,3级联动是通过匹配code来搞前台代码: body{p
复制链接

扫一扫