效果图:
步骤:
1,引入插件tableSelect
layui.config({
base: '/static/layui-v2.5.6/ext/',// 第三方模块所在目录
version: 'v1.5.10' // 插件版本号
}).extend({
soulTable: 'soulTable/soulTable',
tableChild: 'soulTable/tableChild',
tableMerge: 'soulTable/tableMerge',
tableFilter: 'soulTable/tableFilter',
excel: 'soulTable/excel',
treeGrid:'treegrid/treeGrid',
tableSelect:'tableSelect/tableSelect', // 插件
excel:'excel/excel'
});
// 使用插件
layui.use(['form','table','soulTable','laypage','layer','tree', 'util','tableSelect','excel'], function() {
hsgriad()
})
2,页面样式
<label style="padding:0px 10px 0px 5px;">核算单元</label>
<div class="layui-inline">
<input type="text" style="height: 26px;width: 120px;" placeholder="请选择" autocomplete="off" class="layui-input" name="unit" id="unit" >
</div>
3,设置路径,前端请求数据
核算单元数据下拉框请求路径,获取数值
function hsgriad() {
var tableSelect = layui.tableSelect;
tableSelect.render({
elem: '#unit',
size: 'sm',//定义输入框input对象 必填
checkedKey: 'code', //表格的唯一建值,非常重要,影响到选中状态 必填
searchKey: 'keyword', //搜索输入框的name值 默认keyword
searchPlaceholder: '关键词搜索', //搜索输入框的提示文字 默认关键词搜索
page:false,
table: { //定义表格参数,与LAYUI的TABLE模块一致,只是无需再定义表格elem
page:false,
url:'/**/getList',
cols: [[
{type: 'checkbox' },
{field:'code',title:'编码',width:150,sortable:true},
{field:'name',title:'名称',width:250,sortable:true},
]]
},
done: function (elem, data) {
var NEWJSON = []
var bzcodejson=[]
layui.each(data.data, function (index, item) {
NEWJSON.push(item.name)
bzcodejson.push(item.code)
})
elem.val(NEWJSON.join(","))
//给下拉框增加一个属性unitcodes,以字符串的形式存储数据
$("#unit").attr("units",bzcodejson.join(","))
}
})
}
4,后端处理数据表格下拉框的数据,响应请求
@RequestMapping(value = "/getList")
@ResponseBody
public HashMap<String, Object> getList(@RequestParam HashMap<String, String> paraMap) {
try {
LinkedHashMap<String, String> orderby = new LinkedHashMap<>();
orderby.put("bzcode","asc");
List<Tbz4Entity> resultlist = new LinkedList<>();
List<HashMap<String, Object>> list = new LinkedList<>();
resultlist = commonApiDao.getScrollData(Tbz4Entity.class, " 1=1 ", new Object[]{},orderby).getResultlist();
for (int i = 0; i < resultlist.size(); i++) {
HashMap<String, Object> map = new HashMap<>();
map.put("code", resultlist.get(i).getBzcode());
map.put("namereal", resultlist.get(i).getBzname());
map.put("name", resultlist.get(i).getBzname() + "" + ToFirstChar(resultlist.get(i).getBzname().replace("《", "").replace("》", "")));
list.add(i, map);
}
list=
list.stream().filter(
stringObjectHashMap -> {
if(paraMap.get("keyword")!=null){
return stringObjectHashMap.get("name").toString().indexOf(paraMap.get("keyword"))>-1;
}
return true;
}
).collect(Collectors.toList());
HashMap<String, Object> objectHashMap = createResult(true, "成功");
objectHashMap.put("datalist", list);
objectHashMap.put("data", list); //将值提交到前端
objectHashMap.put("code", 0);
return objectHashMap;
} catch (Exception e) {
log.error(e.getMessage(),e);
return createResult(false, "失败");
}
}
5,查询功能获取核算单元数据传入后端方式
bzcodes:$("#unit").attr("units"),
传入的数据格式
{
"msg": "成功",
"code": 0,
"success": true,
"data": [{
"code": "1300",
"name": "放射科-普通放射fsk-ptfs",
"namereal": "放射科-普通放射"
}, {
"code": "3300",
"name": "放射科-磁共振室fsk-cgzs",
"namereal": "放射科-磁共振室"
}]
}
附件:tableSelect插件代码
tableSelect.js 文件代码
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.1.0';
this.cacheObj ={};
};
/**
* 初始化表格选择器
*/
tableSelect.prototype.render = function (opt) {
var elem = $(opt.elem);
var tableDone = opt.table.done || function(){};
//默认设置
opt.searchKey = opt.searchKey || 'keyword';
opt.searchPlaceholder = opt.searchPlaceholder || '关键词搜索';
opt.checkedKey = opt.checkedKey;
opt.table.page = opt.table.page==undefined?true:opt.table.page;
opt.table.size = "sm";
opt.table.height = opt.table.height || 315;
var functionVar=function(e) {
e.stopPropagation();
if(document.getElementById("tableSelectSearchInput")){
$("#tableSelectSearchInput").val(elem.val())
var e = document.createEvent("Event");
e.initEvent("oninput", true, true);
document.getElementById("tableSelectSearchInput").dispatchEvent(e);
$("#tableSelectSearchInput").trigger("oninput");
}
if($('div.tableSelect').length >= 1){
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 += '<form lay-filter="tableSelectForm" id="tableSelectForm" class="layui-form" action="" style="display:inline-block;">';
tableBox += '<input id="tableSelectSearchInput" οninput="layui.tableSelect.searchInput(\''+tableName+'\');" style="display:inline-block;width:190px;height:26px;vertical-align:middle;margin-right:-1px;border: 1px solid #C9C9C9;" type="text" name="'+opt.searchKey+'" placeholder="'+opt.searchPlaceholder+'" autocomplete="off" class="layui-input"><button class="layui-btn layui-btn-sm layui-btn-primary tableSelect_btn_search" lay-submit lay-filter="tableSelect_btn_search"><i class="layui-icon layui-icon-search"></i></button>';
tableBox += '</form>';
tableBox += '<button style="float:right;" class="layui-btn layui-btn-sm tableSelect_btn_select">选择<span></span></button>';
tableBox += '</div>';
tableBox += '<table id="'+tableName+'" lay-filter="'+tableName+'"></table>';
tableBox += '</div>';
tableBox = $(tableBox);
$('body').append(tableBox);
//数据缓存
var checkedData = [];
//渲染TABLE
opt.table.elem = "#"+tableName;
opt.table.id = tableName;
opt.table.done = function(res, curr, count){
defaultChecked(res, curr, count);
setChecked(res, curr, count);
tableDone(res, curr, count);
};
var tableSelect_table = table.render(opt.table);
tableSelect.cacheObj[tableName]=tableSelect_table;
//分页选中保存数组
table.on('radio('+tableName+')', function(obj){
if(opt.checkedKey){
checkedData = table.checkStatus(tableName).data
}
updataButton(table.checkStatus(tableName).data.length)
})
table.on('checkbox('+tableName+')', function(obj){
if(opt.checkedKey){
if(obj.checked){
for (var i=0;i<table.checkStatus(tableName).data.length;i++){
checkedData.push(table.checkStatus(tableName).data[i])
}
}else{
if(obj.type=='all'){
for (var j=0;j<table.cache[tableName].length;j++) {
for (var i=0;i<checkedData.length;i++){
if(checkedData[i][opt.checkedKey] == table.cache[tableName][j][opt.checkedKey]){
checkedData.splice(i,1)
}
}
}
}else{
//因为LAYUI问题,操作到变化全选状态时获取到的obj为空,这里用函数获取未选中的项。
function nu (){
var noCheckedKey = '';
for (var i=0;i<table.cache[tableName].length;i++){
if(!table.cache[tableName][i].LAY_CHECKED){
noCheckedKey = table.cache[tableName][i][opt.checkedKey];
}
}
return noCheckedKey
}
var noCheckedKey = obj.data[opt.checkedKey] || nu();
for (var i=0;i<checkedData.length;i++){
if(checkedData[i][opt.checkedKey] == noCheckedKey){
checkedData.splice(i,1);
}
}
}
}
checkedData = uniqueObjArray(checkedData, opt.checkedKey);
updataButton(checkedData.length)
}else{
updataButton(table.checkStatus(tableName).data.length)
}
});
//渲染表格后选中
function setChecked (res, curr, count) {
for(var i=0;i<res.data.length;i++){
for (var j=0;j<checkedData.length;j++) {
if(res.data[i][opt.checkedKey] == checkedData[j][opt.checkedKey]){
res.data[i].LAY_CHECKED = true;
var index= res.data[i]['LAY_TABLE_INDEX'];
var checkbox = $('#'+tableName+'').next().find('tr[data-index=' + index + '] input[type="checkbox"]');
checkbox.prop('checked', true).next().addClass('layui-form-checked');
var radio = $('#'+tableName+'').next().find('tr[data-index=' + index + '] input[type="radio"]');
radio.prop('checked', true).next().addClass('layui-form-radioed').find("i").html('');
}
}
}
var checkStatus = table.checkStatus(tableName);
if(checkStatus.isAll){
$('#'+tableName+'').next().find('.layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
$('#'+tableName+'').next().find('.layui-table-header th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');
}
updataButton(checkedData.length)
}
//写入默认选中值(puash checkedData)
function defaultChecked (res, curr, count){
if(opt.checkedKey && elem.attr('ts-selected')){
var selected = elem.attr('ts-selected').split(",");
for(var i=0;i<res.data.length;i++){
for(var j=0;j<selected.length;j++){
if(res.data[i][opt.checkedKey] == selected[j]){
checkedData.push(res.data[i])
}
}
}
checkedData = uniqueObjArray(checkedData, opt.checkedKey);
}
}
//更新选中数量
function updataButton (n) {
tableBox.find('.tableSelect_btn_select span').html(n==0?'':'('+n+')')
}
//数组去重
function uniqueObjArray(arr, type){
var newArr = [];
var tArr = [];
if(arr.length == 0){
return arr;
}else{
if(type){
for(var i=0;i<arr.length;i++){
if(!tArr[arr[i][type]]){
newArr.push(arr[i]);
tArr[arr[i][type]] = true;
}
}
return newArr;
}else{
for(var i=0;i<arr.length;i++){
if(!tArr[arr[i]]){
newArr.push(arr[i]);
tArr[arr[i]] = true;
}
}
return newArr;
}
}
}
//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'});
overWidth && tableBox.css({'left':'auto','right':'5px'})
//关键词搜索
form.on('submit(tableSelect_btn_search)', function(data){
tableSelect_table.reload({
where: data.field
// page: {
// curr: 1
// }
});
return false;
});
//双击行选中
table.on('rowDouble('+tableName+')', function(obj){
var checkStatus = {data:[obj.data]};
selectDone(checkStatus);
})
//按钮选中
tableBox.find('.tableSelect_btn_select').on('click', function() {
var checkStatus = table.checkStatus(tableName);
if(checkedData.length > 1){
checkStatus.data = checkedData;
}
selectDone(checkStatus);
})
//写值回调和关闭
function selectDone (checkStatus){
if(opt.checkedKey){
var selected = [];
for(var i=0;i<checkStatus.data.length;i++){
selected.push(checkStatus.data[i][opt.checkedKey])
}
elem.attr("ts-selected",selected.join(","));
}
opt.done(elem, checkStatus);
tableBox.remove();
delete table.cache[tableName];
checkedData = [];
}
//点击其他区域关闭
$(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];
delete tableSelect.cacheObj[tableName];
checkedData = [];
}
});
}
elem.off('click').on('click',functionVar);
elem.off('input').on('input',functionVar);
}
/**
* 隐藏选择器
*/
tableSelect.prototype.hide = function (opt) {
$('.tableSelect').remove();
}
tableSelect.prototype.searchInput = debounce(function (seltablename) {
tableSelect.cacheObj[seltablename].reload({
where: form.val("tableSelectForm")
// page: {
// curr: 1
// }
});
},100)
// 第四版(立即执行,停止触发 n 秒后,才可以重新触发执行。反过来)
function debounce(func, wait, immediate) {
// immediate默认为false
var timeout, args, context, timestamp, result;
var later = function() {
// 当wait指定的时间间隔期间多次调用_.debounce返回的函数,则会不断更新timestamp的值,导致last < wait && last >= 0一直为true,从而不断启动新的计时器延时执行func
var last = Date.now() - timestamp;
if(last < wait && last >= 0) {
timeout = setTimeout(later, wait - last);
} else {
timeout = null;
if(!immediate) {
result = func.apply(context, args);
if(!timeout) context = args = null;
}
}
};
return function() {
context = this;
args = arguments;
timestamp = Date.now();
// 第一次调用该方法时,且immediate为true,则调用func函数
var callNow = immediate && !timeout;
// 在wait指定的时间间隔内首次调用该方法,则启动计时器定时调用func函数
if(!timeout) timeout = setTimeout(later, wait);
if(callNow) {
result = func.apply(context, args);
context = args = null;
}
return result;
};
};
//自动完成渲染
var tableSelect = new tableSelect();
//FIX 滚动时错位
if(window.top == window.self){
$(window).scroll(function () {
tableSelect.hide();
});
}
exports(MOD_NAME, tableSelect);
})