用到知识点
- 表单监听 form.on
- 局部表单渲染 form.render
动态加载的select表单 必须有默认的option项（第一个option） 要不然layui 不会渲染出 select 组件
代码如下：
<?php include 'header.php'; ?>
<body>
<fieldset class="layui-elem-field layui-field-title">
<legend>添加数据 <a href="javascript:history.go(-1);"><i class="layui-icon"></i> 返回列表</a></legend>
</fieldset>
<?php
//查找所有的助理 5 是助理
$assistant = db('members')->where('u_level = ?', array(5))->fetchAll();
//p($assistant);
?>
<form class="layui-form layui-form-pane" lay-filter="mainForm" action="" method="post">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">所属助理</label>
<div class="layui-input-block">
<select id="assistant" name="assistant" lay-filter='assistant' lay-search>
<option value="">搜索助理</option>
<?php
if ($assistant) {
foreach ($assistant as $row) {
?>
<option
value="<?php echo $row['u_id']; ?>"><?php echo $row['u_realname'];; ?></option>
<?php
}
} else {
?>
<option value="no">请先设置哪些人员是助理</option>
<?php
}
?>
</select>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">客户名字</label>
<div class=" layui-input-block">
<!-- select 局部渲染 样式 -->
<div class="layui-form" lay-filter="custom">
<select id="custom_id" name="custom_id" lay-search>
<option value=''>搜索客户</option>
</select>
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">日期</label>
<div class="layui-input-block">
<input type="text" id="day" name="day" class="layui-input" checkType="string" checkData="10,"
checkMsg="日期格式不对"/>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">测量时间</label>
<div class="layui-input-block">
<input type="text" id="record-time" name="record_time" class="layui-input" checkType="string"
checkData="5," checkMsg="时间格式不对"/>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">血糖</label>
<div class="layui-input-block">
<input type="text" name="zb_xuetang" class="layui-input" checkType="betweenF" checkData="0,"
checkMsg="血糖为正的小数"/>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">舒张压</label>
<div class="layui-input-block">
<input type="text" name="zb_suzhangya" class="layui-input" checkType="int" checkData="2,3"
checkMsg="舒张压正常值:60-90"/>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">收缩压</label>
<div class="layui-input-block">
<input type="text" name="zb_shousuoya" class="layui-input" checkType="int" checkData="2,3"
checkMsg="收缩压正常值:90-140"/>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">心率</label>
<div class="layui-input-block">
<input type="text" name="zb_xinlv" class="layui-input" checkType="int" checkData="2,3"
checkMsg="心率正常值:60～100次/分"/>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">体重kg</label>
<div class="layui-input-block">
<input type="text" name="zb_tizhong" class="layui-input" checkType="betweenF" checkData="25,"
checkMsg="体重为小数,且为成年人体重!"/>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" id="graceSubBtn" lay-submit="" lay-filter="*">添加</button>
</div>
</div>
</form>
<script type="text/javascript">
layui.use(['form', 'layer', 'laydate'], function () {
var form = layui.form;//form模块
var $ = layui.$;//引入内置jquery
var laydate = layui.laydate;//日期时间模块
//执行一个laydate实例
laydate.render({
elem: '#day', //指定元素
theme: 'molv',//主题
min: '2018-08-01',//最小日期
max: moment().format('YYYY-MM-DD'),//最大日期 用moment.js生成当前日期
});
laydate.render({
elem: '#record-time',//指定元素
theme: 'molv',
type: 'time',//时间类型
format: 'HH:mm',//只取 时:分
});
var canSubmitTxt = $('#graceSubBtn').html();
form.on('submit(*)', function (data) {
if ($('#graceSubBtn').html() != canSubmitTxt) {
return false;
}
var res = $('form').eq(0).hcFormCheck();
if (!res) {
return false;
}
gracePost('<?php echo u(PG_C, 'add');?>', data.field, function (res) {
console.log(res);
res = $.parseJSON(res);
var layer = layui.layer;
if (res.status == 'ok') {
layer.msg('<i class="layui-icon"></i> 添加成功！');
setTimeout(function () {
location.href = '<?php echo U(PG_C, 'index');?>';
}, 1500);
} else {
layer.msg('<i class="layui-icon"></i> ' + res.data);
$('#graceSubBtn').html(canSubmitTxt);
}
}, canSubmitTxt);
return false;
});
// 监听助理选择事件
form.on('select(assistant)', function (data) {
if (data.value != '') {//选择值不为空
// 查询助理管辖下的客户名称
ajax_custom(data.value);
}
});
// 自定义函数
function ajax_custom(para) {
var url_at = "<?php echo u('apis', 'findCustom');?>";
//清空原有select内的数据 只保留第一项
$("#custom_id").find("option:not(:first)").remove();
form.render('select', 'custom');//渲染表单
$.ajax({
url: url_at,
type: "post",
data: {
u_id: para,
},
dataType: "json",
success: function (res) {
var msg = res.data;
$.each(msg, function (i, v) {
var id = v.u_id;
var text = v.u_realname;
console.log(text);
$("#custom_id").append("<option value='" + id + "'>" + text + "</option>");
});
//渲染select 表单 filter 是 custom
form.render('select', 'custom');
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
// alert(errorThrown);
}
});
}
});
</script>
</body>
</html>
