bootstrap的editTable实现方法

最新推荐文章于 2024-08-15 10:01:39 发布

weixin_30315723

最新推荐文章于 2024-08-15 10:01:39 发布

阅读量602

点赞数

原文链接：http://www.cnblogs.com/zhuyeshen/p/11430611.html

版权

首先下载基于bootstrap的源码到本地。引用相关文件。

<link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
<link href="/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />

<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Content/bootstrap/js/bootstrap.min.js"></script>
<script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script src="~/Content/bootstrap-table/bootstrap-table.js"></script>
<script src="/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
<script src="~/Content/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>

table初始化时的代码：

{
field: 'userName',
title: '姓名',
sortable: true,
align: 'center',
  editable: {
  type:"text",
  onblur: "submit",
  showbuttons: false,
  validate:function (v) {
if (!v) return '姓名不能为空';
  }
}
},

onEditableSave: function (field, row, oldValue, $el) {

$.ajax({

//在bootstrap table中编辑完成后调用的方法

//可以进行数据的保存工作
}

具体的业务代码就不一一列举了。

如有问题，可以留言一起讨论。

转载于:https://www.cnblogs.com/zhuyeshen/p/11430611.html