Web表格动态添加行思路

#开场白在Web操作中所谓的动态添加行，无非就是从行与行之间，最后一行添加一行。举个粟子：从装A与装C之间插入一行装B|id|Name||:|:||0|装A||1|装C||id|Name||:|:||

#开场白在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];