JS元件系列——BootstrapTable 行內編輯解決方案:x-editable
前言:之前介紹bootstrapTable元件的時候有提到它的行內編輯功能,只不過為了展示功能,將此一筆帶過了,罪過罪過!最近專案裡面還是打算將行內編輯用起來,於是再次研究了下x-editable元件,遇到過一些坑,再此做個採坑記錄吧!想要了解bootstrapTable的園友可以移步 JS元件系列——表格元件神器:bootstrap table。
一、x-editable元件介紹
x-editable元件是一個用於建立可編輯彈出框的外掛,它支援三種風格的樣式:bootstrap、Jquery UI、Jquery。大致效果如下圖:
根據博主一貫的風格,這裡肯定是選用第一種嘍。首先還是給出開源地址吧。
1、x-editable初體驗。
首先下載基於bootstrap的原始碼到本地。引用相關檔案。
<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> <scriptsrc="/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初始化
$(function () { $('#username').editable(); });
效果展示
上面是通過html的data屬性去設定x-editable的引數,當然,我也可以在初始化的時候去設定引數,比如,我僅僅給一個空的a標籤:
<a href="#" id="username">使用者名稱</a>
js初始化
$(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>
$(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元件還有很多其他的功能引數,有興趣可以看看文件,官方文件對每個引數都有詳細的說明。
二、bootstrapTable行內編輯初始方案
說了這麼半天,上面的只是鋪墊,我們最終是希望在bootstrapTable裡面實現行內編輯。根據上面的規則,我們想要使用x-editable實現行內編輯,表格的單元格里面必須要有一個a標籤,然後對a標籤做x-editable的初始化。有了這個想法,我們按照這種思路先試試。
引用相關檔案
<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的相關初始化
<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>
後臺方法
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。
三、bootstrapTable行內編輯最終方案
好吧,博主承認,上面還是鋪墊,因為博主覺得這可能是解決問題的一般思路,所以將這些鋪墊的篇幅可能有點多。首先來看看bootstrap-table-editable.js這個檔案
/** * @author zhixin wen <[email protected]> * 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);bootstrap-table-editable.js
這個js其實是對x-editable做了一個簡單的封裝,增加了列的editable屬性以及編輯儲存後的一些事件。有了這個作為基礎,於是我們行內編輯的程式碼變成了這樣。
需要引用的檔案如下:
<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、文字框
$(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 () { } }); } }); });
後臺對應的更新方法
public JsonResult Edit(User user) { //更新實體 return Json(new { }, JsonRequestBehavior.AllowGet); }
經過測試,使用者名稱這一列基本可以自由編輯。同樣,年齡這一列也可改成這樣
{ 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事件裡面統一處理。
2、時間選擇框
有了上面的知識作為基礎,我們來初始化生日這一列:
{ 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型別的編輯框。如下是官方給出的時間框編輯效果,看著還不錯。
3、下拉框
表單編輯裡面還有一個重要的標籤就是select了。上文我們知道x-editable為我們提供了下拉框的編輯模式,比如我們的部門這一列的編輯可以寫成這樣:
{ field: "DeptId", title: "部門", editable: { type: 'select', title: '部門', source:[{value:"1",text:"研發部"},{value:"2",text:"銷售部"},{value:"3",text:"行政部"}] } }
得到效果
當然,這種本地設定資料來源的方法肯定是不能滿足我們需求的,因為很多情況下拉框裡面的選項是從資料庫遠端得到的。當然x-editable也為我們考慮到了,比如我們可以這樣寫:
{ 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; } } }
後臺我們配置一個方法
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值對應。
4、複選框
除了上述幾種常見的編輯框,x-editable還為我們提供了複選框組的編輯。比如:
{ field: "Hobby", title: "愛好", editable: { type: "checklist", separator:",", source: [{ value: 'bsb', text: '籃球' }, { value: 'ftb', text: '足球' }, { value: 'wsm', text: '游泳' }], } }
得到效果:
當然,如果遠端資料,也可以使用類似上文的方法去取。
5、“陰魂不散”的select2
說到上文的複選框,博主不由自主又想到了Multiselect這些個東西,於是查詢x-editable的文件,結果發現它不支援Multiselect,但是支援select2,也不知道這是不是一個好訊息。根據博主自己的使用經歷,也包括技術交流群裡面的聊天經歷,發現很多人在使用select2的時候都遇到過各種各樣的樣式問題,並且不太好解決。
既然x-editable支援select2,那我們就用用試試唄,反正官方demo說得挺好的,下面是官方demo的使用示例:
懷著忐忑的心情,博主自己嘗試了一把。
引用select2檔案
<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>
程式碼嘗試
{ 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如何成功的。這個問題先丟擲來,如果有使用的園友歡迎指正與解答。後續如果博主解決了這個問題,也會在此更新。
四、總結
還有一個問題就是在編輯完成提交之後,博主在專案中遇到這樣一個問題:如果提交之後的文字內容過多,表格的thead裡面th的寬度和tbody裡面td的寬度不對其的問題,看著相當噁心。但是在寫demo的時候又沒有遇到這個問題。在此還是將解決方案給出來。
相關推薦
JS元件系列——BootstrapTable 行內編輯解決方案:x-editable
前言:之前介紹bootstrapTable元件的時候有提到它的行內編輯功能,只不過為了展示功能,將此一筆帶過了,罪過罪過!最近專案裡面還是打算將行內編輯用起來,於是再次研究了下x-editable元件,遇到過一些坑,再此做個採坑記錄吧!想要了解bootstrapTable的園友可以移步 JS元件系列——表格元
JS元件系列——Bootstrap右鍵選單解決方案:ContextMenu
前言:有段時間沒發表隨筆了,過個年人都變得懶了。新年剛來上班,今天正好得空,將去年遺留的兩個小元件總結記錄下。有朋友跟我說:你的bootstrap元件要能夠形成一個可以滿足一般專案需求的系列元件,才有真正的實用價值。想想說得在理。這不今天來總結下bootstrap的一個小元件的應用。好了,不說廢話,進入正題吧
JS元件系列——BootstrapTable+KnockoutJS實現增刪改查解決方案(一)
前言:出於某種原因,需要學習下Knockout.js,這個元件很早前聽說過,但一直沒嘗試使用,這兩天學習了下,覺得它真心不錯,雙向繫結的機制簡直太爽了。今天打算結合bootstrapTable和Knockout去實現一個簡單的增刪改查,來體驗一把神奇的MVVM。關於WebApi的剩餘部分,博主一定抽時間補上。
JS元件系列——BootstrapTable+KnockoutJS實現增刪改查解決方案(二)
前言:上篇 JS元件系列——BootstrapTable+KnockoutJS實現增刪改查解決方案(一) 介紹了下knockout.js的一些基礎用法,由於篇幅的關係,所以只能分成兩篇,望見諒!昨天就覺得應該快點完成下篇,要不然有點標題黨的感覺,思及此,博主心有不安,於是加班趕出了下篇。如果你也打算用ko去做
JS元件系列——BootstrapTable+KnockoutJS實現增刪改查解決方案(三):兩個Viewmodel搞定增刪改查
前言:之前博主分享過knockoutJS和BootstrapTable的一些基礎用法,都是寫基礎應用,根本談不上封裝,僅僅是避免了html控制元件的取值和賦值,遠遠沒有將MVVM的精妙展現出來。最近專案打算正式將ko用起來,於是乎對ko和bootstraptable做了一些封裝,在此分享出來供園友們參考。封裝
JS元件系列——BootstrapTable+KnockoutJS實現增刪改查解決方案(四):自定義T4模板快速生成頁面
前言:上篇介紹了下ko增刪改查的封裝,確實節省了大量的js程式碼。博主是一個喜歡偷懶的人,總覺得這些基礎的增刪改查效果能不能通過一個什麼工具直接生成頁面效果,啥程式碼都不用寫了,那該多爽。於是研究了下T4的語法,雖然沒有完全掌握,但是算是有了一個大致的瞭解,給需要自定義模板的園友們提供一個參考。於是乎有了今天
C#進階系列——WebApi 跨域問題解決方案:CORS
dea ati ice pro target default 異常 測試工具 復雜 前言:上篇總結了下WebApi的接口測試工具的使用,這篇接著來看看WebAPI的另一個常見問題:跨域問題。本篇主要從實例的角度分享下CORS解決跨域問題一些細節。 WebApi系列文章
JS元件系列——自己動手擴充套件BootstrapTable的 凍結列 功能:徹底解決高度問題
前言:一年前,博主分享過一篇關於bootstrapTable元件凍結列的解決方案 JS元件系列——Bootstrap Table 凍結列功能IE瀏覽器相容性問題解決方案 ,通過該篇,確實可以實現bootstrapTable的凍結列效果,並且可以相容ie瀏覽器。這一年的時間,不斷有園友以及群裡面的朋友問過我關
bootstrapTable 實現指定欄位行內編輯,無彈窗,自動儲存
最近做一個專案時,使用bootstrapTable 作為表格進行資料展示,客戶要求對數量欄位更直觀的行內編輯,研究了一下網上的方案並參考了下面的文章 bootstrapTable行內動態編輯行中某列欄位資料(優化版:無需彈框,直接在行內更新) ,對文中的程式碼進行改
JS元件系列——自己動手擴充套件BootstrapTable的treegrid功能
前言:上篇 JS元件系列——自己動手封裝bootstrap-treegrid元件 博主自己動手封裝了下treegrid的功能,但畢竟那個元件只是一個單獨針對樹形表格做的,適用性還比較有限。關注博主的園友應該知道,博主的部落格裡面寫了很多bootstrapTable的擴充套件,今天打算在直接在bootstra
JS元件系列——Bootstrap Table 表格行拖拽
前言:之前一直在研究DDD相關知識,好久沒更新JS系列文章了。這兩天做了一個簡單的業務需求,覺得效果還可以,今天在這裡分享給大家,歡迎拍磚~~ 一、業務需求及實現效果 專案涉及到訂單模組,那天突然接到一個需求,說是兩種不同狀態的訂單之間要實現插單的效果,頁面上呈現方式是:左右兩個Table,左邊Table
JS元件系列——在ABP中封裝BootstrapTable
前言:關於ABP框架,博主關注差不多有兩年了吧,一直遲遲沒有嘗試。一方面博主覺得像這種複雜的開發框架肯定有它的過人之處,系統的穩定性和健壯性比一般的開源框架肯定強很多,可是另一方面每每想到它繁瑣的封裝和複雜的開發流程就望而卻步,就這樣遲遲沒有行動。最近在專案裡面用到了ABP框架,沒辦法,只有硬著頭皮上了。經
JS元件系列——Bootstrap Table 凍結列功能IE瀏覽器相容性問題解決方案
前言:最近專案裡面需要用到表格的凍結列功能,所謂“凍結列”,就是某些情況下表格的列比較多,需要固定前面的幾列,後面的列滾動。遺憾的是,bootstrap table裡自帶的fixed column功能有一點bug,於是和同事討論該如何解決,於是就有了這篇文章。 一、起因回顧 第一列固定 貌似
JS元件系列——Bootstrap Table 表格行拖拽(二:多行拖拽)
前言:前天剛寫了篇JS元件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基礎上能夠同時拖拽選中的多行。博主用了半天時間研究了下,效果是出來了,但是感覺不盡如人意。先把它分享出來,以後想到更好的辦法再優化吧。 一、效果展示 1、拖動前 2、拖動中
bootstrapTable行內動態編輯行中某列欄位資料
今天開發者遇到了一個需求:在一個table資料中,點選某行的某一個列資料就行修改該行該欄位的屬性值(另一篇博文有優化方法)。 前言:在網上搜索了一番,使用x-editable元件去實現這個功能,在下載了一些js檔案後,一番搗鼓搞不定(如需要下面js留下地址送你),後來使
bootstraptable 行內多個輸入框編輯,儲存
效果如下: 點選輸入框可修改輸入框的值,修改完後點擊儲存 注意:沒有修改的值不儲存 columns程式碼如下: columns: [{ title: '標題', field: 'channelname', align: 'center',
bootstrap-table 行內編輯
根據 ext ots json fail defined www. edi .html 所需的樣式和js文件: https://pan.baidu.com/s/1eSAKzyM 密碼: s3wh 參考 : http://www.cnblogs.com/landeanfen/
VUE+Element UI實現簡單的表格行內編輯效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 引入樣式 --> <link rel="stylesheet" href="https://
element-ui table 行內編輯
EditRow.ts interface NoParamConstructor<T> { new(): T; } export default class EditRow<T> { origin: T = null copy: T =
JS元件系列——使用HTML標籤的data屬性初始化JS元件
前言:最近使用bootstrap元件的時候發現一個易用性問題,很多簡單的元件初始化都需要在JS裡面寫很多的初始化程式碼,比如一個簡單的select標籤,因為僅僅只是需要從後臺獲取資料填充到option裡面,可是從後臺取資料就需要js的初始化,所以導致頁面初始化的時候js的初始化程式碼裡面出現很多重複