Web表格动态添加行思路
博客专区 > p2ng 的博客 > 博客详情
Web表格动态添加行思路
p2ng 发表于1年前
Web表格动态添加行思路
  • 发表于 1年前
  • 阅读 216
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: 在敏捷开发模式中,偶然也是必然的机会,选中了该故事点任务,死就死吧日后誓死不干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];
共有 人打赏支持
p2ng
粉丝 46
博文 29
码字总数 13653
×
p2ng
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: