欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap table使用方法記錄

 更新時間：2017年08月23日 15:28:38   作者：記得前進(jìn)的理由  
這篇文章主要為大家詳細(xì)介紹了Bootstrap table的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Bootstrap table的使用方法，供大家參考，具體內(nèi)容如下

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>新增產(chǎn)品
    </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">&times;</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">技術(shù)參數(shù)：</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">普通產(chǎn)品</option>
            <option value="1002">明星產(chǎn)品</option>
          </select>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</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;  //技術(shù)參數(shù)默認(rèn)折疊顯示長度

  $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服務(wù)端分頁
    singleSelect: true,         //單行選擇
    pageNumber: 1,           //初始化加載第一頁，默認(rèn)第一頁
    pageSize: 10,            //每頁的記錄行數(shù)
    pageList: [5, 10, 20],
    queryParams: function (params) {  //請求參數(shù)
      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: '產(chǎn)品編號',
        field: 'id'
      },
      {
        title: '產(chǎn)品名稱',
        width: 200,
        field: 'name'
      },
      {
        title: '技術(shù)參數(shù)',
        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>&nbsp;<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 = "普通產(chǎn)品";
    else if (value == "1002")
      type = "明星產(chǎn)品";
    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("更新產(chǎn)品信息");
    $("#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: "確認(rèn)刪除該產(chǎn)品？",
      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', '警告', '服務(wù)器異常，請稍后再試！');
              console.log("error：", err.statusText);
            }
          });

          return true;
        }
        else {
          return false;
        }
      }
    });
  };

  var $search = $table.data('bootstrap.table').$toolbar.find('.search input');
  $search.attr('placeholder', '請輸入編號、產(chǎn)品名稱、技術(shù)參數(shù)搜索');
  $search.css('width', '400');

  $(".model .form-group input").on("click", function(){
    $(this).next(".tips").text("");
  });
});

var showAddModal = function () {
  $("#productModalLabel").text("新增產(chǎn)品");
  $("#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("產(chǎn)品名稱不能為空！");
    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', '警告', '服務(wù)器異常，請稍后再試！');
      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("產(chǎn)品名稱不能為空！");
    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', '警告', '服務(wù)器異常，請稍后再試！');
      console.log("error：", err.statusText);
    }
  });
};

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • arctext.js實現(xiàn)文字平滑彎曲弧形效果的插件

    arctext.js實現(xiàn)文字平滑彎曲弧形效果的插件

    這篇文章主要介紹了arctext.js實現(xiàn)文字平滑彎曲弧形效果的插件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-05-05
  • JS面向?qū)ο笾噙x框?qū)崿F(xiàn)

    JS面向?qū)ο笾噙x框?qū)崿F(xiàn)

    這篇文章主要為大家詳細(xì)介紹了JS面向?qū)ο笾噙x框?qū)崿F(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-01-01
  • js實現(xiàn)的xml對象轉(zhuǎn)json功能示例

    js實現(xiàn)的xml對象轉(zhuǎn)json功能示例

    這篇文章主要介紹了js實現(xiàn)的xml對象轉(zhuǎn)json功能,結(jié)合實例形式分析了javascript轉(zhuǎn)換成xml所涉及的字符串、對象、數(shù)組、遍歷等操作技巧與使用方法,需要的朋友可以參考下
    2016-12-12
  • Microsoft Ajax Minifier 壓縮javascript的方法

    Microsoft Ajax Minifier 壓縮javascript的方法

    使用Microsoft AJAX 庫 (第六個預(yù)覽版) 其中有一個 ajaxmin.exe 可以壓縮Js文件可以在dos 命令下 /? 查看其參數(shù)說明。
    2010-03-03
  • JavaScript實現(xiàn)把rgb顏色轉(zhuǎn)換成16進(jìn)制顏色的方法

    JavaScript實現(xiàn)把rgb顏色轉(zhuǎn)換成16進(jìn)制顏色的方法

    這篇文章主要介紹了JavaScript實現(xiàn)把rgb顏色轉(zhuǎn)換成16進(jìn)制顏色的方法,涉及javascript實現(xiàn)數(shù)制轉(zhuǎn)換的相關(guān)技巧,需要的朋友可以參考下
    2015-06-06
  • JavaScript實現(xiàn)簡單的計算器

    JavaScript實現(xiàn)簡單的計算器

    這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)簡單的計算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-01-01
  • JavaScript簡單編程實例學(xué)習(xí)

    JavaScript簡單編程實例學(xué)習(xí)

    在本篇文章里小編給大家整理的是關(guān)于JavaScript簡單編程實例學(xué)習(xí)內(nèi)容，有興趣的朋友們可以參考下。
    2020-02-02
  • 微信小程序使用字體圖標(biāo)的方法

    微信小程序使用字體圖標(biāo)的方法

    這篇文章主要為大家詳細(xì)介紹了微信小程序使用字體圖標(biāo)的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2019-05-05
  • bootstrap-treeview自定義雙擊事件實現(xiàn)方法

    bootstrap-treeview自定義雙擊事件實現(xiàn)方法

    這篇文章主要介紹了bootstrap-treeview自定義事件雙擊事件實現(xiàn)方法,需要的朋友可以參考下
    2016-01-01
  • Three.js的使用及繪制基礎(chǔ)3D圖形詳解

    Three.js的使用及繪制基礎(chǔ)3D圖形詳解

    這篇文章主要介紹了Three.js的使用及繪制基礎(chǔ)3D圖形的相關(guān)資料，文中介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用three.js具有一定的參考價值，需要的朋友們下面來一起看看吧。
    2017-04-04

最新評論