Bootstrap table使用方法記錄
更新時間:2017年08月23日 15:28:38 作者:記得前進(jìn)的理由
這篇文章主要為大家詳細(xì)介紹了Bootstrap table的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了Bootstrap table的使用方法,供大家參考,具體內(nèi)容如下
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>新增產(chǎn)品 </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">技術(shù)參數(shù):</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">普通產(chǎn)品</option> <option value="1002">明星產(chǎn)品</option> </select> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</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; //技術(shù)參數(shù)默認(rèn)折疊顯示長度 $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服務(wù)端分頁 singleSelect: true, //單行選擇 pageNumber: 1, //初始化加載第一頁,默認(rèn)第一頁 pageSize: 10, //每頁的記錄行數(shù) pageList: [5, 10, 20], queryParams: function (params) { //請求參數(shù) 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: '產(chǎn)品編號', field: 'id' }, { title: '產(chǎn)品名稱', width: 200, field: 'name' }, { title: '技術(shù)參數(shù)', 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 = "普通產(chǎn)品"; else if (value == "1002") type = "明星產(chǎn)品"; 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("更新產(chǎn)品信息"); $("#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: "確認(rèn)刪除該產(chǎn)品?", 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', '警告', '服務(wù)器異常,請稍后再試!'); console.log("error:", err.statusText); } }); return true; } else { return false; } } }); }; var $search = $table.data('bootstrap.table').$toolbar.find('.search input'); $search.attr('placeholder', '請輸入編號、產(chǎn)品名稱、技術(shù)參數(shù)搜索'); $search.css('width', '400'); $(".model .form-group input").on("click", function(){ $(this).next(".tips").text(""); }); }); var showAddModal = function () { $("#productModalLabel").text("新增產(chǎn)品"); $("#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("產(chǎn)品名稱不能為空!"); 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', '警告', '服務(wù)器異常,請稍后再試!'); 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("產(chǎn)品名稱不能為空!"); 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', '警告', '服務(wù)器異常,請稍后再試!'); console.log("error:", err.statusText); } }); };
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
arctext.js實現(xiàn)文字平滑彎曲弧形效果的插件
這篇文章主要介紹了arctext.js實現(xiàn)文字平滑彎曲弧形效果的插件,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05js實現(xiàn)的xml對象轉(zhuǎn)json功能示例
這篇文章主要介紹了js實現(xiàn)的xml對象轉(zhuǎn)json功能,結(jié)合實例形式分析了javascript轉(zhuǎn)換成xml所涉及的字符串、對象、數(shù)組、遍歷等操作技巧與使用方法,需要的朋友可以參考下2016-12-12Microsoft Ajax Minifier 壓縮javascript的方法
使用Microsoft AJAX 庫 (第六個預(yù)覽版) 其中有一個 ajaxmin.exe 可以壓縮Js文件可以在dos 命令下 /? 查看其參數(shù)說明。2010-03-03JavaScript實現(xiàn)把rgb顏色轉(zhuǎn)換成16進(jìn)制顏色的方法
這篇文章主要介紹了JavaScript實現(xiàn)把rgb顏色轉(zhuǎn)換成16進(jìn)制顏色的方法,涉及javascript實現(xiàn)數(shù)制轉(zhuǎn)換的相關(guān)技巧,需要的朋友可以參考下2015-06-06bootstrap-treeview自定義雙擊事件實現(xiàn)方法
這篇文章主要介紹了bootstrap-treeview自定義事件雙擊事件實現(xiàn)方法,需要的朋友可以參考下2016-01-01