软工实践2019第五次作业——结对编程的编程实现

1.相关链接：

结对同学博客链接：https://www.cnblogs.com/rmwsh/
本博客链接：https://www.cnblogs.com/L031702112
GitHub项目地址：https://github.com/wusihuan/031702349-031702112

2.具体分工：

03702112-蓝飞鹏：需求分析，UI设计，后期美化。
结对同学031702349-吴斯桓：框架设计，代码编写。

3.PSP表：

|
:---: | :---: | :---: | :---:
PSP2.1| Personal Software Process Stages|预估耗时（分钟）|实际耗时（分钟）
Planning |计划 | 30 | 30
Estimate |估计这个任务需要多少时间 | 30 |30
Development| 开发 | 40 |20
Analysis 需求分析| (包括学习新技术) | 20 |30
Design Spec| 生成设计文档 | 240 |200
Design Review |设计复审 | 100 |140
Coding Standard |代码规范 (为目前的开发制定合适的规范) | 30 | 20
Design| 具体设计 | 30 |60
Coding| 具体编码 | 120 |150
Code Review |代码复审 | 40 |30
Test 测试|（自我测试，修改代码，提交修改）| 200 | 100
Reporting |报告 | 0 | 0
Test Repor| 测试报告 | 0 |0
Size Measurement |计算工作量 | 30 |20
Postmortem & Process Improvement Plan |事后总结, 并提出过程改进计划|20 | 30
合计| | 930 |860

4.解题思路描述与设计实现说明：

读完题目以后：
1.学习html，JavaScript和css的基本知识
2.需要怎么选择合适的框架
3.生成树结构和实现其缩放功能

======

决定使用bootstrap treeview框架，原始是因为bootstrap已经是一个比较成熟，并且使用起来很方便的一个框架。并且简单而优雅！！这是我很喜欢的一个形容词。

有价值的代码片段：

 function creatTree() 
{
            document.getElementsByClassName("textform")[0].style.display = "none";
            document.getElementById("mytable").style.display = "block";
            var text = document.getElementById('inarea').value;
            var table = text.split(/\n\s*\n/); //分割不同的树
            var objList = [];
            for (i = 0; i < table.length; i++) {
                var row = table[i].split(/[(\r\n)\r\n]+/); //分割每行
                var obj = new Object();
                obj.name = row[0].split(/：/)[1];
                obj.id = String(i);
                obj.parentId = null;
                objList.push(obj);
                for (j = 1; j < row.length; j++) {
                    var obj = new Object();
                    var kind = row[j].split(/：/)[0]; //年级和学位
                    var stu = row[j].split(/：/)[1].split(/、/); //学生
                    obj.id = String(i) + String(j);
                    obj.name = kind;
                    obj.parentId = String(i);
                    objList.push(obj);
                    for (k = 0; k < stu.length; k++) {
                        var obj = new Object();
                        obj.id = String(i) + String(j) + String(k);
                        obj.name = stu[k];
                        obj.parentId = String(i) + String(j);
                        objList.push(obj);
                    }
                }
            }
            var data = objList;
            $('#tree_table').bootstrapTable({
                class: 'table table-hover table-bordered',
                data: data,
                sidePagination: 'server',
                pagination: false,
                treeView: true,
                treeId: "id",
                treeField: "name",
                rowAttributes: function (row, index) {
                    return {
                        xx: index
                    };
                },
                queryParams: function (params) {
                    var param = {
                        roleId: 'xx'
                    };
                    return param;
                },
                columns: [{
                        checkbox: true
                    }, {
                        field: 'name',
                        title: '名称',
                    },
                    {
                        field: 'desc',
                        title: '详情',
                    },
                ]
            });
            $("#expandAllTree").on('click', function () {
                $('#tree_table').bootstrapTable("expandAllTree")
            })
            $("#collapseAllTree").on('click', function () {
                $('#tree_table').bootstrapTable("collapseAllTree")
            })
}