【前言】
为了培养更多的人，最近组长准备将廊坊一中交接给下版人员，从而让更多的人从中受益；但是在交接之前，我们需要根据上次验收提出的变动来完善系统。
我这次主要的任务是完善界面上的显示，基本上的任务分配是每个人完善之前做的模块，虽然有时间没打开系统，但是还是自己亲自做的，打开之后倍感亲切。在这次完善的界面的同时又将自己当初的实现给温习了一次。
【实现】
需求：后台管理员在设置完互评信息后，需要对其设置的互评信息进行查看(支持模糊查询)，同时支持删除.
下面主要说一下这部分最主要功能：查看互评信息的实现及其效果
话不多说，来张图：
实现方式：
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("提示：", "该部门下没有人员！");
}
});
最后实现的效果如下：
【总结】
用心去做一个东西，发现在自己的努力下会将它做的越来越好，同时感谢团队中的每位成员对自己的鼓励和支持。在我们共同努力下，我们的产品在逐渐完善。在需求的推动下去探索和实践，相信在软件开发的道路上自己会越走越远。
廊坊一中是自己亲自从头到尾都参与其中的一个项目；虽然期间有许多波折，不过看着它像自己的亲生孩子一样，它见证了我们的成长史，说实话将它教给下版人员真心有点舍不得！
最后与大家共勉一句话：用心去对待自己做过的每个产品。
时间： 2024-12-28 13:19:28