layui的數(shù)據(jù)表格+springmvc實(shí)現(xiàn)搜索功能的例子

更新時(shí)間：2019年09月28日 09:22:46 作者：灰太狼_cxh

今天小編就為大家分享一篇layui的數(shù)據(jù)表格+springmvc實(shí)現(xiàn)搜索功能的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧

如下所示：

主要在前端頁(yè)面加：

<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' //后臺(tái)springmvc接收路徑
      ,page:true  //true表示分頁(yè)
      ,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:'內(nèi)容', width:120}
        ,{field:'userid', title:'用戶id', width:80, sort: true}
        ,{field:'nice', title:'點(diǎn)贊數(shù)', width:100}
        ,{field:'createtime', title:'分享時(shí)間', 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>'}
      ]]
    });



    //監(jiān)聽表格行點(diǎn)擊
    table.on('tr', function(obj){
      console.log(obj)
    });

    //監(jiān)聽表格復(fù)選框選擇
    table.on('checkbox(test)', function(obj){
      console.log(obj)
    });

    //監(jiān)聽表格單選框選擇
    table.on('radio(test2)', function(obj){
      console.log(obj)
    });

    //監(jiān)聽單元格編輯
    table.on('edit(test2)', function(obj){
      var value = obj.value //得到修改后的值
        ,data = obj.data //得到所在行所有鍵值
        ,field = obj.field; //得到字段

    });

    //監(jiān)聽工具條
    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(){//獲取選中數(shù)據(jù)
        var checkStatus = table.checkStatus('contenttable')
          ,data = checkStatus.data;
        layer.alert(JSON.stringify(data));
      }
      ,getCheckLength: function(){//獲取選中數(shù)目
        var checkStatus = table.checkStatus('contenttable')
          ,data = checkStatus.data;
        layer.msg('選中了：'+ data.length + ' 個(gè)');
      }
      ,isAll: function(){//驗(yàn)證是否全選
        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('確認(rèn)刪除嗎？', 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重載把參數(shù)傳到springmvc后臺(tái)進(jìn)行模糊查詢，再把查到的數(shù)據(jù)返回就好了。

其中springmvc控制層代碼：

/**
 * layui-content后臺(tái)代碼
 * @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);
}

因?yàn)閘ayui返回的參數(shù)不單單是json數(shù)組，要符號(hào)其的數(shù)據(jù)格式才能在jsp頁(yè)面顯示數(shù)據(jù)，所以用ResultMap類來(lái)處理返回?cái)?shù)據(jù)的格式。

package net.stxy.one.model;

/**
 *
 * layui數(shù)據(jù)表格返回?cái)?shù)據(jù)處理類
 * 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的語(yǔ)句：

<!-- 通過條件分頁(yè)查詢，返回?cái)?shù)據(jù)集 -->
<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>

<!-- 通過條件分頁(yè)查詢，返回總記錄數(shù) -->
<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的數(shù)據(jù)表格+springmvc實(shí)現(xiàn)搜索功能的例子就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: