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

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. <script src="~/Content/bootstrap3-editable/js/bootstrap-editable.js"></script>  
  8. <script src="~/Content/bootstrap-table/bootstrap-table.js"></script>  
  9. <script src="/Content/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>  
  10. <script src="~/Content/bootstrap-table/extensions/editable/bootstrap-table-editable.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: 'C1',  
  9.         title: '测试',  
  10.         editable: {  
  11.             type: 'select',  
  12.             title: '测试',  
  13.             source: [{ value: "YuXi", text: "YuXi" }, { value: "钰玺博客", text: "钰玺博客" }, { value: "YuXi-钰玺博客", text: "YuXi-钰玺博客" }]  
  14.         }  
  15.     }],  
  16.     onEditableSave: function (field, row, oldValue, $el) {  
  17.         $.ajax({  
  18.             type: "post",  
  19.             url: "/BootstrapTable/Edit",  
  20.             data: row,  
  21.             dataType: 'JSON',  
  22.             success: function (data, status) {  
  23.                 if (status == "success") {  
  24.                     alert('提交数据成功');  
  25.                 }  
  26.             },  
  27.             error: function () {  
  28.                 alert('编辑失败');  
  29.             },  
  30.             complete: function () {  
  31.   
  32.             }  
  33.         });  
  34.     }  
  35. });  

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 使用教程进阶篇 之 行内编辑(下拉框)
Bootstrap Table 使用教程进阶篇 之 行内编辑(下拉框)

钰玺

发表评论

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