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

强烈推荐一个大神的人工智能的教程：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 "" + value + "";

						    }
						},
                        {
                            field: 'Critics', title: '被评论人职务', width: 50, formatter: function (value, row, index) {
                                return "" + value + "";
                            }
                        },
                        { 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内容）：

 

 

        

            

                @**@
                
                    
                
            
            

            
        
    

 

          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。代码实现如下：

 

 

       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 += "";
                        for (var k = 0; k < col; k++) {//遍历表格列  
                            str += "";
                            if (typeof data[k + j * col] == "undefined") { str += " "; }
                            else { str += data[k + j * col]+" "; }
                            str += "";
                        };//表格行结束  
                        str += "";
                    };
                    var div1 = document.getElementById('tb1');
                    div1.innerHTML = str;                   
                }
                else {
                    $.messager.alert("提示：", "该部门下没有人员！");
                }               
            });

 

       最后实现的效果如下：

【总结】

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

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

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