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 相关文章推荐
不用MOUSEMOVE也能滑动啊
May 23 Javascript
jquery tools 系列 scrollable学习
Sep 06 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 Javascript
JS实现调用本地摄像头功能示例
May 18 Javascript
ES6的异步终极解决方案分享
Jul 11 Javascript
js实现随机抽奖
Mar 19 Javascript
Vue SSR 即时编译技术的实现
May 06 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 Javascript
JS绘图Flot应用图形绘制异常解决方案
Oct 16 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
php使用Jpgraph创建折线图效果示例
2017/02/15 PHP
含有CKEditor的表单如何提交
2014/01/09 Javascript
jQuery拖拽div实现思路
2014/02/19 Javascript
一张Web前端的思维导图分享
2015/07/03 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
nodejs入门教程六:express模块用法示例
2017/04/24 NodeJs
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
Vue学习笔记进阶篇之过渡状态详解
2017/07/14 Javascript
JavaScript原型对象原理与应用分析
2018/12/27 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
小程序中手机号识别的示例
2020/12/14 Javascript
wxPython 入门教程
2008/10/07 Python
在Python的Django框架中创建语言文件
2015/07/27 Python
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
Python 机器学习库 NumPy入门教程
2018/04/19 Python
python3实现多线程聊天室
2018/12/12 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
Django和Ueditor自定义存储上传文件的文件名
2021/02/25 Python
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
新加坡一家在线男士皮具品牌:Faire Leather Co.
2019/12/01 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
介绍一下内联、左联、右联
2013/12/31 面试题
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
高中军训感言600字
2014/03/11 职场文书
竞选班委演讲稿
2014/04/28 职场文书
2014年学习委员工作总结
2014/11/14 职场文书
2014年药店工作总结
2014/11/20 职场文书
受资助学生感谢信
2015/01/21 职场文书
Python装饰器详细介绍
2022/03/25 Python