效果图：
步骤
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() {
// gettask()
ksgriad()
hsgriad()
hstable()
})
2，页面样式
<label class="layui-form-label layui-form-label-dlext" style="padding:4px 5px 9px 5px;width: auto;">科室</label>
<div class="layui-input-inline" style="width: auto;">
<input type="text" style="height: 26px;width: 120px;" placeholder="请选择" autocomplete="off" class="layui-input" name="kscode" id="kscode" >
</div>
<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 ksgriad() {
var tableSelect = layui.tableSelect;
tableSelect.render({
elem: '#kscode',
size: 'sm',//定义输入框input对象 必填
checkedKey: 'code', //表格的唯一建值，非常重要，影响到选中状态 必填
searchKey: 'keyword', //搜索输入框的name值 默认keyword
searchPlaceholder: '关键词搜索', //搜索输入框的提示文字 默认关键词搜索
page:false,
table: {
//定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
page:false,
url:'/CbhsXmftUnitmapController/getKsList?sjkey=0',
cols: [[
{
type: 'radio' },
{
field:'code',title:'编码',width:150,sortable:true},
{
field:'name',title:'名称',width:150,sortable:true},
]]
},
done: function (elem, data) {
var NEWJSON = [] // 下拉框的输入的值
layui.each(data.data, function (index, item) {
NEWJSON.push(item.name)
kscode=item.code
ksname=item.name
hsgriad();
gettask();
})
elem.val(NEWJSON.join(",")) // 下拉框里面显示选中的值
}
})
}
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:'/CbhsXmftUnitmapController/gethsUnitList?kscode='+kscode,
cols: [[
{
type: 'checkbox' },
{
field:'code',title:'编码',width:150,sortable:true},
{
field:'name',title:'名称',width:250,sortable:true},
]]
},
done: function (elem, data) {
var NEWJSON = []
var unitcodejson=[]
layui.each(data.data, function (index, item) {
NEWJSON.push(item.name)
unitcodejson.push(item.code)
})
elem.val(NEWJSON.join(","))
//给下拉框增加一个属性unitcodes，以字符串的形式存储数据
$("#unit").attr("unitcodes",unitcodejson.join(","))
}
})
}
4，后端处理数据，响应请求
@RequestMapping(value = "getKsList")
@ResponseBody
public HashMap<String, Object> getKsList(@RequestParam HashMap<String, String> paraMap) {
try {
LinkedHashMap<String, String> orderby = new LinkedHashMap<>();
orderby.put("code","asc");
List<SysKsInfoEntity> resultlist = new LinkedList<>();
List<HashMap<String, Object>> list = new LinkedList<>();
SessionUserInfoEntity sessionUserInfoEntity = RightUtil.getCurrentUser(Public.getRequest());
// 设置权限，不同的登录用户使用的查询语句不一样
if (!sessionUserInfoEntity.getLname().equalsIgnoreCase("admin")) {
String tmpsql = " select kscode from sys_ks_map where 1=1 ";
tmpsql += " and unitcode in (select unitcode from cbhs_hsunit_usermap where userid = '" + sessionUserInfoEntity.getUid() + "') ";
String levelcode2Sql = "select levelcode2 from sys_ks_info where code in (" + tmpsql + ")";
List<String> stringList = jdbcTemplate.queryForList(levelcode2Sql, String.class);
resultlist = commonApiDao.getScrollData(SysKsInfoEntity.class, "level=?0 and code in(?1)", new Object[]{
2, stringList},
orderby).getResultlist();
resultlist.addAll(commonApiDao.getScrollData(SysKsInfoEntity.class, "code=0", new Object[]{
},
orderby).getResultlist());
for (int i = 0; i < resultlist.size(); i++) {
HashMap<String, Object> map = new HashMap<>();
map.put("code", resultlist.get(i).getCode());
map.put("namereal", resultlist.get(i).getName());
map.put("name", resultlist.get(i).getName() + "" + ToFirstChar(resultlist.get(i).getName().replace("《", "").replace("》", "")));
list.add(i, map);
}
} else {
resultlist = commonApiDao.getScrollData(SysKsInfoEntity.class, "level=?0 or code=0", new Object[]{
2},
orderby).getResultlist();
for (int i = 0; i < resultlist.size(); i++) {
HashMap<String, Object> map = new HashMap<>();
map.put("code", resultlist.get(i).getCode());
map.put("namereal", resultlist.get(i).getName());
map.put("name", resultlist.get(i).getName() + "" + ToFirstChar(resultlist.get(i).getName().replace("《", "").replace("》", "")));
list.add(i, map);
}
}
if(!StringUtil.isEmptyOrLength0(paraMap.get("sjkey"))){
list= list.stream().filter(
stringObjectHashMap -> {
if(paraMap.get("sjkey").equals(stringObjectHashMap.get("code"))){
return false;
}
return true;
}
).collect(Collectors.toList());
}
// 在下拉框中对表格数据查询过滤
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, "失败");
}
}
传入的数据格式
{
"msg": "成功",
"code": 0,
"success": true,
"data": [{
"code": "13001300",
"name": "放射科-普通放射（主院区）fsk-ptfszyq",
"namereal": "放射科-普通放射（主院区）"
}, {
"code": "33001306",
"name": "放射科-磁共振室（中法新城）fsk-cgzszfxc",
"namereal": "放射科-磁共振室（中法新城）"
}]
}
附件：tableSelect插件代码
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);
})