分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 软件开发

html中layui+jfinal模板实现前端搜索功能

发布时间:2023-09-06 01:51责任编辑:赖小花关键词:前端
 <input type="text" id="campus" class="layui-input" onkeyup="ck(this.value);" placeholder="请输入要查找的英语屋">//输入触发框 <div class="layui-input-block layui-form" id="cam" lay-filter="cam">这个是要显示的校区的容器,渲染的就是这个页面</div>//模板数据//因为这块用到了layui的语句和jfinal的语句,所以需要把layui的#用jfinal的#让layui当作普通字符串输出<script type="text/html" id="searchText"> ???????#for(x : CampusKit.findListByAccount(loginAccount))//jfinal的语句,循环 ???????{{#("#") ?if(isContains("#(x.campusName)",d.val)){ }}//这里用到了layui的语句和jfinal的语句结合,#(x.campusName) jfinal 的语句,{{#("#") ?if(isContains("#(x.campusName)",d.val)){ }}中的d.val因为if用的是layui的语句,所以直接写就可以,一般都是{{d.val}}这样写 ???????????????<input type=‘checkbox‘ value="#(x.id)" name=‘campus‘ ????????????????#(sysAccountCampusIds.contains(x.id.toString()) ? ‘checked="checked"‘:‘‘) ???????????????title="#(x.campusName)" id=‘campusBox#(x.id)‘> ???????{{#("#") } }} ???????#end</script>//str字符串是否包含substr字符串function isContains(str, substr) { ???return str.indexOf(substr) >= 0;}//layui模板的写法var getTpl = searchText.innerHTML;//写到js方法外边这样只加载一次,不用每次都加载,速度快/* 前端页面的搜索 */ function ck(campusName){ ???//渲染模版 ???layui.laytpl(getTpl).render({"val":campusName}, //json值 ???????????function(html){ ???????$("#cam").html(html);//jquery把模板加载到div ??id是cam中<div id="cam"></div> ???????console.log(html); ???????layui.form.render(null,"cam"); //更新这个容器中的页面 ???}); ?????}

记录学习历程...

大师兄真的很厉害啊。各种的都会...

html中layui+jfinal模板实现前端搜索功能

原文地址:https://www.cnblogs.com/renjianjun/p/8969464.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved