文献种类:专题技术文献;
开发工具与关键技术: VS、MVC
作者:方建恒 ;年级:20级 ;撰写时间: 2021 年 7 月 8日
下面我们来看一下如何在页面中的搜索框中输入内容,
然后下面的表格将会查询出你所输入文本的相应数据。
首先我们要先把layui和bootstrap相应的Js和Css文件引入,
然后写好HTML部分,记得在form标签上把自动完成功能关掉,
即把autocomplete属性的属性值设置为off。
然后在input标签把模糊搜索的条件用placeholder属性提示出来,最后再加上oninput事件。
这样HTML部分就完成了,如图:
接下来我们来编写JS部分,我们先声明一个layui表格tbAcademe,
然后创建一个名为tabAcademeSearch的方法,再然后我们在tabAcademeSearch方法里,
获取到input标签里的文本内容并将它赋值给变量searchText。如图:
接下来我们通过reload方法对表格数据进行重载,这里我用的是layui里的数据重载,
它的语法是table.reload(ID,options,deep),ID为基础参数id对应的值,options为各项基础参数,
deep为是否采用深度重载(即重载时始终携带初始时及上次重载时的参数)默认为false,
然后我们让ID为tabAcademe,设置各项参数如下:url为设置异步接口;
where为设定异步数据接口的额外参数,
我们这里只需要以键值对的形式传递刚才获取到的搜索框的文本内容就可以了。
最后用page开启分页,并设置curr为1,这样每次重载后都会从第一页开始。如图:
接下来进行控制器部分的编写,我们需要在获取表格数据的方法里添加上模糊查询的代码,
先在参数里声明一个新的变量strsearchTxt,用来接受页面传过来的搜索框的文本内容。
然后再linq查询语句后面加上条件筛选,用if语句判断传递过来的文本内容是否不为空,
若不为空则用lambda表达式写出你要进行模糊搜索的筛选条件,
我这里用到的条件是学院编码和名称。如图:
注:dbAcademe为用linq语句获取到的表格数据。
然后用Count()方法返回数据列表中的元素数量并赋值给变量totalRow。
然后对获取到的数据进行分页,记得用OrderByDescending方法根据学院ID进行倒序排序,
这样会方便我们在页面上查看最新添加的数据。如图:
最后一步,构建返回视图层的数据。我们先添加一个工具类。将它命名为LayuiTableData,
然后添加code属性用来接受数据状态码(可以不设置),添加msg属性用来接受状态信息(可以不设置),
添加count属性用来接受数据的总行数,添加data属性用来接受数据。如图:
创建好后把它引入到控制器,然后new一个表对象,
给count赋值为刚刚获取到的数据列表中的元素数量totalRow,
再把刚才获取到的分页后的表数据赋值给data。
最后再把layuiTableData返回到页面,这样就可以在页面上用模糊查询查询相关信息了。如图:
模糊查询
最新推荐文章于 2023-02-28 10:57:24 发布