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 相关文章推荐
js对文章内容进行分页示例代码
Mar 05 Javascript
js单词形式的运算符
May 06 Javascript
js网页右下角提示框实例
Oct 14 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
javascript实现查找数组中最大值方法汇总
Feb 13 Javascript
JavaScript中浅讲ajax图文详解
Nov 11 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 Javascript
JavaScript中变量提升机制示例详解
Dec 27 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
利用php来自动调用不同服务器上的flash
2006/10/09 PHP
一个php Mysql类 可以参考学习熟悉下
2009/06/21 PHP
完美实现GIF动画缩略图的php代码
2011/01/02 PHP
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
php中strstr、strrchr、substr、stristr四个函数的区别总结
2014/09/22 PHP
php实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
javascript dom 基本操作小结
2010/04/11 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
VueJs监听window.resize方法示例
2018/01/17 Javascript
9个JavaScript日常开发小技巧
2020/10/06 Javascript
python merge、concat合并数据集的实例讲解
2018/04/12 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
python多线程分块读取文件
2019/08/29 Python
python中如何进行连乘计算
2020/05/28 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
UNIX操作系统结构由哪几部分组成
2016/02/17 面试题
酒店管理专业毕业生推荐信
2013/11/10 职场文书
2014年科技工作总结
2014/11/26 职场文书
首都博物馆观后感
2015/06/05 职场文书
劳动模范获奖感言
2015/07/31 职场文书
2016先进工作者事迹材料
2016/02/25 职场文书
2016年优秀团员事迹材料
2016/02/25 职场文书
实例讲解Python中sys.argv[]的用法
2021/06/03 Python