1.需求。
1.添加一个下拉框做查询
2.列表前面新增复选框点击后获取对应的id所对应的行的某一列数据之和(点击第二个累加),可全选
2.部分代码
操作区域:
<table> <tr> <td> 批次:<select id="batch"> @foreach (var item in Model.BatchList) { <option value="@item">@item</option> } </select> <input id="ResumeBt" value="查询" type="button"/>查询的总数据量为:<label id="ResumeCount">@Model.Total</label>个 </td> </tr> <tr><td>所选中的行的下载量之和为:<label id="ResumeDownNum"></label>次,被浏览:<label id="ResumeBrowseNum"></label>次</td></tr> </table>
js:
<script> $(function () { $("#batch").val("@Model.Batch"); $("#ResumeBt").click(function () { window.location = "/Resume/ResumeStatistics?batch=" + $("#batch").val(); }); //关于复选框 var inum = 0;//用于计数 $("#ResumeCheckedAll").click(function () { inum++; if (inum % 2 == 1) { $("input[type='checkbox']").prop("checked", true); //全选 $.post("/Resume/GetResumeNumAll",{"batch":$("#batch").val()},function(data) { if (data == "Error") { alert("记录的批次信息(batch)为空,请检查操作的步骤是否有误!"); return; } console.info(data); $("#ResumeDownNum").html(data[0].DownLoadNum); $("#ResumeBrowseNum").html(data[0].BrowseNum); },"JSON"); } else { $("input[type='checkbox']").prop("checked", false); //全不选 $("#ResumeDownNum").html(0); $("#ResumeBrowseNum").html(0); } }); }); var ResumeDownNumCount = 0;//记录选中行的下载量总数 var ResumeBrowseNumCount = 0;//记录选中行的浏览量总数 function ResumeChecked(obj) { $.post("/Resume/GetResumeNum",{"id":obj},function(data) { if (data == "Error") { alert("记录的编号(id)为空,请检查操作的步骤是否有误!"); return; } console.info(data); //每次进行累计的时候判断是否选中 if ($("#"+obj).is(":checked")) { ResumeDownNumCount =ResumeDownNumCount + data[0].DownLoadNum; ResumeBrowseNumCount =ResumeBrowseNumCount + data[0].BrowseNum; } else { ResumeDownNumCount =ResumeDownNumCount - data[0].DownLoadNum; ResumeBrowseNumCount =ResumeBrowseNumCount - data[0].BrowseNum; } $("#ResumeDownNum").html(ResumeDownNumCount); $("#ResumeBrowseNum").html(ResumeBrowseNumCount); },"JSON"); } </script>
Controller:
public ActionResult ResumeStatistics(int pageIndex = 1) { string batch = Request["batch"]; var model = new ResumeStatisticsListModel(); model.BatchList = _resumeStatisticsBll.Option(); for (int i=0;i< model.BatchList.Count;i++) { model.BatchList[i] = model.BatchList[i].Trim(); } //设置每页大小 int pageSize = 15; //查询总数 //如果有条件就根据条件来查总数 int total = 0; //传递参数的时候根据batch来筛选数据 if (batch != null && pageIndex!=0) { total = _resumeStatisticsBll.GetBatchCount(batch); model.Items = _resumeStatisticsBll.GetBatchAll(pageSize, pageIndex,batch); model.Total = total; model.Batch = batch; model.Pages = PageHelper.GetPageList(pageIndex, pageSize, total, "/Resume/ResumeStatistics?pageIndex={0}&batch=" + batch); return View(model); } else { total = _resumeStatisticsBll.GetCount(); model.Items = _resumeStatisticsBll.GetAll(pageSize, pageIndex); model.Total = total; model.Batch = batch; model.Pages = PageHelper.GetPageList(pageIndex, pageSize, total, "/Resume/ResumeStatistics?pageIndex={0}&batch=" + batch); return View(model); } }
3.遇到的问题以及解决方案
@1.取不到对应id的复选框且无法做对应的操作=》原因是vs自动识别错误影响判断以及引用的js脚本限制了属性
解决:(vs智能提示就不说了,并不知道那里为什么会提示异常,然而代码仍然能运行,这就有点误人子弟了),找到了引用的脚本,进去一看果然,checked属性被限制为只能选一个框,禁了那段代码后就可以多选了,而且没了vs那个因素影响该有的都能出来
@2.条件查询和分页在地址栏上产生冲突=》原因是两个都是通过地址栏带入参数实现各自的效果(eg: window.location = "/Resume/ResumeStatistics?batch=" + $("#batch").val();)&(由于是半路出家,模本并非同属一人)
解决:当时想的有个两个方案,@1.其中一个改别的方法实现(就是说只有一个用地址栏跳转)@2.改分页地址栏配置、设置一些其他属性之类(处理下拉框)。这里不得不说的是由于别人做的分页和自己想象的不太一样,最初看起来是不太好改的,更倾向于自己用别的方式实现查询,但是并没有更好的点子(这里借用其他模块的查询实现,一行代码解决问题),于是目光有转向了分页。不得不说,感觉归感觉,还是看透了别人是怎么实现分页的,用了一些Html辅助方法(对于没怎么这个做的我来说是有点不习惯的),找到了源和本质,然后就改了改,多带了一个参数,然后就那么出来了。不知是幸运还是自己有点底子,还是,这并不难。
@2.分页效果出bug了=》原因在于我做查询是会替换原始数据的,分页基于查询自然会有关联,但是一开始并没有意识到这个问题
解决:选择批次点击第二页的时候数据是空的,显然,这里做了一个假分页。经检测,是因为在地址栏进行传值的时候在某个else里面多带了batch(事实上else里面是不用带的,因为值是""空字符串是不存在这种条件下的数据的)
@3.页面js因为注释掉了公共的代码块(不得不说这个几乎是致命的,对其他引用到该js的代码会产生很大的影响)=》原因就是自己想得太简单总是以为以为吧!
解决:不引用产生冲突的js脚本文件,只引用带有样式的脚本,并且引用的方式是调用函数传参数进去。eg:SetTrColor("userListTable");//加载表格样式
@4.在添加了显示全部的按钮以后,全选就得全选所有批次的总信息“量”,(这里在数据访问层是没有做判断的)=》这个问题改了
说点别的,不是什么特别大的问题,但是影响用户体验,添加显示全部信息也是指导我的人和我讲的(说实话真没意识到这个,程序员还是得考虑到用户的体验,不能只是老写代码,需求一定得弄明白或者想透彻。诚然,有个“师傅”可以带着这种体验是很好的,虽然免不了责骂。但是自己努力去做就好了,经验就是这样积累起来的,只是这段时间可能就辛苦他了==)
PS:整个功能做了两天时间,第一天了解了一些基本的信息,主要是熟悉这个模块,为第二天熟练地修改代码做了一些基本的准备吧!当然也写了一些代码,按照我的速度和进度,就是做了一个下拉框加载和查询,基本的SQL写出来了,接口写了一半,也留下了一些bug(技术问题,不是偷懒,所以回去好好想了的,今天就做得比较顺畅,很多小细节昨天一时出不来今天一下子就出来了,很快,所以有的时候走在路上或者睡觉的时候想一想白天做的东西还是很有效果的,不管出来还是没有出来)。统而言之,做这些东西虽然做得不怎么好考虑不怎么全面,以至于被批评,但觉得收获还是很大的!相比每天投简历或者改一些前端的代码,我想后台还是更适合我的,哪怕我现在所做的东西很简单在他人眼里可能不值一提,但我还是想说说。我所强项也不是我在学校学了很多东西,我觉得更多的是一步一个脚印吧!多敲多思考,成为高手只剩时间。成长的路上少不了质疑和嘲笑,习惯就好了。