文档章节

Web表格动态添加行思路

p2ng
 p2ng
发布于 2016/06/21 15:10
字数 787
阅读 240
收藏 1
点赞 0
评论 0

#开场白 在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
广州
后端工程师
AppendGrid 16.0 发布,jQuery 动态表格插件

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

GuoMengYue ⋅ 2015/08/20 ⋅ 3

HTML Table 空白单元格补全

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

sp42 ⋅ 2014/05/13 ⋅ 0

S2JH:基于jqGrid集成扩展的表格Grid组件功能

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

xautlx ⋅ 2013/10/12 ⋅ 2

Dorado中DataTable使用技巧汇总

1.如何设定表格中行的高度(包括表格头,合计栏) headerHeight:设定表格头的高度; footerHeight:设定表格合计栏的高度; rowHeidht:设定数据行的高度; dorado-5.0 060904.1658以后的版本...

JAVA_NINA ⋅ 2012/05/08 ⋅ 0

tmlxSpreadsheet电子表格控件详细说明

tmlxSpreadsheet 是一个由JavaScript 和 PHP 写成的电子表格控件(包含WP插件, Joomla插件等等).。 程序员可以容易的添加一个类似Excel功能的,可编辑的表格功能到自己的Web应用中。 目前有一些...

netkongjian ⋅ 2014/06/07 ⋅ 0

Jquery创建表格、填充表格数据、重置表格

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

LittleNewbie ⋅ 2016/10/28 ⋅ 0

C# 如何添加表格到Word文档

表格是组织整理数据的一种重要手段,应在生活中的方方面面。在Word文档中将繁杂的文字表述内容表格化,能快速、直接地获取关键内容信息。那么,通过C#,我们也可以在Word文档中添加表格,这里...

E_iceblue ⋅ 2017/11/15 ⋅ 0

Flex:Web报表引擎——MyReport 2.3.6.0新功能

新增功能 支持打开和保存客户端本地报表样式文件。 改良标题行,表格列,表格行等的编辑效果,显示更直观。 标题行支持单个或多个单元格的添加。 支持行合并,能实现更丰富的报表格式展示。 ...

彭博 ⋅ 2012/03/09 ⋅ 0

javascript 动态创建表格:新增、删除行和单元格

利用js来动态创建表格有两种格式,appendChild()和insertRow、insertCell()。两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧。 1、inserRow()和inser...

xinlll ⋅ 2012/11/12 ⋅ 0

TableView 优化之数据模型优化

每次写 TableView 都是又爱又恨,代码感觉总是很像,但细节不同又借鉴不了。究其原因就是代码没有真正规范和模块化。在参考了几篇文章后,我总结了一个范式,可以很大程度上对 TableView 的编...

镜画者 ⋅ 2017/12/05 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Gitee 生成并部署SSH key

1.如何生成ssh公钥 你可以按如下命令来生成 sshkey: ssh-keygen -t rsa -C "xxxxx@xxxxx.com" # Generating public/private rsa key pair...# 三次回车即可生成 ssh key 查看你的 ...

晨猫 ⋅ 47分钟前 ⋅ 0

zblog2.3版本的asp系统是否可以超越卢松松博客的流量[图]

最近访问zblog官网,发现zlbog-asp2.3版本已经进入测试阶段了,虽然正式版还没有发布,想必也不久了。那么作为aps纵横江湖十多年的今天,blog2.2版本应该已经成熟了,为什么还要发布这个2.3...

原创小博客 ⋅ 今天 ⋅ 0

聊聊spring cloud的HystrixCircuitBreakerConfiguration

序 本文主要研究一下spring cloud的HystrixCircuitBreakerConfiguration HystrixCircuitBreakerConfiguration spring-cloud-netflix-core-2.0.0.RELEASE-sources.jar!/org/springframework/......

go4it ⋅ 今天 ⋅ 0

二分查找

二分查找,也称折半查找、二分搜索,是一种在有序数组中查找某一特定元素的搜索算法。搜素过程从数组的中间元素开始,如果中间元素正好是要查找的元素,则搜素过程结束;如果某一特定元素大于...

人觉非常君 ⋅ 今天 ⋅ 0

VS中使用X64汇编

需要注意的是,在X86项目中,可以使用__asm{}来嵌入汇编代码,但是在X64项目中,再也不能使用__asm{}来编写嵌入式汇编程序了,必须使用专门的.asm汇编文件来编写相应的汇编代码,然后在其它地...

simpower ⋅ 今天 ⋅ 0

ThreadPoolExecutor

ThreadPoolExecutor public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, long keepAliveTime, ......

4rnold ⋅ 昨天 ⋅ 0

Java正无穷大、负无穷大以及NaN

问题来源:用Java代码写了一个计算公式,包含除法和对数和取反,在页面上出现了-infinity,不知道这是什么问题,网上找答案才明白意思是负的无穷大。 思考:为什么会出现这种情况呢?这是哪里...

young_chen ⋅ 昨天 ⋅ 0

前台对中文编码,后台解码

前台:encodeURI(sbzt) 后台:String param = URLDecoder.decode(sbzt,"UTF-8");

west_coast ⋅ 昨天 ⋅ 0

实验楼—MySQL基础课程-挑战3实验报告

按照文档要求创建数据库 sudo sercice mysql startwget http://labfile.oss.aliyuncs.com/courses/9/createdb2.sqlvim /home/shiyanlou/createdb2.sql#查看下数据库代码 代码创建了grade......

zhangjin7 ⋅ 昨天 ⋅ 0

一起读书《深入浅出nodejs》-node模块机制

node 模块机制 前言 说到node,就不免得提到JavaScript。JavaScript自诞生以来,经历了工具类库、组件库、前端框架、前端应用的变迁。通过无数开发人员的努力,JavaScript不断被类聚和抽象,...

小草先森 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部