Bootstrap table使用方法记录
本文实例为大家分享了Bootstraptable的使用方法，供大家参考，具体内容如下
HTML代码：
/*index.cshtml*/
@sectionstyles{
}
新增产品
本文实例为大家分享了Bootstraptable的使用方法，供大家参考，具体内容如下
HTML代码：
/*index.cshtml*/
@sectionstyles{
}
新增产品
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:$('.searchinput').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('.searchinput');
$search.attr('placeholder','请输入编号、产品名称、技术参数搜索');
$search.css('width','400');
$(".model.form-groupinput").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);
}
});
};
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。