欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Layui 數(shù)據(jù)表格批量刪除和多條件搜索的實例

 更新時間:2019年09月04日 15:13:23   作者:彬_心  
今天小編就為大家分享一篇Layui 數(shù)據(jù)表格批量刪除和多條件搜索的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧

layui數(shù)據(jù)表格批量刪除

多條件搜索框:注樣式自己寫
<div class="demoTable" style="width: 968px;
 margin:20px auto;color: #7185a2">
    流水號:
    <div class="layui-inline">
     <input class="layui-input" name="FlowNumber" id="FlowNumber" autocomplete="off" style="height:30px;border:1px solid #7185a2">
    </div>
    賬號:
    <div class="layui-inline">
     <input class="layui-input" name="UserName" id="UserName" autocomplete="off" style="height:30px;border:1px solid #7185a2">
    </div>
    咨詢主題:
    <div class="layui-inline">
     <input class="layui-input" name="Topic" id="Topic" autocomplete="off" style="height:30px;border:1px solid #7185a2">
    </div>
    時間:
    <div class="layui-inline">
     <input class="layui-input" name="Time" id="Time" autocomplete="off" style="height:30px;border:1px solid #7185a2">
    </div>

    <button class="layui-btn" data-type="reload" style="height:30px;background:#7185a2;line-height:30px;">搜索</button>

   </div>
刪除按鈕
 <button class="layui-btn" data-type="getCheckData" style="background:#7185a2">批量刪除</button>
 <table id="dataProject" class="layui-table" lay-filter="test"></table> <!--數(shù)據(jù)表格渲染-->
 
<script>
 layui.use(['table','laydate'], function(){
  var table = layui.table;
    laydate = layui.laydate;
  //第一個實例
  laydate.render({
   elem: '#Time'
   ,theme: '#7185a2'
  });
  table.render({
   elem: '#dataProject' //渲染dom
   ,url: './json/servertheme.json' //數(shù)據(jù)接口
   ,request:{
    pageName: 'page' //頁碼的參數(shù)名稱,默認(rèn):page
    ,limitName: 'size' //每頁數(shù)據(jù)量的參數(shù)名,默認(rèn):limit
   }
   ,response: {
    statusName: 'code' //數(shù)據(jù)狀態(tài)的字段名稱,默認(rèn):code
    ,statusCode: 0 //成功的狀態(tài)碼,默認(rèn):0
    ,msgName: '' //狀態(tài)信息的字段名稱,默認(rèn):msg
    ,countName: 'count' //數(shù)據(jù)總數(shù)的字段名稱,默認(rèn):count
    ,dataName: 'data' //數(shù)據(jù)列表的字段名稱,默認(rèn):data
   }
   ,cols: [[ //表頭
//    {field: 'projectId', title: 'ID', width:10}
    {type: 'checkbox', fixed: 'left'}
    ,{field: 'FlowNumber', title: '流水號', width:91}
    ,{field: 'UserName', title: '賬號',width:103}
    ,{field: 'projectName', title: '咨詢主題',width:146}
    ,{field: 'projectShiXiang', title: '涉及事項',width:136}
    ,{field: 'time', title: '咨詢時間',width:140}
    ,{field: 'state', title: '狀態(tài)',width:87}
    ,{field: 'operation', title: '操作',toolbar:'#barDemo',width:140}
   ]]
   ,page: { //支持傳入 laypage 組件的所有參數(shù)(某些參數(shù)除外,如:jump/elem) - 詳見文檔
    layout: [ 'prev', 'page', 'next', 'skip', 'count'] //自定義分頁布局
    ,groups: 3 //只顯示 1 個連續(xù)頁碼
    ,first: '首頁' //不顯示首頁
    ,last: '尾頁' //不顯示尾頁
    ,theme: '#7185a2'

   }
   ,id: 'testReload'
   ,limit:6
  });
  table.on('tool(test)', function(obj) {//申報按鈕
   var data = obj.data;
   var dataTitle =data.projectName;
   if(obj.event ==="lookProject"){
    var url='serverInfo.html'
    //彈框部分
    layer.open({
     type: 2,
     title:'查看——'+dataTitle,
     shadeClose: true,
     shade: 0.8,
     offset:"100px",
     move:false,
     resize:false,
     scrollbar:false,
     area: ['700px', '150px'],
     content:[url]
    })

   }else if(obj.event ==="del"){
    var projectId = data.projectId;

   }
  })
  var $ = layui.$, active = {
  //注釋:layui 搜索模塊 Start
   reload: function(){
    var FlowNumber = $('#FlowNumber').val();
    var UserName = $('#UserName').val();
    var Topic = $('#Topic').val();
    var Time = $('#Time').val();
    table.reload('testReload', {
     page: {
      curr: 1
     }
     ,where: {
        FlowNumber: FlowNumber
       ,UserName: UserName
       ,Topic: Topic
       ,Time: Time
     }
    });
   },
 //注釋:layui 搜索模塊 End
 //注釋:layui 批量刪除 Start
   getCheckData:function(){
    var checkStatus = table.checkStatus('testReload');// table.checkStatus是Layui中自帶,id: 'testReload'可自定義
    if(checkStatus.data.length==0){
     parent.layer.msg('請先選擇要刪除的數(shù)據(jù)行!', {icon: 2});
     return ;
    }
    var codeId= "";
    for(var i=0;i<checkStatus.data.length;i++){
     codeId += checkStatus.data[i].id+",";
    }
    parent.layer.msg('刪除中...', {icon: 16,shade: 0.3,time:5000});
//    注釋:把刪除接口替換成url,http:///www.baidu.com只是案例地址
  layer.confirm("您確定要刪除嗎?"+codeId,function(){
     $.ajax({
      type:"POST",
      url: './json/servertheme.json',
      data:{"id":codeId},
      success:function (data) {
       layer.closeAll('loading');
       if(data.code==1){
        parent.layer.msg('刪除成功!', {icon: 1,time:2000,shade:0.2});
        location.reload(true);
       }else{
        parent.layer.msg('刪除失?。?, {icon: 2,time:3000,shade:0.2});
       }
      }
     })
    })
  };
   //注釋:layui 批量刪除 End
  //通用按鈕
  $('.layui-btn').on('click', function(){
   var type = $(this).data('type');
   active[type] ? active[type].call(this) : '';
  });
 });

</script>

以上這篇Layui 數(shù)據(jù)表格批量刪除和多條件搜索的實例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論