Bootstrap table使用方法记录


Posted in Javascript onAugust 23, 2017

本文实例为大家分享了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);
    }
  });
};

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

Javascript 相关文章推荐
Eval and new funciton not the same thing
Dec 27 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
表单中单选框添加选项和移除选项
Jul 04 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 Javascript
vue中keep-alive的用法及问题描述
May 15 Javascript
vue完成项目后,打包成静态文件的方法
Sep 03 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 Javascript
解决Vue调用springboot接口403跨域问题
Sep 02 Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 Javascript
JS实现浏览上传文件的代码
Aug 23 #Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 #jQuery
JS轮播图实现简单代码
Feb 19 #Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
Aug 23 #Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 #Javascript
最基础的vue.js双向绑定操作
Aug 23 #Javascript
vue组件实现文字居中对齐的方法
Aug 23 #Javascript
You might like
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
Linux下PHP加速器APC的安装与配置笔记
2014/10/24 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
xml分页+ajax请求数据源+dom取结果实例代码
2008/10/31 Javascript
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
2012/03/01 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
jQuery动态添加与删除tr行实例代码
2016/10/18 Javascript
使用grunt合并压缩js和css文件的方法
2017/03/02 Javascript
了解在JavaScript中将值转换为字符串的5种方法
2019/06/06 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
Python中使用scapy模拟数据包实现arp攻击、dns放大攻击例子
2014/10/23 Python
MySQL最常见的操作语句小结
2015/05/07 Python
Python基于Tkinter的HelloWorld入门实例
2015/06/17 Python
Python模拟登录验证码(代码简单)
2016/02/06 Python
Django自定义manage命令实例代码
2018/02/11 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
Python基于Hypothesis测试库生成测试数据
2020/04/29 Python
详解Python中string模块除去Str还剩下什么
2020/11/30 Python
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
印度在线购物网站:Paytmmall
2019/07/24 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
美国一站式电动和手动工具商店:International Tool
2020/11/26 全球购物
英国领先的餐饮折扣俱乐部:Gourmet Society
2020/07/26 全球购物
军训自我鉴定怎么写
2014/02/13 职场文书
洗手间标语
2014/06/23 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers