文档章节

Web表格动态添加行思路

p2ng
 p2ng
发布于 2016/06/21 15:10
字数 787
阅读 303
收藏 1

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

p2ng

粉丝 47
博文 29
码字总数 13653
作品 0
广州
后端工程师
私信 提问
在Bootstrap开发框架中使用dataTable直接录入表格行数据

在Winform开发的时候,我们很多时候可以利用表格控件来直接录入数据,不过在Web上较少看到,其实也可以利用dataTable对象处理直接录入表格行数据,这个可以提高数据的录入方便,特别是在一些...

伍华聪
10/23
0
0
HTML Table 空白单元格补全

在最初自学 Web 开发的时候,那时没有所谓的 DIV/CSS 布局,一概 Table 布局的天下。当时有个问题就来了,如何补全宫格空白的单元格呢?——这是我在弄公司产品页头痛的问题。因为我不是学程...

sp42
2014/05/13
0
0
AppendGrid 16.0 发布,jQuery 动态表格插件

AppendGrid 16.0 发布,更新内容: 添加`maxBodyHeight` 属性 用来限制最大高度 当达到最大高度时会自动出现垂直滚动条. (Thanks niftyhawk for suggestion) 修复`buttonClasses` 不能用的问...

GuoMengyue
2015/08/20
2.9K
3
S2JH:基于jqGrid集成扩展的表格Grid组件功能

作为 S2JH: 基于SSH的企业Web应用开发框架 提供相关技术点介绍系列,一方面算是给出自己对某一个特定问题的设计实现思路分享供有兴趣朋友参考,另一方面也算是与大家一起探讨汲取各位同行更多...

EntDIY
2013/10/12
1K
2
Jquery创建表格、填充表格数据、重置表格

1.Jquery创建表格 附:label和data的数据结构 2.Jquery填充表格数据 填充表格数据前提是:已经创建好了html表格行列元素。 如:table.html 附:table_data.json...

LittleNewbie
2016/10/28
521
0

没有更多内容

加载失败,请刷新页面

加载更多

开源 java CMS - FreeCMS2.8会员我的评论

项目地址:http://www.freeteam.cn/ 我的评论 从左侧管理菜单点击我的评论进入。在这里可以查看当前登录会员的所有评论记录。 删除评论 选择评论然后点击删除按钮可以完成删除操作。 为了防止...

freeteam
28分钟前
1
0
Eureka Server启用 https服务指北

文章共 591字,阅读大约需要 2分钟 ! 概 述 在我的前文《Eureka Server 开启Spring Security Basic认证》中已经给 Eureka Server 开启了最基本的鉴权措施,本文则让 HTTPS加持于 Eureka Ser...

CodeSheep
今天
17
0
OSChina 周二乱弹 —— 其实我在地板也睡不着

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @witt-z :分享歌词: 阴天 在不开灯的房间,当所有思绪都一点一点沉淀。 分享莫文蔚的单曲《阴天》: 《阴天》- 莫文蔚 手机党少年们想听歌,...

小小编辑
今天
714
12
微服务分布式事务实现

https://www.processon.com/view/link/5b2144d7e4b001a14d3d2d30

WALK_MAN
今天
5
0
《大漠烟尘》读书笔记及读后感文章3700字

《大漠烟尘》读书笔记及读后感文章3700字: 在这个浮躁的社会里,你有多久没有好好读完一本书了? 我们总觉得自己和别人不一样,所以当看到别人身上的问题时,很少有“反求诸己”,反思自己。...

原创小博客
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部