bootstrap-table操作使用

js文件:

var jmz = {};
jmz.GetLength = function(str) {
   var realLength = 0, len = str.length, charCode = -1;
   for (var i = 0; i < len; i++) {
       charCode = str.charCodeAt(i);
       if (charCode >= 0 && charCode <= 128) realLength += 1;
       else realLength += 2;
   }
   return realLength;
};


Date.prototype.format = function (format) {   
        var o = {   
            "M+": this.getMonth() + 1,   
            "d+": this.getDate(),   
            "h+": this.getHours(),   
            "m+": this.getMinutes(),   
            "s+": this.getSeconds(),   
            "q+": Math.floor((this.getMonth() + 3) / 3),   
            "S": this.getMilliseconds()   
        }   
        if (/(y+)/.test(format)) {   
            format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));   
        }   
        for (var k in o) {   
            if (new RegExp("(" + k + ")").test(format)) {   
                format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));   
            }   
        }   
        return format;   
     }     
    function getFormatDateByLong(l, pattern) {   
        return getFormatDate(new Date(l), pattern);   
    }      
    function getFormatDate(date, pattern) {   
        if (date == undefined) {   
            date = new Date();   
        }   
        if (pattern == undefined) {   
            pattern = "yyyy-MM-dd hh:mm:ss";   
        }   
        return date.format(pattern);   
    }
    
    function operateFormatterEvaTime(value,row,index){
return getFormatDateByLong(value, "yyyy-MM-dd hh:mm:ss");
}
    
    var $table = $('#table'),
        $remove = $('#remove'), 
        $canShow = $('#canShow'), 
        $canHide = $('#canHide'), 
        selections = []; 
   


      
      function operateFormatter2(value, row, index) { 
     
     if(row.status==0){
     return [ 
               '<a class="show" href="#" title="显示">显示</a>&nbsp;|&nbsp;',
               '<span class="remove" style="color:blue;cursor:pointer;">删除</span>' 
            ].join(''); 
      }else if(row.status==1){
      return [ 
                     '<a class="close" href="#" title="关闭">关闭</a>&nbsp;|&nbsp;',
                     '<span class="remove" style="color:blue;cursor:pointer;">删除</span>' 
                  ].join('');
      }
        
     } 
      
     function operateFormatterStatus(value, row, index){
    if(value==0){
    return ['关闭'].join('');
    }else if(value==1){
    return ['显示'].join('');
    }else{
    return [''].join(''); 
    }
      }
  
     window.operateEvents = { 
          'click .show': function (e, value, row, index) { 
         if(confirm("确认显示吗?")){
              $.ajax({  
             url:ctx+'/evaMainContent/updateEvaMainContent.do',
             data:{
              json:JSON.stringify(row.mainContentId)
             },  
             dataType:'json',  
             success:function(data) {  
              alert(data.resultInfo);
              }
          });
              }
          }, 
          'click .close': function (e, value, row, index) { 
         if(confirm("确认关闭吗?")){
              $.ajax({  
             url:ctx+'/evaMainContent/updateEvaMainContent.do',
             data:{
              json:JSON.stringify(row.mainContentId)
             },  
             dataType:'json',  
             success:function(data) {  
              alert(data.resultInfo);
              }
          });
              }
          },
         'click .remove': function (e, value, row, index) { 
             
             if(confirm("确认删除吗?")){
            $table.bootstrapTable('remove', { 
                     field: 'mainContentId', 
                     values: [row.mainContentId] 
                 }); 
              $.ajax({  
             url:ctx+'/evaMainContent/deleteEvaMainContent.do',
             data:{
              json:JSON.stringify(row.mainContentId)
             },  
             dataType:'json',  
             success:function(data) {  
              alert(data.resultInfo);
              }
          });
             }
         }
     }; 
     


     $table.on('check.bs.table uncheck.bs.table ' +
                'check-all.bs.table uncheck-all.bs.table', function () {
            $remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
            // save your data, here just save the current page
            selections = getIdSelections();
            // push or splice the selections if you want to save all data selections
        });


//1 点击工具栏删除按钮       
$remove.click(function () { 
            var ids = getIdSelections(); 
            if(ids.length==0){
            alert("请选择数据");
            return;
            }
            if(confirm("确认删除吗?")){
            $table.bootstrapTable('remove', { 
                    field: 'mainContentId', 
                    values: ids
                }); 
            $.ajax({  
           url:ctx+'/evaMainContent/deleteEvaMainContent.do',
           data:{
            json:JSON.stringify(ids)
           },  
           dataType:'json',  
           success:function(data) {  
            alert(data.resultInfo);
            }
        });
            }
       
        });


//2 点击工具栏显示按钮       
$canShow.click(function () { 
            var ids = getIdSelections(); 
            if(ids.length==0){
            alert("请选择数据");
            return;
            }
            if(confirm("确认允许显示吗?")){
            $.ajax({  
           url:ctx+'/evaMainContent/updateEvaMainContent.do',
           data:{
            json:JSON.stringify(ids),
            status:'1'
           },  
           dataType:'json',  
           success:function(data) {  
            alert(data.resultInfo);
            }
        });
            }
       
        });


//3 点击工具栏隐藏按钮       
$canHide.click(function () { 
            var ids = getIdSelections(); 
            if(ids.length==0){
            alert("请选择数据");
            return;
            }
            if(confirm("确认禁止显示吗?")){
            $.ajax({  
           url:ctx+'/evaMainContent/updateEvaMainContent.do',
           data:{
            json:JSON.stringify(ids),
            status:'0'
           },  
           dataType:'json',  
           success:function(data) {  
            alert(data.resultInfo);
            }
        });
            }
       
        });


 function getIdSelections() {
        return $.map($table.bootstrapTable('getSelections'), function (row) {
            return row.mainContentId;
        });
    }
 
 /**
 * 列表筛选
 * @param params
 * @returns {___anonymous2470_2595}
 */ 
function queryParamsForEva(params){
var productName=$("#productName").val();
var brandName=$("#brandName").val();
var businessName=$("#businessName").val();
var nparams={
"productName":productName,
"brandName":brandName,
"businessName":businessName,
"pagesize":params.limit,
"pageno": (params.offset/params.limit)+1
};
return nparams;
}
/**
 * 信息加载
 */
function loadEvaList(){
$('#table').bootstrapTable('destroy');
$('#table').bootstrapTable({
url:ctx+"/evaMainContent/searchEvaMainContentList.do",
sidePagination:"server",
pagination:"true",
pageList:"[5, 10, 20, 50]",
queryParams:"queryParamsForEva",
responseHandler:"res",
queryParamsType:"limit"
});
$('#table').bootstrapTable('hideColumn', 'mainContentId');
}


/**
 * bootstrap.table分页参数返回
 * @param res
 * @returns {___anonymous275_329}
 */
function res(res) {
return {
  "total":res.total,
  "rows":res.list
};
}
loadEvaList();


-----jsp 文件---


<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c"   uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap-select.min.css">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap-table.min.css">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/css/reset.css">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/css/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="${pageContext.request.contextPath}/css/evaMainContent/evaMainContent-list.css">
        <jsp:include page="/WEB-INF/view/common/include.jsp"></jsp:include>
    </head>
    <body>
    <h1><!-- 评论管理 --><span>评论列表</span></h1>
    <div class="head">
      <form class="form-inline">
   
        <div class="row">
          
       
           <div class="col-md-4">
            <i>商品名称</i>
            <input type="text" id="productName" class="form-control">
          </div>
          
          <div class="col-md-4">
            <i>品牌商名称</i>
            <input type="text" id="brandName" class="form-control">
          </div>
          <div class="col-md-4">
            <i>分销商名称</i>
            <input type="text" id="businessName" class="form-control">
          </div>
          
          
        </div>
        <div class="row">
          
          <div class="col-md-8">
            <i>评论时间</i>
            <input type="text" class="form-control" id="startTime" name="startTime" onclick="WdatePicker({dateFmt:'yyyy-MM-dd'});" readonly/>

<input type="text" class="form-control" id="endTime"  name="endTime"  onclick="WdatePicker({dateFmt:'yyyy-MM-dd'});" readonly/>
          </div>
          <div class="col-md-4">
            <i>状态</i>
            <select name="" id="" class="selectpicker" data-live-search="true">
                   <option value="">全部</option>
                   <option value="0">关闭</option>
                   <option value="1">显示</option>
              </select>
          </div>
        </div>
        <div class="row">
            <div class="col-md-9"></div>
                <div class="col-md-3">
                    <a href="#"><button type="button" onclick="loadEvaList();" class="btn btn-info">搜索</button></a>
                </div>
            </div>


      </form>
    </div>
    <div class="row container" style="margin-bottom:-13px;margin-top:20px;">
      <div class="col-md-6">
          <button type="button" class="btn btn-info" id="remove" >删除</button>
          <a href="#"><button type="button" id="canShow" class="btn btn-info">允许显示</button></a>
          <a href="#"><button type="button" id="canHide" class="btn btn-info">禁止显示</button></a>
      </div>
   </div>
    <div class="row table1" style="margin-bottom:50px;width:98%;margin:0 auto;">
               
               <table  id="table" class="tablesorter"
                  data-toggle="table" 
                  data-toolbar="#toolbar"
                  data-page-list="[5, 10, 20, 50, 100, 200]" 
                  data-pagination="true" 
                  data-query-params="queryParamsForEva" 
                  data-striped="false"
                  data-show-pagination-switch="false">
                         <thead>
                              <tr>
                                  <th data-checkbox="true" ></th> 
                                  <th data-field="mainContentId">Id</th> 
                                  <th data-field="productName">商品名称</th> 
                                  <th data-field="brandName">品牌商</th>
                                  <th data-field="businessName">分销商</th>
                                  <th data-field="content">评论内容</th>
                                  <th data-field="evaTime" data-formatter="operateFormatterEvaTime">评论时间</th>
                                  <th data-field="status" data-formatter="operateFormatterStatus"  >状态</th>
                                  <th data-field="operation" data-formatter="operateFormatter2" data-events="operateEvents">操作</th>
                              </tr>
                         </thead>
                </table>
          </div>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-select.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/evaMainContent/evaMainContentList.js"></script>
    </body>
</html>

猜你喜欢

转载自blog.csdn.net/xiaogg3678/article/details/52780470
今日推荐