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

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

时间: 2024-10-09 02:35:31

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

php后台管理(列表页替换)

列表页替换,首先把文件名前边加个前缀list,代表列表页: 我们以list_news为例进行替换,先看一下替换前的页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

Atitit.列表页and查询条件的最佳实践(1)------设定搜索条件and提交查询and返回json数据

Atitit.列表页and查询条件的最佳实践(1)------设置查询条件and提交查询and返回json数据 1. 1.?配置条件字段@Conditional 1 1 2. 2.?配置条件字段显示类型为[email protected](displayType?=?displayType.rang,?rangStart?=?rang.start,?rangEnd?=?rang.end,op=op.range) 1 3. #----show  condition  page  list 1 4.

PHP.26-TP框架商城应用实例-后台2-商品列表页-搜索、翻页、排序

商品列表页 1.翻页 控制器GoodsController.class.php添加方法lst(),显示列表页 在商品模型GoodsModel.class.php类中添加search方法 /** *实现翻页.搜索.排序 * */ public function search($perPage = 5) //$perPage控制显示条数 { /***********翻页***********/ //取出总的记录数 $count = $this->count(); //生成翻页类的对象 $pageOb

分组管理不用愁 ECS新增Tag 功能

随着不断发展的ECS产品以及日益成熟市场环境,越来越多的用户使用着阿里云的ECS产品.随着用户自身业务的不断增加,需要保有的 ECS 资源数量越来越多,这就导致了这些用户在管理这些资源上出现了不便和困难. 针对资源管理问题,许多用户往往通过对同一类资源以相同的资源名称命名来做到分组的管理.这样虽然达到了分组的功能,但却失去了资源名称本身标识资源身份的作用. 综上所述,用户迫切需要一个专为资源分组的产品功能,在这样的背景下,资源标签系统(以下简称Tag)应运而生. 专为分组操作而生 Tag功能专为

用于后台管理的列表数据控件:DataGrid和Select

常听人说不喜欢javascript.然而我一个一直用C#做后端的人,最喜欢的编程语言就是javascript了,我接收它的优点,也接收它的缺点! 前段时间接触过easyui,用过里面的DataGrid和Combobox等控件,感觉DataGrid的确减少了一些重复的工作,但是easyui改变原有的Element,比如textbox,不能用$("#id").val()获取值了,只能用$(“#id”).textbox('getValue')来获取,不喜欢这样.国庆放假,票到3号了,今天有时

jQuery制作淘宝商城商品列表多条件查询功能

一.介绍 这几天做网站的时候,突然用到这个功能,找了好久也没有找到.看到"希伟素材网"有这么一个JS,效果很不错,也正是我一直以来想要的结果.附图如下: 二:使用教程      1.HTML代码: <ul class="select"> <li class="select-list"> <dl id="select1"> <dt>上装:</dt> <dd cla

django xadmin 插件(2) 列表视图新增一功能列

以默认的related_link为例(即最后一列). 源码:xadmin.plugins.relate.RelatedMenuPlugin class RelateMenuPlugin(BaseAdminPlugin): use_related_menu = True # ...若干删减 def related_link(self, instance): #... 若干删减 return '<div class="dropdown related_menu pull-right"

dede使用方法----调用列表页的分页功能

分页的标签:<div class="dede_pages"> <ul class="pagelist"> {dede:pagelist listitem="info,index,end,pre,next,pageno,option" listsize=""/} </ul> </div> listsize----表示你输入的数*2+1个页码,如:你写的是3,那么得到3*2+1=7个

[PHP] - Laravel - 列表、新增、修改、删除例子

前言 Laravel默认是自带了CURD的功能,使用路由的Route::resource可以做到. 但真正的项目中,这往往不是我们所需要的.因为一个项目会有比较复杂的计算.验证等功能. 下面是对项目中的列表.新增.修改.删除写了一个简单的view层的模型例子 一.路由配置 在app\Http\routes.php加入如下: Route::group(["prefix" => "my2"], function() { Route::controller(&quo