Bootstrap table使用方法记录

发布时间：2020-12-18 00:35:00 所属栏目：安全来源：网络整理

导读：本文实例为大家分享了Bootstrap table的使用方法，供大家参考，具体内容如下 HTML代码： @section styles{ } div class="main" div id="toolbar" class="btn-group" button id="addProductBtn" type="button" class="btn btn-default" onclick="showAddModal

本文实例为大家分享了Bootstrap table的使用方法，供大家参考，具体内容如下

HTML代码：

@section styles{

}

<div class="main">
<div id="toolbar" class="btn-group">
<button id="addProductBtn" type="button" class="btn btn-default" onclick="showAddModal()">
<span class="glyphicon glyphicon-plus" aria-hidden="true">新增产品

(最多20个字)

<span class="tips" >(最多150个字)</span>
        </div>
        <div class="form-group">
          <label for="prodType" class="col-md-2">类型：</label>
          <select class="form-control" id="prodType">
            <option value="1001">普通产品</option>
            <option value="1002">明星产品</option>
          </select>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button id="modalSubmitBtn" type="button" class="btn btn-primary">{{modalBtn}}</button>
      </div>
    </div>
  </div>
</div>
<p>@section scripts{<br />
<script type="text/javascript" src="~/Scripts/bootstrap-table.js"></script><br />
<script type="text/javascript" src="~/Scripts/bootstrap-table-zh-CN.js"></script><br />
<script type="text/javascript" src="~/Scripts/common.js"></script><br />
<script type="text/javascript" src="~/Views/Home/index.js"></script><br />
}</p>
</pre>
</div>
<p>JS代码：</p>
<div class="jb51code">
<pre class="brush:js;">
/*index.js*/
<p>$(document).ready(function () {<br />
var $table = $('#table');<br />
var textLength = 30;  //技术参数默认折叠显示长度</p>
<p>$table.bootstrapTable({<br />
locale: 'zh-CN',url: '/product/getList',method: 'post',contentType: 'application/json',dataType: "json",toolbar: '#toolbar',//工具按钮用哪个容器<br />
pagination: true,search: true,showRefresh: true,sidePagination: "server",//分页方式：client客户端分页，server服务端分页<br />
singleSelect: true,//单行选择<br />
pageNumber: 1,//初始化加载第一页，默认第一页<br />
pageSize: 10,//每页的记录行数<br />
pageList: [5,10,20],queryParams: function (params) {  //请求参数<br />
var temp = {<br />
pageSize: params.limit,//页面大小<br />
pageNo: params.offset / params.limit + 1,//页码<br />
search: $('.search input').val()<br />
};</p>
<pre><code>  return temp;
},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
    }
  }
]</code></pre>
<p>});</p>
<p>function tecParamFormatter(value,row,index) {<br />
if (value != null && value.length > 30) {<br />
return '<span class="tec-param">' + value.substr(0,textLength) + '...</span>展开';<br />
}<br />
return value;<br />
}</p>
<p>function toggleText(e,value,index) {<br />
if (value == null) {<br />
return false;<br />
}</p>
<pre><code>var $tecParam = $(this).prev(".tec-param"),$toggle = $(this);

if ($tecParam.text().length > textLength + 5) { //折叠
  $tecParam.text(value.substr(0,textLength) + "...");
  $toggle.text("展开");
}
else if (value.length > textLength + 5 && $tecParam.text().length <= textLength + 5) {  //展开
  $tecParam.text(value);
  $toggle.text("折叠");
}</code></pre>
<p>}</p>
<p>function typeFormatter(value,index) {<br />
var type = "";<br />
if (value == "1001")<br />
type = "普通产品";<br />
else if (value == "1002")<br />
type = "明星产品";<br />
return type;<br />
};</p>
<p>function operateFormatter (value,index) {<br />
return '修改 '</p>
<ul>
<li>'删除';<br />
};</li>
</ul>
<p>function showUpdateModal (e,index) {<br />
$("#productModalLabel").text("更新产品信息");<br />
$("#modalSubmitBtn").text("更新");</p>
<pre><code>$("#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);
else if (row.type == 1002)
  $("#prodType").find('option[value="1002"]').attr("selected",true);

$("#modalSubmitBtn").unbind();
$("#modalSubmitBtn").on("click",updateProduct);

$("#productModal").modal("show");</code></pre>
<p>};</p>
<p>function deleteProduct (e,index) {<br />
var product = {<br />
id: row.id<br />
};<br />
if (product.id === null || product.id === "") {<br />
return false;<br />
}</p>
<pre><code>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);
        }
      });

return true;
    }
    else {
      return false;
    }
  }
});</code></pre>
<p>};</p>
<p>var $search = $table.data('bootstrap.table').$toolbar.find('.search input');<br />
$search.attr('placeholder','请输入编号、产品名称、技术参数搜索');<br />
$search.css('width','400');</p>
<p>$(".model .form-group input").on("click",function(){<br />
$(this).next(".tips").text("");<br />
});<br />
});</p>
<p>var showAddModal = function () {<br />
$("#productModalLabel").text("新增产品");<br />
$("#modalSubmitBtn").text("新增");</p>
<p>$("#prodId").val('');<br />
$("#prodName").val('');<br />
$("#prodTecParam").val('');</p>
<p>$("#modalSubmitBtn").unbind();<br />
$("#modalSubmitBtn").on("click",addProduct);</p>
<p>$("#productModal").modal("show");<br />
};</p>
<p>var addProduct = function () {<br />
var product = {<br />
name: $("#prodName").val(),tecParam: $("#prodTecParam").val(),type: $("#prodType").val()<br />
};<br />
if (product.name == null || product.name == "") {<br />
$("#prodName").next(".tips").text("产品名称不能为空！");<br />
return false;<br />
}<br />
if (product.name.length > 20) {<br />
$("#prodName").next(".tips").text("最多20个字!");<br />
return false;<br />
}<br />
if (product.tecParam.length > 150) {<br />
$("#prodTecParam").next(".tips").text("最多150个字!");<br />
return false;<br />
}</p>
<p>$.ajax({<br />
type: "post",url: "/product/add",success: function (data) {<br />
if (data !== null) {<br />
if (data.result) {<br />
$("#table").bootstrapTable("refresh",{ silent: true });<br />
$("#productModal").modal('hide');<br />
$("#prodId").val('');<br />
$("#prodName").val('');<br />
$("#prodTecParam").val('');<br />
tipsAlert('alert-success','新增成功！');<br />
}<br />
else {<br />
tipsAlert('alert-warning','新增失败！');<br />
}<br />
}<br />
},error: function (err) {<br />
tipsAlert('alert-danger','服务器异常，请稍后再试！');<br />
console.log("error：",err.statusText);<br />
}<br />
});<br />
};</p>
<p>var updateProduct = function () {<br />
var product = {<br />
id: $("#prodId").val(),name: $("#prodName").val(),url: "/product/update",'修改成功！');<br />
}<br />
else {<br />
tipsAlert('alert-warning','修改失败！');<br />
}<br />
}<br />
},err.statusText);<br />
}<br />
});<br />
};</p>
</pre>
</div>
<p>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。</p>                        <p style="text-align:right;">（编辑：李大同）</p>
<p style="text-align:right;">【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!</p>
                    </td>
                  </tr>
                </table>
            </div>
            <div class="dede_pagess"><ul class="pagelist"></ul></div>
            <div class="ad-690"><script src='https://ess.0577qiche.com/d/js/acmsd/ad76.js' language='javascript'></script></div>
            <div class="g-box10">
            	<div class="t-2">相关内容</div>
<ul class="b-box12"></ul>
<ul class="b-box13"><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/483204.html" target="_blank">如何在Scala中访问被覆盖的数据成员？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/567705.html" target="_blank">angularjs – 为什么指令ng-href需要{{}}而其他指令不？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/356612.html" target="_blank">bash 字符串处理</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/573041.html" target="_blank">angularjs – Angular – 看不到如何隐藏此API密钥</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/557077.html" target="_blank">angular – 嵌入式模板上任何指令都未使用的属性绑定ngif</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/570866.html" target="_blank">[Angular 2] 翻译：Angular 2 服务：是不是单例？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/535066.html" target="_blank">WEBSERVICE简介</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/570724.html" target="_blank">解决angularjs中同步执行http请求</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/471277.html" target="_blank">scala – IntelliJ似乎没有拾取某些sbt库,没有代码完成</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/580497.html" target="_blank">twitter-bootstrap – 如何自动将Bokeh绘图大小调整为所用设</a></li><div class="cl"></div></ul>
            </div>
        </div>
    </div>
    <div class="right-1 fr">
    	<div class="g-box8">
        <div class="t-2">推荐文章</div>
            <ul></ul>
        </div>
    	<div class="g-box11">
        <div class="t-2">站长推荐</div>
            <ul class="b-box7"><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/383168.html" target="_blank">shell 比较两个文件不同 sort comm</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/519223.html" target="_blank">HTTPConnection调用WebService接口</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201216/518468.html" target="_blank">Axis2服务端用户名和密码校验authentication代码</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/583533.html" target="_blank">Bootstrap的js插件之按钮(button)</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/571718.html" target="_blank">温故而知新 - AngularJS 1.x</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/539250.html" target="_blank">9 远程服务框架-概述</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201218/587838.html" target="_blank">Bootstrap每天必学之缩略图与警示窗</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201215/396327.html" target="_blank">除了某些文件之外,这个bash函数如何工作？</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/571646.html" target="_blank">在AngularJS的输出HTML上应用过滤器</a></li><li><a href="https://www.lidatong.com.cn/html/zhonghe/fwq/anquan/20201217/535057.html" target="_blank">获取手机信息的工具类</a></li></ul>
        </div>
        <script type="text/javascript">jQuery(".g-box8").slide({ titCell:"li",triggerTime:0 });	</script>
        <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad103.js' language='javascript'></script></div>
    	<div class="g-box3 u-3">
        <div class="t-1">热点阅读</div>
            <ul class="b-box2"></ul>
        </div>
        <div class="ad-250"><script src='https://ess.0577qiche.com/d/js/acmsd/ad77.js' language='javascript'></script></div>
        </div>
	<div class="cl"></div>
</div>
<div class="ad-960"><script src='https://ess.0577qiche.com/d/js/acmsd/ad78.js' language='javascript'></script></div>
<div class="footer">
<p>【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。</p>
<p>建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果</p>
<p>Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同</p>
<p><script type="text/javascript" src="//js.users.51.la/21280179.js"></script></p>
</div>
</body>
</html>