Bootstrap Table 使用教程进阶篇 之 行内编辑(日期选择框)

  • A+
所属分类：Bootstrap Table

Bootstrap Table 使用教程进阶篇 之 行内编辑(日期选择框)

BootstrapTable 行内编辑解决方案：x-editable

 

一、x-editable组件介绍

x-editable组件是一个用于创建可编辑弹出框的插件，它支持三种风格的样式：bootstrap、Jquery UI、Jquery。大致效果如下图：
Bootstrap Table 使用教程进阶篇 之 行内编辑(日期选择框)

首先还是给出开源地址吧

x-editable开源地址：https://github.com/vitalets/x-editable

x-editable文档地址：http://vitalets.github.io/x-editable/docs.html

x-editable在线Demo：http://vitalets.github.io/x-editable/demo-bs3.html

  1. 由于源文件中的Type：Date在实际项目中使用效果不是很理想，所以对源码进行了一些修改。
  2. 修改后bootstrap-editable.js下载地址：https://pan.baidu.com/s/1o7B8MN4

Html

需要引用的文件如下：

  1. <link href="/Content/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
  2. <link href="~/Content/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />
  3. <link href="/Content/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
  5. <script src="/Scripts/jquery-1.9.1.min.js"></script>
  6. <script src="/Content/bootstrap/js/bootstrap.min.js"></script>
  7. <!--请下载使用修改版bootstrap-editable.js-->
  8. <script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script>
  9. <script src="~/Content/bootstrap-table/bootstrap-table.js"></script>
  10. <script src="/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
  11. <script src="~/Content/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>
  12. <!--需要引用日期控件-->
  13. <script src="~/Contents/bootstrap-datepicke/js/bootstrap-datepicker.js"></script>
  14. <script src="~/Contents/bootstrap-datepicke/locales/bootstrap-datepicker.zh-CN.min.js"></script>

添加表格

  1. <table id="table"></table>

JavaScript

  1. $('#table').bootstrapTable({
  2.     url: "/BootstrapTable/JsonTable",
  3.     columns: [{
  4.         field: 'ID',
  5.         title:'序号'
  6.     },
  7.     {
  8.         field: 'Date',
  9.         title: '提交日期',
  10.         editable: {
  11.             type: 'text',
  12.           /*datepicker-Date 格式yyyy-mm-dd
  13.             datepicker-Mon 格式yyyy-mm */
  14.             inputclass: 'RemoveFocus datepicker-Date',
  15.             title: '提交日期',
  16.         }
  17.     }],
  18.     onEditableSave: function (field, row, oldValue, $el) {
  19.         $.ajax({
  20.             type: "post",
  21.             url: "/BootstrapTable/Edit",
  22.             data: row,
  23.             dataType: 'JSON',
  24.             success: function (data, status) {
  25.                 if (status == "success") {
  26.                     alert('提交数据成功');
  27.                 }
  28.             },
  29.             error: function () {
  30.                 alert('编辑失败');
  31.             },
  32.             complete: function () {
  34.             }
  35.         });
  36.     }
  37. });

Controller

  1. public JsonResult Edit(BOOTSTRAPTABLE a)
  2. {
  3.     Entities sql = new Entities();
  4.     var id = a.ID;
  5.     var model = sql.BOOTSTRAPTABLE.FirstOrDefault(b => b.ID == a.ID);
  6.     if (model != null)
  7.     {
  8.         model.C1 = a.C1;
  9.         sql.SaveChanges();
  10.     }
  11.     return Json(new { }, JsonRequestBehavior.AllowGet);
  12. }

效果展示

Bootstrap Table 使用教程进阶篇 之 行内编辑(日期选择框)
Bootstrap Table 使用教程进阶篇 之 行内编辑(日期选择框)

钰玺

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: