Bootstrap table使用方法记录
程序员文章站
2022-09-08 22:06:14
本文实例为大家分享了bootstrap table的使用方法,供大家参考,具体内容如下
html代码:
/*index.cshtml*/
@section...
本文实例为大家分享了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); } }); };
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇: 详解a++和++a的区别