| | |
|---|
| | | /** |
|---|
| | | * layui扩展组件 |
|---|
| | | * 输入框的下拉表格选择（分页） |
|---|
| | | * */ |
|---|
| | | layui.define(['table', 'jquery', 'form'], function (exports) { |
|---|
| | | "use strict"; |
|---|
| | | |
|---|
| | |
|---|
| | | table = layui.table, |
|---|
| | | form = layui.form; |
|---|
| | | var tableSelect = function () { |
|---|
| | | this.v = '1.2.0'; |
|---|
| | | this.v = '1.4.0'; |
|---|
| | | }; |
|---|
| | | |
|---|
| | | /** |
|---|
| | |
|---|
| | | var elem = $(opt.elem); |
|---|
| | | |
|---|
| | | //默认设置 |
|---|
| | | opt.searchKey = opt.searchKey || 'keyword'; |
|---|
| | | opt.checkedKey = opt.checkedKey; |
|---|
| | | opt.searchKey = opt.searchKey || 'keyword';//可多个用，分割 |
|---|
| | | opt.table.page = opt.table.page || false; |
|---|
| | | opt.table.height = opt.table.height || 290; |
|---|
| | | elem.off('click').on('click', function(e) { |
|---|
| | | elem.off('keyup').on('keyup', function(e) { |
|---|
| | | e.stopPropagation(); |
|---|
| | | if($('div.tableSelect').length >= 1){ |
|---|
| | | //输入字符小于二或者特殊按钮不显示 |
|---|
| | | if ($('div.tableSelect').length >= 1 || elem.val().length <= 2 || event.key == "F7" || event.key == "F8" || event.key == "F6") { |
|---|
| | | return false; |
|---|
| | | } |
|---|
| | | |
|---|
| | |
|---|
| | | tableBox += '</div>'; |
|---|
| | | tableBox = $(tableBox); |
|---|
| | | $('body').append(tableBox); |
|---|
| | | //数据缓存 |
|---|
| | | var checkedData = []; |
|---|
| | | //渲染TABLE |
|---|
| | | opt.table.elem = "#"+tableName; |
|---|
| | | opt.table.id = tableName; |
|---|
| | | opt.table.where['sWhere'] = opt.sWhere |
|---|
| | | //若没有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 |
|---|
| | |
|---|
| | | "data": res.data // 解析数据列表 |
|---|
| | | }; |
|---|
| | | } |
|---|
| | | opt.table.done = function(res, curr, count){ |
|---|
| | | defaultChecked(res, curr, count); |
|---|
| | | setChecked(res, curr, count); |
|---|
| | | }; |
|---|
| | | |
|---|
| | | var tableSelect_table = table.render(opt.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(''); |
|---|
| | | radio.closest('tr').addClass('layui-table-click'); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | 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(); |
|---|
| | |
|---|
| | | if (tr.length == 0) { |
|---|
| | | tableElem.find('tr:first').children('td').eq(0).click(); |
|---|
| | | } else { |
|---|
| | | tr.children('td').click(); |
|---|
| | | tr['prev']().children('td').click(); |
|---|
| | | tr.children('td').eq(0).click(); |
|---|
| | | tr['prev']().children('td').eq(0).click(); |
|---|
| | | } |
|---|
| | | break; |
|---|
| | | case "ArrowDown"://下键 |
|---|
| | | if (tr.length == 0) { |
|---|
| | | tr = tableElem.find('tr:first').children('td').eq(0).click(); |
|---|
| | | tableElem.find('tr:first').children('td').eq(0).click(); |
|---|
| | | } else { |
|---|
| | | tr.children('td').click(); |
|---|
| | | tr['next']().children('td').click(); |
|---|
| | | tr.children('td').eq(0).click(); |
|---|
| | | tr['next']().children('td').eq(0).click(); |
|---|
| | | } |
|---|
| | | break; |
|---|
| | | case "Enter"://回车 |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | }) |
|---|
| | | // 防抖函数 |
|---|
| | | 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', function (e) { |
|---|
| | | elem.off('input').on('input', debounce( |
|---|
| | | function (e) { |
|---|
| | | // 阻止表单提交（如果输入框在表单内） |
|---|
| | | e.preventDefault(); |
|---|
| | | opt.table.where['sWhere'] = opt.sWhere + " and " + opt.searchKey + " like '%" + elem.val() + "%' "; |
|---|
| | | tableSelect_table.reload({ |
|---|
| | | where: opt.table.where, |
|---|
| | | page: { |
|---|
| | | curr: 1 |
|---|
| | | 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) |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | |
|---|
| | | }) |
|---|
| | | // //关键词搜索 |
|---|
| | | // form.on('submit(tableSelect_btn_search)', function(data){ |
|---|
| | | // // console.log(" and "+opt.searchKey +"='" + data.opt.searchKey +"'") |
|---|
| | | // console.log(data); |
|---|
| | | // opt.table.where['sWhere'] = " and "+opt.searchKey +" like '%" + data.field[opt.searchKey] +"%' "; |
|---|
| | | // tableSelect_table.reload({ |
|---|
| | | // where: opt.table.where, |
|---|
| | | // page: { |
|---|
| | | // curr: 1 |
|---|
| | | // } |
|---|
| | | // }); |
|---|
| | | // return false; |
|---|
| | | // }); |
|---|
| | | },500)) |
|---|
| | | |
|---|
| | | //双击行选中 |
|---|
| | | table.on('rowDouble('+tableName+')', function(obj){ |
|---|
| | |
|---|
| | | l.LAY_CHECKED = flag; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | //更新按钮 |
|---|
| | | updataButton(table.checkStatus(tableName).data.length) |
|---|
| | | //更新按钮（无用删除） |
|---|
| | | //updataButton(table.checkStatus(tableName).data.length) |
|---|
| | | } |
|---|
| | | }) |
|---|
| | | //按钮选中 |
|---|
| | | tableBox.find('.tableSelect_btn_select').on('click', function() { |
|---|
| | | var checkStatus = table.checkStatus(tableName); |
|---|
| | | if(checkedData.length > 1){ |
|---|
| | | checkStatus.data = checkedData; |
|---|
| | | if (checkStatus.data.length > 0) { |
|---|
| | | selectDone(checkStatus); |
|---|
| | | } else { |
|---|
| | | tableBox.remove(); |
|---|
| | | delete table.cache[tableName]; |
|---|
| | | } |
|---|
| | | 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 = []; |
|---|
| | | $(opt.elem).blur(); |
|---|
| | | } |
|---|
| | | |
|---|
| | | //点击其他区域关闭 |
|---|
| | |
|---|
| | | if(!userSet_con.is(e.target) && userSet_con.has(e.target).length === 0){ |
|---|
| | | tableBox.remove(); |
|---|
| | | delete table.cache[tableName]; |
|---|
| | | checkedData = []; |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | }) |
|---|
