layui的数据表格+springmvc实现搜索功能的例子


Posted in Javascript onSeptember 28, 2019

如下所示:

layui的数据表格+springmvc实现搜索功能的例子

主要在前端页面加:

<div class="demoTable">
  搜索ID:
  <div class="layui-inline">
    <input class="layui-input" name="keyWord" id="keyWord" autocomplete="off">
  </div>
  <span class="input-group-btn">
              <select name="keyType" id="key_type" class="layui-btn">
                <option value="userid" selected="selected">userid</option>
                 <option value="content" >content</option>
              </select>
    </span>
  <button class="layui-btn" data-type="reload">搜索</button>

</div>

在js中加上:

reload:function () {
  var keyWord=$("#keyWord").val();
  var keyType=$("#key_type option:selected").val();
  table.reload('contenttable',{
    method:'post',
    where:{keyWord:keyWord,keyType:keyType}
  });
}

js的全貌:

<script>
  layui.use('table', function(){
    var table = layui.table;

    //渲染
    table.render({
      elem: '#test' //绑定table表格
      ,height: 450
      ,url: '<%=request.getContextPath()%>/admin/backContent' //后台springmvc接收路径
      ,page:true  //true表示分页
      ,limit: 10
      ,id:'contenttable'
      ,toolbar: '#toolbarDemo'
      ,cols: [[
        {type: 'checkbox', fixed: 'left'}
        ,{field:'id', title:'id', width:80, fixed: 'left', unresize: true, sort: true}
        ,{field:'content', title:'内容', width:120}
        ,{field:'userid', title:'用户id', width:80, sort: true}
        ,{field:'nice', title:'点赞数', width:100}
        ,{field:'createtime', title:'分享时间', width:80, sort: true}
        ,{field:'pic1', title:'图片1', width:120,templet:'<div><img src="http://localhost:8089/SharedImageServer/contentpic/{{ d.pic1}}"></div>'}
        ,{field:'pic2', title:'图片2', width:120,templet:'<div><img src="http://localhost:8089/SharedImageServer/contentpic/{{ d.pic2}}"></div>'}
        ,{field:'pic3', title:'图片3', width:120,templet:'<div><img src="http://localhost:8089/SharedImageServer/contentpic/{{ d.pic3}}"></div>'}
      ]]
    });



    //监听表格行点击
    table.on('tr', function(obj){
      console.log(obj)
    });

    //监听表格复选框选择
    table.on('checkbox(test)', function(obj){
      console.log(obj)
    });

    //监听表格单选框选择
    table.on('radio(test2)', function(obj){
      console.log(obj)
    });

    //监听单元格编辑
    table.on('edit(test2)', function(obj){
      var value = obj.value //得到修改后的值
        ,data = obj.data //得到所在行所有键值
        ,field = obj.field; //得到字段

    });

    //监听工具条
    table.on('tool(test)', function(obj){
      var data = obj.data;
      if(obj.event === 'del'){
        layer.confirm('真的删除行么', function(index){
          obj.del();
          layer.close(index);
        });
      } else if(obj.event === 'edit'){
        layer.prompt({
          formType: 2
          ,value: data.username
        }, function(value, index){
          obj.update({
            username: value
          });
          layer.close(index);
        });
      }
    });

    var $ = layui.jquery, active = {
      getCheckData: function(){//获取选中数据
        var checkStatus = table.checkStatus('contenttable')
          ,data = checkStatus.data;
        layer.alert(JSON.stringify(data));
      }
      ,getCheckLength: function(){//获取选中数目
        var checkStatus = table.checkStatus('contenttable')
          ,data = checkStatus.data;
        layer.msg('选中了:'+ data.length + ' 个');
      }
      ,isAll: function(){//验证是否全选
        var checkStatus = table.checkStatus('contenttable');
        layer.msg(checkStatus.isAll ? '全选': '未全选')
      }
      ,parseTable: function(){
        table.init('parse-table-demo', {
          limit: 3
        });
      }
      ,add: function(){
        table.addRow('test')
      }
      ,delete: function(){
        layer.confirm('确认删除吗?', function(index){
          table.deleteRow('test')
          layer.close(index);
        });
      }
      ,reload:function () {
        var keyWord=$("#keyWord").val();
        var keyType=$("#key_type option:selected").val();
        table.reload('contenttable',{
          method:'post',
          where:{keyWord:keyWord,keyType:keyType}
        });
      }
    };
    $('i').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
    $('.layui-btn').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
    
  });

</script>

通过reroad重载把参数传到springmvc后台进行模糊查询,再把查到的数据返回就好了。

其中springmvc控制层代码:

/**
 * layui-content后台代码
 * @return
 */
@RequestMapping(value = "/backContent")
@ResponseBody
public ResultMap<List<Content>> backContent(Page page, @RequestParam("limit") int limit){
  page.setRows(limit);
 
  List<Content>contentList=contentService.selectPageList(page);
  int totals=contentService.selectPageCount(page);
  
  page.setTotalRecord(totals);
  return new ResultMap<List<Content>>(0,"",totals,contentList);
}

因为layui返回的参数不单单是json数组,要符号其的数据格式才能在jsp页面显示数据,所以用ResultMap类来处理返回数据的格式。

package net.stxy.one.model;

/**
 *
 * layui数据表格返回数据处理类
 * Created by ASUS on 2018/5/19
 *
 * @Authod Grey Wolf
 */
public class ResultMap<T> {
  private String msg;
  private T data;
  private int code;
  private int count;

  public String getMsg() {
    return msg;
  }

  public void setMsg(String msg) {
    this.msg = msg;
  }

  public T getData() {
    return data;
  }

  public void setData(T data) {
    this.data = data;
  }

  public int getCode() {
    return code;
  }

  public void setCode(int code) {
    this.code = code;
  }

  public int getCount() {
    return count;
  }

  public void setCount(int count) {
    this.count = count;
  }

  public ResultMap(int code,String msg, int count,T data) {
    this.code = code;
    this.msg = msg;
    this.count = count;
    this.data = data;
  }

  public ResultMap() {
  }
}

其中mapper的语句:

<!-- 通过条件分页查询,返回数据集 -->
<select id="selectPageList" parameterType="net.stxy.one.model.Page" resultMap="BaseResultMap" >
 select
 <include refid="Base_Column_List" />
 from content
 <where>
 
  <if test="keyWord!='' and keyType=='userid' ">
    AND userid like '%' #{keyWord} '%'
  </if>
  <if test="keyWord!='' and keyType=='content' ">
    AND content like '%' #{keyWord} '%'
  </if>

 </where>
 order by id DESC
 limit #{start},#{rows}
</select>

<!-- 通过条件分页查询,返回总记录数 -->
<select id="selectPageCount" parameterType="net.stxy.one.model.Page" resultType="java.lang.Integer">
 select count(1) from content
  <where>

   <if test="keyWord!='' and keyType=='userid' ">
    AND userid like '%' #{keyWord} '%'
   </if>
   <if test="keyWord!='' and keyType=='content' ">
     AND content like '%' #{keyWord} '%'
   </if>

 </where>
</select>

以上这篇layui的数据表格+springmvc实现搜索功能的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery技巧总结
Jan 01 Javascript
jquery获取下拉列表的值为null的解决方法
Mar 18 Javascript
jQuery操作select的实例代码
Jun 14 Javascript
jQuery弹出层始终垂直居中相对于屏幕或当前窗口
Apr 01 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
js中创建对象的几种方式
Feb 05 Javascript
vue-router跳转页面的方法
Feb 09 Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
js实现简单的点名器随机色实例代码
Sep 20 Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 26 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 #Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 #Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 #Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 #Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 #Javascript
使用layer模态框给新页面传值的方法
Sep 27 #Javascript
JavaScript实现随机五位数验证码
Sep 27 #Javascript
You might like
header跳转和include包含问题详解
2012/09/08 PHP
php登陆页的密码处理方式分享
2013/10/14 PHP
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
php使用pclzip类实现文件压缩的方法(附pclzip类下载地址)
2016/04/30 PHP
php封装的验证码类分享
2017/02/26 PHP
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
基于jquery的滚动鼠标放大缩小图片效果
2011/10/27 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
JavaScript字符串对象substr方法入门实例(用于截取字符串)
2014/10/16 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
vue实现的树形结构加多选框示例
2019/02/02 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
python中__slots__用法实例
2015/06/04 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
python中itertools模块zip_longest函数详解
2018/06/12 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
python顺序执行多个py文件的方法
2019/06/29 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
印尼旅游网站:via
2017/11/12 全球购物
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
购房公证委托书(2014版)
2014/09/12 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
孝女彩金观后感
2015/06/10 职场文书
2015年语言文字工作总结
2015/07/23 职场文书
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers
聊聊Python String型列表求最值的问题
2022/01/18 Python
详解Flutter自定义应用程序内键盘的实现方法
2022/06/14 Java/Android
Golang gRPC HTTP协议转换示例
2022/06/16 Golang