评审系统:查看互评信息实现及优化显示

强烈推荐一个大神的人工智能的教程:http://www.captainbed.net/zhanghan

【前言】

      为了培养更多的人,最近组长准备将廊坊一中交接给下版人员,从而让更多的人从中受益;但是在交接之前,我们需要根据上次验收提出的变动来完善系统。

      我这次主要的任务是完善界面上的显示,基本上的任务分配是每个人完善之前做的模块,虽然有时间没打开系统,但是还是自己亲自做的,打开之后倍感亲切。在这次完善的界面的同时又将自己当初的实现给温习了一次。

【实现】

      需求:后台管理员在设置完互评信息后,需要对其设置的互评信息进行查看(支持模糊查询),同时支持删除.

      下面主要说一下这部分最主要功能:查看互评信息的实现及其效果

      话不多说,来张图:

      实现方式:

          1.在表格初始化时加载之前选择的评论职务和被评论人的职务(JS方法):

 

 //初始化表格
        function initTable() {
            //把搜素框里的内容提交到后台对数据进行过滤。
            $('#dg').datagrid({
                url: '/QuerySetEvaluation/QueryBy',
                //title: '演示表格使用',
                width: "100%",
                striped: true, //行背景交换               
                fitColumns: true,
                idField: 'ID',
                loadMsg: '正在加载用户的信息...',
                pagination: true,
                singleSelect: false,
                pageSize: 10,
                pageNumber: 1,
                pageList: [10, 20, 30],
                //去除datagrid单击行选中的效果
                onClickRow: function (rowIndex, rowData) {
                    $(this).datagrid('unselectRow', rowIndex);
                },
                queryParams: {
                    searchName: $("#searchName").val()
                },
                columns: [[
                        { field: 'ck', checkbox: true, align: 'left', width: 50 },
                        { field: 'ID', width: 50, hidden: true },
						{
						    field: 'Evaluator', title: '评论人职务', width: 50, formatter: function (value, row, index) {
						        return "<a href='javascript:void(0);' onclick='EvalName(this)'>" + value + "</a>";

						    }
						},
                        {
                            field: 'Critics', title: '被评论人职务', width: 50, formatter: function (value, row, index) {
                                return "<a href='javascript:void(0);'onclick='CritisName(this)'>" + value + "</a>";
                            }
                        },
                        { field: 'Weight', title: '权重', width: 50 },
                        { field: 'IsUsed', title: '是否可用', width: 50, hidden: true },
                        { field: 'WeightID', title: '是否可用', width: 50, hidden: true }
                ]]
            });
        }

 

          2.定义弹出框(JS方法):

 

//显示评论人姓名弹出框
        function showNameFrm() {
            $("#importDiv").css("display", "block");
            $("#importDiv").dialog({
                width: 600,
                height: 250,
                modal: true,
                title: "人员信息",
                collapsible: true,
                minimizable: false,
                maximizable: false,
                resizable: true,
            });
        }

 

          3.控制显示的DIV以及其内的用来承接人名的textarea(HTML内容):

 

 <div id="importDiv" style="display: none">
        <form method="post" enctype="multipart/form-data">
            <div style="margin-bottom: 20px; width: 600px; height: 250px">
                @*<span class="tip"><input type="text" id="ii" style="width:600px;height:250px;border:none;word-break:break-all;"/></span><a class="btn-lit"></a>*@
                <span class="tip">
                    <textarea id="evaName" style="width: 580px; height: 250px; border: none; word-break: break-all;"></textarea></span><a class="btn-lit"></a>
                
            </div>
            <div style="margin-bottom: 20px">
            </div>
        </form>
    </div>

 

          4.单击链接显示评论人员姓名:

 

        //单击链接显示评论人员姓名 
        function EvalName(obj) {            
            //把你选中的 数据查询出来。          
            var id = obj.parentNode.parentNode.parentNode.children[1].innerText;
            $.get("/QuerySetEvaluation/selectEvaluatorName", { evaInfoID: id }, function (data) {
                var name = data[0] ;
                if (name != null) {
                    name = name + ",";
                    for (var i = 1; i < data.length; i++) {
                        name += data[i] + ",";
                    }

                    name = name.substring(0, name.length - 1);
                    //显示人员信息框
                    showNameFrm();
                    document.getElementById("evaName").value = name;
                }
                else {
                    $.messager.alert("提示:", "该部门下没有人员!");
                }               
            });
        }

 

 

【优化显示】

       之前的实现方式是将其放到了textare中,在验收的时候甲方提出说看起来太乱尤其是人多的时候!秉承着全心全意为人民服务的理念,我对其进行优化!

       想法:不用textare来承接而是用Table承接。

       怎么实现那???

       经过分析需要做两个工作:

       1.将界面的HTML中的承接姓名的textarea容器更换为Table。代码实现如下:

 

    <!--用来显示职务下人员姓名-->
    <div id="importDiv" style="position:fixed;display: none;margin:0;width:220px;border:1px;background-color:#a0c6e5">
        <!--承接姓名的Table-->
        <table border="0" cellspacing="1" style="background-color:#a0c6e5" width="280px">
            <tbody style="font-size:20px" id="tb1">
            </tbody>
         </table>
    </div>

 

       2.从上面的单击链接显示评论人员姓名 的JS方法中不难看出,加载出来的姓名是一个data数组,将Data数组放到Table中。代码实现如下:

 

//单击链接显示评论人员姓名
        function EvalName(obj) {    
            //把你选中的 数据查询出来。          
            var id = obj.parentNode.parentNode.parentNode.children[1].innerText;
            $.get("/QuerySetEvaluation/selectEvaluatorName", { evaInfoID: id }, function (data) {
                var name = data[0] ;
                if (null != name && "" != name) {
                    //显示人员信息框
                    showNameFrm();                   
                    var col = 4;//这里为生成4列的表格                      
                    var lines = Math.ceil(data.length / col);//很关键的一步,这里为生成表格的行数  
                    var str = "";
                    for (var j = 0; j < lines; j++) {//遍历表格行  
                        str += "<tr>";
                        for (var k = 0; k < col; k++) {//遍历表格列  
                            str += "<td>";
                            if (typeof data[k + j * col] == "undefined") { str += " "; }
                            else { str += data[k + j * col]+" "; }
                            str += "</td>";
                        };//表格行结束  
                        str += "</tr>";
                    };
                    var div1 = document.getElementById('tb1');
                    div1.innerHTML = str;                   
                }
                else {
                    $.messager.alert("提示:", "该部门下没有人员!");
                }               
            });

 

       最后实现的效果如下:

【总结】

      用心去做一个东西,发现在自己的努力下会将它做的越来越好,同时感谢团队中的每位成员对自己的鼓励和支持。在我们共同努力下,我们的产品在逐渐完善。在需求的推动下去探索和实践,相信在软件开发的道路上自己会越走越远。

      廊坊一中是自己亲自从头到尾都参与其中的一个项目;虽然期间有许多波折,不过看着它像自己的亲生孩子一样,它见证了我们的成长史,说实话将它教给下版人员真心有点舍不得!

      最后与大家共勉一句话:用心去对待自己做过的每个产品。

当年的春天 CSDN认证博客专家 分布式 Spring Redis
©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:上身试试 返回首页