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 相关文章推荐
JavaScript 错误处理与调试经验总结
Aug 10 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
Sep 10 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
AngularJS 文件上传控件 ng-file-upload详解
Jan 13 Javascript
jQuery设计思想
Mar 07 Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
Node.js模块全局安装路径配置方法
May 17 Javascript
node.js部署之启动后台运行forever的方法
May 23 Javascript
layui弹出框Tab选项卡的示例代码
Sep 04 Javascript
vue.js实现简单的计算器功能
Feb 22 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的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
浅析Yii2缓存的使用
2016/05/10 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
ThinkPHP6.0如何利用自定义验证规则规范的实现登陆
2020/12/16 PHP
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
JavaScript判断用户是否对表单进行了修改的方法
2015/03/18 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
Bootstrap Fileinput文件上传组件用法详解
2016/05/10 Javascript
Node.js+Express配置入门教程详解
2016/05/19 Javascript
js仿淘宝商品放大预览功能
2017/03/15 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
小程序转发探索示例
2019/02/19 Javascript
bootstrap-table+treegrid实现树形表格
2019/07/26 Javascript
跟老齐学Python之dict()的操作方法
2014/09/24 Python
Python求算数平方根和约数的方法汇总
2016/03/09 Python
python如何获取服务器硬件信息
2017/05/11 Python
Python中序列的修改、散列与切片详解
2017/08/27 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
Python操作MongoDb数据库流程详解
2020/03/05 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
CK美国官网:Calvin Klein
2016/08/26 全球购物
100%有机精油,美容油:House of Pure Essence
2018/10/30 全球购物
Clarks其乐鞋荷兰官网:Clarks荷兰
2019/07/05 全球购物
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
网络编程中设计并发服务器,使用多进程与多线程,请问有什么区别?
2016/03/27 面试题
大学生怎样写好自荐信
2014/02/25 职场文书
项目投资意向书
2014/04/01 职场文书
小学开学标语
2014/07/01 职场文书