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>