Web表格動態添加行思路

#開場白 在Web操做中所謂的動態添加行，無非就是從行與行之間，最後一行添加一行。 舉個粟子：從裝A與裝C之間插入一行裝B

|id|Name| |:|:| |0|裝A| |1|裝C|

|id|Name| |:|:| |0|裝A| |1|裝B| |2|裝C|

#思路 ##找各類表格組件(找輪子模式) ##本身一邊玩(造輪子模式)

#工具 ##IDE... ##Bootstarp[http://www.bootcss.com/] ##Bootstarp table[http://bootstrap-table.wenzhixin.net.cn/documentation/] ##x-editable[http://vitalets.github.io/x-editable/] ##jQuery ##angularJs

#效果圖

#找輪子實現 說白了，就是利用第三方的組件幫忙渲染展現，並且還提供了便捷的API使用 ##初始化表格，而且綁定點擊事件

// 初始化表格
var $table = $('#table').bootstrapTable(params).on('click-cell.bs.table', function (field, value, row, $element) { // 監聽單擊單元格
    if ('voucherAcctTitle' == value) { // 帳戶
        arVoucherAcctTitleModalShow($element); // 打開二級頁面
    } else if ('plus' == value) { // 添加行
        var data = $table.bootstrapTable('getData'); // 當前表格數據
        var tmp = new Array();
        for (var i = 0; i < data.length; i++) {
            tmp.push(data[i]);
            if (data[i].tempId == $element.tempId) { // 當前操做行等於數據行時，添加一行（兩行中間添加一行）
                tmp.push($scope.getRowTemplate());
            }
        }

        $table.bootstrapTable('destroy');
        params.data = tmp;
        $table.bootstrapTable(params);
    } else if ('minus' == value) { // 刪除行
        if ($table.bootstrapTable('getData').length == 1) { // 當前只有一行記錄時
            UtilService.alert('提示', '不能刪除改行');
            return;
        }

        $table.bootstrapTable('removeByUniqueId', $element.tempId);
    }
}).on('click-row.bs.table', function (row, $element) { // 監聽單擊行
    $('input[name="voucherDetail.voucherAcctTitleName"]').val($element.voucherAcctTitleName);
});

##頁面加載默認初始化行

for (var i = 0; i < 8; i++) { // 業務方須要默認加載8行
    $table.bootstrapTable('insertRow', {index: i, row: $scope.getRowTemplate()});
}

##準備行記錄模板

/* 行模板 */
$scope.getRowTemplate = function () {
    var rowTemplate = {
        tempId: getUUID(),
        voucherAcctTitle: "<a href='javascript:void(0)' title='選擇帳戶'>選擇帳戶</a>",
        debitItem: '',
        creditItem: '',
        rowRemark: '',
        cfItem: '',
        supplier: '',
        plus: "<a href='javascript:void(0)' title='添加行' ng-click='plus(this);'><i class='glyphicon glyphicon-plus'></i></a>",
        minus: "<a href='javascript:void(0)' title='刪除行'><i class='glyphicon glyphicon-minus' style='color: red;'></i></a>"
    };
    return rowTemplate;
};

#造輪子實現 這個就...開發者數據處理，事件監聽，渲染讓模板引擎負責(ng-repate、for-each) 整理思路...

#踩坑 ##tempId臨時標識 ###添加行

if (data[i].tempId == $element.tempId) { // 當前操做行等於數據行時，添加一行（兩行中間添加一行）
    tmp.push($scope.getRowTemplate());
}

###刪除時

$table.bootstrapTable('removeByUniqueId', $element.tempId);

##表格惟一標識字段

params.uniqueId = 'tempId'; // 表格惟一標識字段

##表格天然序號

<th data-field="row" data-align="center" data-visible="true" data-formatter="rowNumberFormat">行</th>
<script type="text/javascript">
    function rowNumberFormat(value, row, index) {
        return index + 1;
    }
</script>

##動態修改記錄 由於表格是須要渲染的，因此操做完數據之後要銷燬再渲染一次(被angularJS的雙向綁定搞混了...)

var rowData = $table.bootstrapTable('getData'); // 當前表格數據

rowData - doSomeing...

$table.bootstrapTable('destroy');
params.data = rowData;
$table.bootstrapTable(params);

#分享代碼

/**
 * 自動生成32位隨機數
 * @param split 分隔符
 * @returns {string}
 */
var getUUID = function (split) {
    var guid = "";
    for (var i = 1; i <= 32; i++) {
        var n = Math.floor(Math.random() * 16.0).toString(16);
        guid += n;
        if (split && ((i == 8) || (i == 12) || (i == 16) || (i == 20))) {
            guid += "-";
        }
    }
    return guid;
};

$.extend(obj1, obj2); // 把obj2的屬性複製到obj1，返回obj1對象

$scope[key + 'Name']; // 固定命名方式，能夠快捷調用$scoper對象
var m = {1:'a',2:'b'};
m[1];