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正则验证邮箱的格式详细介绍
Nov 19 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
如何利用Promises编写更优雅的JavaScript代码
May 17 Javascript
jQuery插件扩展测试实例
Jun 21 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
详解angularJs中自定义directive的数据交互
Jan 13 Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 Javascript
微信小程序实现省市区三级地址选择
Jun 21 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
Vuex的各个模块封装的实现
Jun 05 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
CodeIgniter基本配置详细介绍
2013/11/12 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
js 异步处理进度条
2010/04/01 Javascript
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
js的写法基础分析
2011/01/17 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
javascript/jquery获取地址栏url参数的方法
2014/03/05 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
js实现HashTable(哈希表)的实例分析
2016/11/21 Javascript
利用JS实现页面删除并重新排序功能
2016/12/09 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
Django 连接sql server数据库的方法
2018/06/30 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
python增加图像对比度的方法
2019/07/12 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
Python 复平面绘图实例
2019/11/21 Python
python进程的状态、创建及使用方法详解
2019/12/06 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
小学数学国培感言
2014/03/10 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
对党的十八届四中全会的期盼
2014/10/17 职场文书
2014年电话客服工作总结
2014/12/09 职场文书