效果圖：

aaarticlea/png;base64,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" alt="" />

js，代碼如下

/*

tpl數組為新增一行所給的默認值，沒有的話為空''

*/

var

tpl = ['one', 'two', 'three'],

data = [

['', 'Kia', 'Nissan', 'Toyota', 'Honda'],

['2008', 10, 11, 12, 13],

['2009', 20, 11, 14, 13],

['2009', 30, 15, 12, 13]

],

container = document.getElementById('example1'),

hot1;

/*

*函數isEmptyRow為判斷當前的行所述列是否為空，是返回true，

*/

function isEmptyRow(instance, row) {

var rowData = instance.getData()[row];

for (var i = 0, ilen = rowData.length; i < ilen; i++) {

if (rowData[i] !== null) {

return false;

}

}

return true;

}

/*

*函數 defaultValueRenderer 給當前行的列添加默認值

*/

function defaultValueRenderer(instance, td, row, col, prop, value, cellProperties) {

/*

* args 為獲取當前列的屬性

*/

var args = arguments;

/*

*判斷arg[5]的值是否為null，和空值(isEmptyRow，前面已經有相關函數做判斷)

*符合條件的列賦值前面所給的數組的當前列的值tpl[col]

*/

if (args[5] === null && isEmptyRow(instance, row)) {

args[5] = tpl[col];

td.style.color = '#999';

}

else {

td.style.color = '';

}

/*

*判斷arg[5]的值是否為undefined，和空值(isEmptyRow，前面已經有相關函數做判斷)

*符合條件的列賦值前面所給的數組的當前列的值tpl[col]

*/

if (args[5] === undefined && isEmptyRow(instance, row)) {

args[5] = tpl[col];

td.style.color = '#999';

}

else {

td.style.color = '';

}

Handsontable.renderers.TextRenderer.apply(this, args);

}

hot1 = new Handsontable(container, {

startRows: 8,

startCols: 5,

minSpareRows: 1,

contextMenu: true,

/*

*獲取行的屬性，執行defaultValueRenderer函數進行賦值

*/

cells: function (row, col, prop) {

var cellProperties = {};

cellProperties.renderer = defaultValueRenderer;

return cellProperties;

},

/*

*對當前table做操作前執行的函數，做相應的操作，這個我也沒怎么看懂

*/

beforeChange: function (changes) {

var instance = hot1,

ilen = changes.length,

clen = instance.colCount,

rowColumnSeen = {},

rowsToFill = {},

i,

c;

for (i = 0; i < ilen; i++) {

// if oldVal is empty

if (changes[i][2] === null && changes[i][3] !== null) {

if (isEmptyRow(instance, changes[i][0])) {

// add this row/col combination to cache so it will not be overwritten by template

rowColumnSeen[changes[i][0] + '/' + changes[i][1]] = true;

rowsToFill[changes[i][0]] = true;

}

}

}

for (var r in rowsToFill) {

if (rowsToFill.hasOwnProperty(r)) {

for (c = 0; c < clen; c++) {

// if it is not provided by user in this change set, take value from template

if (!rowColumnSeen[r + '/' + c]) {

changes.push([r, c, null, tpl[c]]);

}

}

}

}

}

});

hot1.loadData(data);

es新增字段，并設置默認值

重新設置mapping 添加新的字段. 設置es允許腳本執行:elasticsearch.yml script.inline: true 然后執行腳本 POST linewell_assets_mgt ...

Vue組件庫新增的prop屬性類型是Object或者Array時默認值的設置

在Vue開發中提供組件庫時常常需要添加相關屬性,用來接收父組件向子組件傳遞的數據,通常也會給屬性設置默認值,那么當屬性的類型是Object或者Array類型時如何設置默認值比較合理呢?下面將揭曉這一過 ...

MySQL數據庫innodb&lowbar;rollback&lowbar;on&lowbar;timeout默認值的危害？

http://www.ywnds.com/?p=9560 一.innodb_rollback_on_timeout變量 有時侯會發生事務超時的情況,MySQL會返回類似這樣的錯誤: ? 1 ERROR ...

ES6函數參數默認值作用域的模擬原理實現與個人的一些推測

一.函數參數默認值中模糊的獨立作用域 我在ES6入門學習函數拓展這一篇博客中有記錄,當函數的參數使用默認值時,參數會在初始化過程中產生一個獨立的作用域,初始化完成作用域會消失:如果不使用參數默認值,不 ...

jeecg小吐槽續——自己折騰修改在線開發功能中&OpenCurlyDoubleQuote;默認值”的使用

-- 原來設置了"默認值"的字段,新建表單時不會出現在表單上,要保存后才能在列表頁面出現,而且第二次編輯時,設置了"默認值"的字段再也不能改成空值! -- 要修 ...

&lbrack;轉&rsqb;Hibernate設置時間戳的默認值和更新時間的自動更新

總結

以上是生活随笔為你收集整理的handsontable mysql_Handsontable 新增一行 默认值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。