layUI可以直接使用本地的json文件进行列表数据渲染,但,我们会发现,官网ctr + c ctr + v过来的代码在做查询时每次看起来都有列表刷新的动作,但实际操作无效,百度了一大圈也没找到具体的原因,无奈继续回去看官网,后面总结出只有一点,也是大家比较容易忽略的一点:
官网说在查询时的url必须设置异步接口,因此,如果我们不借助后台看起来这个效果好像是单靠前端是出不来,但,为了本地演示,这里写了一个很低的方法,单靠显示()隐藏()方法来实现查询效果(效果演示可以单不建议实际开发中使用该方法)
以下代码粘贴复制便可直接使用:
& lt; div类=癲emoTable”比;
搜索ID:
& lt; div类=發ayui-inline”比;
& lt;输入类=" layui-input " name=" id " id=癲emoReload”自动完成=肮乇铡北?
& lt;/div>
& lt;按钮类=發ayui-btn”数据类型=爸卦亍钡脑谒阉? lt;/button>
& lt;/div>
& lt;表类=" layui-hide " id=" LAY_table_user " lay-filter=坝没А弊４? lt;/table>
& lt;脚本src=" https://www.yisu.com/zixun/js/layui/layui.js " charset=皍tf - 8”祝辞& lt;/script>
& lt; script>
layui。使用(“表”,函数(){
var表=layui.table;//方法级渲染
var tabins=table.render ({
elem:“# LAY_table_user”
url:“new_file.json”
关口:[[
{复选框:真、固定:真}
,{字段:“id”,标题:“id”,宽度:80:真的,固定:真正的}
,{字段:“用户名”,标题:“用户名”,宽度:80}
,{字段:“性”,标题:“性别”,宽度:80年:真正的}
,{字段:“城市”,标题:“城市的,宽度:80}
,{字段:“迹象”,标题:“签名'}
,{字段:“经验”,标题:“积”分,:真的,宽度:80}
,{字段:“分数”,标题:“评”分,:真的,宽度:80}
,{字段:“分类”,标题:“职业”,宽度:80}
,{字段:“财富”,标题:“财富”,:真的,宽度:135}
]]
id:“testReload”
、页面:真
、身高:315
完成:函数(res) {
}
}）;
var=layui美元。美元,活跃={
重载:函数(){
var demoReload=$ (' # demoReload ');//执行重载
表格重载(testReload, {
页面:{
咕咕叫:1//重新从第1页开始
}
,地点:{
关键:{
id: demoReload.val ()
}
}
}）;
}
};
$ (' .demoTable .layui-btn”)。(“点击”,函数(){
搜索=$ (' # demoReload) .val ();
$('。layui-table-fixed tbody tr) . each(函数(i) {
var id=$(这)定格(td) .eq(1)定格(div) . html ();
如果(id.indexOf(搜索)在=0){
(美元),告诉()
$('。layui-table-main tbody tr) .eq (i),告诉()
其他}{
$('。layui-table-main tbody tr) .eq (i) hide ()
(美元)hide ();
}
}）;
}）;
}）;
& lt;/script>
& lt;/body>
& lt;/html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
