You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
285 lines
10 KiB
285 lines
10 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="renderer" content="webkit">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="format-detection" content="telephone=no">
|
|
|
|
<link rel="stylesheet" href="../layui/css/layui.css" media="all">
|
|
<style>
|
|
.layui-input{
|
|
padding-left:2px;
|
|
margin-top: 3px;
|
|
display:inline;
|
|
width:250px;
|
|
height:30px;
|
|
}
|
|
/*layui多选框样式*/
|
|
.layui-form-pane .layui-form-label{
|
|
width:80px;
|
|
padding:5px;
|
|
margin-left: 5px;
|
|
margin-top: 3px;
|
|
background-color: silver;
|
|
height:30px
|
|
}
|
|
.layui-form-pane .layui-input-block{
|
|
margin-left: 80px;
|
|
}
|
|
.layui-input-block{
|
|
min-height:30px;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<form class="layui-form layui-form-pane" >
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">标题</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="title" required lay-verify="required" 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" name="content" required lay-verify="required" autocomplete="off" placeholder="请输入内容" class="layui-input"> -->
|
|
<div id="selSearch"></div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item" style="display: none;">
|
|
<label class="layui-form-label">ID</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" id="qcid" name="ID" required lay-verify="required" autocomplete="off" placeholder="请输入标题" class="layui-input">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-block">
|
|
<button class="layui-btn" lay-submit lay-filter="formDemo" style="margin-top:5px;height: 25px;margin-left: -15px;line-height: 20px;font-size: 12px;padding:0 12px">确定</button>
|
|
<button type="reset" class="layui-btn layui-btn-primary" style="margin-top:5px;height: 25px;line-height: 20px;font-size: 12px;padding:0 12px">重置</button>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
|
|
<script src="../layui/layui.js" charset="utf-8"></script>
|
|
<script>
|
|
|
|
var _vAnnotate ;//用来接收vAnnotate
|
|
|
|
|
|
layui.use('form', function(){
|
|
var form = layui.form;
|
|
|
|
//监听提交
|
|
form.on('submit(formDemo)', function(data){
|
|
parent.layer.closeAll(); //再执行关闭
|
|
if(_vAnnotate!=undefined){
|
|
_vAnnotate.Title = document.getElementsByName("title")[0].value;
|
|
_vAnnotate.Text = document.getElementsByName("content")[0].value;
|
|
}else{
|
|
parent.insertAnnotate(data.field.title,data.field.content);
|
|
parent.addAnnotateToWat(data.field.ID);
|
|
}
|
|
|
|
|
|
|
|
});
|
|
});
|
|
function setData(vAnnotate){
|
|
_vAnnotate = vAnnotate;
|
|
}
|
|
function callbackdata(){
|
|
let map = new Map();
|
|
map.set("title",document.getElementsByName("title")[0].value);
|
|
map.set("content",document.getElementsByName("content")[0].value);
|
|
return map;
|
|
}
|
|
|
|
layui.config({
|
|
base: './'
|
|
}).extend({
|
|
selectInput: 'selectInput/selectInput'
|
|
}).use(['form', 'selectInput'], function () {
|
|
var $ = layui.$,
|
|
form = layui.form,
|
|
selectInput = layui.selectInput;
|
|
var ins = selectInput.render({
|
|
// 容器id,必传参数
|
|
elem: '#selSearch',
|
|
name: 'content', // 渲染的input的name值
|
|
hasSelectIcon: true,
|
|
layFilter: 'selSearch', //同layui form参数lay-filter
|
|
layVerify: 'required', //同layui form参数lay-verify
|
|
layVerType: '', // 同layui form参数lay-verType
|
|
layReqText: '请填写文本', //同layui form参数lay-ReqText
|
|
initValue: '', // 渲染初始化默认值
|
|
placeholder: '请输入名称', // 渲染的inputplaceholder值
|
|
// 联想select的初始化本地值,数组格式,里面的对象属性必须为value,name,value是实际选中值,name是展示值,两者可以一样
|
|
invisibleMode: true,
|
|
// data: [
|
|
// {name: 111, value: 222},
|
|
// {name: 111, value: 222},
|
|
// {name: 111, value: 222},
|
|
// ],
|
|
hasCut: true, // 是否允许剪贴
|
|
// url: "./json/search.json", // 异步加载的url,异步加载联想词的数组值,设置url,data参数赋的值将会无效,url和data参数两者不要同时设置
|
|
remoteSearch: true, // 是否启用远程搜索 默认是false,和远程搜索回调保存同步
|
|
parseData: function (data) { // 此参数仅在异步加载data数据下或者远程搜索模式下有效,解析回调,如果你的异步返回的data不是上述的data格式,请在此回调格式成对应的数据格式,回调参数是异步加载的数据
|
|
console.log(data)
|
|
return data;
|
|
},
|
|
error: function (error) { // 异步加载出错的回调 回调参数是错误msg
|
|
|
|
},
|
|
done: function (data) { // 异步加载成功后的回调 回调参数加载返回数据
|
|
console.log(data)
|
|
},
|
|
remoteMethod: function (value, cb) { // 远程搜索的回调函数
|
|
// value 是input实施输入的value值
|
|
// cb是回调处理函数,请在执行ajax搜索请求成功之后执行此回调函数
|
|
|
|
//案例
|
|
//这里如果val为空, 则不触发搜索
|
|
if (!value) {
|
|
return cb([]);
|
|
}
|
|
// 判断能否从本地缓存取到数据
|
|
// if(!localStorage.getItem('annotateData')) {
|
|
if(ins.options.invisibleData.length == 0) {
|
|
//这里的$.ajax去请求后台拿回数据
|
|
console.log('请求ajax')
|
|
var curWwwPath = window.document.location.href;
|
|
var pathName = window.document.location.pathname;
|
|
var pos = curWwwPath.indexOf(pathName);
|
|
var localhostPaht = curWwwPath.substring(0, pos);
|
|
var projectName = pathName.substring(0, pathName.substr(1).indexOf('/')+1);
|
|
var realPath = localhostPaht+projectName;
|
|
|
|
|
|
// let url ="https://www.fastmock.site/mock/98228b1f16b7e5112d6c0c87921eabc1/xmSelect/search";
|
|
let url = `${realPath}`+'/EMREventServlet';
|
|
let reqData = {dataType : 'JSON',event : 'getQcstddic',data : ''};
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("post", url, false);
|
|
// xhr.responseType = "arraybuffer";
|
|
xhr.onload = function(e) {
|
|
if (xhr.status == 200) {
|
|
try{
|
|
var respData = JSON.parse(xhr.response);
|
|
const { data } = respData;
|
|
ins.options.remoteSearch = false;
|
|
return cb(data)
|
|
}finally{
|
|
}
|
|
}
|
|
}
|
|
xhr.send(JSON.stringify(reqData));
|
|
}
|
|
|
|
}
|
|
});
|
|
|
|
// 监听input 实时输入事件
|
|
ins.on('itemInput(test1)', function (obj) {
|
|
console.log($(obj).val());
|
|
});
|
|
|
|
// 监听select 选择事件
|
|
ins.on('itemSelect(test1)', function (obj) {
|
|
console.log("选择后的");
|
|
console.log(obj);
|
|
});
|
|
|
|
// 获取选中的value值
|
|
// var selectValue = ins.getValue();
|
|
|
|
if(_vAnnotate!=undefined){//
|
|
document.getElementsByName("content")[0].value = _vAnnotate.Text;
|
|
document.getElementsByName("title")[0].value = _vAnnotate.Title;
|
|
}
|
|
|
|
// 清空输入框的value值
|
|
//ins.emptyValue();
|
|
|
|
|
|
$("#addSelect").click(function () {
|
|
ins.addSelect([{
|
|
value: 'aa bb',
|
|
name: 1111
|
|
},
|
|
{
|
|
value: 2333,
|
|
name: 2222
|
|
},
|
|
{
|
|
value: 2333,
|
|
name: 2333
|
|
},
|
|
{
|
|
value: 2333,
|
|
name: 2333
|
|
},
|
|
{
|
|
value: 6666,
|
|
name: 9999
|
|
},
|
|
{
|
|
value: 8888,
|
|
name: 101010
|
|
},
|
|
])
|
|
});
|
|
|
|
$("#emptyValue").click(function () {
|
|
ins.emptyValue();
|
|
})
|
|
|
|
$("#getValue").click(function () {
|
|
var value = ins.getValue();
|
|
if (value) {
|
|
if (typeof (value) === 'object') {
|
|
layer.msg(JSON.stringify(value));
|
|
} else {
|
|
layer.msg(value);
|
|
}
|
|
} else {
|
|
layer.msg('请先选择');
|
|
}
|
|
})
|
|
|
|
/**
|
|
* 监听提交
|
|
*/
|
|
// form.on('submit(*)', function(data){
|
|
// layer.msg(JSON.stringify(data.field));
|
|
// return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
|
|
// });
|
|
// 如果使用本地数据加载,不要使用设置远程 url参数 也不要将remoteSearch参数设置为 true,完整的本地赋值数据案例
|
|
// var ins2 = selectInput.render({
|
|
// elem: '#test1',
|
|
// data: [
|
|
// {value: 1111, name: 1111},
|
|
// {value: 2333, name: 2222},
|
|
// {value: 2333, name: 2333},
|
|
// {value: 2333, name: 2333},
|
|
// ],
|
|
// placeholder: '请输入名称',
|
|
// name: 'list_common',
|
|
// remoteSearch: false
|
|
// });
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |