- A+
所属分类:Bootstrap Table
BootstrapTable 行内编辑解决方案:x-editable
一、x-editable组件介绍
x-editable组件是一个用于创建可编辑弹出框的插件,它支持三种风格的样式:bootstrap、Jquery UI、Jquery。大致效果如下图:
首先还是给出开源地址吧
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
- 由于源文件中的Type:Date在实际项目中使用效果不是很理想,所以对源码进行了一些修改。
- 修改后bootstrap-editable.js下载地址:https://pan.baidu.com/s/1o7B8MN4
Html
需要引用的文件如下:
- <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>
- <!--请下载使用修改版bootstrap-editable.js-->
- <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>
- <!--需要引用日期控件-->
- <script src="~/Contents/bootstrap-datepicke/js/bootstrap-datepicker.js"></script>
- <script src="~/Contents/bootstrap-datepicke/locales/bootstrap-datepicker.zh-CN.min.js"></script>
添加表格
- <table id="table"></table>
JavaScript
- $('#table').bootstrapTable({
- url: "/BootstrapTable/JsonTable",
- columns: [{
- field: 'ID',
- title:'序号'
- },
- {
- field: 'Date',
- title: '提交日期',
- editable: {
- type: 'text',
- /*datepicker-Date 格式yyyy-mm-dd
- datepicker-Mon 格式yyyy-mm */
- inputclass: 'RemoveFocus datepicker-Date',
- title: '提交日期',
- }
- }],
- onEditableSave: function (field, row, oldValue, $el) {
- $.ajax({
- type: "post",
- url: "/BootstrapTable/Edit",
- data: row,
- dataType: 'JSON',
- success: function (data, status) {
- if (status == "success") {
- alert('提交数据成功');
- }
- },
- error: function () {
- alert('编辑失败');
- },
- complete: function () {
- }
- });
- }
- });
Controller
- public JsonResult Edit(BOOTSTRAPTABLE a)
- {
- Entities sql = new Entities();
- var id = a.ID;
- var model = sql.BOOTSTRAPTABLE.FirstOrDefault(b => b.ID == a.ID);
- if (model != null)
- {
- model.C1 = a.C1;
- sql.SaveChanges();
- }
- return Json(new { }, JsonRequestBehavior.AllowGet);
- }
效果展示