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(技术问题,不是偷懒,所以回去好好想了的,今天就做得比较顺畅,很多小细节昨天一时出不来今天一下子就出来了,很快,所以有的时候走在路上或者睡觉的时候想一想白天做的东西还是很有效果的,不管出来还是没有出来)。统而言之,做这些东西虽然做得不怎么好考虑不怎么全面,以至于被批评,但觉得收获还是很大的!相比每天投简历或者改一些前端的代码,我想后台还是更适合我的,哪怕我现在所做的东西很简单在他人眼里可能不值一提,但我还是想说说。我所强项也不是我在学校学了很多东西,我觉得更多的是一步一个脚印吧!多敲多思考,成为高手只剩时间。成长的路上少不了质疑和嘲笑,习惯就好了。

后台管理,给列表页新增查询功能,所遇到的问题及感想相关推荐

  1. vivaldi浏览器的页内查询功能

    浏览器是电脑上被使用得最多的软件,一款好的浏览器可以提高工作效率,减少差错的发生. Vivaldi是一款非常好用的浏览器,在知乎上有篇介绍,很不错.另外一篇分享"vivaldi浏览器_Viv ...

  2. vue考试系统后台管理项目-登录、记住密码功能

    考试系统后台管理项目介绍: 技术选型:Vue2.0+Elemenu-ui 项目功能介绍: 账户信息模块:菜单权限.角色权限设置.角色权限分配.账号设置.公司分组 考试管理模块:新增/编辑/删除考试试题 ...

  3. PHP实现列表页综合筛选功能,dede织梦列表页联动筛选方法功能的实现

    [DEDECMS.织梦开源程序已经成为市场上主流仿站开源代码,它能够非常快速的放置一个已经建立好的网站,但是前提是这些网站比较简单,没有一些复杂的功能,那么使用DEDECMS仿站是最快速,最有效的.而 ...

  4. 「后台列表页设计原则和技巧」

    摘要: 本文详述了管理后台列表页的设计原则和技巧,对于新手有很大的学习价值. 无论是什么类型的产品,几乎都会出现「列表页」,前台部分的列表页设计技巧已经有很多的介绍了,下面我以「电商系统」为例,谈谈业 ...

  5. 织梦DedeCMS列表页多条件联动筛选功能(移动端列表页使用电脑端模板问题解决)

    原文:http://www.dedejs.com/html/article-571-1.html点击打开链接 备注:按此文可以解决,但手机列表页会出问题.列表页移动端调用的还是电脑端模板. 此问题本人 ...

  6. C#学生管理系统——班级列表(查询功能)

    C#学生管理系统--班级管理的班级列表(查询功能) 上次的年级列表做好了,今天就来做班级管理中的班级列表,与年级列表不同的是,班级列表增加了查询功能,如下图: 界面布局部分: 简单写下,查询这个浅色的 ...

  7. Android 10.0 Launcher3 单层app列表页排序功能实现

    1.概述 在定制化开发中,对于Launcher3的功能定制也是好多的,而对于单层app列表页来说排序功能的开发,也是常有的功能这就需要了解加载app数据的流程,然后根据需要进行排序就可以了, 如图: ...

  8. Java项目:前台预定+后台管理酒店管理系统(java+SSM+jsp+mysql+maven)

    源码获取:博客首页 "资源" 里下载! 一.项目简述 功能介绍: 前台用户端:用户注册登录,房间展示,房间分类,房间 按价格区间查询,房间评论,房间预订等等 后台管理端:用户信息查 ...

  9. cmdb python 采集虚拟机_Python编程(三十四):CMDB后台管理、封装自定义JS组件、前端td标签定制显示内容及属性...

    一. CMDB后台管理 CMDB管理主要分为采集资产.API接口.后台管理.这里主要介绍CMDB后台管理. - 采集资产 - API - 后台管理- 资产列表- 业务线列表- 用户列表- 组列表... ...

最新文章

  1. 【数据竞赛】ICCV 2021 竞赛汇总
  2. 从零开始拼凑的_如何从零开始拼凑AI
  3. matlab图像分类器,Matlab 基于svm的图像物体分类
  4. cv2.imread读取图像结果none_PyTorch 42.图像操作
  5. python的前端开发_python开发 - 包子博客 _ 关注互联网前端、开发、SEO、移动互联网应用技术...
  6. 如何把pdf转成jpg格式?
  7. 负指数分布的性质_负指数分布.ppt
  8. 解决IOS微信SDK初始化失败
  9. mysql 一周签到表_最实用的考勤签到表(上下班签到表);
  10. Linux 文本处理工具——sed
  11. web开发中移动端适配
  12. python 滚动字幕_python – 在PyQt中滚动文本?
  13. SpringClout 入门笔记
  14. (三)《数字电子技术基础》——码制
  15. 【青春记忆】叹!雪……
  16. FBTFT driver St7789v LCD 移植简介
  17. 生态保护重要性评价之生态脆弱性评价
  18. mac(5) : 使用终端解压rar文件
  19. c语言怎样把除法转为乘法,怎样代替除法指令
  20. Diffusion Model原理详解及源码解析

热门文章

  1. android id 会变化,android – 每次应用程序启动时资源ID都会更改
  2. 最适合听歌的蓝牙耳机推荐,听歌比较好的蓝牙耳机分享
  3. C语言extern关键字的作用
  4. extern变量c语言,C语言外部变量extern
  5. 回合制游戏-------------------------------------------建模(工厂模式)
  6. 微信小程序学习(一)心理测试题库改造
  7. glided_sky 镀金的天空 爬虫闯关1-2 4-5 解题思路加代码
  8. 通信原理学习笔记2-3:复信号分析(解析信号与预包络)、IQ调制与复信号的传输
  9. 使用WCDB中踩过的坑
  10. 无线充电怎么测试软件,【三星GALAXYNoteII评测】S3能用Note2可以吗?-中关村在线...