ASP.NET MVC页面UI之多级数据选择UI（行业信息、专业信息、职位信息的选择）

多级数据选择操作在开发中是常见的操作，比如选择行业信息时，一般有个大类，每个大类下边又包含很多小类，本文简单实现了弹出窗口一级一级选择功能。

本文博客出处：http://www.kwstu.com/ArticleView/admin_201392163458545 转载请注明！

一、效果图：

二、页面代码

    <script src="../../Content/Js/selectlist.js"></script>
 
    <script src="../../Content/Js/systools.js"></script>
 
    <link href="../../Content/Css/kwstu.ui.css" rel="stylesheet" />
 
    <script src="../../Content/Js/jquery.divbox.js"></script>
 
@Html.EditorFor(model => model.TRADENAME)@Html.HiddenFor(model => model.TRADEID)

三、JS代码

1、JS调用代码

$("#TRADENAME").focus(function () { GetTrade($(this).val(), "TRADENAME", "TRADEID", "/SysTools/GetFirstTradeList", "/SysTools/QueryLastTradeList", "/SysTools/GetOtherTradeList"); });

2、JS执行代码

//行业选择
 
    function GetTrade(message, tmp1, tmp2, tmp3, tmp4, tmp5) {
 
        name1 = tmp1; name2 = tmp2; url1 = tmp3; url2 = tmp4; url3 = tmp5;
 
        //设置异步传输参数
 
        var option = {
 
            url: url1,
 
            type: 'Get',
 
            chche: false,
 
            dataType: 'json',
 
            data: { Message: message }, //发送服务器数据
 
            success: function (data) {  //成功事件
 
                $("#kwstu_select ul li").die();
 
                $("#kwstu_select").remove();
 
                iptName = $(this).attr("id");
 
                //var iptOffSet = $("#TRADENAME").offset();
 
                //var iptLeft = iptOffSet.left;
 
                //var iptTop = iptOffSet.top + 20;
 
                var str = "<div id='kwstu_select'><span>请选择行业<a id='fh'>返回第一层列表</a>&nbsp;&nbsp;&nbsp;&nbsp;快速查 找：<input id='kquery' type='text'/><font color=red>支持拼音首字母查询</font><a id='gb'>[&nbsp;关闭&nbsp;]</a></span><div id=info></div><ul></ul></div>";
 
                var str2 = "";
 
                $.each(data, function (i, item) {
 
                    str2 = str2 + "<li id='" + data[i].Value + "'>" + data[i].Text + "</li>";
 
                    
 
                });
 
                $("body").append(str);
 
                  $("#kwstu_select ul").append(str2);
 
                //$("#kwstu_select").css({ left: iptLeft + "px", top: iptTop + "px" });
 
                $("#kwstu_select span a#fh").bind("click", function () {
 
                    $("#kwstu_select ul").empty();
 
                    $("#info").empty();
 
                    $("#info").hide();
 
                    $("#kwstu_select ul").append(str2);
 
                });
 
                $("#kwstu_select span a#gb").bind("click", function () {
 
                    $("#kwstu_select").CloseDiv();
 
                });
 
                $("#kwstu_select").OpenDiv();
 
                //查询输入框获得焦点
 
                $('#kquery').focus();
 
                //快速查询
 
                $("#kquery").focus(function () {
 
                    var bind_name = 'input';
 
                    if (navigator.userAgent.indexOf("MSIE") != -1)
 
                    { bind_name = 'propertychange'; }
 
                    $(this).bind(bind_name, function () {
 
                        var liId = $(this).attr("id");
 
                        var liText = $(this).val();
 
                        $("#info").show();
 
                        if (liText != "") {
 
                            var option = {
 
                                url: url2,
 
                                type: 'Get',
 
                                dataType: 'json',
 
                                data: { Message: liText }, //发送服务器数据
 
                                success: function (data) {  //成功事件
 
                                    listr = "";
 
                                    $.each(data, function (i, item) {
 
                                        listr = listr + "<li id='" + data[i].Value + "'>" + data[i].Text + "</li>";
 
                                    });
 
                                    $("#kwstu_select ul").empty();
 
                                    $("#kwstu_select ul").append(listr);
 
                                },
 
                                error: function (XMLHttpRequest, textStatus, errorThrown) { //发送失败事件
 
                                    alert(textStatus);
 
                                }
 
                            };
 
                            //进行异步传输
 
                            $.ajax(option);
 
                        }
 
                    })
 
                })
 
                $("#kwstu_select ul li").live("click", liBind);
 
            },
 
            error: function (XMLHttpRequest, textStatus, errorThrown) { //发送失败事件
 
                alert(textStatus);
 
            }
 
        };

四、后台代码

 

///////////////////////////////行业联动下拉列表//////////////////////
 
      /// 第一层行业
 
      public ActionResult GetFirstTradeList(string message)
 
      {
 
          List<TSSYS_TRADE_BANK> list = db.TSSYS_TRADE_BANK.Where(c=>c.PID=="ROOT").OrderBy(c=>c.ID).ToList();
 
          TSSYS_TRADE_BANK empty = new TSSYS_TRADE_BANK();
 
          SelectList pList = new SelectList(list, "ID", "NAME");
 
          return Json(pList, JsonRequestBehavior.AllowGet);
 
      }
 
      /// 第一层以后的行业
 
      public ActionResult GetOtherTradeList(string message)
 
      {
 
          List<TSSYS_TRADE_BANK> list = db.TSSYS_TRADE_BANK.Where(c => c.PID == message).OrderBy(c => c.ID).ToList();
 
          SelectList pList = new SelectList(list, "ID", "NAME");
 
          return Json(pList, JsonRequestBehavior.AllowGet);
 
      }
 
      /// 快速查询
 
      public ActionResult QueryLastTradeList(string message)
 
      {
 
          List<TSSYS_TRADE_BANK> list = db.Database.SqlQuery<TSSYS_TRADE_BANK>("Select ID,NAME,PID,SUBCLASSNO,SORT,ORDERNUM,EFFECT,ISSUB from TS.TSSYS_TRADE_BANK where (py(name) like '%" + message.ToUpper() + "%' or name like '%" + message + "%') and id not in (select pid from tssys_trade_bank) order by id").ToList();
 
          SelectList pList = new SelectList(list, "ID", "NAME");
 
          return Json(pList, JsonRequestBehavior.AllowGet);
 
      }

五、相关资源下载

http://www.kwstu.com/ResourcesView/admin_201392163048177