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") != -)

                    { 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