zoukankan      html  css  js  c++  java
  • ThinkPHP中 按条件查询后列表显示

    最近在项目中遇到了需要根据下拉框的条件筛选出符合条件的数据,然后进行列表显示的问题。

    在ThinkPHP中进行列表显示的传统过程:通过在后台控制器中查询出数据,然后通过$this->assign()来实现控制器数据向页面的传递,在页面中通过<foreach>或<volist>标签来进行数据的解析,(注:在通过标签进行数据的解析时需要以“$”符号的形式)。

    在进行条件查询时,需要通过jquery中ajax的方式将条件GET到后台控制器,后台控制器中接收数据,然后根据条件进行查询,将查询结果返回。

    在项目实际操作时遇到了这样的两个问题,(1)当在将数据传递到后台控制器,后台控制器通过查询条件获取查询结果后,只能通过$this->ajaxReturn(查询结果)的方式将数据返回到前台页面的回调函数(在网上看到一个大神说还有一个display的方法显示,一直苦寻未果,若有大神知道,一定记得给说一声,感激不尽!)。而在前台进行解析时是以json的数据格式进行解析,所以无法通过ThinkPHP的模板解析获得数据进行显示(即无法通过"$"符号的方式进行解析显示,"$"符号是javascript中的关键字)。(2)在开始时分页是使用的ThinkPHP中已经封装的分页方法,其在进行分页时是实例化的一个分页对象,然后将分页对象中的分页列表传递到页面进行解析,从而实现页面数据分页。但是在通过ajax请求获取的数据只能返回到回调函数,也无法通过ThinkPHP的解析获取分页列表,从来导致分页无法使用。所以,总的来说,无法通过ThinkPHP解析json数据进行显示。

    在网上苦苦寻觅,没有找到什么好办法,所以只好自己硬着头皮写了。因为ThinkPHP无法解析,所以只好通过javascript的方式,将数据解析显示。

     1 for(var i=0;i<ss.length;i++)
     2                     {
     3                         var infoList=$("<div id='divUserTable' class='divMenuItemTableClass'>"+"<input type='hidden' name='hiddenInfoId' class='hiddenClass' id='hiddenInfoId_"+i+"'"+"value="+"'"+ss[i]["userid"]+"'"+"/>"
     4                                 +"<div id='divUserTableSelect' class='fontNoneWeight'><input type='checkbox' class='inputCheckbox' id='checkboxUserSelect_"+i+"'"+"/></div>"
     5                                 +"<div id='divUserTableTitle' class='fontNoneWeight'>"+ss[i]["user_name"]+"</div>"
     6                                 +"<div id='divUserTableNum' class='fontNoneWeight'>"+ss[i]["studentorteacherid"]+"</div>"
     7                                 +"<div id='divUserTablePwd' class='fontNoneWeight'>"+ss[i]["password"]+"</div>"
     8                                 +"<div id='divUserTableWorkShop' class='fontNoneWeight'>"+ss[i]["workshop_name"]+"</div>"
     9                                 +"<div id='divUserTableOpreation'><div id='divUserTableOpreationUpdate'><a id='aWorkShopTableOperationUpdate' target='right' href='__APP__/Admin/WorkShop/ShowUpdateWorkShopUser/user_id/"+ss[i]["userid"]+"'"+">修改</a></div></div>"
    10                                 +"</div>");                        
    11                         $("#divUserInfoList").append(infoList);
    12                     }   

    通过将获取的数据进行解析,然后进行字符串的拼接,最后将拼接的字符串显示到列表中,从而实现以无刷新的方式进行按条件查询后显示到页面,至此终于将第一个问题解决了!(说句实话,字符串拼接真的很恶心人!众位仁兄,若有好方法,请务必告知!)。

    唉,由于分页无法解析,内心苦苦挣扎,经过激烈的思想斗争,终于狠下心来重新写一个分页吧。所以学习了一下EasyUI的pagination分页,确实功能强大,非常实用。

    先插入一点题外话,说一下EasyUI的pagination分页的使用。在使用pagination分页时首先需要引入EasyUI的文件包,引入后需在页面引入jquery.easyui.min.js、themes/default/easyui.css、themes/icon.css这三个文件。这样页面才可以使用分页。分页的使用有两种加载方式,(1)class加载方式(2)js加载方式

    class加载:

    <div id="box" class="easyui-pagination"
    data-options="total:2000,pageSize:10"
    style="background:#efefef;border:1px solid #ccc;">
    </div>

    通过在div中添加class="easyui-pagination"就可以将分页加载进来,data-options="total:2000,pageSize:10,"是对分页列表中数据或操作的设置。

    js加载:

    $(function () {
    
        $('#box').pagination({
            total : 5,
            pageSize : 1,
            pageNumber : 1,
            pageList : [1,2],
            //loading : true,
            buttons : [{
                iconCls : 'icon-add',
            },'-',{
                iconCls : 'icon-edit',
            }],
            //layout : ['first','prev','links','next','last'],
            //showPageList : false,
            //showRefresh : false,
            //beforePageText : '弟弟',
            //afterPageText : '有{pages}个',
            displayMsg : '从{from}到{to},有{total}人',
            onSelectPage : function (pageNumber, pageSize) {
                $('#box').pagination('loading');
                $('#content').panel('refresh', 'user.php?page='+pageNumber+'&pagesize='+pageSize);
                setTimeout(function () {
                    $('#box').pagination('loaded');
                }, 1000);
                
                
            },
            onBeforeRefresh : function (pageNumber, pageSize) {
                alert('刷新之前');
            },
            onRefresh : function (pageNumber, pageSize) {
                alert('刷新之后');
            },
            onChangePageSize : function (pageSize) {
                alert('每页显示的条数被改变!');
            } 
        });
        
        $(document).click(function () {
            /*
            $('#box').pagination('refresh', {
                pageSize : 2,
                pageNumber : 2,
            });
            */
            $('#box').pagination('select', 2);
        });
    
    });

    通过在js文件中$("#id").pagination({});的方式将对应id的div设置成分页列表。说到这里,就无可避免的需要说一下pagination的属性列表:

    其中,主要用的有total:数据的总条数,pageNumber:当前显示的页码数,pageSize:每页显示的数量,pageList:可让用户自己手动改变的每页显示的数量。有了这些足以做数据的分页了。

    回归正题:现在需要将所需条件进行提交,然后获取数据,同时进行分页。话不多说,上代码。

     1 $.ajax({
     2                     type:"GET",
     3                     url:"__URL__/GetCountByClassify",
     4                     data:{con:condition},
     5                     dataType:"json",
     6                     success:function(ss){   
     7                         var sum=ss[0]["count(*)"];
     8                         $("#divUserListPaging").pagination({
     9                             total:sum,
    10                             pageSize:10,
    11                             showPageList:false,
    12                             beforePageText:"第",
    13                             afterPageText:"共{pages}页",
    14                             pageNumber:pageNum,
    15                             onSelectPage: function ( pageNumber, pageSize) {
    16                                 $(this).pagination('loading');
    17                                 newData(pageNumber,pageSize);
    18                                 $(this).pagination('loaded'); 
    19                                 makePage(pageNumber);
    20                             }
    21                         });                                               
    22                     }
    23                 });

    根据路径将条件传递到控制器的方法中,通过条件查询获取查询结果,然后获取查询结果的总数量,回调分页函数,根据当前的显示页码和显示数量,进行数据分页。(解决第二个问题,用EasyUI解决了分页的问题)。

    苦思了几天,终于将这个问题解决,不知道这是不是最好的解决办法,若各位大神有更好地方法,烦请告知!感激不尽啊!

  • 相关阅读:
    SpringBoot2.x前后端分离跨域问题及Swagger不能访问
    SpirngBoot2.x整合Swagger2接口文档
    SpringBoot2.x整合Druid数据源
    SpringBoot2.x整合logback 实现自动打印日志
    docker 进入 mysql中的操作
    Intellij Springboot (子模块)访问jsp页面404
    运行rabbitmq 的docker
    mybatis拦截器修改sql重新set后不生效?
    oracle+mybatis如何在新增时返回主键(自增序列)的值?
    oracle+mybatis报“未找到要求的from关键字”错误?
  • 原文地址:https://www.cnblogs.com/WuNaiHuaLuo/p/4477696.html
Copyright © 2011-2022 走看看