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 相关文章推荐
JQuery 表格操作(交替显示、拖动表格行、选择行等)
Jul 29 Javascript
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
JS 文件大小判断的实现代码
Apr 07 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 Javascript
基于jQuery实现的无刷新表格分页实例
Feb 17 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
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
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
js类中的公有变量和私有变量
2008/07/24 Javascript
js模拟select下拉菜单控件的代码
2013/05/08 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
你准备好迎接vue3.0了吗
2020/04/28 Javascript
Python中的pass语句使用方法讲解
2015/05/14 Python
python抓取最新博客内容并生成Rss
2015/05/17 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
python实现聚类算法原理
2018/02/12 Python
Python根据文件名批量转移图片的方法
2018/10/21 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
Python中一般处理中文的几种方法
2019/03/06 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
Python更新所有已安装包的操作
2020/02/13 Python
Python小白垃圾回收机制入门
2020/06/09 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
自学python用什么系统好
2020/06/23 Python
解决导入django_filters不成功问题No module named 'django_filter'
2020/07/15 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
英国电子专家:maplin
2019/09/04 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
个人贷款授权委托书样本
2014/10/07 职场文书
企业年检委托书范本
2014/10/14 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
初一年级组工作总结
2015/08/12 职场文书
解读MySQL的客户端和服务端协议
2021/05/10 MySQL
python process模块的使用简介
2021/05/14 Python
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
实例详解Python的进程,线程和协程
2022/03/13 Python
抖音动画片,皮皮虾,《治愈系》动画在用这首REMIX作为背景音乐,Anak ,The last world with you完整版
2022/03/16 杂记