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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。