開発中に PHP を使用して、layUI に基づいた 3 レベルのリンケージ効果のコードを実装する方法
- 不言オリジナル
- 2018-07-14 17:12:182264ブラウズ
この記事では主に、開発中のlayUIをベースに3層連携効果をPHPで実現するコードを紹介します。参考になる価値があるので、みんなに共有します。困っている友達は参考にしてください
バックエンド開発では、ページ全体を美しくエレガントに見せるために、layUI フレームワークを使用することがよくありますが、一部のネイティブ効果は、layUI フレームワークでは使用できない場合があります。たとえば、最近、3 レベルのリンクの選択効果に遭遇しました。州、市、郡の間。これまでと異なり、layUI フレームワークでは、イベントをリッスンするために select のlay-filter 属性に注意する必要があり、再レンダリングには form.render() が必要です。これら 2 つの問題を解決するために、リンケージは次のようになります。もう問題ありません。以下にそれを共有させてください。
実装コード:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>基于 Layui form 组件的省市区级联的实现</title>
<link rel="stylesheet" href="http://www.zhengjinfan.cn/plugins/layui/css/layui.css" />
</head>
<body>
<div style="margin: 50px auto; ">
<form class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">选择地区</label>
<div class="layui-input-inline">
<select name="province" lay-filter="province">
<option value="">请选择省</option>
</select>
</div>
<div class="layui-input-inline" style="display: none;">
<select name="city" lay-filter="city">
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline" style="display: none;">
<select name="area" lay-filter="area">
<option value="">请选择县/区</option>
</select>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="http://www.zhengjinfan.cn/plugins/layui/layui.js"></script>
<script type="text/javascript" src="http://www.zhengjinfan.cn/js/area.js"></script>
<script>
(function(){
var areaData=Area;
var $, $form,form;
var $selectProvince,$selectCity,$selectArea;
layui.use(['jquery', 'form'], function() {
$ = layui.jquery;
form = layui.form();
$form = $('form');
$selectProvince=$form.find('select[name=province]');
$selectCity=$form.find('select[name=city]');
$selectArea=$form.find('select[name=area]');
form.on('select(province)', function(data){
var value = data.value;
var d = value.split('_');
var code = d[0];
var count = d[1];
var index = d[2];
if(count > 0) {
loadCity(areaData[index].mallCityList,index);
$selectCity.parent().show();
} else {
$selectCity.parent().hide();
$selectArea.parent().hide();
$selectCity.find('[data-new=1]').remove();
$selectArea.find('[data-new=1]').remove();
form.render('select');
}
});
form.on('select(city)', function(data){
var value = data.value;
var d = value.split('_');
var code = d[0];
var count = d[1];
var index = d[2];
var areaIndex=d[3];
if(count > 0) {
loadArea(areaData[index].mallCityList[index].mallAreaList);
$selectArea.parent().show();
} else {
$selectArea.parent().hide();
}
});
form.on('select(area)', function(data){
});
loadProvince();
});
function loadProvince(){
for(var i=0,length=areaData.length;i<length;i++){
$selectProvince.append('<option value="'+ areaData[i].provinceCode + '_' + areaData[i].mallCityList.length + '_' + i + '">'+areaData[i].provinceName+'</option>')
}
form.render('select');
}
function loadCity(citys,areaIndex){
$selectCity.find('[data-new=1]').remove();
$selectArea.find('[data-new=1]').remove();
for(var i=0,length=citys.length;i<length;i++){
$selectCity.append('<option data-new ="1" value="'+ citys[i].cityCode + '_' + citys[i].mallAreaList.length + '_' + i + '_'+areaIndex+'">'+citys[i].cityName+'</option>')
}
form.render('select');
}
function loadArea(areas){
$selectArea.find('[data-new=1]').remove();
$selectArea.find('[data-new=1]').remove();
for(var i=0,length=areas.length;i<length;i++){
$selectArea.append('<option data-new ="1" value="'+ areas[i].areaCode+'">'+areas[i].areaName +'</option>')
}
form.render('select');
}
})()
</script>
</body>
</html>以上がこの記事の全内容です。皆様の学習に少しでもお役に立てれば幸いです。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連する推奨事項:
呼び出し場所でデバッグ情報を出力する PHP の debug_backtrace() 関数について
見てみましょうフレームワーク開発についての話 依存関係の注入、コンテナー、および出現パターン (下部)
以上が開発中に PHP を使用して、layUI に基づいた 3 レベルのリンケージ効果のコードを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。