/*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>}

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