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" />  
  4.   
  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 () {  
  33.   
  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: