版权声明:如有雷同,纯属巧合!!! https://blog.csdn.net/COCOLI_BK/article/details/87882787
最新的完善:主要当表格超出文档,会定位不准,改动源码部位在最后面,前面的 点搜索有问题!!!
改动及完善:
- 结构
<link rel="stylesheet" href="../../../layuiadmin/layui/css/layui.css" media="all">
<style>
.layui-form-label {
width: 90px;
}
</style>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">客户名称<i style="color:red;">*</i></label>
<div class="layui-input-inline" style="position:relative ;">
<input type="text" id="customerId" name="projectCustomerId" lay-verify="required" autocomplete="off" placeholder="搜索..."
class="layui-input"/>
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">客户电话</label>
<div class="layui-input-inline">
<input type="text" id="customerTel" placeholder="" autocomplete="off" class="layui-input">
</div>
</div>
</div>
- js代码
layui.config({
base: '../../../layuiadmin/' //静态资源所在路径
}).extend({
tableSelect: 'lib/tableSelect' //主入口模块
}).use([ 'form', 'laydate','tableSelect'], function () {
var $ = layui.jquery
, form = layui.form
, laydate = layui.laydate
, tableSelect = layui.tableSelect ;
console.log(tableSelect)
lay('.lay-input-date').each(function () {
laydate.render({
elem: this,
format: 'yyyy-MM-dd',
type: 'date',
trigger: 'click'
})
})
//===============下拉树 渲染===========
tableSelect.render({
elem: '#customerId', //所操作的元素
searchKey: 'customerName', //搜索输入框的 搜索所条件name
searchPlaceholder: '名字筛选...', // 搜索框中的提示信息
checkedKey: 'customerName', // 利用复选框时的name
table: {
url: '/project/customer', //数据的地址
limit:5, //返回限制条数
width:350, //表格宽度
cols: [[
{ type: 'radio' },
{ field: 'customerId', title: '序号' },
{ field: 'customerName', title: '姓名' },
]]
},
done: function (elem, data) {
console.log(JSON.stringify(data))
var NEWJSON = []
layui.each(data.data, function (index, item) {
NEWJSON.push(item.customerName) //双击时的name
})
elem.val(NEWJSON.join(","))
// 由用户id查客户详细信息 type仅为 radio时 调用客户信息!!!!
var customerId = data.data[0].customerId;
getCustomerInfo(customerId);
}
});
//=============由用户id查客户详细信息=============
function getCustomerInfo(customerId){
$.ajax({
url: '/project/customer/' + customerId,
type: "get",
contentType: "application/json", //设置请求参数类型为json字符串
dataType: "json",
success: function (res) {
console.log(res.status)
if (res.status == 200) {
layer.msg("查询成功", {
icon: 6
});
// ==这里写渲染客户信息的函数==
var data = res.data;
//赋值客户信息
setCustomerInfo(data)
} else {
layer.msg(res.msg, {
icon: 5
});
}
}
})
}
// //==渲染客户信息==
function setCustomerInfo(data){
var customerAddress = data.customerAddress //地址
,customerDepositBank =data.customerDepositBank //开户行
,customerInvoiceTitle = data.customerInvoiceTitle //开票抬头
,customerTel =data.customerTel //客户电话
,customerTaxid = data.customerTaxid // 税号
,contacts = data.contacts //联系电话数组
}
form.on('submit(component-form-element)', function (data) {
layer.msg(JSON.stringify(data.field));
var index = parent.layer.getFrameIndex(window.name); /* 先得到当前iframe层的索引 */
parent.layer.close(index); //再执行关闭
return false;
});
});
改动的源代码
-
//FIX位置 var overHeight = (elem.offset().top + elem.outerHeight() + tableBox.outerHeight() - $(window).scrollTop()) > $(window).height(); var overWidth = (elem.offset().left + tableBox.outerWidth()) > $(window).width(); // overHeight && tableBox.css({'top':'auto','bottom':'0px'}); overHeight && tableBox.css({'top':t,'left':l}); //直接还是赋值 上面的死值!!! overWidth && tableBox.css({'left':'auto','right':'5px'})