省市区域modal模态框设计(项目总结1)

省市区域modal模态框设计

最近两个项目中都用到了省市区域选择功能，用户可以定位到省，市或者更细粒度到街道，这依赖于基础数据提供到几级地市。其实，对码农来讲这样的功能不算难，比较简单，主要在于样式和jquery效果的编写。今天拿出来分享下，欢迎各位大神指点。

网上也有其他的案例，普遍采用三级联动Select效果，本文使用Bootstrap中的modal插件来做展示效果。

1：http://www.sucaihuo.com/js/34.html

2：http://www.jq22.com/jquery-info448

废话不多说，先看下效果图吧！



不知道这样的设计你是否喜欢，喜欢就留言点个赞~~~

功能拆分

Bootstrap modal模态框

后台Controller编写

Jquery追加Div

文本内容显示

Modal模态框

个人倾向使用modal，因为它是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动，其div内容是父页面中一部分，非ifram结构，所以在父子窗体之间数据传递变得简单，modal主要提供信息、交互等页面效果。

关于modal详细介绍可打开此链接：

http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html

modal用法相对简单，同时可设置modal事件来初始化数据或者关闭窗口等等事件，还是比较好用的。

Modal事件方法：

事件	描述	实例
show.bs.modal	在调用 show 方法后发。	$(‘#identifier’).on(‘show.bs.modal’, function () {// 执行一些动作…})
shown.bs.modal	当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。	$(‘#identifier’).on(‘shown.bs.modal’, function () {// 执行一些动作…})
hide.bs.modal	当调用 hide 实例方法时触发。	$(‘#identifier’).on(‘hide.bs.modal’, function () {// 执行一些动作…})
hidden.bs.modal	当模态框完全对用户隐藏时触发。	$(‘#identifier’).on(‘hidden.bs.modal’, function () {// 执行一些动作…})

相关代码

<!-- 页面添加地区选择模态框-->
<div class="modal fade" id="myModal" style="margin-top: 100px;" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<h4 class="modal-title">
<ol class="breadcrumb" id="breadcrumb" style="margin-bottom:0px;text-align:center;">
<li class="reginli" data-did="0"><a href="#" onclick="changeRegion($(this))">全国</a></li>
</ol>
</h4>
</div>
<div class="modal-body">
<table class="table table-hover" style="border: hidden;">
<thead></thead>
<tbody id="detailTbody">
</tbody>
</table>
</div>
<div class="modal-footer" style="margin-top: -30px;">
<button type="button" class="btn btn-primary btn-ts-confirm" onclick="confirmBtn();">
确定</button>
</div>
</div><!-- /.modal-conmodal-content -->
</div><!-- /.modal -->
</div>

选中地区后li事件和确定按钮事件:

// click触发事件;
function clickEvent(obj) {
$(".reginli").removeClass('active');
var li = "";
li = '<li class="active reginli" data-did="' + $(obj).attr('data-did') + '">' + '<a href="#" onclick="changeRegion($(this))">' + $(obj).text() + '</a></li>'
// 追加li;
$("#breadcrumb").append(li);
// 设置parent编码;
$(".reginli").each(function () {
if ($(this).hasClass('active')) {
parent = $(this).attr('data-did');
}
;
});
// 同时请求后台查询数据;
ajaxFunc($(obj).attr('data-did'));
}

/**
* 确定按钮事件;
*/
function confirmBtn() {

var content = "";
ids.length = 0;
$(".reginli").each(function (index, element) {
if ($(element).attr('data-did') != '0') {  // 排除全国;
ids.push($(element).attr('data-did'));
if (index == ($(".reginli").length - 1)) {
content += $(element).find('a').text();
} else {
content += $(element).find('a').text() + "-";
}
}
});
$("#myModal").modal('hide');
$("#regionText").val(content);
}

初始化请求后台获取相关数据:

$(function () {

// 模态框打开后初始化数据;
$('#myModal').on('shown.bs.modal', function () {
ajaxFunc(parent);
})

// 清空;
$("#resetBtn").on('click', function () {
$("#form1")[0].reset();
ids.length = 0;
});
});
// 异步请求数据;
function ajaxFunc(parent) {
var url = "#springUrl('/region/choose/')" + parent;
$.ajax({
url: url,
type: "get",
cache: true,
datatype: 'json',
success: function (data) {
//清空表格;
$("#detailTbody").empty();
if (data && data.flag) {
var list = data.dataList;
if (list.length > 0) {  // 有数 据则拼接td
var tds = new Array();
$(list).each(function (index, element) {
tds.push('<td><a href="javascript:void(0);" data-did="' + element.code + '" onclick="clickEvent($(this))">' + element.name + '</a></td>');
if (tds.length == 4) {
$("#detailTbody").append('<tr>' + tds + '</tr>');
tds.length = 0;
}
});
$("#detailTbody").append('<tr>' + tds + '</tr>');
} else { // 无数据直接提示信息;
var td = ""
td = "<td colspan='4'>该项已经没有子项。</td>>";
$("#detailTbody").append('<tr>' + td + '</tr>');
}
}
}
});
}

后台请求处理代码：

/**
* 根据编码获取下级地域
* @return
*/
@ResponseBody
@Permission("3001")
@RequestMapping(value = "/choose/{parent}",method = RequestMethod.GET,produces = MediaType.APPLICATION_JSON_UTF8_VALUE)
public String getRegionData(@PathVariable String parent){
JSONObject json = new JSONObject();
RegionT regionT = new RegionT();
regionT.setParent(parent);
List<RegionT> regionTs =null;
try{
regionTs = iRegionTService.selectList(regionT);
if(regionTs!=null && regionTs.size()>0){
json.put("dataList",regionTs);
}else{
json.put("dataList",new ArrayList<>());
}
json.put("flag",true);
}catch (Exception ex){
json.put("flag",false);
json.put("message",ex.getMessage());
}
return json.toJSONString();
}

由于省、市、县城（区）这些数据是存储到了MySQL数据库中的,通过字段parent来关联查询上级，下级区域，过程中也发现有些省份下级镇发生变更，不过这都影响不大，先分享到这里，下次分享一个使用上较好图片上产插件。