弹层拉取数据的交互效果实现

最近有这么一个需求，根据所对应的省份，将相应的各省的数据读取出来，显示在弹层中，并且读取对应各省-市-区的初始状态，然后进行选中与取消操作后，将相应选中的数据再传给程序那边。

废话不多说，先上图~

比如点击山西省后，出现的效果如下：

点击确定后，提示说已经保存成功，并将数据带给后台.

程序设计思路如下：

1、采用dojo的AMD异步加载思路，按需加载

2、弹层用到了artDialog组件

3、记录各省的初始化状态 -> 点击省份 -> 弹层 -> 调用ajax加载数据进来（加载进来后保存该数据，当下次点击时就不用再重新加载），如果加载数据太多，则需要添加滚动条 -> 对弹层的内容进行选择和取消（交互）-> 点击确定后，保存当前的状态，以便初始化下次打开时的状态，同时将所选市-区的id传给后台.

4.组件源码:

define('my/datalayer-picker', ['dojo/_base/declare','bin/artDialog/jquery.artDialog'], function(declare) {
var dataPicker = declare(null, {
constructor: function(args) {
var self = this;

declare.safeMixin(this, args);
this.settings = $.extend({}, dataPicker.defaults, args);
this.$container = $(this.settings.containerSelector);
this.$selector = $(this.settings.dataSelector, this.$container);

this.dataUrl=this.settings.dataUrl;

this.data = {};
this.selectedData = [];
this.dataParam = {};

//记录各省的初始化状态
this.$selector.each(function(){
var flag=$(this).attr("flag");
if(flag==1){
$(this).addClass("selected");
}
})

this.$selector.on("click",function(){
self.dialog(this);
});
},

dialog: function(picker) {
var self = this;
var $picker = $(picker);
dataid = $picker.attr("dataid");
var dialogCfg = {
title: false,
lock: true,
fixed: true,
okValue: '确定',
ok: function() {
self.send();
},
cancelValue: '取消',
cancel: true
};

dialogCfg.content = 'loading...';
var dialogInst = $.dialog(dialogCfg);
$(dialogInst.dom.content).css({"width":"auto","height":"auto"});
//第一次弹层后保存省的数据
if (this.data.hasOwnProperty(dataid)) {
var data = this.data[dataid];
dialogInst.content(self.fetch(data));
dialogInst.title(data.name);

self.state();
self.interactive();
scrollbar();
} else {
$.getJSON(this.dataUrl, { dataid: dataid }, function(data) {
self.data[dataid] = data;
dialogInst.content(self.fetch(data));
dialogInst.title(data.name);

self.state();
self.interactive();
scrollbar();
});
}

function scrollbar(){
//弹层渲染数据后 & 拿到content的宽和高
/*console.log(dialogInst.dom.outer.context.clientWidth , dialogInst.dom.outer.context.clientWidth,
dialogInst.dom.content.context.clientWidth , dialogInst.dom.content.context.clientHeight); //779 808 777 716*/
$(dialogInst.dom.content).css({"height":"auto"});
//需要设置滚动条
//$(dialogInst.dom.outer).parent().css({"position":"absolute","left":"50"});
//console.log($(dialogInst.dom.outer).parent().position());
if(dialogInst.dom.outer.context.clientHeight > 300){
$(dialogInst.dom.content).css({"overflow-x":"hidden","overflow-y":"auto","width":"550","height":"150"});
}else{

}
}
},
//页面渲染
fetch: function(data) {
var self=this;
var html = [], cityData = data.city;
for (k in cityData) {
var cityHtml = ['<dl class=\"clearfix tag\">'];
var city = cityData[k];

//记录各市的初始化状态
if(city.flag==1){
self.selectedData.push(k);
city.flag=0;
}

cityHtml.push('<dt did="'+ k +'" class=\"selector-tag\"><a href=\"javascript:;\"><em>'+ city.name +'</em><i></i></a></dt>');

//判断市下面是否有区
if(city.area!=""){
var areaData = city.area;
for (var j = 0, l = areaData.length; j < l; j++) {
var area = areaData[j];

//记录各区的初始化状态
if(area.flag==1){
self.selectedData.push(area.id);
area.flag=0;
}

cityHtml.push('<dd did="'+ area.id +'" class=\"selector-tag\"><a href=\"javascript:;\"><em>'+ area.name +'</em><i></i></a></dd>');
}
}else{

}

cityHtml.push('</dl>');
html.push(cityHtml.join(''));
}
console.log(self.selectedData);
return html.join('');
},
//保存的状态样式
state: function(){
var self=this;
console.log(this.selectedData);
if(this.selectedData!=null){
for(var i=0 ; i < this.selectedData.length ; i++){
//各市-区的
$(".selector-tag").each(function(){
if(self.selectedData[i] == $(this).attr("did")){
$(this).children("a").addClass("selected");
}
})
}
}
},
//页面交互
interactive: function(){
//选择市-区域的联动处理
$("dd.selector-tag a").click(function(){
if($(this).hasClass("selected") && !$(this).parent().siblings("dd").children("a").hasClass("selected")){
$(this).removeClass("selected").parent().siblings("dt").children("a").removeClass("selected");
}else if($(this).hasClass("selected")){
$(this).removeClass("selected");
}else{
$(this).addClass("selected");
$(this).parent().siblings("dt").children("a").addClass("selected");
}
})
$("dt.selector-tag a").click(function(){
if($(this).hasClass("selected")){
$(this).removeClass("selected").parent().siblings("dd").children("a").removeClass("selected");
}else{
$(this).addClass("selected");
$(this).parent().siblings("dd").children("a").addClass("selected");
}
})

$("dl.tag:first").css({"background":"none","padding":"0"});
},
//发送数据
send: function(){
var self=this;
var $select=$(".selector-tag a").filter(".selected");
self.selectedData=[];
self.selectedData.push(dataid);
$select.each(function() {
var $arr = $(this).parent().attr("did");
self.selectedData.push($arr);
});
self.dataParam['val']=self.selectedData;
console.log(self.selectedData);
//加载tips
require(['my/tips'], function(Tips) {
self.tips = new Tips();
});

$.ajax({
type: "POST",
dataType:"json",
url: self.dataUrl,
data:self.dataParam,
cache:false,
beforeSend: function() {
self.tips.loading('正在保存中...');
},
success: function(ret) {
if (ret.error) {
self.tips.error({msgTitle:'保存失败',msgContent:ret.message});
} else {
self.tips.success({msgTitle:'保存成功',msgContent:null});

}
}
});
}
});
dataPicker.defaults = {
containerSelector: '#main', // 容器选择器
dataSelector: '[role="datapicker"]', // 所有弹层拉取数据的role
dataUrl : 'data.php?ref=region'
};
return dataPicker;
});