[bootstrap table]Bootstrap table使用方法记录

【www.bbyears.com--php常用代码】

HTML代码：

/*index.cshtml*/
 
@section styles{
  
}
 

  
    
      新增产品
    
  
 
  

 

  
    
      
        ×
        
      
      
        
          编号：
          
        
        
          名称：
          
          (最多20个字)
        
        
          技术参数：
          
          (最多150个字)
        
        
          类型：
          
            普通产品
            明星产品
          
        
      
      
        关闭
        {{modalBtn}}
      
    
  

 
@section scripts{
  <scripttype="text/javascript"src="~/Scripts/bootstrap-table.js"></script>
  <scripttype="text/javascript"src="~/Scripts/bootstrap-table-zh-CN.js"></script>
  <scripttype="text/javascript"src="~/Scripts/common.js"></script>
  <scripttype="text/javascript"src="~/Views/Home/index.js"></script>
}

JS代码：
/*index.js*/
 
$(document).ready(function() {
  var$table = $("#table");
  vartextLength = 30; //技术参数默认折叠显示长度
 
  $table.bootstrapTable({
    locale:"zh-CN",
    url:"/product/getList",
    method:"post",
    contentType:"application/json",
    dataType:"json",
    toolbar:"#toolbar",       //工具按钮用哪个容器
    pagination:true,
    search:true,
    showRefresh:true,
    sidePagination:"server",     //分页方式：client客户端分页，server服务端分页
    singleSelect:true,        //单行选择
    pageNumber: 1,          //初始化加载第一页，默认第一页
    pageSize: 10,           //每页的记录行数
    pageList: [5, 10, 20],
    queryParams:function(params) { //请求参数
      vartemp = {
        pageSize: params.limit,          //页面大小
        pageNo: params.offset / params.limit + 1, //页码
        search: $(".search input").val()
      };
 
      returntemp;
    },
    responseHandler:function(res) {
      return{
        pageSize: res.pageSize,
        pageNumber: res.pageNo,
        total: res.total,
        rows: res.rows
      };
    },
    columns: [
      {
        title:"产品编号",
        field:"id"
      },
      {
        title:"产品名称",
        width: 200,
        field:"name"
      },
      {
        title:"技术参数",
        field:"tecParam",
        width: 300,
        formatter: tecParamFormatter,
        events: {
          "click .toggle": toggleText
        }
      },
      {
        title:"类型",
        field:"type",
        formatter: typeFormatter
      },
      {
        title:"操作",
        formatter: operateFormatter,
        events: {
          "click .mod": showUpdateModal,
          "click .delete": deleteProduct
        }
      }
    ]
  });
 
  functiontecParamFormatter(value, row, index) {
    if(value !=null&& value.length > 30) {
      return""+ value.substr(0, textLength) +"... 展开";
    }
    returnvalue;
  }
   
  functiontoggleText(e, value, row, index) {
    if(value ==null) {
      returnfalse;
    }
 
    var$tecParam = $(this).prev(".tec-param"),
      $toggle = $(this);
 
    if($tecParam.text().length > textLength + 5) {//折叠
      $tecParam.text(value.substr(0, textLength) +"...");
      $toggle.text("展开");
    }
    elseif(value.length > textLength + 5 && $tecParam.text().length <= textLength + 5) { //展开
      $tecParam.text(value);
      $toggle.text("折叠");
    }
  }
 
  functiontypeFormatter(value, row, index) {
    vartype ="";
    if(value =="1001")
      type ="普通产品";
    elseif(value =="1002")
      type ="明星产品";
    returntype;
  };
 
  functionoperateFormatter (value, row, index) {
    return"修改 "
      +"删除";
  };
 
  functionshowUpdateModal (e, value, row, index) {
    $("#productModalLabel").text("更新产品信息");
    $("#modalSubmitBtn").text("更新");
 
    $("#prodId").val(row.id);
    $("#prodId").attr("disabled",true); //禁止修改id
    $("#prodName").val(row.name);
    $("#prodTecParam").val(row.tecParam);
    if(row.type == 1001)
      $("#prodType").find("option[value="1001"]").attr("selected",true);
    elseif(row.type == 1002)
      $("#prodType").find("option[value="1002"]").attr("selected",true);
 
    $("#modalSubmitBtn").unbind();
    $("#modalSubmitBtn").on("click", updateProduct);
 
    $("#productModal").modal("show");
  };
 
 
  functiondeleteProduct (e, value, row, index) {
    varproduct = {
      id: row.id
    };
    if(product.id ===null|| product.id ==="") {
      returnfalse;
    }
 
    Common.confirm({
      message:"确认删除该产品？",
      operate:function(result) {
        if(result) {
          $.ajax({
            type:"post",
            url:"/product/delete",
            contentType:"application/json",
            data: JSON.stringify(product),
            success:function(data) {
              if(data !==null) {
                if(data.result) {
                  $("#table").bootstrapTable("refresh", { silent:true});
                  tipsAlert("alert-success","提示","删除成功！");
                }
                else{
                  tipsAlert("alert-warning","提示","删除失败！");
                }
              }
            },
            error:function(err) {
              tipsAlert("alert-danger","警告","服务器异常，请稍后再试！");
              console.log("error：", err.statusText);
            }
          });
 
          returntrue;
        }
        else{
          returnfalse;
        }
      }
    });
  };
 
  var$search = $table.data("bootstrap.table").$toolbar.find(".search input");
  $search.attr("placeholder","请输入编号、产品名称、技术参数搜索");
  $search.css("width","400");
 
  $(".model .form-group input").on("click",function(){
    $(this).next(".tips").text("");
  });
});
 
varshowAddModal =function() {
  $("#productModalLabel").text("新增产品");
  $("#modalSubmitBtn").text("新增");
 
  $("#prodId").val("");
  $("#prodName").val("");
  $("#prodTecParam").val("");
 
  $("#modalSubmitBtn").unbind();
  $("#modalSubmitBtn").on("click", addProduct);
 
  $("#productModal").modal("show");
};
 
varaddProduct =function() {
  varproduct = {
    name: $("#prodName").val(),
    tecParam: $("#prodTecParam").val(),
    type: $("#prodType").val()
  };
  if(product.name ==null|| product.name =="") {
    $("#prodName").next(".tips").text("产品名称不能为空！");
    returnfalse;
  }
  if(product.name.length > 20) {
    $("#prodName").next(".tips").text("最多20个字!");
    returnfalse;
  }
  if(product.tecParam.length > 150) {
    $("#prodTecParam").next(".tips").text("最多150个字!");
    returnfalse;
  }
 
  $.ajax({
    type:"post",
    url:"/product/add",
    contentType:"application/json",
    data: JSON.stringify(product),
    success:function(data) {
      if(data !==null) {
        if(data.result) {
          $("#table").bootstrapTable("refresh", { silent:true});
          $("#productModal").modal("hide");
          $("#prodId").val("");
          $("#prodName").val("");
          $("#prodTecParam").val("");
          tipsAlert("alert-success","提示","新增成功！");
        }
        else{
          tipsAlert("alert-warning","提示","新增失败！");
        }
      }
    },
    error:function(err) {
      tipsAlert("alert-danger","警告","服务器异常，请稍后再试！");
      console.log("error：", err.statusText);
    }
  });
};
 
varupdateProduct =function() {
  varproduct = {
    id: $("#prodId").val(),
    name: $("#prodName").val(),
    tecParam: $("#prodTecParam").val(),
    type: $("#prodType").val()
  };
  if(product.name ==null|| product.name =="") {
    $("#prodName").next(".tips").text("产品名称不能为空！");
    returnfalse;
  }
  if(product.name.length > 20) {
    $("#prodName").next(".tips").text("最多20个字!");
    returnfalse;
  }
  if(product.tecParam.length > 150) {
    $("#prodTecParam").next(".tips").text("最多150个字!");
    returnfalse;
  }
 
  $.ajax({
    type:"post",
    url:"/product/update",
    contentType:"application/json",
    data: JSON.stringify(product),
    success:function(data) {
      if(data !==null) {
        if(data.result) {
          $("#table").bootstrapTable("refresh", { silent:true});
          $("#productModal").modal("hide");
          $("#prodId").val("");
          $("#prodName").val("");
          $("#prodTecParam").val("");
          tipsAlert("alert-success","提示","修改成功！");
        }
        else{
          tipsAlert("alert-warning","提示","修改失败！");
        }
      }
    },
    error:function(err) {
      tipsAlert("alert-danger","警告","服务器异常，请稍后再试！");
      console.log("error：", err.statusText);
    }
  });
};

本文来源：http://www.bbyears.com/jiaocheng/135467.html