Bootstrap table使用方法记录
时间:2019-03-31
本文章向大家介绍Bootstrap table使用方法记录,主要包括Bootstrap table使用方法记录使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文实例为大家分享了Bootstrap table的使用方法,供大家参考,具体内容如下
HTML代码:
/*index.cshtml*/ @section styles{ <style> .main { margin-top:20px; } .modal-body .form-group .form-control { display:inline-block; } .modal-body .form-group .tips { color:red; } </style> } <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"></span>新增产品 </button> </div> <table id="table"></table> </div> <div class="modal fade" id="productModal" tabindex="-1" role="dialog" aria-labelledby="productModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="productModalLabel"></h4> </div> <div class="modal-body"> <div class="form-group"> <label for="prodId" class="col-md-2">编号:</label> <input type="text" class="form-control" id="prodId" disabled> </div> <div class="form-group"> <label for="prodName" class="col-md-2">名称:</label> <input type="text" class="form-control" id="prodName"> <span class="tips" >(最多20个字)</span> </div> <div class="form-group"> <label for="prodTecParam" class="col-md-2">技术参数:</label> <textarea rows="3" class="form-control" id="prodTecParam"></textarea> <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><!-- /.modal-content --> </div><!-- /.modal --> </div> @section scripts{ <script type="text/javascript" src="~/Scripts/bootstrap-table.js"></script> <script type="text/javascript" src="~/Scripts/bootstrap-table-zh-CN.js"></script> <script type="text/javascript" src="~/Scripts/common.js"></script> <script type="text/javascript" src="~/Views/Home/index.js"></script> }
JS代码:
/*index.js*/ $(document).ready(function () { var $table = $('#table'); var textLength = 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) { //请求参数 var temp = { pageSize: params.limit, //页面大小 pageNo: params.offset / params.limit + 1, //页码 search: $('.search input').val() }; 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 } } ] }); function tecParamFormatter(value, row, index) { if (value != null && value.length > 30) { return '<span class="tec-param">' + value.substr(0, textLength) + '...</span> <a class="toggle" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >展开</a>'; } return value; } function toggleText(e, value, row, index) { if (value == null) { return false; } 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("折叠"); } } function typeFormatter(value, row, index) { var type = ""; if (value == "1001") type = "普通产品"; else if (value == "1002") type = "明星产品"; return type; }; function operateFormatter (value, row, index) { return '<a class="mod btn btn-info" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改</a> ' + '<a class="delete btn btn-danger" href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" >删除</a>'; }; function showUpdateModal (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); else if (row.type == 1002) $("#prodType").find('option[value="1002"]').attr("selected", true); $("#modalSubmitBtn").unbind(); $("#modalSubmitBtn").on("click", updateProduct); $("#productModal").modal("show"); }; function deleteProduct (e, value, row, index) { var product = { id: row.id }; if (product.id === null || product.id === "") { return false; } 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; } } }); }; 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(""); }); }); var showAddModal = function () { $("#productModalLabel").text("新增产品"); $("#modalSubmitBtn").text("新增"); $("#prodId").val(''); $("#prodName").val(''); $("#prodTecParam").val(''); $("#modalSubmitBtn").unbind(); $("#modalSubmitBtn").on("click", addProduct); $("#productModal").modal("show"); }; var addProduct = function () { var product = { name: $("#prodName").val(), tecParam: $("#prodTecParam").val(), type: $("#prodType").val() }; if (product.name == null || product.name == "") { $("#prodName").next(".tips").text("产品名称不能为空!"); return false; } if (product.name.length > 20) { $("#prodName").next(".tips").text("最多20个字!"); return false; } if (product.tecParam.length > 150) { $("#prodTecParam").next(".tips").text("最多150个字!"); return false; } $.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); } }); }; var updateProduct = function () { var product = { id: $("#prodId").val(), name: $("#prodName").val(), tecParam: $("#prodTecParam").val(), type: $("#prodType").val() }; if (product.name == null || product.name == "") { $("#prodName").next(".tips").text("产品名称不能为空!"); return false; } if (product.name.length > 20) { $("#prodName").next(".tips").text("最多20个字!"); return false; } if (product.tecParam.length > 150) { $("#prodTecParam").next(".tips").text("最多150个字!"); return false; } $.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); } }); };
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- hdu---1506(Largest Rectangle in a Histogram/dp最大子矩阵)
- 日志分析实战之清洗日志小实例6:获取uri点击量排序并得到最高的url
- golang使用sort接口实现排序示例
- hdu----(5056)Boring count(贪心)
- hdu----(5055)Bob and math problem(贪心)
- hadoop3.0 Yarn支持网络资源:network原理设计文档说明【中文】
- PHP-超级全局变量
- 日志分析实战之清洗日志小实例5:实现获取不能访问url
- CentOS安装Redis、PHPredis扩展
- 日志分析实战之清洗日志小实例4:统计网站相关信息
- PHP-数组排序
- hdu---(3555)Bomb(数位dp(入门))
- PHP-循环
- 日志分析实战之清洗日志小实例3:如何在spark shell中导入自定义包
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Day15.异常的处理
- 「翻译」在生物信息学中使用 GNU-Parallel
- Kafka运维小贴士 | Kafka 消息监控
- MySQL慢查询优化 | 联结原理
- MySQL千万大表优化实践
- GitHub 标星过万!计算机与网络知识总结电子书下载!
- 盘一盘,那些提效/创意的 vscode 插件
- 基于jenkins实现手动拉取码云代码,实现半自动化部署
- so easy!网页骨架屏自动生成方案(dps)
- 深夜,我偷听到程序员要对session下手……
- CAM 系列论文阅读总结
- kafka客户端指标上报Prometheus方案(已开源)
- 2020-09-25:rust中Point是结构体类型,【let p1=Point{x:25,y:25};let p2=p1;】...
- R语言在BRFSS数据中可视化分析探索糖尿病的影响因素
- R语言可视化探索BRFSS数据并逻辑回归Logistic回归预测中风