欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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);
    }
  });
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。