删除行功能,table使用方法记录

2019-06-08 12:42 来源:未知

正文实例为我们享受了Bootstrap table的行使方法,供大家参谋,具体内容如下

正文实例为我们分享了bootstrap table双击可编写制定的切实可行代码,供大家参谋,具体内容如下

bootstrap-table是在bootstrap-table的底蕴上写出来的,特意用来体现数据的报表插件。而bootstrap是根源 推特(Twitter),是日前最受应接的前端框架。Bootstrap 是凭仗HTML、CSS、JAVASC昂CoraIPT 的,具备方便灵活,快速前端开荒的优势。对与bootstrap在此就不在叙述。

HTML代码:

图片 1

jquery ,bootstrap ,bootstrap-table 3者之间的关系。bootstrap诸多部分代码涉及到了jquery的,也便是说 bootstrap是注重jquery的,而大家要动用的bootstrap-table则是在bootstrap基础上创设出来的,所以在行使bootstrap-table此前务必引用 jquery 和bootstrap的连锁js,css文件。

/*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()">
      新增产品
    </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">
          (最多20个字)
        </div>
        <div class="form-group">
          <label for="prodTecParam" class="col-md-2">技术参数:</label>
          <textarea rows="3" class="form-control" id="prodTecParam"></textarea>
          (最多150个字)
        </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>
}

html:

随之说,bootstrap-table的风味:与jquery-ui,jqgrid等表格彰显插件来讲,bootstrap-table扁平化,轻量级,对于有个别轻量级的数据体现,他是绰绰有余,而对老爹和儿子表等的帮忙也很好,最珍视的是足以与bootstrap的别样标签无缝结合。

JS代码:

<table class="table table-bordered" id="para_table"> 
 <tr> 
  <th style="text-align:center" width="200">名称</th> 
  <th style="text-align:center" width="200">值</th> 
  <th style="text-align:center" width="100">操作</th> 
 </tr> 
 <tr> 
  <td style="text-align:center; " onclick="tdclick(this)"></td> 
  <td style="text-align:center; " onclick="tdclick(this)"></td> 
  <td style="text-align:center; " onclick="deletetr(this)"> 
  <button type="button" class="btn btn-xs btn-link">删除</button> 
  </td> 
 </tr> 
</table> 

<div id="addtrdiv" style="margin-top:-15px; width: 15%; float: right;"> 
 <button type="button" class="btn btn-xs btn-link" onclick="addtr()">添加</button> 
</div> 

下边就进来正题:

/*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 ''   value.substr(0, textLength)   '... <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);
    }
  });
};

js:

一、Bootstrap Table使用轻松教程

上述就是本文的全体内容,希望对大家的上学抱有扶助,也盼望我们多多补助脚本之家。

function save_para_table(){ 

 var tableinfo = gettableinfo(); 
 alert(tableinfo); 


} 
//get table infomation 
function gettableinfo(){ 
 var key = ""; 
 var value = ""; 
 var tabledata = ""; 
 var table = $("#para_table"); 
 var tbody = table.children(); 
 var trs = tbody.children(); 
 for(var i=1;i<trs.length;i  ){ 
  var tds = trs.eq(i).children(); 
  for(var j=0;j<tds.length;j  ){ 
   if(j==0){ 
    if(tds.eq(j).text()==null||tds.eq(j).text()==""){ 
     return null; 
    } 
    key = "key":"" tds.eq(j).text(); 
   } 
   if(j==1){ 
    if(tds.eq(j).text()==null||tds.eq(j).text()==""){ 
     return null; 
    } 
    value = "value":"" tds.eq(j).text(); 
   } 
  } 
  if(i==trs.length-1){ 
   tabledata  = "{"" key "","" value ""}"; 
  }else{ 
   tabledata  = "{"" key "","" value ""},"; 
  } 
 } 
 tabledata = "[" tabledata "]"; 
 return tabledata; 
} 

function tdclick(tdobject){ 
 var td=$(tdobject); 
 td.attr("onclick", ""); 
 //1,取出当前td中的文本内容保存起来 
 var text=td.text(); 
 //2,清空td里面的内容 
 td.html(""); //也可以用td.empty(); 
 //3,建立一个文本框,也就是input的元素节点 
 var input=$("<input>"); 
 //4,设置文本框的值是保存起来的文本内容 
 input.attr("value",text); 
 input.bind("blur",function(){ 
  var inputnode=$(this); 
  var inputtext=inputnode.val(); 
  var tdNode=inputnode.parent(); 
  tdNode.html(inputtext); 
  tdNode.click(tdclick); 
  td.attr("onclick", "tdclick(this)"); 
 }); 
 input.keyup(function(event){ 
  var myEvent =event||window.event; 
  var kcode=myEvent.keyCode; 
  if(kcode==13){ 
   var inputnode=$(this); 
   var inputtext=inputnode.val(); 
   var tdNode=inputnode.parent(); 
   tdNode.html(inputtext); 
   tdNode.click(tdclick); 
  } 
 }); 

 //5,将文本框加入到td中 
 td.append(input); 
 var t =input.val(); 
 input.val("").focus().val(t); 
//    input.focus(); 

 //6,清除点击事件 
 td.unbind("click"); 
} 
function addtr(){ 
 var table = $("#para_table"); 
 var tr= $("<tr>"   
  "<td onclick='tdclick(this)'>" "</td>"   
  "<td onclick='tdclick(this)'>" "</td>"   
  "<td align='center' onclick='deletetr(this)'><button type='button' class='btn btn-xs btn-link' >" "删除" "</button></td></tr>"); 
 table.append(tr); 
} 
function deletetr(tdobject){ 
 var td=$(tdobject); 
 td.parents("tr").remove(); 
} 

二、Bootstrap Table分页优良教程

你恐怕感兴趣的篇章:

  • JS表格组件神器bootstrap table详解(基础版)
  • Bootstrap Table使用办法详解
  • JS组件Bootstrap Table使用方法详解
  • bootstrap table 服务器端分页例子分享
  • Bootstrap Table的使用计算
  • BootStrap table表格插件自适应固定表头(超好用)
  • 首先次动手完结bootstrap table分页效果
  • BootStrap 可编写制定表Table格
  • Bootstrap嵌入jqGrid,使您的table牛逼起来
  • Bootstrap table分页难题聚焦

上述正是本文的全体内容,希望对大家的上学抱有协助,也期待大家多多援助脚本之家。

三、JS表格组件神器

你可能感兴趣的作品:

  • JS表格组件神器bootstrap table详解(基础版)
  • Bootstrap Table使用办法详解
  • JS组件Bootstrap Table使用方法详解
  • bootstrap table 服务器端分页例子分享
  • Bootstrap Table的行使总括
  • BootStrap table表格插件自适应固定表头(超好用)
  • 首回出手完毕bootstrap table分页效果
  • BootStrap 可编写制定表Table格
  • Bootstrap嵌入jqGrid,令你的table牛逼起来
  • BootStrap的table表头固定tbody滚动的实例代码

四、Bootstrap Table使用遭遇的种种难题

率先局地:**Bootstrap Table使用简便教程**

1、BootStrap table使用办法深入分析

2、Bootstrap table使用方法分析

3、Bootstrap Table的施用总括

4、Bootstrap Table使用办法分析

5、Bootstrap Table使用方法详解

6、JS组件Bootstrap Table使用办法详解

7、JS组件Bootstrap Table使用实例分享

其次片段:**Bootstrap Table分页非凡教程**

8、首先次入手完成bootstrap table分页效果

9、BootStrap中Table分页插件使用详解

10、bootstrap table 服务器端分页例子分享

其3片段:**JS表格组件神器**

11、JS表格组件神器bootstrap table详解(基础版)

12、JS表格组件神器bootstrap table详解(强化版)

13、JS组件体系之Bootstrap table表格组件神器【二、父亲和儿子表和行列调序】

14、JS组件类别之Bootstrap table表格组件神器【终结篇】

第六有的:**Bootstrap Table使用境遇的种种难点**

15、Bootstrap table分页难点聚集

16、消除JS组件bootstrap table分页实现进程中相见的难点

17、BootStrap Table 分页后再次寻觅难题的化解办法

18、JS表格组件BootstrapTable行内编制解决方案x-editable

19、BootstrapTable KnockoutJS相结合贯彻增加和删除改查消除方案(3)八个Viewmodel化解增加和删除改查

…………

未完待续,更加的多实战教程点击Bootstrap实战教程

以上正是针对近些日子Bootstrap Table使用笔记进行的简要梳理,大约产生了1个系统。将来作者会第一时间为大家大饱眼福最独竖一帜的Bootstrap Table使用材质。

实则好好的内容全都为我们实行了整理,分享给大家:Bootstrap学习课程 Bootstrap插件使用教程

感谢大家的阅读!

你或然感兴趣的作品:

  • Bootstrap Table使用整理(三)
  • Bootstrap Table使用整理(二)
  • Bootstrap Table使用整理(1)
  • Bootstrap Table使用整理(5)之分页组合查询
  • BootstrapTable refresh 方法应用实例简要介绍
  • Bootstrap table使用办法详细介绍
  • DataTables BootStrap组合使用Ajax来获取数据并且动态加载dom的法子(排序,过滤,分页等)
  • BootStrap table使用方法剖判
  • Bootstrap Table使用整理(4)之工具栏
TAG标签: 韦德娱乐1946
版权声明:本文由韦德娱乐1946_韦德娱乐1946网页版|韦德国际1946官网发布于韦德娱乐1946网页版,转载请注明出处:删除行功能,table使用方法记录