js插件---JS表格組件BootstrapTable行內編輯解決方案x-editable

時間  2019-11-10
標籤 插件 表格 組件 bootstraptable 編輯 解決 方案 editable 欄目 JavaScript 简体版
原文   原文鏈接

js插件---JS表格組件BootstrapTable行內編輯解決方案x-editable

1、總結

一句話總結：bootstrap可以作爲最火的框架，絕對不只僅只有我看到的位置，它應該還有不少位置能夠極大的方便開發，多是插件這一塊，也多是別的。

 

一、建立可編輯彈出框的插件叫什麼？

x-editable組件javascript

 

二、bootstrap Table的優點是什麼？

在開發經歷中，也使用Jqgrid、EasyUI等表格組件。相比而言，bootstrap Table有本身的優點：css

一、界面採用扁平化的風格，用戶體驗比較好，更好兼容各類客戶端。這點也是最重要的。html

二、開源、免費。國人最喜歡的就是免費了。呵呵。java

三、相對Jqgrid、easyUI而言，比較輕量級。功能不能說最全面，但基本夠用。jquery

 

 

 

2、JS表格組件BootstrapTable行內編輯解決方案x-editable

前言：以前介紹bootstrapTable組件的時候有提到它的行內編輯功能，只不過爲了展現功能，將此一筆帶過了，罪過罪過！最近項目裏面仍是打算將行內編輯用起來，因而再次研究了下x-editable組件，遇到過一些坑，再此作個採坑記錄吧！想要了解bootstrapTable的朋友能夠移步JS組件系列——表格組件神器：bootstrap table。 git

1、x-editable組件介紹 github

x-editable組件是一個用於建立可編輯彈出框的插件，它支持三種風格的樣式：bootstrap、Jquery UI、Jquery。大體效果以下圖： ajax

根據博主一向的風格，這裏確定是選用第一種嘍。首先仍是給出開源地址吧。 
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 數據庫

 一、x-editable初體驗 
bootstrap

首先下載基於bootstrap的源碼到本地。引用相關文件。 

?
1
2
3
4
5
6
< link href = "/Content/bootstrap/css/bootstrap.min.css" rel = "stylesheet" />
< link href = "~/Content/bootstrap3-editable/css/bootstrap-editable.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 >

 頁面元素

複製代碼 代碼以下:
<a href="#" id="username" data-type="text" data-title="用戶名">用戶名</a>

 

js初始化

?
1
2
3
$( function () {
  $( '#username' ).editable();
});

效果展現

 

上面是經過html的data屬性去設置x-editable的參數，固然，我也能夠在初始化的時候去設置參數，好比，我僅僅給一個空的a標籤：<a href="#" id="username">用戶名</a>

js初始化 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$( function () {
  $( '#username' ).editable({
   type: "text" ,    //編輯框的類型。支持text|textarea|select|date|checklist等
   title: "用戶名" ,    //編輯框的標題
   disabled: false ,    //是否禁用編輯
   emptytext: "空文本" ,   //空值的默認文本
   mode: "inline" ,    //編輯框的模式：支持popup和inline兩種模式，默認是popup
   validate: function (value) { //字段驗證
    if (!$.trim(value)) {
     return '不能爲空' ;
    }
   }
  });
 
});

查看效果

 

再來個稍微複雜一點的
 <a href="#" id="department">選擇部門</a>

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$( function () {
  $( '#department' ).editable({
   type: "select" ,    //編輯框的類型。支持text|textarea|select|date|checklist等
   source: [{ value: 1, text: "開發部" }, { value: 2, text: "銷售部" }, {value:3,text: "行政部" }],
   title: "選擇部門" ,   //編輯框的標題
   disabled: false ,   //是否禁用編輯
   emptytext: "空文本" ,  //空值的默認文本
   mode: "popup" ,   //編輯框的模式：支持popup和inline兩種模式，默認是popup
   validate: function (value) { //字段驗證
    if (!$.trim(value)) {
     return '不能爲空' ;
    }
   }
  });
 
});

查看效果

 

上文只是給出了一些經常使用字段，固然x-editable組件還有不少其餘的功能參數，有興趣能夠看看文檔，官方文檔對每一個參數都有詳細的說明。 

2、bootstrapTable行內編輯初始方案 

說了這麼半天，上面的只是鋪墊，咱們最終是但願在bootstrapTable裏面實現行內編輯。根據上面的規則，咱們想要使用x-editable實現行內編輯，表格的單元格里面必需要有一個a標籤，而後對a標籤作x-editable的初始化。有了這個想法，咱們按照這種思路先試試。 

引用相關文件 

?
1
2
3
4
5
6
7
8
9
< 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 >

bootstrapTable的相關初始化 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<script type= "text/javascript" >
  var curRow = {};
  $( function () {
   $( "#tb_user" ).bootstrapTable({
    toolbar: "#toolbar" ,
    idField: "Id" ,
    pagination: true ,
    showRefresh: true ,
    search: true ,
    clickToSelect: true ,
    queryParams: function (param) {
     return {};
    },
    url: "/Editable/GetUsers" ,
    columns: [{
     checkbox: true
    }, {
     field: "UserName" ,
     title: "用戶名" ,
     formatter: function (value, row, index) {
      return "<a href=\"#\" name=\"UserName\" data-type=\"text\" data-pk=\"" +row.Id+ "\" data-title=\"用戶名\">" + value + "</a>" ;
     }
    }, {
     field: "Age" ,
     title: "年齡" ,
    }, {
     field: "Birthday" ,
     title: "生日" ,
     formatter: function (value, row, index) {
      var date = eval( 'new ' + eval(value).source)
      return date.format( "yyyy年MM月dd日" );
     }
    },
    {
     field: "DeptName" ,
     title: "部門"
    }, {
     field: "Hodd" ,
     title: "愛好"
    }],
    onClickRow: function (row, $element) {
     curRow = row;
    },
    onLoadSuccess: function (aa, bb, cc) {
     $( "#tb_user a" ).editable({
      url: function (params) {
       var sName = $( this ).attr( "name" );
       curRow[sName] = params.value;
       $.ajax({
        type: 'POST' ,
        url: "/Editable/Edit" ,
        data: curRow,
        dataType: 'JSON' ,
        success: function (data, textStatus, jqXHR) {
         alert( '保存成功！' );
        },
        error: function () { alert( "error" );}
       });
      },
      type: 'text'
     });
    },
   });
  });</script>

後臺方法 

後臺測試方法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public JsonResult GetUsers()
   {
    var lstRes = new List<User>();
    lstRes.Add( new User() { Id = "1" , UserName = "張三" , Age = 22 , Birthday = Convert.ToDateTime( "1994-12-21" ), DeptId = "1" , DeptName = "研發部" });
    lstRes.Add( new User() { Id = "2" , UserName = "李四" , Age = 28 , Birthday = Convert.ToDateTime( "1988-09-09" ), DeptId = "2" , DeptName = "銷售部" });
    lstRes.Add( new User() { Id = "3" , UserName = "風衣大叔" , Age = 40 , Birthday = Convert.ToDateTime( "1976-09-01" ), DeptId = "2" , DeptName = "銷售部" });
    lstRes.Add( new User() { Id = "4" , UserName = "閃電大蝦" , Age = 37 , Birthday = Convert.ToDateTime( "1979-03-12" ), DeptId = "4" , DeptName = "創意部" });
    lstRes.Add( new User() { Id = "5" , UserName = "韓梅梅" , Age = 29 , Birthday = Convert.ToDateTime( "1987-05-01" ), DeptId = "5" , DeptName = "事業部" });
  
    return Json(lstRes, JsonRequestBehavior.AllowGet);
   }
  
   public JsonResult Edit(User user)
   {
    //反序列化以後更新
  
    return Json( new { }, JsonRequestBehavior.AllowGet);
   }

這樣確實是能夠實現想要的效果，貌似也能行內編輯了，但是若是沒個列都須要行內編輯，而且列的個數不少，那麼是否是每一個列都得這樣去formmater？而且這種寫法狠顯然很死板，博主着實難以接受。因而又找了找例子，發如今bootstrapTable的擴展裏面存在bootstrap-table-editable.js這個js。 

3、bootstrapTable行內編輯最終方案 

好吧，博主認可，上面仍是鋪墊，由於博主以爲這多是解決問題的通常思路，因此將這些鋪墊的篇幅可能有點多。首先來看看bootstrap-table-editable.js這個文件：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
/**
  * @author zhixin wen <wenzhixin2010@gmail.com>
  * extensions: https://github.com/vitalets/x-editable
  */
  
! function ($) {
  
  'use strict' ;
  
  $.extend($.fn.bootstrapTable.defaults, {
   editable: true ,
   onEditableInit: function () {
    return false ;
   },
   onEditableSave: function (field, row, oldValue, $el) {
    return false ;
   },
   onEditableShown: function (field, row, $el, editable) {
    return false ;
   },
   onEditableHidden: function (field, row, $el, reason) {
    return false ;
   }
  });
  
  $.extend($.fn.bootstrapTable.Constructor.EVENTS, {
   'editable-init.bs.table' : 'onEditableInit' ,
   'editable-save.bs.table' : 'onEditableSave' ,
   'editable-shown.bs.table' : 'onEditableShown' ,
   'editable-hidden.bs.table' : 'onEditableHidden'
  });
  
  var BootstrapTable = $.fn.bootstrapTable.Constructor,
   _initTable = BootstrapTable.prototype.initTable,
   _initBody = BootstrapTable.prototype.initBody;
  
  BootstrapTable.prototype.initTable = function () {
   var that = this ;
   _initTable.apply( this , Array.prototype.slice.apply(arguments));
  
   if (! this .options.editable) {
    return ;
   }
  
   $.each( this .columns, function (i, column) {
    if (!column.editable) {
     return ;
    }
  
    var _formatter = column.formatter;
    column.formatter = function (value, row, index) {
     var result = _formatter ? _formatter(value, row, index) : value;
  
     return [ '<a href="javascript:void(0)"' ,
      ' data-name="' + column.field + '"' ,
      ' data-pk="' + row[that.options.idField] + '"' ,
      ' data-value="' + result + '"' ,
      '>' + '</a>'
     ].join( '' );
    };
   });
  };
  
  BootstrapTable.prototype.initBody = function () {
   var that = this ;
   _initBody.apply( this , Array.prototype.slice.apply(arguments));
  
   if (! this .options.editable) {
    return ;
   }
  
   $.each( this .columns, function (i, column) {
    if (!column.editable) {
     return ;
    }
  
    that.$body.find( 'a[data-name="' + column.field + '"]' ).editable(column.editable)
     .off( 'save' ).on( 'save' , function (e, params) {
      var data = that.getData(),
       index = $( this ).parents( 'tr[data-index]' ).data( 'index' ),
       row = data[index],
       oldValue = row[column.field];
  
      row[column.field] = params.submitValue;
      that.trigger( 'editable-save' , column.field, row, oldValue, $( this ));
     });
    that.$body.find( 'a[data-name="' + column.field + '"]' ).editable(column.editable)
     .off( 'shown' ).on( 'shown' , function (e, editable) {
      var data = that.getData(),
       index = $( this ).parents( 'tr[data-index]' ).data( 'index' ),
       row = data[index];
       
      that.trigger( 'editable-shown' , column.field, row, $( this ), editable);
     });
    that.$body.find( 'a[data-name="' + column.field + '"]' ).editable(column.editable)
     .off( 'hidden' ).on( 'hidden' , function (e, reason) {
      var data = that.getData(),
       index = $( this ).parents( 'tr[data-index]' ).data( 'index' ),
       row = data[index];
       
      that.trigger( 'editable-hidden' , column.field, row, $( this ), reason);
     });
   });
   this .trigger( 'editable-init' );
  };
  
}(jQuery);

這個js實際上是對x-editable作了一個簡單的封裝，增長了列的editable屬性以及編輯保存後的一些事件。有了這個做爲基礎，因而咱們行內編輯的代碼變成了這樣。

須要引用的文件以下： 

?
1
2
3
4
5
6
7
8
9
10
< 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 >

一、文本框 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
　　$( function () {
   $( "#tb_user" ).bootstrapTable({
    toolbar: "#toolbar" ,
    idField: "Id" ,
    pagination: true ,
    showRefresh: true ,
    search: true ,
    clickToSelect: true ,
    queryParams: function (param) {
     return {};
    },
    url: "/Editable/GetUsers" ,
    columns: [{
     checkbox: true
    }, {
     field: "UserName" ,
     title: "用戶名" ,
     editable: {
      type: 'text' ,
      title: '用戶名' ,
      validate: function (v) {
       if (!v) return '用戶名不能爲空' ;
  
      }
     }
    }, {
     field: "Age" ,
     title: "年齡" ,
    }, {
     field: "Birthday" ,
     title: "生日" ,
     formatter: function (value, row, index) {
      var date = eval( 'new ' + eval(value).source)
      return date.format( "yyyy-MM-dd" );
     }
    },
    {
     field: "DeptName" ,
     title: "部門"
    }, {
     field: "Hobby" ,
     title: "愛好"    
    }],
    onEditableSave: function (field, row, oldValue, $el) {
     $.ajax({
      type: "post" ,
      url: "/Editable/Edit" ,
      data: row,
      dataType: 'JSON' ,
      success: function (data, status) {
       if (status == "success" ) {
        alert( '提交數據成功' );
       }
      },
      error: function () {
       alert( '編輯失敗' );
      },
      complete: function () {
  
      }
  
     });
    }
   });
  });

後臺對應的更新方法

?
1
2
3
4
5
6
public JsonResult Edit(User user)
{
  //更新實體
 
  return Json( new { }, JsonRequestBehavior.AllowGet);
}

通過測試，用戶名這一列基本能夠自由編輯。一樣，年齡這一列也可改爲這樣 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
　　　　　　 {
     field: "Age" ,
     title: "年齡" ,
     editable: {
      type: 'text' ,
      title: '年齡' ,
      validate: function (v) {
       if (isNaN(v)) return '年齡必須是數字' ;
       var age = parseInt(v);
       if (age <= 0) return '年齡必須是正整數' ;
      }
     }
    }

其餘基本不用作任何修改。
 代碼釋疑：上文在初始化的columns屬性裏面經過editable屬性來配置可編輯的參數，注意這裏每一個列的editable屬性對應的Json對象即爲x-editable裏面的初始化的Json對象，也就是說咱們初始化x-editable的時候能夠配置哪些屬性，在列的editable屬性裏面也能夠一樣配置，這樣用起來就爽多了吧。編輯後的提交方法統一放到onEditableSave事件裏面統一處理。

二、時間選擇框

有了上面的知識做爲基礎，咱們來初始化生日這一列： 

?
1
2
3
4
5
6
7
8
9
10
11
12
{
  field: "Birthday" ,
  title: "生日" ,
  formatter: function (value, row, index) {
   var date = eval( 'new ' + eval(value).source)
   return date.format( "yyyy-MM-dd" );
  },
  editable: {
   type: 'date' ,
   title: '生日'
  }
}

其餘地方不用作任何修改，獲得效果： 

這是x-editable的默認樣式，若是你看着不爽，能夠自行配置，x-editable提供了許多配置日期框的參數，以下： 

固然，若是精確到時分秒，可使用datetime類型的編輯框。以下是官方給出的時間框編輯效果，看着還不錯。

 

三、下拉框 

表單編輯裏面還有一個重要的標籤就是select了。上文咱們知道x-editable爲咱們提供了下拉框的編輯模式，好比咱們的部門這一列的編輯能夠寫成這樣： 

?
1
2
3
4
5
6
7
8
9
　　　　　　 {
     field: "DeptId" ,
     title: "部門" ,
     editable: {
      type: 'select' ,
      title: '部門' ,
      source:[{value: "1" ,text: "研發部" },{value: "2" ,text: "銷售部" },{value: "3" ,text: "行政部" }]
     }
    }

獲得效果

 

固然，這種本地設置數據源的方法確定是不能知足咱們需求的，由於不少狀況下拉框裏面的選項是從數據庫遠程獲得的。固然x-editable也爲咱們考慮到了，好比咱們能夠這樣寫： 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
     field: "DeptId" ,
     title: "部門" ,
     editable: {
      type: 'select' ,
      title: '部門' ,
      source: function () {
       var result = [];
       $.ajax({
        url: '/Editable/GetDepartments' ,
        async: false ,
        type: "get" ,
        data: {},
        success: function (data, status) {
         $.each(data, function (key, value) {
          result.push({ value: value.ID, text: value.Name });
         });
        }
       });
       return result;
      }
     }
    }

後臺咱們配置一個方法 

?
1
2
3
4
5
6
7
8
9
10
public JsonResult GetDepartments()
{
  var lstRes = new List<Department>();
  lstRes.Add( new Department() { ID = "1" , Name = "研發部" });
  lstRes.Add( new Department() { ID = "2" , Name = "銷售部" });
  lstRes.Add( new Department() { ID = "3" , Name = "行政部" });
  lstRes.Add( new Department() { ID = "4" , Name = "創意部" });
  lstRes.Add( new Department() { ID = "5" , Name = "事業部" });
  return Json(lstRes, JsonRequestBehavior.AllowGet);
}

一樣能達到咱們想要的結果。 

代碼釋疑：這裏有一點須要說明一下，細心的園友可能發現了，咱們這裏的 field: "DeptId" ，爲何這裏要配置DeptId而不是DeptName呢?很簡單，由於咱們須要和數據源裏面的value值對應。 

四、複選框

除了上述幾種常見的編輯框，x-editable還爲咱們提供了複選框組的編輯。好比： 

?
1
2
3
4
5
6
7
8
9
10
11
{
     field: "Hobby" ,
     title: "愛好" ,
     editable: {
      type: "checklist" ,
      separator: "," ,
      source: [{ value: 'bsb' , text: '籃球' },
        { value: 'ftb' , text: '足球' },
        { value: 'wsm' , text: '游泳' }],
     }
    }

獲得效果：

 

固然，若是遠程數據，也可使用相似上文的方法去取。 

五、「陰魂不散」的select2 

說到上文的複選框，博主不禁自主又想到了Multiselect這些個東西，因而查找x-editable的文檔，結果發現它不支持Multiselect，可是支持select2，也不知道這是否是一個好消息。根據博主本身的使用經歷，也包括技術交流羣裏面的聊天經歷，發現不少人在使用select2的時候都遇到過各類各樣的樣式問題，而且不太好解決。 

既然x-editable支持select2，那咱們就用用試試唄，反正官方demo說得挺好的，下面是官方demo的使用示例：

 

懷着忐忑的心情，博主本身嘗試了一把。 

引用select2文件

?
1
2
3
< link href = "~/Content/select2-bootstrap.css" rel = "stylesheet" />
< link href = "~/Content/select2-master/dist/css/select2.min.css" rel = "stylesheet" />
< script src = "~/Content/select2-master/dist/js/select2.full.min.js" ></ script >

代碼嘗試 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
     field: "Hobby" ,
     title: "愛好" ,
     editable: {
      type: 'select2' ,
      title: '愛好' ,
      name: 'Hobby' ,
      placement: 'top' ,
      success: function (response, newValue) {
       debugger;
      },
      error: function (response, newValue) {
       debugger;
      },
      url: function (params) {
       debugger;
      },
      source: [{ id: 'bsb' , text: '籃球' },
         { id: 'ftb' , text: '足球' },
         { id: 'wsm' , text: '游泳' }],
      inputclass: 'input-large' ,
      select2: {
       allowClear: true ,
       multiple: true ,
      } 
     }
    }

獲得結果：

結果發現select2的選中值不能正常傳遞到後臺。反正博主試過各類參數，按照官方demo的寫法也試過，均以失敗了結。也不知道官方的demo如何成功的。這個問題先拋出來，若是有使用的園友歡迎指正與解答。後續若是博主解決了這個問題，也會在此更新。  

4、總結 

還有一個問題就是在編輯完成提交以後，博主在項目中遇到這樣一個問題：若是提交以後的文本內容過多，表格的thead裏面th的寬度和tbody裏面td的寬度不對其的問題，看着至關噁心。可是在寫demo的時候又沒有遇到這個問題。在此仍是將解決方案給出來。

 

就這麼一句話解決你的困擾！

 

參考：JS表格組件BootstrapTable行內編輯解決方案x-editable_javascript技巧_腳本之家https://www.jb51.net/article/91708.htm

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程