最近搜索
layui 下拉 级联 一级分类 二级分类 如何配置。
管理员
2022-04-04 17:26
我们初始化的时。能直接设置二级分类。不用再用定时器。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title th:text="${title}"></title>
<div th:include="/common/layui"></div>
<div th:include="/common/jq"></div>
<!--添加 vue 支持加载-->
<script src="/vue/vue.min.js"></script>
<!--添加 vue 支持加载-->
<style>
.layui-form-item {
margin-bottom: 3px;
}
</style>
</head>
<script>
//定义在外面。可以代码中 使用 table
var table,form ;
layui.use([ 'laydate', 'laypage', 'layer','form', 'table', 'carousel',
'upload', 'element' ], function() {
table = layui.table;
form = layui.form;
});
var state = 0;//0没有设置2的值 1设置
$(function(){
if("[[${project?.rock?.id}]]"!=""){
$("#rockId1").val("[[${project?.rock?.rock?.id}]]");
}
if("[[${project?.unit}]]"!=""){
$("#unit").val("[[${project?.unit}]]");
}
});
var save_url = '[[${save_url}]]';
function save() {
var index = layer.msg('提交中，请稍候', {
icon : 16,
time : false,
shade : 0.8
});
var rockId2 = $("#rockId2").val();
var unit = $("#unit").val();
$.post(save_url, {name:app.name,orderNo:app.orderNo,method:app.method,"rock.id":rockId2,
model:app.model,name2:app.name2,num:app.num,detectionLimit:app.detectionLimit,unit:unit,
c:app.c
}, function(result) {
if (result.success) {
window.parent.closeDlg(result.msg);
} else {
layer.msg(result.msg);
}
}, 'json');
}
function init_rockId2(){
var rockId1 = $("#rockId1").val();
console.log(rockId1);
if(rockId1==""||rockId1==null){
//清空
$('select[name=rockId2]').empty();
form.render();
return;
}
var html = '';
$.post("/admin/rock/list", {type:2,rockId:rockId1,page:1,limit:100}, function(result) {
for(var i=0;i<result.data.length;i++){
html = html + '<option value="'+result.data[i].id+'">'+result.data[i].name+'</option>';
}
//清空
$('select[name=rockId2]').empty();
//设置2
$('select[name=rockId2]').append(html);
//判断是否为2设置值
if("[[${project?.rock?.id}]]"!=""){
console.log("有id 开始判断 是否设置值");
if(state==0){
$("#rockId2").val("[[${project?.rock?.id}]]");
state = 1;
console.log("有id 没有设置过了");
}else{
console.log("有id 已设置过了");
}
}
form.render();
}, 'json');
}
</script>
<body id="app">
<div style="padding: 10px;" class="layui-form layui-form-pane" action="">
<div class="layui-form-item">
<label class="layui-form-label">排序</label>
<div class="layui-input-block">
<input type="text" v-model="orderNo" th:value="${project?.orderNo}" autocomplete="off"
placeholder="请输入 排序" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">检测项目</label>
<div class="layui-input-block">
<input type="text" v-model="name" th:value="${project?.name}" autocomplete="off"
placeholder="请输入 检测项目" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">岩石分类1</label>
<div class="layui-input-block">
<select id="rockId1" name="rockId1" lay-filter="rockId1" >
<option th:value="${rock.id}" th:text="${rock.name}" th:each="rock: ${rockList}"></option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">岩石分类2</label>
<div class="layui-input-block">
<select id="rockId2" name="rockId2" lay-filter="rockId2" >
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">检测方法</label>
<div class="layui-input-block">
<input type="text" v-model="method" th:value="${project?.method}" autocomplete="off"
placeholder="请输入 检测方法" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">仪器型号</label>
<div class="layui-input-block">
<input type="text" v-model="model" th:value="${project?.model}" autocomplete="off"
placeholder="请输入 仪器型号" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">仪器名称</label>
<div class="layui-input-block">
<input type="text" v-model="name2" th:value="${project?.name2}" autocomplete="off"
placeholder="请输入 仪器名称" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">仪器编号</label>
<div class="layui-input-block">
<input type="text" v-model="num" th:value="${project?.num}" autocomplete="off"
placeholder="请输入 仪器编号" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">检出限</label>
<div class="layui-input-block">
<input type="text" v-model="detectionLimit" th:value="${project?.detectionLimit}" autocomplete="off"
placeholder="请输入 检出限" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">检出限单位</label>
<div class="layui-input-block">
<select id="unit">
<option value="2">%</option>
<option value="3">mg/g</option>
<option value="6">ug/g</option>
<option value="9">ng/g</option>
<option value="11">10^-11</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">系数c</label>
<div class="layui-input-block">
<input type="text" v-model="c" th:value="${project?.c}" autocomplete="off"
placeholder="请输入 系数c" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" th:text="${btn_text}" lay-submit="" lay-filter="demo1"
onclick="save()"></button>
</div>
</div>
</div>
</body>
<script th:inline="none">
layui.use([ 'laydate', 'laypage', 'layer', 'form', 'table', 'carousel', 'upload',
'element' ], function() {
var laydate = layui.laydate //日期
, laypage = layui.laypage //分页
, layer = layui.layer //弹层
, table = layui.table //表格
, form = layui.form //表格
, carousel = layui.carousel //轮播
, upload = layui.upload //上传
, element = layui.element; //元素操作
form.on('select(rockId1)', function(data){
init_rockId2();
});
init_rockId2();
});
</script>
<script>
var app = new Vue({
el : '#app',
data : {
}
});
</script>
</html>我们初始化的时。能直接设置二级分类。不用再用定时器。
联系站长
站长微信:xiaomao0055
站长QQ:14496453
按分类分组
按日期分组