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解决了分页的问题)。

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

原文地址:https://www.cnblogs.com/WuNaiHuaLuo/p/4477696.html