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];