/**
|
* layui扩展组件
|
* 输入框的下拉表格选择（分页）
|
* */
|
layui.define(['table', 'jquery', 'form'], function (exports) {
|
"use strict";
|
|
var MOD_NAME = 'tableSelect',
|
$ = layui.jquery,
|
table = layui.table,
|
form = layui.form;
|
var tableSelect = function () {
|
this.v = '1.4.0';
|
};
|
|
//物料表格下拉搜索框使用案例
|
//tableSelect.render({
|
// elem: '#HMATERIALNAME',
|
// checkedKey: 'HItemID',
|
// searchKey: '物料代码,物料名称',
|
// sWhere: '',//table搜索sWhere条件
|
// table: {
|
// url: GetWEBURL() + 'Gy_Material/page',
|
// where: { user: sessionStorage["HMaker"], "Organization": sessionStorage["Organization"] },
|
// cols: [[
|
// { type: 'checkbox', fixed: 'left' },
|
// { field: 'HItemID', title: 'HItemID' },
|
// { field: '物料代码', title: '物料代码' },
|
// { field: '物料名称', title: '物料名称' },
|
// ]],
|
// page: true,
|
// limit: 5,
|
// limits: [5]
|
// },
|
// done: function (elem, data) {
|
// if (data != []) {
|
// //获取数据
|
// /*$("#HMATERIALNAME").blur();//单元格失去焦点*/
|
// $("#HMATERIALID").val(data.data[0].HItemID);
|
// $("#HMATERIALNAME").val(data.data[0].物料名称);
|
// get_FastQuery()
|
// }
|
|
// }
|
//})
|
//工序表格下拉搜索框
|
//tableSelect.render({
|
// elem: 'td[data-field="工序"] .layui-table-edit',
|
// searchKey: '工序代码,工序名称',
|
// sWhere: " and 明细标记 = 'Y' and 禁用标记 != 'Y'",//table搜索sWhere条件
|
// ajaxSelect: function (sWhere) {
|
// var data = '';
|
// $.ajax({
|
// url: GetWEBURL() + '/Gy_Process/list',
|
// type: "GET",
|
// data: { "sWhere": sWhere, "user": sessionStorage["HUserName"] },
|
// async: false,
|
// success: function (data1) {
|
// if (data1.count == 1) {
|
// data = data1.data
|
// }
|
// },
|
// error: function () {
|
// layer.alert('获取列表失败！', { icon: 15, title: '通信错误' });
|
// }
|
// });
|
// return data;
|
// },//设置前端分页时可以设置的
|
// table: {
|
// cols: [[
|
// { type: 'radio', fixed: 'left' },
|
// { field: 'HItemID', title: 'HItemID', hide: true },
|
// { field: '工序代码', title: '工序代码' },
|
// { field: '工序名称', title: '工序名称' },
|
// { field: 'HProcMulID', title: 'HProcMulID', hide: true },
|
// { field: '工段名称', title: '工段名称' }
|
// ]],
|
// page: true,
|
// limit: 5,
|
// //limits: [5]
|
// },
|
// done: function (elem, data) {
|
// $(".layui-table-edit").blur();//单元格失去焦点
|
// //setTableByHMater(obj, data);
|
// }
|
//})
|
|
/**
|
* 初始化表格选择器
|
*/
|
tableSelect.prototype.render = function (opt) {
|
var elem = $(opt.elem);
|
|
//默认设置
|
opt.searchKey = opt.searchKey || 'keyword';//可多个用，分割
|
opt.table.page = opt.table.page || false;
|
opt.table.height = opt.table.height || 290;
|
elem.off('keyup').on('keyup', function(e) {
|
e.stopPropagation();
|
//输入字符小于二或者特殊按钮不显示
|
if ($('div.tableSelect').length >= 1 || elem.val().length <= 2 || event.key == "F7" || event.key == "F8" || event.key == "F6") {
|
return false;
|
}
|
|
var t = elem.offset().top + elem.outerHeight()+"px";
|
var l = elem.offset().left +"px";
|
var tableName = "tableSelect_table_" + new Date().getTime();
|
var tableBox = '<div class="tableSelect layui-anim layui-anim-upbit" style="left:'+l+';top:'+t+';border: 1px solid #d2d2d2;background-color: #fff;box-shadow: 0 2px 4px rgba(0,0,0,.12);padding:10px 10px 0 10px;position: absolute;z-index:66666666;margin: 5px 0;border-radius: 2px;min-width:530px;">';
|
tableBox += '<div class="tableSelectBar">';
|
tableBox += '<button style="float:left;" class="layui-btn layui-btn-sm tableSelect_btn_select">选择<span></span></button>';
|
tableBox += '</div>';
|
tableBox += '<table id="'+tableName+'" lay-filter="'+tableName+'" style="margin-top:20px"></table>';
|
tableBox += '</div>';
|
tableBox = $(tableBox);
|
$('body').append(tableBox);
|
//渲染TABLE
|
opt.table.elem = "#"+tableName;
|
opt.table.id = tableName;
|
//若没有url表示为前端分页
|
//if (opt.table.url != undefined) {
|
// opt.table.where['sWhere'] = opt.sWhere
|
//} else {
|
// opt.table.data = opt.ajaxSelect(opt.sWhere);
|
//}
|
//让一次加载显示数据
|
//当字符长度等于3时第一次加载
|
if (elem.val().length == 3) {
|
searchFirst()
|
}
|
opt.table.request={//设置页参数
|
pageName: 'page', // 页码的参数名称，默认：page
|
limitName: 'size' // 每页数据条数的参数名，默认：limit
|
};
|
opt.table.parseData=function(res){
|
return {
|
"code": 0, // 解析接口状态
|
"msg": res.Message, // 解析提示文本
|
"count": res.count, // 解析数据长度
|
"data": res.data // 解析数据列表
|
};
|
}
|
|
var tableSelect_table = table.render(opt.table);
|
|
//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': elem.offset().top - tableBox.outerHeight()+'px','bottom':'auto'});
|
overWidth && tableBox.css({'left':'auto','right':'5px'})
|
|
//输入框上下回车动作
|
elem.off('keydown').on('keydown', function (e) {
|
var tableElem = $(opt.table.elem).next().find('tbody');
|
//单选框上下键动作
|
if (opt.table.cols[0][0]["type"] == "radio") {
|
// 获取表格的选中的行
|
var tr = tableElem.find('tr.layui-table-click');
|
switch (event.key) {
|
case "ArrowUp"://上键
|
if (tr.length == 0) {
|
tableElem.find('tr:first').children('td').eq(0).click();
|
} else {
|
tr['prev']().children('td').click();
|
}
|
break;
|
case "ArrowDown"://下键
|
if (tr.length == 0) {
|
tableElem.find('tr:first').children('td').eq(0).click();
|
} else {
|
tr['next']().children('td').click();
|
}
|
break;
|
case "Enter"://回车
|
tableBox.find('.tableSelect_btn_select').click();
|
break;
|
}
|
} else {
|
//多选框
|
var checkbox = tableElem.find('input[type="checkbox"]:checked');
|
var tr = checkbox.closest('tr');
|
switch (event.key) {
|
case "ArrowUp"://上键
|
if (tr.length == 0) {
|
tableElem.find('tr:first').children('td').eq(0).click();
|
} else {
|
tr.children('td').eq(0).click();
|
tr['prev']().children('td').eq(0).click();
|
}
|
break;
|
case "ArrowDown"://下键
|
if (tr.length == 0) {
|
tableElem.find('tr:first').children('td').eq(0).click();
|
} else {
|
tr.children('td').eq(0).click();
|
tr['next']().children('td').eq(0).click();
|
}
|
break;
|
case "Enter"://回车
|
tableBox.find('.tableSelect_btn_select').click();
|
break;
|
}
|
}
|
|
})
|
// 防抖函数
|
function debounce(func, wait) {
|
let timeout;
|
return function () {
|
const context = this, args = arguments;
|
clearTimeout(timeout);
|
timeout = setTimeout(() => func.apply(context, args), wait);
|
};
|
}
|
//搜索函数第一次加载
|
function searchFirst() {
|
var searchKeyList = opt.searchKey.split(',');//获取查找的关键字搜索框
|
//拼接sql字符串
|
var sWhereStr = " and ("
|
searchKeyList.forEach(function (value, index) {
|
if (index == 0) {
|
sWhereStr += (value + " like '%" + elem.val() + "%' ")
|
} else {
|
sWhereStr += ("or " + value + " like '%" + elem.val() + "%' ")
|
}
|
})
|
sWhereStr += ")"
|
//后端分页搜索
|
if (opt.table.where != undefined) {
|
opt.table.where['sWhere'] = opt.sWhere + sWhereStr;
|
} else {
|
var sWhere = opt.sWhere + sWhereStr;
|
opt.table.data = opt.ajaxSelect(sWhere);
|
}
|
}
|
|
//输入框输入执行
|
elem.off('input').on('input', debounce(
|
function (e) {
|
// 阻止表单提交（如果输入框在表单内）
|
e.preventDefault();
|
var searchKeyList = opt.searchKey.split(',');//获取查找的关键字搜索框
|
//拼接sql字符串
|
var sWhereStr = " and ("
|
searchKeyList.forEach(function (value, index) {
|
if (index == 0) {
|
sWhereStr += (value + " like '%" + elem.val() + "%' ")
|
} else {
|
sWhereStr += ("or " + value + " like '%" + elem.val() + "%' ")
|
}
|
})
|
sWhereStr +=")"
|
//后端分页搜索
|
if (opt.table.where != undefined) {
|
opt.table.where['sWhere'] = opt.sWhere + sWhereStr;
|
tableSelect_table.reload({
|
where: opt.table.where,
|
page: {
|
curr: 1
|
}
|
});
|
} else {
|
var sWhere = opt.sWhere + sWhereStr;
|
tableSelect_table.reload({
|
data: opt.ajaxSelect(sWhere)
|
});
|
}
|
|
},500))
|
|
//双击行选中
|
table.on('rowDouble('+tableName+')', function(obj){
|
var checkStatus = {data:[obj.data]};
|
selectDone(checkStatus);
|
})
|
//单击选中行
|
table.on('row('+tableName+')', function (obj) {
|
//判断是否已经被选中是否是单选框
|
if (obj.tr.find('.layui-form-radioed').length == 0 && opt.table.cols[0][0]["type"] == "radio") {
|
//触发单选框选中事件
|
obj.tr.find('i[class="layui-anim layui-icon"]').trigger("click");
|
} else if(opt.table.cols[0][0]["type"] == "checkbox") { //复选框选中
|
//选中行改变颜色
|
var flag = !obj.tr.find(':checkbox:first').prop('checked');
|
obj.tr.find(':checkbox').prop('checked', flag);
|
if (flag) {
|
obj.tr.find('.layui-form-checkbox').addClass('layui-form-checked'); //设置复选框选中样式
|
$(obj.tr).attr({ "style": "background:#ceedfa;color:black" });//改变当前tr背景颜色和字体颜色
|
} else {
|
obj.tr.find('.layui-form-checkbox').removeClass('layui-form-checked');//取消复选框选中样式
|
$(obj.tr).attr({ "style": "background:" });//取消当前tr颜色
|
}
|
//mainTable 为表格ID 注意此处如果ID不正确将导致你在监听复选框时获取不到你选择的数据，前面的只是添加或删除选中未选中样式以及设置背景色，字体颜色
|
layui.each(table.cache[tableName], function (i, l) {
|
if (obj.tr.index() == l.LAY_TABLE_INDEX) {
|
l.LAY_CHECKED = flag;
|
}
|
});
|
//更新按钮（无用删除）
|
//updataButton(table.checkStatus(tableName).data.length)
|
}
|
})
|
//按钮选中
|
tableBox.find('.tableSelect_btn_select').on('click', function() {
|
var checkStatus = table.checkStatus(tableName);
|
if (checkStatus.data.length > 0) {
|
selectDone(checkStatus);
|
} else {
|
tableBox.remove();
|
delete table.cache[tableName];
|
}
|
|
})
|
|
//写值回调和关闭
|
function selectDone (checkStatus){
|
opt.done(elem, checkStatus);
|
tableBox.remove();
|
delete table.cache[tableName];
|
$(opt.elem).blur();
|
}
|
|
//点击其他区域关闭
|
$(document).mouseup(function(e){
|
var userSet_con = $(''+opt.elem+',.tableSelect');
|
if(!userSet_con.is(e.target) && userSet_con.has(e.target).length === 0){
|
tableBox.remove();
|
delete table.cache[tableName];
|
}
|
});
|
})
|
}
|
|
/**
|
* 隐藏选择器
|
*/
|
tableSelect.prototype.hide = function (opt) {
|
$('.tableSelect').remove();
|
}
|
|
//自动完成渲染
|
var tableSelect = new tableSelect();
|
|
//FIX 滚动时错位
|
if(window.top == window.self){
|
$(window).scroll(function () {
|
tableSelect.hide();
|
});
|
}
|
|
exports(MOD_NAME, tableSelect);
|
})
|
