解决layui-table的reload方法刷新有空白期的问题

本人在做二开项目中发现点查询时刷新layui-table,因为有查询条件、列表宽高的改变,必须用reload方法,但是会导致有空白期,非常不好看

原因:layuitable的reload方法是先移除列表dom,再ajax加载数据,页面就有空白期了

解决办法:修改table源码(lay/modules/table.js),解压后,修改reload方法,先获取数据,再移除、渲染dom,就可以实现无感刷新了,要注意:原始代码中很多跟随绑定双击和汇总等方法,有些改动会导致这些事件失效!

修改后的代码:

layui.define(["laytpl","laypage","layer","form","util"],(function(e){"use strict";var t=layui.$,i=layui.laytpl,a=layui.laypage,l=layui.layer,n=layui.form,o=(layui.util,layui.hint()),d=layui.device(),r={config:{checkName:"LAY_CHECKED",indexName:"LAY_TABLE_INDEX"},cache:{},index:layui.table?layui.table.index+1e4:0,set:function(e){var i=this;return i.config=t.extend({},i.config,e),i},on:function(e,t){return layui.onevent.call(this,y,e,t)}},c=function(){var e=this,t=e.config,i=t.id||t.index;return i&&(c.that[i]=e,c.config[i]=t),{config:t,reload:function(t){e.reload.call(e,t)},setColsWidth:function(){e.setColsWidth.call(e)},resize:function(){e.resize.call(e)}}},s=function(e){var t=c.config[e];return t||o.error("The ID option was not found in the table instance"),t||null},u=function(e,a,l,n){var o=e.templet?"function"==typeof e.templet?e.templet(l):i(t(e.templet).html()||String(a)).render(l):a;return n?t("<div>"+o+"</div>").text():o},y="table",h="layui-hide",f="layui-none",p="layui-table-view",v=".layui-table-tool",m=".layui-table-box",g=".layui-table-header",b=".layui-table-body",x=".layui-table-main",k=".layui-table-fixed",C=".layui-table-fixed-l",w=".layui-table-fixed-r",T=".layui-table-total",L=".layui-table-page",A=".layui-table-sort",N="layui-table-edit",S="layui-table-hover",R=function(e){return['<table cellspacing="0" cellpadding="0" border="0" class="layui-table" ','{{# if(d.data.skin){ }}lay-skin="{{d.data.skin}}"{{# } }} {{# if(d.data.size){ }}lay-size="{{d.data.size}}"{{# } }} {{# if(d.data.even){ }}lay-even{{# } }}>',"<thead>","{{# layui.each(d.data.cols, function(i1, item1){ }}","<tr>","{{# layui.each(item1, function(i2, item2){ }}",'{{# if(item2.fixed && item2.fixed !== "right"){ left = true; } }}','{{# if(item2.fixed === "right"){ right = true; } }}',(e=e||{}).fixed&&"right"!==e.fixed?'{{# if(item2.fixed && item2.fixed !== "right"){ }}':"right"===e.fixed?'{{# if(item2.fixed === "right"){ }}':"","{{# var isSort = !(item2.colGroup) && item2.sort; }}",'<th data-field="{{ item2.field||i2 }}" data-key="{{d.index}}-{{i1}}-{{i2}}" {{# if( item2.parentKey){ }}data-parentkey="{{ item2.parentKey }}"{{# } }} {{# if(item2.minWidth){ }}data-minwidth="{{item2.minWidth}}"{{# } }} {{#if(item2.colspan){}} colspan="{{item2.colspan}}"{{#} if(item2.rowspan){}} rowspan="{{item2.rowspan}}"{{#}}} {{# if(item2.unresize || item2.colGroup){ }}data-unresize="true"{{# } }} class="{{# if(item2.hide){ }}layui-hide{{# } }}{{# if(isSort){ }} layui-unselect{{# } }}{{# if(!item2.field){ }} layui-table-col-special{{# } }}">','<div class="layui-table-cell laytable-cell-',"{{# if(item2.colGroup){ }}","group","{{# } else { }}","{{d.index}}-{{i1}}-{{i2}}",'{{# if(item2.type !== "normal"){ }}'," laytable-cell-{{ item2.type }}","{{# } }}","{{# } }}",'" {{#if(item2.align){}}align="{{item2.align}}"{{#}}}>','{{# if(item2.type === "checkbox"){ }}','<input type="checkbox" name="layTableCheckbox" lay-skin="primary" lay-filter="layTableAllChoose" {{# if(item2[d.data.checkName]){ }}checked{{# }; }}>',"{{# } else { }}",'<span>{{item2.title||""}}</span>',"{{# if(isSort){ }}",'<span class="layui-table-sort layui-inline"><i class="layui-edge layui-table-sort-asc" title="升序"></i><i class="layui-edge layui-table-sort-desc" title="降序"></i></span>',"{{# } }}","{{# } }}","</div>","</th>",e.fixed?"{{# }; }}":"","{{# }); }}","</tr>","{{# }); }}","</thead>","</table>"].join("")},W=['<table cellspacing="0" cellpadding="0" border="0" class="layui-table" ','{{# if(d.data.skin){ }}lay-skin="{{d.data.skin}}"{{# } }} {{# if(d.data.size){ }}lay-size="{{d.data.size}}"{{# } }} {{# if(d.data.even){ }}lay-even{{# } }}>',"<tbody></tbody>","</table>"].join(""),_=['<div class="layui-form layui-border-box {{d.VIEW_CLASS}}" lay-filter="LAY-table-{{d.index}}" lay-id="{{ d.data.id }}" style="{{# if(d.data.width){ }}width:{{d.data.width}}px;{{# } }} {{# if(d.data.height){ }}height:{{d.data.height}}px;{{# } }}">',"{{# if(d.data.toolbar){ }}",'<div class="layui-table-tool">','<div class="layui-table-tool-temp"></div>','<div class="layui-table-tool-self"></div>',"</div>","{{# } }}",'<div class="layui-table-box">',"{{# if(d.data.loading){ }}",'<div class="layui-table-init" style="background-color: #fff;">','<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>',"</div>","{{# } }}","{{# var left, right; }}",'<div class="layui-table-header">',R(),"</div>",'<div class="layui-table-body layui-table-main">',W,"</div>","{{# if(left){ }}",'<div class="layui-table-fixed layui-table-fixed-l">','<div class="layui-table-header">',R({fixed:!0}),"</div>",'<div class="layui-table-body">',W,"</div>","</div>","{{# }; }}","{{# if(right){ }}",'<div class="layui-table-fixed layui-table-fixed-r">','<div class="layui-table-header">',R({fixed:"right"}),'<div class="layui-table-mend"></div>',"</div>",'<div class="layui-table-body">',W,"</div>","</div>","{{# }; }}","</div>","{{# if(d.data.totalRow){ }}",'<div class="layui-table-total">','<table cellspacing="0" cellpadding="0" border="0" class="layui-table" ','{{# if(d.data.skin){ }}lay-skin="{{d.data.skin}}"{{# } }} {{# if(d.data.size){ }}lay-size="{{d.data.size}}"{{# } }} {{# if(d.data.even){ }}lay-even{{# } }}>','<tbody><tr><td><div class="layui-table-cell" style="visibility: hidden;">Total</div></td></tr></tbody>',"</table>","</div>","{{# } }}","{{# if(d.data.page){ }}",'<div class="layui-table-page">','<div id="layui-table-page{{d.index}}"></div>',"</div>","{{# } }}","<style>","{{# layui.each(d.data.cols, function(i1, item1){","layui.each(item1, function(i2, item2){ }}",".laytable-cell-{{d.index}}-{{i1}}-{{i2}}{ ","{{# if(item2.width){ }}","width: {{item2.width}}px;","{{# } }}"," }","{{# });","}); }}","</style>","</div>"].join(""),E=t(window),F=t(document),z=function(e){var i=this;i.index=++r.index,i.config=t.extend({},i.config,r.config,e),i.render()};z.prototype.tconfit=void 0,z.prototype.tinitTab={},z.prototype.config={limit:10,loading:!0,cellMinWidth:60,defaultToolbar:["filter","exports","print"],autoSort:!0,text:{none:"无数据"}},z.prototype.render=function(e){var a=this,l=a.config;if(l.elem=t(l.elem),l.where=l.where||{},l.id=l.id||l.elem.attr("id")||a.index,l.request=t.extend({pageName:"page",limitName:"limit"},l.request),l.response=t.extend({statusName:"code",statusCode:0,msgName:"msg",dataName:"data",totalRowName:"totalRow",countName:"count"},l.response),"object"==typeof l.page&&(l.limit=l.page.limit||l.limit,l.limits=l.page.limits||l.limits,a.page=l.page.curr=l.page.curr||1,delete l.page.elem,delete l.page.jump),!l.elem[0])return a;l.height&&/^full-\d+$/.test(l.height)&&(a.fullHeightGap=l.height.split("-")[1],l.height=E.height()-a.fullHeightGap),a.setInit();var n=l.elem,o=n.next("."+p),d=a.elem=t(i(_).render({VIEW_CLASS:p,data:l,index:a.index}));if(e&&z.prototype.tconfit)z.prototype.tinitTab=function(){if(l.index=a.index,a.key=l.id||l.index,o[0]&&o.remove(),n.after(d),a.layTool=d.find(v),a.layBox=d.find(m),a.layHeader=d.find(g),a.layMain=d.find(x),a.layFixed=d.find(k),a.layFixLeft=d.find(C),a.layFixRight=d.find(w),a.layTotal=d.find(T),a.layPage=d.find(L),a.renderToolbar(),a.fullSize(),l.cols.length>1){var e=a.layFixed.find(g).find("th");e.height(a.layHeader.height()-1-parseFloat(e.css("padding-top"))-parseFloat(e.css("padding-bottom")))}},a.layBody=d.find(b);else if(l.index=a.index,a.key=l.id||l.index,o[0]&&o.remove(),n.after(d),a.layTool=d.find(v),a.layBox=d.find(m),a.layHeader=d.find(g),a.layMain=d.find(x),a.layBody=d.find(b),a.layFixed=d.find(k),a.layFixLeft=d.find(C),a.layFixRight=d.find(w),a.layTotal=d.find(T),a.layPage=d.find(L),a.renderToolbar(),a.fullSize(),l.cols.length>1){var r=a.layFixed.find(g).find("th");r.height(a.layHeader.height()-1-parseFloat(r.css("padding-top"))-parseFloat(r.css("padding-bottom")))}a.pullData(a.page),a.events()},z.prototype.initOpts=function(e){var t=(this.config,{checkbox:48,radio:48,space:15,numbers:40});e.checkbox&&(e.type="checkbox"),e.space&&(e.type="space"),e.type||(e.type="normal"),"normal"!==e.type&&(e.unresize=!0,e.width=e.width||t[e.type])},z.prototype.setInit=function(e){var t=this,i=t.config;return i.clientWidth=i.width||function(){var e=function(t){var a,l;a=(t=t||i.elem.parent()).width();try{l="none"===t.css("display")}catch(e){}return!t[0]||a&&!l?a:e(t.parent())};return e()}(),"width"===e?i.clientWidth:void layui.each(i.cols,(function(e,a){layui.each(a,(function(l,n){if(n){if(n.key=e+"-"+l,n.hide=n.hide||!1,n.colGroup||n.colspan>1){var o=0;layui.each(i.cols[e+1],(function(t,i){i.HAS_PARENT||o>1&&o==n.colspan||(i.HAS_PARENT=!0,i.parentKey=e+"-"+l,o+=parseInt(i.colspan>1?i.colspan:1))})),n.colGroup=!0}t.initOpts(n)}else a.splice(l,1)}))}))},z.prototype.renderToolbar=function(){var e=this,a=e.config,l=['<div class="layui-inline" lay-event="add"><i class="layui-icon layui-icon-add-1"></i></div>','<div class="layui-inline" lay-event="update"><i class="layui-icon layui-icon-edit"></i></div>','<div class="layui-inline" lay-event="delete"><i class="layui-icon layui-icon-delete"></i></div>'].join(""),n=e.layTool.find(".layui-table-tool-temp");if("default"===a.toolbar)n.html(l);else if("string"==typeof a.toolbar){var o=t(a.toolbar).html()||"";o&&n.html(i(o).render(a))}var d={filter:{title:"筛选列",layEvent:"LAYTABLE_COLS",icon:"layui-icon-cols"},exports:{title:"导出",layEvent:"LAYTABLE_EXPORT",icon:"layui-icon-export"},print:{title:"打印",layEvent:"LAYTABLE_PRINT",icon:"layui-icon-print"}},r=[];"object"==typeof a.defaultToolbar&&layui.each(a.defaultToolbar,(function(e,t){var i="string"==typeof t?d[t]:t;i&&r.push('<div class="layui-inline" title="'+i.title+'" lay-event="'+i.layEvent+'"><i class="layui-icon '+i.icon+'"></i></div>')})),e.layTool.find(".layui-table-tool-self").html(r.join(""))},z.prototype.setParentCol=function(e,t){var i=this,a=i.config,l=i.layHeader.find('th[data-key="'+a.index+"-"+t+'"]'),n=parseInt(l.attr("colspan"))||0;if(l[0]){var o=t.split("-"),d=a.cols[o[0]][o[1]];e?n--:n++,l.attr("colspan",n),l[n<1?"addClass":"removeClass"](h),d.colspan=n,d.hide=n<1;var r=l.data("parentkey");r&&i.setParentCol(e,r)}},z.prototype.setColsPatch=function(){var e=this,t=e.config;layui.each(t.cols,(function(t,i){layui.each(i,(function(t,i){i.hide&&e.setParentCol(i.hide,i.parentKey)}))}))},z.prototype.setColsWidth=function(){var e=this,t=e.config,i=0,a=0,l=0,n=0,o=e.setInit("width");e.eachCols((function(e,t){t.hide||i++})),o=o-("line"===t.skin||"nob"===t.skin?2:i+1)-e.getScrollWidth(e.layMain[0])-1;var d=function(e){layui.each(t.cols,(function(i,d){layui.each(d,(function(i,r){var c=0,s=r.minWidth||t.cellMinWidth;return r?void(r.colGroup||r.hide||(e?l&&l<s&&(a--,c=s):(c=r.width||0,/\d+%$/.test(c)?(c=Math.floor(parseFloat(c)/100*o),c<s&&(c=s)):c||(r.width=c=0,a++)),r.hide&&(c=0),n+=c)):void d.splice(i,1)}))})),o>n&&a&&(l=(o-n)/a)};d(),d(!0),e.autoColNums=a,e.eachCols((function(i,a){var n=a.minWidth||t.cellMinWidth;a.colGroup||a.hide||(0===a.width?e.getCssRule(t.index+"-"+a.key,(function(e){e.style.width=Math.floor(l>=n?l:n)+"px"})):/\d+%$/.test(a.width)&&e.getCssRule(t.index+"-"+a.key,(function(e){e.style.width=Math.floor(parseFloat(a.width)/100*o)+"px"})))}));var r=e.layMain.width()-e.getScrollWidth(e.layMain[0])-e.layMain.children("table").outerWidth();if(e.autoColNums&&r>=-i&&r<=i){var c=function(t){return!(t=t||e.layHeader.eq(0).find("thead th:last-child")).data("field")&&t.prev()[0]?c(t.prev()):t},s=c(),u=s.data("key");e.getCssRule(u,(function(t){var i=t.style.width||s.outerWidth();t.style.width=parseFloat(i)+r+"px",e.layMain.height()-e.layMain.prop("clientHeight")>0&&(t.style.width=parseFloat(t.style.width)-1+"px")}))}e.loading(!0)},z.prototype.resize=function(){var e=this;e.fullSize(),e.setColsWidth(),e.scrollPatch()},z.prototype.reload=function(e,i){var a=this;e=e||{},delete a.haveInit,e.data&&e.data.constructor===Array&&delete a.config.data,a.config=t.extend(!0,{},a.config,e),a.render(i)},z.prototype.errorView=function(e){var i=this,a=i.layMain.find("."+f),l=t('<div class="'+f+'">'+(e||"Error")+"</div>");a[0]&&(i.layNone.remove(),a.remove()),i.layFixed.addClass(h),i.layMain.find("tbody").html(""),i.layMain.append(i.layNone=l),r.cache[i.key]=[]},z.prototype.page=1,z.prototype.pullData=function(e){var i=this,a=i.config,l=a.request,n=a.response,o=function(){"object"==typeof a.initSort&&i.sort(a.initSort.field,a.initSort.type)};if(i.startTime=(new Date).getTime(),a.url){var d={};d[l.pageName]=e,d[l.limitName]=a.limit;var r=t.extend(d,a.where);a.contentType&&0==a.contentType.indexOf("application/json")&&(r=JSON.stringify(r)),G.loadding("table",a.id),t.ajax({type:a.method||"get",url:a.url,contentType:a.contentType,data:r,dataType:"json",headers:a.headers||{},success:function(t){G.loadding(!1,a.id),z.prototype.tinitTab(),"function"==typeof a.parseData&&(t=a.parseData(t)||t),t[n.statusName]!=n.statusCode?(i.renderForm(),i.errorView(t[n.msgName]||'返回的数据不符合规范,正确的成功状态码应为:"'+n.statusName+'": '+n.statusCode)):(i.renderData(t,e,t[n.countName]),o(),a.time=(new Date).getTime()-i.startTime+" ms"),i.setColsWidth(),"function"==typeof a.done&&a.done(t,e,t[n.countName])},error:function(e,t){G.loadding(!1,a.id),i.errorView("数据接口请求异常:"+t),i.renderForm(),i.setColsWidth()}})}else if(a.data&&a.data.constructor===Array){var c={},s=e*a.limit-a.limit;c[n.dataName]=a.data.concat().splice(s,a.limit),c[n.countName]=a.data.length,"object"==typeof a.totalRow&&(c[n.totalRowName]=t.extend({},a.totalRow)),i.renderData(c,e,c[n.countName]),o(),i.setColsWidth(),"function"==typeof a.done&&a.done(c,e,c[n.countName])}},z.prototype.eachCols=function(e){return r.eachCols(null,e,this.config.cols),this},z.prototype.renderData=function(e,n,o,d){var c=this,s=c.config,y=e[s.response.dataName]||[],p=e[s.response.totalRowName],v=[],m=[],g=[],b=function(){var e;return!d&&c.sortKey?c.sort(c.sortKey.field,c.sortKey.sort,!0):(layui.each(y,(function(a,l){var o=[],y=[],f=[],p=a+s.limit*(n-1)+1;0!==l.length&&(d||(l[r.config.indexName]=a),c.eachCols((function(n,d){var c=d.field||n,v=s.index+"-"+d.key,m=l[c];if(null!=m||(m=""),!d.colGroup){var g=['<td data-field="'+c+'" data-key="'+v+'" '+function(){var e=[];return d.edit&&e.push('data-edit="'+d.edit+'"'),d.align&&e.push('align="'+d.align+'"'),d.templet&&e.push('data-content="'+m+'"'),d.toolbar&&e.push('data-off="true"'),d.event&&e.push('lay-event="'+d.event+'"'),d.style&&e.push('style="'+d.style+'"'),d.minWidth&&e.push('data-minwidth="'+d.minWidth+'"'),e.join(" ")}()+' class="'+function(){var e=[];return d.hide&&e.push(h),d.field||e.push("layui-table-col-special"),e.join(" ")}()+'">','<div class="layui-table-cell laytable-cell-'+("normal"===d.type?v:v+" laytable-cell-"+d.type)+'">'+function(){var n=t.extend(!0,{LAY_INDEX:p},l),o=r.config.checkName;switch(d.type){case"checkbox":return'<input type="checkbox" name="layTableCheckbox" lay-skin="primary" '+(d[o]?(l[o]=d[o],d[o]?"checked":""):n[o]?"checked":"")+">";case"radio":return n[o]&&(e=a),'<input type="radio" name="layTableRadio_'+s.index+'" '+(n[o]?"checked":"")+' lay-type="layTableRadio">';case"numbers":return p}return d.toolbar?i(t(d.toolbar).html()||"").render(n):u(d,m,n)}(),"</div></td>"].join("");o.push(g),d.fixed&&"right"!==d.fixed&&y.push(g),"right"===d.fixed&&f.push(g)}})),v.push('<tr data-index="'+a+'">'+o.join("")+"</tr>"),m.push('<tr data-index="'+a+'">'+y.join("")+"</tr>"),g.push('<tr data-index="'+a+'">'+f.join("")+"</tr>"))})),c.layBody.scrollTop(0),c.layMain.find("."+f).remove(),c.layMain.find("tbody").html(v.join("")),c.layFixLeft.find("tbody").html(m.join("")),c.layFixRight.find("tbody").html(g.join("")),c.renderForm(),"number"==typeof e&&c.setThisRowChecked(e),c.syncCheckAll(),c.haveInit?c.scrollPatch():setTimeout((function(){c.scrollPatch()}),50),c.haveInit=!0,l.close(c.tipsIndex),s.HAS_SET_COLS_PATCH||c.setColsPatch(),void(s.HAS_SET_COLS_PATCH=!0))};return r.cache[c.key]=y,c.layPage[0==o||0===y.length&&1==n?"addClass":"removeClass"](h),d?b():0===y.length?(c.renderForm(),c.errorView(s.text.none)):(c.layFixed.removeClass(h),b(),c.renderTotal(y,p),void(s.page&&(s.page=t.extend({elem:"layui-table-page"+s.index,count:o,limit:s.limit,limits:s.limits||[10,20,30,40,50,60,70,80,90],groups:3,layout:["prev","page","next","skip","count","limit"],prev:'<i class="layui-icon">&#xe603;</i>',next:'<i class="layui-icon">&#xe602;</i>',jump:function(e,t){t||(c.page=e.curr,s.limit=e.limit,c.pullData(e.curr))}},s.page),s.page.count=o,a.render(s.page))))},z.prototype.renderTotal=function(e,t){var i=this,a=i.config,l={};if(a.totalRow){layui.each(e,(function(e,t){0!==t.length&&i.eachCols((function(e,i){var a=i.field||e,n=t[a];i.totalRow&&(l[a]=(l[a]||0)+(parseFloat(n)||0))}))})),i.dataTotal={};var n=[];i.eachCols((function(e,o){var d=o.field||e,r=function(){var e=o.totalRowText||"",i=parseFloat(l[d]).toFixed(2),a={};return a[d]=i,i=u(o,i,a),t?t[o.field]||e:o.totalRow&&i||e}(),c=['<td data-field="'+d+'" data-key="'+a.index+"-"+o.key+'" '+function(){var e=[];return o.align&&e.push('align="'+o.align+'"'),o.style&&e.push('style="'+o.style+'"'),o.minWidth&&e.push('data-minwidth="'+o.minWidth+'"'),e.join(" ")}()+' class="'+function(){var e=[];return o.hide&&e.push(h),o.field||e.push("layui-table-col-special"),e.join(" ")}()+'">','<div class="layui-table-cell laytable-cell-'+function(){var e=a.index+"-"+o.key;return"normal"===o.type?e:e+" laytable-cell-"+o.type}()+'">'+r,"</div></td>"].join("");o.field&&(i.dataTotal[d]=r),n.push(c)})),i.layTotal.find("tbody").html("<tr>"+n.join("")+"</tr>")}},z.prototype.getColElem=function(e,t){var i=this.config;return e.eq(0).find(".laytable-cell-"+i.index+"-"+t+":eq(0)")},z.prototype.renderForm=function(e){n.render(e,"LAY-table-"+this.index)},z.prototype.setThisRowChecked=function(e){var t=(this.config,"layui-table-click");this.layBody.find('tr[data-index="'+e+'"]').addClass(t).siblings("tr").removeClass(t)},z.prototype.sort=function(e,i,a,l){var n,d=this,c={},s=d.config,u=s.elem.attr("lay-filter"),h=r.cache[d.key];"string"==typeof e&&d.layHeader.find("th").each((function(i,a){var l=t(this),n=l.data("field");if(n===e)return e=l,f=n,!1}));try{var f=f||e.data("field"),p=e.data("key");if(d.sortKey&&!a&&f===d.sortKey.field&&i===d.sortKey.sort)return;var v=d.layHeader.find("th .laytable-cell-"+p).find(A);d.layHeader.find("th").find(A).removeAttr("lay-sort"),v.attr("lay-sort",i||null),d.layFixed.find("th")}catch(e){return o.error("Table modules: Did not match to field")}d.sortKey={field:f,sort:i},s.autoSort&&("asc"===i?n=layui.sort(h,f):"desc"===i?n=layui.sort(h,f,!0):(n=layui.sort(h,r.config.indexName),delete d.sortKey)),c[s.response.dataName]=n||h,d.renderData(c,d.page,d.count,!0),l&&layui.event.call(e,y,"sort("+u+")",{field:f,type:i})},z.prototype.loading=function(e){var i=this;i.config.loading&&(e?(i.layInit&&i.layInit.remove(),delete i.layInit,i.layBox.find(".layui-table-init").remove()):(i.layInit=t(['<div class="layui-table-init">','<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>',"</div>"].join("")),i.layBox.append(i.layInit)))},z.prototype.setCheckData=function(e,t){var i=this.config,a=r.cache[this.key];a[e]&&a[e].constructor!==Array&&(a[e][i.checkName]=t)},z.prototype.syncCheckAll=function(){var e=this,t=e.config,i=e.layHeader.find('input[name="layTableCheckbox"]'),a=function(i){return e.eachCols((function(e,a){"checkbox"===a.type&&(a[t.checkName]=i)})),i};i[0]&&(r.checkStatus(e.key).isAll?(i[0].checked||(i.prop("checked",!0),e.renderForm("checkbox")),a(!0)):(i[0].checked&&(i.prop("checked",!1),e.renderForm("checkbox")),a(!1)))},z.prototype.getCssRule=function(e,t){var i=this.elem.find("style")[0],a=i.sheet||i.styleSheet||{},l=a.cssRules||a.rules;layui.each(l,(function(i,a){if(a.selectorText===".laytable-cell-"+e)return t(a),!0}))},z.prototype.fullSize=function(){var e,t=this,i=t.config,a=i.height;t.fullHeightGap&&((a=E.height()-t.fullHeightGap)<135&&(a=135),t.elem.css("height",a)),a&&(e=parseFloat(a)-(t.layHeader.outerHeight()||38),i.toolbar&&(e-=t.layTool.outerHeight()||50),i.totalRow&&(e-=t.layTotal.outerHeight()||40),i.page&&(e-=t.layPage.outerHeight()||41),t.layMain.css("height",e-2))},z.prototype.getScrollWidth=function(e){var t=0;return e?t=e.offsetWidth-e.clientWidth:((e=document.createElement("div")).style.width="100px",e.style.height="100px",e.style.overflowY="scroll",document.body.appendChild(e),t=e.offsetWidth-e.clientWidth,document.body.removeChild(e)),t},z.prototype.scrollPatch=function(){var e=this,i=e.layMain.children("table"),a=e.layMain.width()-e.layMain.prop("clientWidth"),l=e.layMain.height()-e.layMain.prop("clientHeight"),n=(e.getScrollWidth(e.layMain[0]),i.outerWidth()-e.layMain.width()),o=function(e){if(a&&l){if(!(e=e.eq(0)).find(".layui-table-patch")[0]){var i=t('<th class="layui-table-patch"><div class="layui-table-cell"></div></th>');i.find("div").css({width:a}),e.find("tr").append(i)}}else e.find(".layui-table-patch").remove()};o(e.layHeader),o(e.layTotal);var d=e.layMain.height()-l;e.layFixed.find(b).css("height",i.height()>=d?d:"auto"),e.layFixRight[n>0?"removeClass":"addClass"](h),e.layFixRight.css("right",a-1)},z.prototype.events=function(){var e,i=this,a=i.config,o=t("body"),c={},s=i.layHeader.find("th"),f=".layui-table-cell",p=a.elem.attr("lay-filter");i.layTool.on("click","*[lay-event]",(function(e){var o=t(this),c=o.attr("lay-event"),s=function(e){var l=t(e.list),n=t('<ul class="layui-table-tool-panel"></ul>');n.html(l),a.height&&n.css("max-height",a.height-(i.layTool.outerHeight()||50)),o.find(".layui-table-tool-panel")[0]||o.append(n),i.renderForm(),n.on("click",(function(e){layui.stope(e)})),e.done&&e.done(n,l)};switch(layui.stope(e),F.trigger("table.tool.panel.remove"),l.close(i.tipsIndex),c){case"LAYTABLE_COLS":s({list:function(){var e=[];return i.eachCols((function(t,i){i.field&&"normal"==i.type&&e.push('<li><input type="checkbox" name="'+i.field+'" data-key="'+i.key+'" data-parentkey="'+(i.parentKey||"")+'" lay-skin="primary" '+(i.hide?"":"checked")+' title="'+(i.title||i.field)+'" lay-filter="LAY_TABLE_TOOL_COLS"></li>')})),e.join("")}(),done:function(){n.on("checkbox(LAY_TABLE_TOOL_COLS)",(function(e){var l=t(e.elem),n=this.checked,o=l.data("key"),d=l.data("parentkey");layui.each(a.cols,(function(e,t){layui.each(t,(function(t,l){if(e+"-"+t===o){var r=l.hide;l.hide=!n,i.elem.find('*[data-key="'+a.index+"-"+o+'"]')[n?"removeClass":"addClass"](h),r!=l.hide&&i.setParentCol(!n,d),i.resize()}}))}))}))}});break;case"LAYTABLE_EXPORT":d.ie?l.tips("导出功能不支持 IE,请用 Chrome 等高级浏览器导出",this,{tips:3}):s({list:['<li data-type="csv">导出到 Csv 文件</li>','<li data-type="xls">导出到 Excel 文件</li>'].join(""),done:function(e,l){l.on("click",(function(){var e=t(this).data("type");r.exportFile.call(i,a.id,null,e)}))}});break;case"LAYTABLE_PRINT":var u=window.open("打印窗口","_blank"),f=["<style>","body{font-size: 12px; color: #666;}","table{width: 100%; border-collapse: collapse; border-spacing: 0;}","th,td{line-height: 20px; padding: 9px 15px; border: 1px solid #ccc; text-align: left; font-size: 12px; color: #666;}","a{color: #666; text-decoration:none;}","*.layui-hide{display: none}","</style>"].join(""),v=t(i.layHeader.html());v.append(i.layMain.find("table").html()),v.append(i.layTotal.find("table").html()),v.find("th.layui-table-patch").remove(),v.find(".layui-table-col-special").remove(),u.document.write(f+v.prop("outerHTML")),u.document.close(),u.print(),u.close()}layui.event.call(this,y,"toolbar("+p+")",t.extend({event:c,config:a},{}))})),s.on("mousemove",(function(e){var i=t(this),a=i.offset().left,l=e.clientX-a;i.data("unresize")||c.resizeStart||(c.allowResize=i.width()-l<=10,o.css("cursor",c.allowResize?"col-resize":""))})).on("mouseleave",(function(){t(this),c.resizeStart||o.css("cursor","")})).on("mousedown",(function(e){var l=t(this);if(c.allowResize){var n=l.data("key");e.preventDefault(),c.resizeStart=!0,c.offset=[e.clientX,e.clientY],i.getCssRule(n,(function(e){var t=e.style.width||l.outerWidth();c.rule=e,c.ruleWidth=parseFloat(t),c.minWidth=l.data("minwidth")||a.cellMinWidth}))}})),F.on("mousemove",(function(t){if(c.resizeStart){if(t.preventDefault(),c.rule){var a=c.ruleWidth+t.clientX-c.offset[0];a<c.minWidth&&(a=c.minWidth),c.rule.style.width=a+"px",l.close(i.tipsIndex)}e=1}})).on("mouseup",(function(t){c.resizeStart&&(c={},o.css("cursor",""),i.scrollPatch()),2===e&&(e=null)})),s.on("click",(function(a){var l,n=t(this),o=n.find(A),d=o.attr("lay-sort");return o[0]&&1!==e?(l="asc"===d?"desc":"desc"===d?null:"asc",void i.sort(n,l,null,!0)):e=2})).find(A+" .layui-edge ").on("click",(function(e){var a=t(this),l=a.index(),n=a.parents("th").eq(0).data("field");layui.stope(e),0===l?i.sort(n,"asc",null,!0):i.sort(n,"desc",null,!0)}));var v=function(e){var a=t(this).parents("tr").eq(0).data("index"),l=i.layBody.find('tr[data-index="'+a+'"]'),n=r.cache[i.key]||[];return n=n[a]||{},t.extend({tr:l,data:r.clearCacheKey(n),del:function(){r.cache[i.key][a]=[],l.remove(),i.scrollPatch()},update:function(e){e=e||{},layui.each(e,(function(e,t){if(e in n){var a,o=l.children('td[data-field="'+e+'"]');n[e]=t,i.eachCols((function(t,i){i.field==e&&i.templet&&(a=i.templet)})),o.children(f).html(u({templet:a},t,n)),o.data("content",t)}}))}},e)};i.elem.on("click",'input[name="layTableCheckbox"]+',(function(){var e=t(this).prev(),a=i.layBody.find('input[name="layTableCheckbox"]'),l=e.parents("tr").eq(0).data("index"),n=e[0].checked,o="layTableAllChoose"===e.attr("lay-filter");o?(a.each((function(e,t){t.checked=n,i.setCheckData(e,n)})),i.syncCheckAll(),i.renderForm("checkbox")):(i.setCheckData(l,n),i.syncCheckAll()),layui.event.call(e[0],y,"checkbox("+p+")",v.call(e[0],{checked:n,type:o?"all":"one"}))})),i.elem.on("click",'input[lay-type="layTableRadio"]+',(function(){var e=t(this).prev(),a=e[0].checked,l=r.cache[i.key],n=e.parents("tr").eq(0).data("index");layui.each(l,(function(e,t){n===e?t.LAY_CHECKED=!0:delete t.LAY_CHECKED})),i.setThisRowChecked(n),layui.event.call(this,y,"radio("+p+")",v.call(this,{checked:a}))})),i.layBody.on("mouseenter","tr",(function(){var e=t(this),a=e.index();e.data("off")||i.layBody.find("tr:eq("+a+")").addClass(S)})).on("mouseleave","tr",(function(){var e=t(this),a=e.index();e.data("off")||i.layBody.find("tr:eq("+a+")").removeClass(S)})).on("click","tr",(function(){m.call(this,"row")})).on("dblclick","tr",(function(){m.call(this,"rowDouble")}));var m=function(e){var i=t(this);i.data("off")||layui.event.call(this,y,e+"("+p+")",v.call(i.children("td")[0]))};i.layBody.on("change","."+N,(function(){var e=t(this),a=this.value,l=e.parent().data("field"),n=e.parents("tr").eq(0).data("index");r.cache[i.key][n][l]=a,layui.event.call(this,y,"edit("+p+")",v.call(this,{value:a,field:l}))})).on("blur","."+N,(function(){var e,a=t(this),l=a.parent().data("field"),n=a.parents("tr").eq(0).data("index"),o=r.cache[i.key][n];i.eachCols((function(t,i){i.field==l&&i.templet&&(e=i.templet)})),a.siblings(f).html(function(t){return u({templet:e},t,o)}(this.value)),a.parent().data("content",this.value),a.remove()})),i.layBody.on("click","td",(function(e){var i=t(this),a=(i.data("field"),i.data("edit")),l=i.children(f);if(!i.data("off")&&a){var n=t('<input class="layui-input '+N+'">');return n[0].value=i.data("content")||l.text(),i.find("."+N)[0]||i.append(n),n.focus(),void layui.stope(e)}})).on("mouseenter","td",(function(){x.call(this)})).on("mouseleave","td",(function(){x.call(this,"hide")}));var g="layui-table-grid-down",x=function(e){var i=t(this),a=i.children(f);if(!i.data("off"))if(e)i.find(".layui-table-grid-down").remove();else if(a.prop("scrollWidth")>a.outerWidth()){if(a.find("."+g)[0])return;i.append('<div class="'+g+'"><i class="layui-icon layui-icon-down"></i></div>')}};i.layBody.on("click","."+g,(function(e){var n=t(this).parent().children(f);i.tipsIndex=l.tips(['<div class="layui-table-tips-main" style="margin-top: -'+(n.height()+16)+"px;"+("sm"===a.size?"padding: 4px 15px; font-size: 12px;":"lg"===a.size?"padding: 14px 15px;":"")+'">',n.html(),"</div>",'<i class="layui-icon layui-table-tips-c layui-icon-close"></i>'].join(""),n[0],{tips:[3,""],time:-1,anim:-1,maxWidth:d.ios||d.android?300:i.elem.width()/2,isOutAnim:!1,skin:"layui-table-tips",success:function(e,t){e.find(".layui-table-tips-c").on("click",(function(){l.close(t)}))}}),layui.stope(e)})),i.layBody.on("click","*[lay-event]",(function(){var e=t(this),a=e.parents("tr").eq(0).data("index");layui.event.call(this,y,"tool("+p+")",v.call(this,{event:e.attr("lay-event")})),i.setThisRowChecked(a)})),i.layMain.on("scroll",(function(){var e=t(this),a=e.scrollLeft(),n=e.scrollTop();i.layHeader.scrollLeft(a),i.layTotal.scrollLeft(a),i.layFixed.find(b).scrollTop(n),l.close(i.tipsIndex)})),E.on("resize",(function(){i.resize()}))},F.on("click",(function(){F.trigger("table.remove.tool.panel")})),F.on("table.remove.tool.panel",(function(){t(".layui-table-tool-panel").remove()})),r.init=function(e,i){i=i||{};var a=t(e?'table[lay-filter="'+e+'"]':".layui-table[lay-data]"),l="Table element property lay-data configuration item has a syntax error: ";return a.each((function(){var a=t(this),n=a.attr("lay-data");try{n=new Function("return "+n)()}catch(e){o.error(l+n)}var d=[],c=t.extend({elem:this,cols:[],data:[],skin:a.attr("lay-skin"),size:a.attr("lay-size"),even:"string"==typeof a.attr("lay-even")},r.config,i,n);e&&a.hide(),a.find("thead>tr").each((function(e){c.cols[e]=[],t(this).children().each((function(i){var a=t(this),n=a.attr("lay-data");try{n=new Function("return "+n)()}catch(e){return o.error(l+n)}var r=t.extend({title:a.text(),colspan:a.attr("colspan")||0,rowspan:a.attr("rowspan")||0},n);r.colspan<2&&d.push(r),c.cols[e].push(r)}))})),a.find("tbody>tr").each((function(e){var i=t(this),a={};i.children("td").each((function(e,i){var l=t(this),n=l.data("field");if(n)return a[n]=l.html()})),layui.each(d,(function(e,t){var l=i.children("td").eq(e);a[t.field]=l.html()})),c.data[e]=a})),r.render(c)})),this},c.that={},c.config={},r.eachCols=function(e,i,a){var l=c.config[e]||{},n=[],o=0;a=t.extend(!0,[],a||l.cols),layui.each(a,(function(e,t){layui.each(t,(function(t,i){if(i.colGroup){var l=0;o++,i.CHILD_COLS=[],layui.each(a[e+1],(function(e,t){t.PARENT_COL_INDEX||l>1&&l==i.colspan||(t.PARENT_COL_INDEX=o,i.CHILD_COLS.push(t),l+=parseInt(t.colspan>1?t.colspan:1))}))}i.PARENT_COL_INDEX||n.push(i)}))}));var d=function(e){layui.each(e||n,(function(e,t){return t.CHILD_COLS?d(t.CHILD_COLS):void("function"==typeof i&&i(e,t))}))};d()},r.checkStatus=function(e){var t=0,i=0,a=[],l=r.cache[e]||[];return layui.each(l,(function(e,l){return l.constructor===Array?void i++:void(l[r.config.checkName]&&(t++,a.push(r.clearCacheKey(l))))})),{data:a,isAll:!!l.length&&t===l.length-i}},r.exportFile=function(e,t,i){var a=this;t=t||r.clearCacheKey(r.cache[e]),i=i||"csv";var l=c.config[e]||{},n={csv:"text/csv",xls:"application/vnd.ms-excel"}[i],s=document.createElement("a");return d.ie?o.error("IE_NOT_SUPPORT_EXPORTS"):(s.href="data:"+n+";charset=utf-8,\ufeff"+encodeURIComponent(function(){var i=[],l=[],n=[];return layui.each(t,(function(t,a){var n=[];"object"==typeof e?(layui.each(e,(function(e,a){0==t&&i.push(a||"")})),layui.each(r.clearCacheKey(a),(function(e,t){n.push('"'+(t||"")+'"')}))):r.eachCols(e,(function(e,l){if(l.field&&"normal"==l.type&&!l.hide){var o=a[l.field];null!=o||(o=""),0==t&&i.push(l.title||""),n.push('"'+u(l,o,a,"text")+'"')}})),l.push(n.join(","))})),layui.each(a.dataTotal,(function(e,t){n.push(t)})),i.join(",")+"\r\n"+l.join("\r\n")+"\r\n"+n.join(",")}()),s.download=(l.title||"table_"+(l.index||""))+"."+i,document.body.appendChild(s),s.click(),void document.body.removeChild(s))},r.resize=function(e){if(e){if(!s(e))return;c.that[e].resize()}else layui.each(c.that,(function(){this.resize()}))},r.reload=function(e,t){if(s(e)){var i=c.that[e];return z.prototype.tconfit=t,i.reload(t,!0),c.call(i)}},r.render=function(e){var t=new z(e);return c.call(t)},r.clearCacheKey=function(e){return delete(e=t.extend({},e))[r.config.checkName],delete e[r.config.indexName],e},r.init(),e(y,r)}));

修改的地方比较多,这里就不一一罗列了,可解压后和官方代码进行对比

修改版本:layui-v2.5.6

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
layui-table 中添加表头筛选的方法如下: 1.设置表头筛选的数据 可以通过设置`toolbar`属性来设置表头的筛选数据,例如: ```javascript var tableIns = table.render({ elem: '#test' ,url:'/demo/table/user/' ,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板 ,cols: [[ {type: 'checkbox', fixed: 'left'} ,{field:'id', title:'ID', width:80, sort: true} ,{field:'username', title:'用户名', width:120} ,{field:'email', title:'邮箱', width:150} ,{field:'sign', title:'签名'} ,{field:'sex', title:'性别', width:80} ,{field:'city', title:'城市', width:100} ,{field:'experience', title:'积分', width:80, sort: true} ,{field:'logins', title:'登入次数', width:100, sort: true} ,{field:'status', title:'状态', width:100, sort: true} ,{field:'ip', title:'IP', width:120} ,{field:'create_time', title:'创建时间', width:150, sort: true} ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150} ]] ,page: true }); ``` 在上面的代码中,`toolbar`属性绑定了一个左侧模板(即下面代码中的`#toolbarDemo`),在该模板中可以设置表头的筛选数据,例如: ```html <script type="text/html" id="toolbarDemo"> <div class="layui-btn-container"> <button class="layui-btn layui-btn-sm" lay-event="add">添加</button> <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button> </div> <div class="layui-inline"> <label class="layui-form-label">城市</label> <div class="layui-input-inline"> <select name="city"> <option value="">全部</option> <option value="0">北京</option> <option value="1">上海</option> <option value="2">广州</option> <option value="3">深圳</option> <option value="4">杭州</option> </select> </div> </div> <div class="layui-inline"> <label class="layui-form-label">状态</label> <div class="layui-input-inline"> <select name="status"> <option value="">全部</option> <option value="0">正常</option> <option value="1">禁用</option> </select> </div> </div> </script> ``` 在上面的代码中,我们设置了两个下拉框,分别用于筛选城市和状态。 2.监听表头筛选事件并重新加载表格数据 在表头筛选数据改变时,我们需要监听表头的`lay-filter`属性,并重新加载表格数据。在下面的示例中,我们监听了两个下拉框的`select`事件,并重新加载了表格数据: ```javascript //监听表头筛选数据改变事件 table.on('toolbar(test)', function(obj){ var city = $('select[name="city"]').val(); var status = $('select[name="status"]').val(); table.reload('test', { where: { //设定异步数据接口的额外参数,任意设 city: city, status: status } ,page: { curr: 1 //重新从第 1 页开始 } }); }); ``` 在上面的代码中,我们通过`$('select[name="city"]').val()`和`$('select[name="status"]').val()`获取了两个下拉框的,并重新加载了表格数据。其中,`table.reload()`方法中的`test`参数表示表格的ID,可以根据实际情况进行修改。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值