layui多级联动-省-市-县-镇乡街道

分享 未结 11 1766
sudukai
sudukai 2018-10-7
悬赏:20飞吻
数据表
DROP TABLE IF EXISTS `area`;
CREATE TABLE `area` (
`id` mediumint(11) unsigned NOT NULL AUTO_INCREMENT COMMENT 'ID',
`area_name` varchar(50) DEFAULT NULL COMMENT '地区名称',
`parent_id` int(11) DEFAULT NULL COMMENT '父级地区',
`sort` int(11) DEFAULT '0' COMMENT '排序',
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=46463 DEFAULT CHARSET=utf8 COMMENT='地区表';

INSERT INTO `area` VALUES ('1', '北京', '0', '1');
INSERT INTO `area` VALUES ('2', '北京市', '1', '1');
INSERT INTO `area` VALUES ('3', '东城区', '2', '3');
INSERT INTO `area` VALUES ('4', '东华门街道', '3', '5');
INSERT INTO `area` VALUES ('5', '景山街道', '3', '12');
/*数据省略……*/
我这用的php,
//部分code
$sql = 'select id,area_name as name from '.$tablename. ' where parent_id='.$sid.' order by sort asc,id';
$data = Db::query($sql);
if ($data) {
echo json_encode(array(
"code" => 0,
"msg" => "ok",
// "count" => count($data),
"data" => $data
));exit;
}
HTML部分

 shtml += '<div class="layui-form-item">'+
' <label class="layui-form-label">省份</label>'+
' <div class="layui-input-inline" >'+
' <select name="' + opt.formfix + 'province" lay-filter="' + opt.formfix + 'province" ><option value="">请选择省</option>'+getselect(provincelist)+
' </select>'+
' </div>'+
' <label class="layui-form-label">城市</label>'+
' <div class="layui-input-inline" >'+
' <select name="' + opt.formfix + 'city" lay-filter="' + opt.formfix + 'city" id="' + opt.formfix + 'city">'+
' </select>'+
' </div>'+
'</div>'+
'<div class="layui-form-item">'+
' <label class="layui-form-label">县/镇/乡</label>'+
' <div class="layui-input-inline" >'+
' <select name="' + opt.formfix + 'town" lay-filter="' + opt.formfix + 'town" id="' + opt.formfix + 'town">'+
' </select>'+
' </div>'+
' <label class="layui-form-label">镇/街/区</label>'+
' <div class="layui-input-inline" >'+
' <select name="' + opt.formfix + 'street" lay-filter="' + opt.formfix + 'street" id="' + opt.formfix + 'street">'+
' </select>'+
' </div>'+
'</div>';
//我这是用js拼输出的,懒了不整理了,就这样看吧
JS代码
//取数据,不管有没有click动作,这货有需求执行    
function selectclick(a) {
var b = a.formfix,
jis = a.jis;
switch (jis) {
case "city":
$("#" + b + "city").html('<option value="">请选择市/县</option>');
$("#" + b + "town").html('<option value="">请选择镇区</option>');
break;
case "town":
$("#" + b + "town").html('<option value="">请选择镇区</option>')
}
$("#" + b + "street").html('<option value="">请选择街道</option>');
$.ajax({
url: "后台路径",
data: {
pid: a.value
},
type: "POST",
dataType: "json",
success: function(c) {
0 == c.code && ($("#" + b + jis).append(getselect(c.data)), form.render("select"));
"function" === typeof a.callback && setTimeout(function() {
a.callback()
}, 20)
}
})
};

function formtype(opt){
//监听省份
form.on('select('+opt.formfix+'province)', function (data) {
selectclick({
formfix:opt.formfix,
jis:'city',
value:data.value
});
});
//监听城市
form.on('select('+opt.formfix+'city)', function (data) {
selectclick({
formfix:opt.formfix,
jis:'town',
value:data.value
});
});
//监听镇区
form.on('select('+opt.formfix+'town)', function (data) {
selectclick({
formfix:opt.formfix,
jis:'street',
value:data.value
});
});
}

//执行
formtype({formfix: "edit_"});
//表单赋值
var suppdata = data;
var postindex = layer.msg('数据加载中……',{time: 10000});
selectclick({
formfix:'edit_',
jis:'city',
value:suppdata.province,
callback:function(){
selectclick({
formfix:'edit_',
jis:'town',
value:suppdata.city,
callback:function(){
selectclick({
formfix:'edit_',
jis:'street',
value:suppdata.town,
callback:function(){
form.val('edit_supplier_form', {
"edit_id":suppdata.id
,"edit_name": suppdata.name
……
});
layer.close(postindex);
form.render();
}
});
}
});
}
});
回帖
  • 这嵌套得够深的啊
    0 回复
  • 代码是不是太多了 虽然我不是做php的 我四级联动 也没那么多代码
    0 回复
  • sudukai
    2018-10-9
    @谁是大流氓 大侠,贴下你的精简代码呗,我一个人要干好多活,没精力去精简优化,先跑起来再说.
    一个ERP,除非第三方插件,啥都自个意淫->画图->撸代码,在我的世界里没有前端与后台,都日一遍...累..精力有限...
    -----------
    特别感谢layui开源,省了很多事[赞]
    0 回复
  • sudukai
    2018-10-9
    @muxinss 为了加载完事再执行下一级,想了个回调,以后有空再弄个json版的,省去好多事情[微笑]
    0 回复
  • @sudukai jq的deffer了解以下,可以这样:
    var getData = function(request){//从服务器获取数据
    var data = request
    var dtd = $.Deferred();
    dtd.notify();
    $.when(requestData({
    url:"RemotedAPI",
    method:"post",
    data:data
    })).fail(function(error){
    dtd.reject(error);
    }).done(function(data){
    dtd.resolve(data);
    });
    return dtd.promise();
    }

    $.when(getData (params1),getData(params2))
    .done(doDone)
    .fail(doFail);

    function doDone(returnData1,returnData2){

    }
    function doFail(error){

    }
    0 回复
  • function requestData(obj){
    var dtd = $.Deferred();
    dtd.notify();
    $.ajax({
    url: obj.url,
    type: obj.method,
    data: obj.data,
    success: function(data){
    dtd.resolve(data);
    },
    error:function(error){
    dtd.reject(error);
    }
    });
    return dtd.promise();
    }
    0 回复
  • 多个请求都完成了,就执行done的回掉函数,有一个失败了就执行fail
    0 回复
  • 一个多级联动不行这么复杂吧兄弟
    0 回复
  • sudukai
    2018-10-12
    楼上,可以贴下 [多级联动] 的简单代码,参考参考,我也想要简单粗暴的代码 [思考]
    0 回复
  • @sudukai 辛苦了兄弟, 前端发来慰问
    0 回复