yutons_sug搜索框提示插件||输入框提示插件

分享 未结 66 6644
yutons
yutons 2018-10-6
悬赏:20飞吻
因工作需要制作了一个‘搜索框提示插件||输入框提示插件’,欢迎大家吐槽!
先来一张操作图
1、更新支持多字段回显,gif图未更新,请以体验地址效果为准


实用方法:
//引入自定义插件
layui.config({
base: '../../static/common/yutons-mods/' //设置自定义插件路径:根据实际路径进行设置
}).use(['yutons_sug'], function() {
//创建yutons_sug搜索框提示插件||输入框提示插件实例
var yutons_sug = layui.yutons_sug;


//初始化姓名输入提示框
yutons_sug.render({
id: "userName", //设置容器唯一id
cols: [
[{
field: 'userName',
title: '员工姓名'
}, {
field: 'userCode',
title: '员工工号'
}, {
field: 'deptName',
title: '所属部门'
}]
], //设置表头
params: [
{
name: 'userName',
field: 'userName'
}, {
name: 'userCode',
field: 'userCode'
}, {
name: 'deptName',
field: 'deptName'
}],//设置字段映射,适用于输入一个字段,回显多个字段(此处为新增内容)
type: 'sugTable', //设置输入框提示类型:sug-下拉框,sugTable-下拉表格
url: "json/yutons_sug.json" //设置异步数据接口,url为必填项
});

//初始化工号输入提示框
yutons_sug.render({
id: "userCode", //设置容器唯一id
cols: [
[{
field: 'userName',
title: '员工姓名'
}, {
field: 'userCode',
title: '员工工号'
}, {
field: 'deptName',
title: '所属部门'
}]
], //设置表头
params: [
{
name: 'userName',
field: 'userName'
}, {
name: 'userCode',
field: 'userCode'
}, {
name: 'deptName',
field: 'deptName'
}],//设置字段映射,适用于输入一个字段,回显多个字段(此处为新增内容)
type: 'sugTable', //设置输入框提示类型:sug-下拉框,sugTable-下拉表格
url: "json/yutons_sug.json" //设置异步数据接口,url为必填项
});

//初始化部门输入提示框
yutons_sug.render({
id: "deptName", //设置容器唯一id
type: 'sug', //设置输入框提示类型:sug-下拉框,sugTable-下拉表格
url: "json/yutons_sug.json" //设置异步数据接口,url为必填项
});
});
体验地址: https://yutons.gitee.io/yutons-mods/templates/sug/yutons_sug.html
下载地址: https://gitee.com/yutons/yutons-mods.git
回帖