文档章节

Web表格动态添加行思路

p2ng
 p2ng
发布于 2016/06/21 15:10
字数 787
阅读 292
收藏 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

粉丝 48
博文 29
码字总数 13653
作品 0
广州
后端工程师
AppendGrid 16.0 发布,jQuery 动态表格插件

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

GuoMengYue
2015/08/20
2.7K
3
HTML Table 空白单元格补全

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

sp42
2014/05/13
0
0
S2JH:基于jqGrid集成扩展的表格Grid组件功能

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

xautlx
2013/10/12
1K
2
Dorado中DataTable使用技巧汇总

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

JAVA_NINA
2012/05/08
0
0
tmlxSpreadsheet电子表格控件详细说明

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

netkongjian
2014/06/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Boot 入门 - 进阶篇(4)- REST访问(RestTemplate)

经常需要发送一个GET/POST请求到其他系统(REST API),通过JDK自带的HttpURLConnection、Apache HttpClient、Netty 4、OkHTTP 2/3都可以实现。 HttpClient的使用:http://rensanning.iteye.c...

onedotdot
20分钟前
1
0
Wi-Fi也有版本号了!

据Solidot消息,行业组织 Wi-Fi 联盟宣布当前的版本 Wi-Fi 802.11ac 重命名为 Wi-Fi 5,而下一个版本 802.11ax 重命名为 Wi-Fi 6,之前的版本 802.11n 改名为 Wi-Fi 4。 Wi-Fi 标准之前使用单...

linux-tao
22分钟前
3
0
项目经验不丰富、技术不突出的程序员怎么打动面试官?

前言 相信不少的程序员都有过类似的困惑:如果我没有大型的项目经历,也不能靠技术征服面试官,那我要怎么才能给面试官留下一个好印象呢? 按照本人的面试经验来说,面试主要看几点:项目经验...

Mamba1
33分钟前
2
0
MyBatis 源码分析----MyBatis 整体架构概要说明

MyBatis整体架构 MyBatis的整体架构分为三层1:基础支持层,2:核心处理层,3:接口层 1:基础支持层: 1-1反射模块: 该模块对Java 原生的反射进行了良好的封装,提供了更加简洁易用的API ,...

西瓜1994
38分钟前
6
0
如何让 J2Cache 在多种编程语言环境中使用

现在的系统是越来越复杂了,不仅仅是功能复杂,系统结构也非常复杂,而且经常在一个系统里包含几种不同语言编写的子系统。例如用 JavaScript 做前端开发、用 Java/PHP 等等做后端,C/C++/Go ...

红薯
40分钟前
46
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部