通用多级下拉，js为主

最新推荐文章于 2024-04-22 19:08:07 发布

jontian

最新推荐文章于 2024-04-22 19:08:07 发布

阅读量415

点赞数

分类专栏：技术点滴

本文链接：https://blog.csdn.net/jontian/article/details/52327284

版权

技术点滴专栏收录该内容

1 篇文章 0 订阅

订阅专栏

java项目开始了，需要做个多级下拉，网上是有一大堆，但代码太长或不符合自己的要求；还来项目用的又觉得设计不太合理，所以再写一个吧。因为自己用.net比较多些，所以还是用.net项目先写，然后再发给组员移到java中。

为保证一个页面中用到多次一样的多级下拉和多个本控件，把主要js单独写了两个方法，所以参数有点多。

//加载树形下拉条，obj加载对象，code上级编码，url加载地址，nullName空值显示名称，nameCol名称列, valueCol值列, codeCol树编码列, selectCode选择树编码
function TreeDropDownList(obj, code, url, nullName, nameCol, valueCol, codeCol, selectCode) {
    var childId = "_d";
        $.ajax({
            cache: false,
            type: "POST",
            url:url,
            data: { "code": code },
            dataType: "json",
            success: function (data) {
                if (data.success == true) {
                    if (nullName != '')
                        $(obj).append('<option value="">' + nullName + '</option>');
                    $(data.list).each(function (item) {
                        $(obj).append('<option ' + (selectCode.indexOf(this[codeCol]) == 0 ? 'selected="selected"' : '') + ' value="' + this[valueCol] + ',' + this[codeCol] + '">' + this[nameCol] + '</option>');
                        //如果是选中的项且选择值大于当前级
                        if (selectCode.indexOf(this[codeCol]) == 0 && selectCode.length >= this[codeCol].length) {
                            var id = $(obj).attr("id");
                            //添加下一层
                            $(obj).after('<select name="' + id + childId + '" id="' + id + childId + '" οnchange="TreeDropDownSelect(this,\'' + url + '\',\'' + nullName + '\',\'' + nameCol + '\',\'' + valueCol + '\',\'' + codeCol + '\')" style="display:none;"></select>');
                            //加载下一层
                            TreeDropDownList($("#" + id + childId), this[codeCol], url, nullName, nameCol, valueCol, codeCol, selectCode);
                        }
                    });
                    $(obj).show();
                }
                else
                    $(obj).hide();
            },
            error: function (xhr, ajaxOptions, thrownError) {
                $(obj).hide();
            }
        });
    }
    function TreeDropDownSelect(obj, url, nullName, nameCol, valueCol, codeCol)
    {
        var childId = "_d";
        var values = $(obj).val().split(",");
        var value = values[0];
        var code = values[1];
        var id = $(obj).attr("id");
        var mainId = id.substring(0, id.indexOf(childId));
        //删除所有子列表
        $('select[id^="'+id+'_"]').remove();
        if(value==""){
            //值为上一层
            var parentValue="";
            if (id.indexOf(childId + "_") > 0) {
                var values = $("#" + id.substring(0, id.length - 2)).val().split(",");
                parentValue = values[0];
            }
            $('#' + mainId).val(parentValue);
        }else{
            //设置值为选择值
            $("#" + mainId).val(value);
            //添加下一层
            $(obj).after('<select name="' + id + childId + '" id="' + id + childId + '" οnchange="TreeDropDownSelect(this,\'' + url + '\',\'' + nullName + '\',\'' + nameCol + '\',\'' + valueCol + '\',\'' + codeCol + '\')" style="display:none;"></select>');
            //加载下一层
            TreeDropDownList($("#" + id + childId), code, url, nullName, nameCol, valueCol, codeCol,'');
        }
    }

EditorTemplates中的编辑模块，主要思路是放个hidden用于存放得到的值，每次选择时加一个下拉条，Id加上”_d“来标识，选择空值时把所有下级删除。初始化时如有值用递归方式加载到选择中的值。因为要考虑初始值和选择值有可能是树编码也可能是Id，所以value里的格式是”id,treeCode“。

注：树编码采用分段数字方式，如每3位为一段001001001001即为第四级。

@model string
@{
    /*使用方法
    @Html.EditorFor(model => model.TreeCode,"FoodsTypeDropList",new {nullName="请选择..."})
    */
    var url = Url.Content("~/FoodsType/List");
    var clientId = ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty);
    object nullName = null;
    if (ViewData.ContainsKey("nullName"))
    {
        nullName = ViewData.FirstOrDefault(x => x.Key == "nullName").Value;
    }
}
@Html.HiddenFor(model => model)
<select name="@(clientId+"_d")" id="@(clientId+"_d")" οnchange="TreeDropDownSelect(this,'@url','@nullName', 'Name', 'TreeCode', 'TreeCode')"></select>
<script type="text/javascript">
    $(document).ready(function () {
        TreeDropDownList($("#@clientId" + "_d"), "", "@url", "@nullName", "Name", "TreeCode", "TreeCode","@Model");
    });
</script>

获取数据的json格式success来判断是否有返回数据，示例代码如下：

public ActionResult List(string code)
        {
            var list = _FoodsTypeBll.GetTypeList(code);
            return new JsonResult { Data = new { list = list, success = list.Count>0 } };
        }

如果初始化值和选择值不是treeCode，需要先获取treeCode,示例如下：

    string selectCode = "";
    if (Model != Guid.Empty)
    {
        var foods = _FoodsTypeBll.GetModelById(Model);
        if (foods != null)
        {
            selectCode = foods.TreeCode;
        }
    }

如果是java，tag示例如下(未验证，可能有错误)；

<%--使用方法：
1、引用 <%@ taglib prefix="formTag" tagdir="/WEB-INF/tags" %>
2、<formTag:prarmeterTreeDrop name="unitId" id="unitId" value="${unitId}" nullName="请选择..." />
--%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<%@ tag body-content="empty" pageEncoding="utf-8" %>
<%@ tag dynamic-attributes="tagAttrs" %>
<%@ attribute name="name" required="true"%>
<%@ attribute name="value" required="true"%>
<%@ attribute name="id" required="true"%>
<%@ attribute name="nullName" %>

<input type="hidden" id="${id}" name="${name}" value="${value}" />
<select name="${id}_d" id="${id}_d" οnchange="TreeDropDownSelect(this,'/FoodsType/List','${nullName}', 'Name', 'id', 'TreeCode','')"></select>
<script type="text/javascript">
    $(document).ready(function () {
        TreeDropDownList($("#${id}_d"), "", "/FoodsType/List", "${nullName}", "Name", "id", "TreeCode","${value}");
    });
</script>