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 相关文章推荐
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
js中的this关键字详解
Sep 25 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
通过命令行生成vue项目框架的方法
Jul 12 Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 Javascript
three.js中文文档学习之如何本地运行详解
Nov 20 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
vue项目中全局引入1个.scss文件的问题解决
Aug 01 Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 Javascript
antd-mobile ListView长列表的数据更新遇到的坑
Apr 08 Javascript
JavaScript中继承原理与用法实例入门
May 09 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中设置index.php文件为只读的方法
2013/02/06 PHP
apache配置虚拟主机的方法详解
2013/06/17 PHP
Laravel 5 框架入门(三)
2015/04/09 PHP
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
Javascript window对象详解
2014/11/12 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
jQuery简单实现遍历数组的方法
2015/04/14 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
Python中文件操作简明介绍
2015/04/13 Python
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
django-allauth入门学习和使用详解
2019/07/03 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
关于pycharm中pip版本10.0无法使用的解决办法
2019/10/10 Python
python 两个数据库postgresql对比
2019/10/21 Python
Python解析json代码实例解析
2019/11/25 Python
python实现图片上添加图片
2019/11/26 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
Python colormap库的安装和使用详情
2020/10/06 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
大学生实习证明范本
2014/01/15 职场文书
党务公开方案
2014/05/06 职场文书
招标保密承诺书
2015/01/20 职场文书
风之谷观后感
2015/06/11 职场文书
外出考察学习心得体会
2016/01/18 职场文书
MSSQL基本语法操作
2022/04/11 SQL Server