This is the 29th day of my participation in the August Wenwen Challenge.More challenges in August

Implementation as shown in figure forms can customize the filter, and how many Numbers can choose more than less, then the following table data display conditions within the data automatically, without interface, the front-end realization of its function, can also according to the requirements of the company to achieve callback interface, can be in me this method upon, I here is no callback interface.

First, define the table, and put it in div, because you are afraid of the name of the same error, or click no effect problem.

//HTML <div style="width: 100%; height: 400px; background: #fff;" class="mainuserBox"> <table class="layui-table layui-form" id="user-table" lay-filter="user-table"></table> </div>Copy the code

Second, to achieve the content of the frame, first draw the interface of the frame

<div class="handlePop_mainUserInfoBox" style="display: none;" > <div class="layui-form"> <div class="clearFilterPop_mainuserBox"> Clear conditions </div> <div class="layui-form-item layui-form-pane"> <div class="flex"> <div class="layui-inline" style="margin-right: 0;" > <div class="layui-input-inline" style="width: 60px; margin-right: 0;" > <select name="dyxy" lay-filter="filterPop_mainuserBox" id="filterPop_mainuserBox"> <option value=""> </option> <option value="0">></option> <option value="1">>=</option> <option value="2"><</option> <option value="3"><=</option> </select> </div> </div> <div class="layui-inline" style="margin-right: 0;" > <div class="layui-input-inline" style="margin-right: 0; width: 140px"> <input placeholder=" type="text" class="layui-input filterNumPop_mainuserBox"/> </div> </div> <button type="button" class="layui-btn layui-btn-sm searchFilterPop_mainuserBox" style="margin-top: 5px; margin-left: 4px;" </button> <div class="layui-inline" style="margin-right: 0; > <div class="layui-input-inline" style="margin-right: 0; width: 249px;" > <select name="filterName" lay-filter="filterNamePop_mainuserBox" lay-search="" class="filterNamePop_mainuserBox"> < option value = "" > directly or search selection < option > < / select > < / div > < / div > < / div > < / div > < ul > < / ul > < / div > < style type =" text/CSS" scoped> .flex { display: flex; } .xjtIcon { width: 15px; height: 15px; float: right; margin-top: 5px; cursor: pointer; } .flex { display: flex; } .handlePop_mainUserInfoBox { position: absolute; min-width: 70px; min-height: 26px; top: 130px; left: 153px; background: #fff; z-index: 999; color: #444; line-height: 26px; border: 2px solid #e0e0e0; padding: 0 10px; } .handlePop_mainUserInfoBox li { cursor: pointer; padding: 0 10px; } .handlePop_mainUserInfoBox li:hover { background: #efefef; } .inputItemPop { width: 89%; margin: 10px 0 0 6px; height: 30px; line-height: 30px; border: 1px solid #999; border-radius: 2px; padding-left: 5px; } .clearFilterPop_mainuserBox { text-align: right; cursor: pointer; } </style>Copy the code

The styles and pop-ups are here, mainly the dropdown alignment

Start defining the table using layui’s framework definition

Let tableColArr_user = [[{field: 'areaname', title: 'region ',width:110},{field: 'name', title:' user name'},{field: 'age, the title:' age '}, {field: 'gender, the title:' gender '}]] table. The render ({elem: '#user-table', id:"user-table", defaultToolbar:['filter'], title:" user info ",// 400, method:'POST', page:true, data:[{// 'female'}, {areaname: 'nanjing' name: 'the little gray, age: 2, gender:' male '}, {areaname: 'nanjing' name: 'big kratos' age: 18, gender:' male '}], the response: {statusCode: 1},parseData: function(res){return {"code": 1, // parse the interface status "MSG ": res. MSG, // parse the prompt text "count": res.count, // parse the data length "data": res.data // parse the data list}; }, cellMinWidth: 150, cols: tableColArr_user, limits:,30,50,100,200,500,1000,2000,3000 [15], limit: 15, done: function(res) { tableDone_user(res.data) } });Copy the code

TableColArr_user = tableColArr_user = tableColArr_user = tableColArr_user = tableColArr_user = tableColArr_user = tableColArr_user Here, the title is defined in the table so that when the export function is available, the export file name is the content of the title. Otherwise, the export may be in English. Then, if multiple pages have the export function, it may be confused and the customer will ask questions.

4. Realize the function of tableDone after table loading

If (tableData.length > 0) {function tableDone_user(tableData) {if(tableData &&tabledata.length > 0) { isFirstSearch_mainuserBox = true; if(! isClickXjt_mainuserBox) { tableList_mainuserBox = tableData; }} // Display the drop-down arrow, If (isFirstSearch_mainuserBox) {$(".layui-table-view[lay-id='user-table'].layui-table-header th").each(function(index,el) { if($(el).find(".layui-table-cell")[0].children.length == 1 && index ! = 0) { $(el).find(".layui-table-cell").addClass("flex"); $(el).find(".layui-table-cell").append("<img src='.. /.. /.. /.. / assets/images/xjtIcon. PNG 'data - independence idx =' "+ index +" 'class =' xjtIcon '/ > ")}})} / / $(" drop-down menu click events. MainuserBox .xjtIcon").click(function(e) { let idx = $(this)[0].dataset.idx; searchKey_mainuserBox = ""; for(let i = 0; i<tableColArr_user[0].length; If (idx == I) {searchKey_mainuserBox = tableColArr_user[0][I].field; break; }} setTimeout (function () {/ / var scrollX = next to the bounced to click on the location document. The documentElement. ScrollLeft | | document. The body. The scrollLeft; var scrollY = document.documentElement.scrollTop || document.body.scrollTop; var x = e.pageX || e.clientX + scrollX; var y = e.pageY || e.clientY + scrollY; $(".handlepop_mainUserInfoBox ").css({left:x-210}) $("#filterPop_mainuserBox").val(""); $(".filterNumPop_mainuserBox").val(""); $(".filterNamePop_mainuserBox").val(""); form.render(); $(".handlePop_mainUserInfoBox").show(); if(tableList_mainuserBox.length > 0) { filterArr_mainuserBox = []; for(let i = 0; i<tableList_mainuserBox.length; i++) { if(tableList_mainuserBox[i][searchKey_mainuserBox] && filterArr_mainuserBox.indexOf(tableList_mainuserBox[i][searchKey_mainuserBox]) == -1){ filterArr_mainuserBox.push(tableList_mainuserBox[i][searchKey_mainuserBox]) } } let liHTML = "<option Value = "> select directly or search select </option>"; for(let i = 0; i<filterArr_mainuserBox.length; i++) { liHTML += "<option value='"+filterArr_mainuserBox[i]+"'>"+filterArr_mainuserBox[i]+"</option>"; } $(".filterNamePop_mainuserBox").html(liHTML); isClickXjt_mainuserBox = true; form.render("select") form.on('select(filterNamePop_mainuserBox)', function(data){ if(data.value == "") { isClickXjt_mainuserBox = false; reloadTable_user(); $(".handlePop_mainUserInfoBox").hide(); }else { let arr2 = []; for(let i = 0; i< tableList_mainuserBox.length; i++) { if(tableList_mainuserBox[i][searchKey_mainuserBox] == data.value) { arr2.push(tableList_mainuserBox[i]); Reload ("user-table", {url:"", where:"", data:arr2}); $(".handlePop_mainUserInfoBox").hide(); }}); }else {$(".filterNamepOP_mainUserBox ").html("<option value= "> Select </option>"); form.render("select") } },200) }) }Copy the code
  1. Get the table data and save it for later screening
  2. If there is data, then render the drop-down arrow behind each column. The important thing to note here is that if you add the drop-down arrow, each column header will not be centered. It’s not very easy to set the center function, only to the left.
  3. Set the arrow click event function, first get which arrow is clicked, get the arrow IDX, then loop through the array of table columns, the current column field is the property name
  4. Then set the position of the popbox, get the position of the click event first, and then set the offset distance to display the popbox
  5. The drop-down box in the popup box adds all the different data of the current column. That is, the drop-down box is an array. The current column may have many same data.
  6. Listen for a drop-down selection event, and if the user selects data, the table is reloaded, rendering only the content that matches the selected table data.

Reload the table and hide the popbox

Function reloadTable_user() {/ *table.reload('user-table', {// Search :"sfxsbj-user-search", url:"/searcUserInfo", where: {},}); $(".clearFilterpop_mainUserBox "). Click (function() {$("#filterPop_mainuserBox"). Val (""); $(".filterNumPop_mainuserBox").val(""); $(".filterNamePop_mainuserBox").val(""); form.render(); isClickXjt_mainuserBox = false; reloadTable_user(); $(".handlePop_mainUserInfoBox").hide(); $('.searchFilterPop_mainUserBox ').click(function() {if($(".filternumpop_mainUserbox ").val() == "") {$(".filternumpop_mainUserBox ").val() == "") { return; } let filterType = ''; if($("#filterPop_mainuserBox").val() ! = "") { filterType = $("#filterPop_mainuserBox").val() } let arr2 = []; for(let i = 0; i< tableList_mainuserBox.length; i++) { if(filterType ! = '') { if(filterType == 0 && tableList_mainuserBox[i][searchKey_mainuserBox] > $(".filterNumPop_mainuserBox").val()) { arr2.push(tableList_mainuserBox[i]); }else if(filterType == 1 && tableList_mainuserBox[i][searchKey_mainuserBox] >= $(".filterNumPop_mainuserBox").val()) { arr2.push(tableList_mainuserBox[i]); }else if(filterType == 2 && tableList_mainuserBox[i][searchKey_mainuserBox] < $(".filterNumPop_mainuserBox").val()) { arr2.push(tableList_mainuserBox[i]); }else if(filterType == 3 && tableList_mainuserBox[i][searchKey_mainuserBox] <= $(".filterNumPop_mainuserBox").val()) { arr2.push(tableList_mainuserBox[i]); } }else if(tableList_mainuserBox[i][searchKey_mainuserBox].toString().indexOf($(".filterNumPop_mainuserBox").val()) ! = -1) { arr2.push(tableList_mainuserBox[i]); } } table.reload('user-table', { url:"", where:"", data:arr2 }); $(".handlePop_mainUserInfoBox").hide(); $(".mainUserBox ").on("click",function() {$(".handlepop_mainUserInfobox ").hide(); })Copy the code

  1. Here is mainly to reload the table, usually drop the interface to re-render

  2. Clearing the filter condition is to clear the content of the drop-down box or the data content that the user just selected, display the original data content of the current page, and then call the first overloaded table

  3. Set the query event in the pop-up box, and select the query button next to the data contain size

  4. Determine whether the current click event is a drop-down arrow, if not, automatically hide the pop-up box off, otherwise the page is pulled down or click on other places, the pop-up box is still very ugly.

Elementui has this functionality, but Layui doesn’t have it. It’s also very useful. If you need to copy the code, you can leave a message